@extends('layouts.app_hr')
@section('title', __('hr.shifts'))

@section('content')

    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{ __('home.home') }}</a>
                </li><li class="breadcrumb-item">
                    <a href="#">{{ __('hr.attendance') }}</a>
                </li>
                <li class="breadcrumb-item active">{{ __('hr.shifts') }}</li>
            </ol>
        </nav>
    </section>

    <section class="content">
        <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
            <div class="card-body">
                <div class="add-new">
                    <a class="btn btn-primary" href="{{route('shifts.create')}}">
                        <i class="ri-add-line"></i>
                        {{ __('messages.add') }}
                    </a>
                </div>
                <div class="table-responsive mt-4">
                    <table class="table" id="shifts_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.shift_name') }}</th>
                            <th>{{ __('hr.weekly_schedule') }}</th>
                            <th>{{ __('hr.shift_hours') }}</th>
                            <th>{{ __('hr.status') }}</th>
                            <th>{{ __('messages.action') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

@stop

@section('javascript')
    <script>
        $(document).ready(function() {
            var table =  $('#shifts_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("shifts.index") }}',
                columns: [
                    { data: 'shift_name', name: 'shift_name' },
                    { data: 'weekly_schedule', name: 'weekly_schedule', orderable: false, searchable: false },
                    { data: 'shift_hours', name: 'shift_hours' },
                    { data: 'is_active', name: 'is_active' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });

            table.buttons().container().appendTo( '.add-new' );

            // حذف شيفت
            $(document).on('click', '.delete_shift_button', function() {
                swal({
                    title: LANG.sure,
                    text: LANG.confirm_delete,
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                }).then(willDelete => {
                    if (willDelete) {
                        var href = $(this).data('href');
                        $.ajax({
                            method: 'DELETE',
                            url: href,
                            dataType: 'json',
                            success: function(result) {
                                if (result.success) {
                                    toastr.success(result.msg);
                                    table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                    table.ajax.reload();
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>
@stop