@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') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/pickers/flatpickr/flatpickr.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-->
@stop

@section('content')

    <div class="content-wrapper">
        <div class="col-3">
        </div><br>
        <div class="content-body">
            <!-- job-title list start -->
            <section class="app-job-title-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>
                            <select name="type" id="classid" class="form-control">
                                <option value="">{{ __(' ') }}</option>
                                @forelse (App\Models\Classa::where('school_id',Auth::user()->school_id)->get() as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ __('حالة القيد') }}</label>
                            <select name="type" id="status" class="form-control">
                                <option value="">{{ __('') }}</option>
                                <option value="مستجد">{{ __('مستجد') }}</option>
                                <option value="مرفع">{{ __('مرفع') }}</option>
                                <option value="منقول">{{ __('منقول') }}</option>
                                <option value="خريج">{{ __('خريج') }}</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ __('سائق النقل المدرسي') }}</label>
                            <select name="transport_id" id="transport_id" class="form-control">
                                <option value="">{{ __('') }}</option>
                                @foreach (App\Models\Transport::where('school_id', Auth::user()->school_id)->get() as $transport)
                                    <option value="{{ $transport->id }}">{{ $transport->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                        </div>
                    </div>
                </div>
                <!-- users filter end -->
                <!-- list section start -->
                <div class="card">
                    <div class="card-datatable table-responsive pt-0">

                        <table class="students-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>{{ __('السجل') }}</th>
                                    <th>{{ __('عدد ايام الغياب') }}</th>
                                    <th>{{ __('  تاريخ الالتحاق') }}</th>
                                    <th>{{ __('Action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!-- list section end -->
            </section>

            @if ($userName != 'admin')
                <div class="modal fade" id="modals-create">
                    <div class="modal-dialog">
                        <form class="create-new-nature modal-content pt-0" action="{{ route('students.store') }}"
                            method="POST">
                            @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="name">{{ __('اسم الطالب') }}</label>
                                    <input type="text" class="form-control" name="name" id="name" required
                                        maxlength="200">
                                </div>
                                <div class="form-group">
                                    <label for="name">{{ __('السجل') }}</label>
                                    <input type="text" class="form-control" name="log" id="name"
                                        maxlength="100">
                                </div>
                                <div class="form-group">
                                    <label for="name">{{ __('تاريخ ميلاد الطالب') }}</label>
                                    <input type="text" name="date" value="{{ old('date') }}"
                                        class="form-control hijri-picker" id="date">
                                </div>
                                <div class="form-group demo-inline-spacing">
                                    <label for="name">{{ __('حالة القيد') }}</label>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="customRadio1" value="مستجد" name="status"
                                            class="custom-control-input" checked>
                                        <label class="custom-control-label" for="customRadio1">مستجد</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="customRadio2" name="status" value="مرفع"
                                            class="custom-control-input">
                                        <label class="custom-control-label" for="customRadio2">مرفع</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">{{ __('الصف') }}</label>
                                    <select name="classid" id="classid" class="form-control">
                                        <option value="">{{ __('اختر صف') }}</option>
                                        @forelse (App\Models\Classa::where('school_id', Auth::user()->school_id)->get() as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="name">{{ __('اسم ولي امر الطالب') }}</label>
                                    <input type="text" class="form-control" name="pname" id="name"
                                        maxlength="200">
                                </div>
                                <div class="form-group">
                                    <label for="name">{{ __('هاتف ولي امر الطالب') }}</label>
                                    <input type="number" class="form-control" name="pphon" id="name"
                                        maxlength="100">
                                </div>
                                <div class="form-group">
                                    <label for="transport_id">{{ __('النقل المدرسي') }}</label>
                                    <select name="transport_id" id="transport_id" class="form-control">
                                        <option value="">{{ __('اختر السائق') }}</option>
                                        @foreach (App\Models\Transport::where('school_id', Auth::user()->school_id)->get() as $transport)
                                            <option value="{{ $transport->id }}">{{ $transport->name }}</option>
                                        @endforeach
                                    </select>
                                </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>
            @endif

            <div class="modal fade" id="modals-delete-bulk">
                <div class="modal-dialog">
                    <form method="post" action="{{ route('students.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 class="modal fade" id="modals-send-message">
                <div class="modal-dialog">
                    <form method="post" action="{{ route('students.bulkSendMessage') }}" class="modal-content">
                        @csrf
                        <input type="hidden" name="record_ids" id="record-ids-message" value="[]">
                        <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="message">{{ __('الرسالة') }}</label>
                                <textarea name="message" id="message" rows="5" class="form-control" required></textarea>
                            </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>
    </div>
@endsection

@section('js')
    <!-- 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>
    <script src="{{ asset('app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>

    <!-- END: Page Vendor JS-->
    <!-- END: Page Vendor JS-->
    <script>
        const indexUrl = '{{ route('students.index') }}';
        const userType = '{{ $userName }}'; // Pass the user type from the controller
    </script>
    <!-- BEGIN: Page JS-->
    <script src="{{ asset('app-assets/js/emad.js') }}"></script>
    {{-- <script src="{{asset('app-assets/js/datatables.js')}}"></script> --}}
    <!-- END: Page JS-->
    <script>
        $(document).ready(function() {
            function fetchData(classid = '', status = '', transport_id = '') {
                $('.students-list-table').DataTable().destroy();
                $('.students-list-table').DataTable({
                    "processing": true,
                    "serverSide": true,
                    ajax: {
                        url: indexUrl,
                        data: {
                            classid: classid,
                            status: status,
                            transport_id: transport_id
                        }
                    },
                    columns: [{
                            data: 'record_select',
                            orderable: false
                        },
                        {
                            data: 'id',
                            orderable: false
                        },
                        {
                            data: 'name',
                            render: function(data, type, row) {
                                return '<a href="/profile_student/' + row.id + '">' + data + '</a>';
                            },
                            orderable: false
                        },
                        {
                            data: 'class',
                            orderable: false
                        },
                        {
                            data: 'status',
                            orderable: false
                        },
                        {
                            data: 'pphon',
                            orderable: false
                        },
                        {
                            data: 'date',
                            orderable: false
                        },
                        {
                            data: 'actions',
                            orderable: false
                        }
                    ],
                    order: [1],
                    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: [{
                            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: [2, 3, 4, 5, 6]
                                    }
                                },
                                {
                                    extend: 'excel',
                                    text: feather.icons['file'].toSvg({
                                        class: 'font-small-4 mr-50'
                                    }) + 'اكسل',
                                    className: 'dropdown-item',
                                    exportOptions: {
                                        columns: [2, 3, 4, 5, 6]
                                    }
                                }
                            ],
                            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);
                            }
                        },
                        @if ($userName != 'admin')
                            {
                                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');
                                }
                            },
                        @endif {
                            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');
                            }
                        },
                        {
                            text: 'إرسال رسالة',
                            className: 'add-new btn btn-success mt-50 ml-2',
                            attr: {
                                "id": "bulk-send-message",
                                'data-toggle': 'modal',
                                'data-target': '#modals-send-message',
                                'disabled': 'true'
                            },
                            init: function(api, node, config) {
                                $(node).removeClass('btn-secondary');
                            }
                        }
                    ]
                });
            }

            fetchData();

            $('#classid, #status, #transport_id').change(function() {
                var classid = $('#classid').val();
                var status = $('#status').val();
                var transport_id = $('#transport_id').val();

                fetchData(classid, status, transport_id);
            });

            $('#record__select-all').change(function() {
                var check = $(this).is(':checked');
                $('.record__select').prop('checked', check);
                toggleBulkButtons();
            });

            $(document).on('change', '.record__select', function() {
                toggleBulkButtons();
            });

            function toggleBulkButtons() {
                var selectedRecords = $('.record__select:checked').length > 0;
                $('#bulk-delete').attr('disabled', !selectedRecords);
                $('#bulk-send-message').attr('disabled', !selectedRecords);

                var selectedIds = $('.record__select:checked').map(function() {
                    return $(this).val();
                }).get();

                $('#record-ids').val(JSON.stringify(selectedIds));
                $('#record-ids-message').val(JSON.stringify(selectedIds));
            }
        });
    </script>
@stop