@extends('layout.app')
@section('title')
    {{ __('الغياب والتأخيرات') }}
@stop
@section('css')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/vendors-rtl.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/buttons.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/rowGroup.bootstrap4.min.css') }}">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css-rtl/core/menu/menu-types/vertical-menu.css') }}">
    <!-- END: Page CSS-->
    <link href="{{ asset('app-assets/hijri-date/css/bootstrap-datetimepicker.min.css') }}?1789570076"
        rel="stylesheet" />


@stop

@section('content')

    <div class="content-wrapper">
        <div class="content-body">
            <!-- meals list start -->
            <section class="app-meals-list">
                <!-- users filter start -->
                <div class="card">
                    <div class="card-header mb-2">
                        <h4 class="card-title">{{ __('الغياب والتأخيرات') }}</h4>
                    </div>
                    <h5 class="card-header">تصفية البيانات</h5>

                    <div class="d-flex justify-content-between align-items-center mx-50 row pt-0 pb-2">

                        <div class="col-md-3">
                            <label class="form-label">{{ __('من تاريخ') }}</label>
                            <input type="text" name="from_date" id="from_date" class="form-control hijri-picker" />
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ __('الى تاريخ') }}</label>
                            <input type="text" name="to_date" id="to_date" class="form-control hijri-picker" />
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ __('النوع') }}</label>
                            <select name="type" id="type_filter" class="form-control">
                                <option value="">{{ __('اختار النوع') }}</option>
                                <option value="0">{{ __('تأخير') }}</option>
                                <option value="1">{{ __('غياب') }}</option>
                            </select>
                        </div>
                        <div class="col-md-3 pt-2">
                            <button type="button" name="filter" id="filter" class="btn btn-primary">بحث</button>
                        </div>

                    </div>
                </div>
                <!-- users filter end -->
                <!-- list section start -->
                <div class="card">
                    <div class="card-datatable table-responsive pt-0">

                        <table class="delays-list-table table">
                            <thead class="thead-light">
                                <tr>
                                    <th>
                                        <div class="animated-checkbox">
                                            <label class="m-0">
                                                <input type="checkbox" id="record__select-all">
                                                <span class="label-text"></span>
                                            </label>
                                        </div>
                                    </th>
                                    <th>{{ __('المستخدم') }}</th>
                                    <th>{{ __('النوع') }}</th>
                                    <th>{{ __('التاريخ') }}</th>
                                    <th>{{ __('Action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

                </div>
                <!-- list section end -->
            </section>


            <div class="modal fade" id="modals-create">
                <div class="modal-dialog">
                    <form class="create-new-nature modal-content pt-0" action="{{ route('delays.store') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-header mb-1">
                            <h5 class="modal-title" id="exampleModalLabel">اضافة جديد</h5>
                        </div>
                        <div class="modal-body flex-grow-1">
                            <div class="form-group">
                                <label for="question">{{ __('المستخدم') }}</label>
                                <select class="select2 form-control" id="user_id" aria-describedby="user_id"
                                    name="user_id">
                                    @forelse (App\Models\User::get() as $item)
                                        <option value="{{ $item->id }}"
                                            @if (old('user_id') == $item->id) selected @endif>
                                            {{ $item->name }}</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="username">{{ __('الحالة') }}</label>
                                <select class="custom-select" name="type" id="type_0">
                                    <option @if (old('delay_type') == '0') selected @endif value="0">تأخير</option>
                                    <option @if (old('delay_type') == '1') selected @endif value="1">غياب</option>
                                    <option @if (old('delay_type') == '2') selected @endif value="2">غياب ايام
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="date">{{ __('التاريخ') }}</label>
                                <input type="text" name="date" value="{{ old('date') }}"
                                    class="form-control  hijri-picker" id="date">
                            </div>
                            <div id="absence_type_2" style="display: none;">
                                <div class="form-group">
                                    <label for="date">{{ __('الى تاريخ') }}</label>
                                    <input type="text" name="date_to" value="{{ old('date_to') }}"
                                        class="form-control  hijri-picker" id="date_to">
                                </div>
                            </div>
                            <div id="absence_type_0" style="display: none;">

                                <div class="form-group">
                                    <label for="absence_type">{{ __('نوع الغياب') }}</label>
                                    <select name="absence_type" class="form-control" id="absence_type">
                                        <option @if (old('absence_type') == '0') selected @endif value="0">بعذر
                                        </option>
                                        <option @if (old('absence_type') == '1') selected @endif value="1">بدون عذر
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="note">{{ __('ملاحظة') }}</label>
                                    <textarea class="form-control" name="note" id="note" rows="3">{{ old('note') }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="program_type">{{ __('التسجيل في برنامج فارس') }}</label>
                                    <select name="program_type" class="form-control" id="program_type">
                                        <option @if (old('program_type') == 2) selected @endif value="2">لم يتم
                                            التسجيل</option>
                                        <option @if (old('program_type') == 1) selected @endif value="1">تم التسجيل
                                            والاعتماد</option>
                                        <option @if (old('program_type') == 0) selected @endif value="0">تم رفع
                                            الحسم</option>
                                    </select>
                                </div>
                            </div>
                            <div id="status_0" style="display: none;">
                                <div class="form-group">
                                    <label for="attendees_time">{{ __('وقت الحضور') }}</label>
                                    <input type="time" name="attendees_time" class="form-control"
                                        id="attendees_time">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary mr-1 data-submit">حفظ</button>
                            <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">الغاء
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal fade" id="modals-delete-bulk">
                <div class="modal-dialog">
                    <form method="post" action="{{ route('delays.bulk-delete') }}" class="modal-content"
                        style="display: inline-block;">
                        @csrf
                        @method('delete')
                        <input type="hidden" name="record_ids" id="record-ids" value="[]">

                        <div class="modal-header mb-1">
                            <h5 class="modal-title" id="exampleModalLabel">حذف المحدد</h5>
                        </div>
                        <div class="modal-body flex-grow-1">
                            <h4>هل تريد حذف المحددة؟</h4>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-danger mr-1 data-submit">حذف المحدد</button>
                            <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">الغاء
                            </button>
                        </div>
                    </form><!-- end of form -->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        var type_0 = document.getElementById("type_0");

        function ff() {
            if (type_0.value == 0) {
                document.getElementById("absence_type_2").style.display = "none";
                document.getElementById("status_0").style.display = "block";
                document.getElementById("absence_type_0").style.display = "none";
            } else {
                if (type_0.value == 2) {
                    document.getElementById("status_0").style.display = "none";
                    document.getElementById("absence_type_0").style.display = "block";
                    document.getElementById("absence_type_2").style.display = "block";

                } else {
                    document.getElementById("absence_type_2").style.display = "none";
                    document.getElementById("status_0").style.display = "none";
                    document.getElementById("absence_type_0").style.display = "block";

                }

            }
        }
        type_0.onchange = function() {
            ff()
        };
        $(window).on("load", function() {
            ff()
        });
    </script>
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/responsive.bootstrap4.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jszip.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js') }}"></script>

    <!-- END: Page Vendor JS-->
    <!-- END: Page Vendor JS-->
    <script>
        const indexUrl = '{{ route('delays.index') }}';
        const filter = '{{ request()->filter }}'
    </script>
    <!-- BEGIN: Page JS-->

    <!-- BEGIN: Page JS-->
    <script src="{{ asset('app-assets/js/emad.js?') . time() }}"></script>
    {{-- <script src="{{asset('app-assets/js/datatables.js')}}"></script> --}}
    <!-- END: Page JS-->

    <script>
        $(document).ready(function() {
            $('#filter').click(function() {
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();
                var type_filter = $('#type_filter').val();

                if ((from_date != '' && to_date != '') || type_filter != '') {
                    $('.delays-list-table').DataTable().destroy();
                    $('.delays-list-table').DataTable({
                        "processing": true,
                        "serverSide": true,
                        ajax: {
                            url: indexUrl,
                            data: {
                                to_date: to_date,
                                from_date: from_date,
                                type_filter: type_filter,
                                filter: filter
                            }
                        }, // JSON file to add data
                        columns: [
                            // columns according to JSON
                            {
                                data: 'record_select',
                                orderable: false
                            },
                            {
                                data: 'user',
                                orderable: false
                            },
                            {
                                data: 'type',
                                orderable: false
                            },
                            {
                                data: 'created_at',
                                orderable: false
                            },
                            {
                                data: 'actions',
                                orderable: false
                            }
                        ],

                        order: [2],
                        dom: '<"d-flex justify-content-between align-items-center header-actions mx-1 row mt-75"' +
                            '<"col-lg-12 col-xl-6" l>' +
                            '<"col-lg-12 col-xl-6 pl-xl-75 pl-0"<"dt-action-buttons text-xl-right text-lg-left text-md-right text-left d-flex align-items-center justify-content-lg-end align-items-center flex-sm-nowrap flex-wrap mr-1"<"mr-1"f>B>>' +
                            '>t' +
                            '<"d-flex justify-content-between mx-2 row mb-1"' +
                            '<"col-sm-12 col-md-6"i>' +
                            '<"col-sm-12 col-md-6"p>' +
                            '>',
                        language: {
                            sLengthMenu: 'Show _MENU_',
                            search: 'بحث',
                            searchPlaceholder: 'بحث..',
                            paginate: {
                                // remove previous & next text from pagination
                                previous: '&nbsp;',
                                next: '&nbsp;'
                            }
                        },
                        // Buttons with Dropdown
                        buttons: [{
                                extend: 'collection',
                                className: 'btn btn-outline-secondary dropdown-toggle mr-2 mt-50',
                                text: feather.icons['share'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'تصدير',
                                buttons: [{
                                        extend: 'print',
                                        text: feather.icons['printer'].toSvg({
                                            class: 'font-small-4 mr-50'
                                        }) + 'طباعة',
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: [1, 2, 3, 4]
                                        }
                                    },
                                    {
                                        extend: 'excel',
                                        text: feather.icons['file'].toSvg({
                                            class: 'font-small-4 mr-50'
                                        }) + 'اكسل',
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: [1, 2, 3, 4]
                                        }
                                    },
                                    {
                                        extend: 'pdf',
                                        text: feather.icons['clipboard'].toSvg({
                                            class: 'font-small-4 mr-50'
                                        }) + 'Pdf',
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: [1, 2, 3, 4]
                                        }
                                    }
                                ],
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                    $(node).parent().removeClass('btn-group');
                                    setTimeout(function() {
                                        $(node).closest('.dt-buttons').removeClass(
                                            'btn-group').addClass(
                                            'd-inline-flex');
                                    }, 50);
                                }
                            },

                            {
                                text: 'اضافة جديد',
                                className: 'add-new btn btn-primary mr-2 mt-50',
                                attr: {
                                    'data-toggle': 'modal',
                                    'data-target': '#modals-create',
                                },
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                }
                            },
                            {
                                text: 'حذف المحدد',
                                className: 'add-new btn btn-danger mt-50',
                                attr: {
                                    "id": "bulk-delete",
                                    'data-toggle': 'modal',
                                    'data-target': '#modals-delete-bulk',
                                    'disabled': 'true'
                                },
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                }

                            }
                        ],

                    });
                } else {
                    alert('الحقلين مطلوبين');
                }
            });

        });
    </script>

@stop