@extends('layout.app')
@section('title')
    {{ __('All Users') }}
@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-->
    <style>
        .user-list-table td,
        .user-list-table th {
            white-space: nowrap;
            overflow: hidden;
            /* text-overflow: ellipsis; */
        }

        .user-list-table th {
            max-width: 150px;
        }

        .user-list-table td {
            max-width: 200px;
        }
    </style>
@stop

@section('content')

    <div class="content-wrapper">
        <div class="content-body">
            <!-- users list start -->
            <section class="app-user-list">
                <!-- users filter start -->
                <div class="card">
                    <div class="card-header mb-2">
                        <h4 class="card-title">{{ __('All Users') }}</h4>
                    </div>
                    <h5 class="card-header">تصفية البيانات</h5>
                    <div class="d-flex justify-content-start align-items-center mx-50 row pt-0 pb-2">
                        <div class="col-md-3">
                            <select name="type" id="type_filter" class="form-control">
                                <option value="">{{ __('اختار النوع المستخدم') }}</option>
                                <option value="0">{{ __('معلم في المدرسة') }}</option>
                                <option value="1">{{ __('مشرف تربوي او مدرب من خارج المدرسة') }}</option>
                            </select>
                        </div>
                        @if (Auth::user()->user_name == 'admin')
                            <div class="col-md-3">
                                <select name="school_id" id="school_filter" class="form-control">
                                    <option value="">{{ __('اختار المدرسة') }}</option>
                                    @foreach (App\Models\School::all() as $school)
                                        <option value="{{ $school->id }}">{{ $school->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

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

                        <table class="user-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>{{ __('Name') }}</th>
                                    <th>{{ __('المسمى الوظيفي') }}</th>
                                    <th>{{ __('عدد ايام الغياب') }}</th>
                                    <th>{{ __('التسجيل في فارس') }}</th>
                                    <th>{{ __('عدد ساعات التأخير') }}</th>
                                    <th>{{ __('الحسم في فارس') }}</th>
                                    @if (Auth::user()->user_name != 'admin')
                                        <th>{{ __('المدرسة') }}</th>
                                    @else
                                        <th>{{ __('الإدارة') }}</th>
                                    @endif
                                    <th>{{ __('Action') }}</th>
                                </tr>
                            </thead>

                        </table>
                    </div>

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

        <!-- مودال حذف متعدد -->
        <div class="modal fade" id="modals-delete-bulk">
            <div class="modal-dialog">
                <form method="post" action="{{ route('users.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-bulk">
            <div class="modal-dialog">
                <form id="send-message-form" method="post" action="{{ route('users.bulk-send-message') }}"
                    class="modal-content">
                    @csrf
                    <input type="hidden" name="record_ids" id="record-ids-send-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" class="form-control" rows="4" 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 class="modal fade" id="modals-import-bulk" tabindex="-1" role="dialog"
            aria-labelledby="modals-import-bulk-label" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form action="{{ route('users.import') }}" method="POST" enctype="multipart/form-data"
                    class="modal-content">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="modals-import-bulk-label">استيراد المستخدمين من ملف Excel</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="إغلاق">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="import_file">اختر ملف Excel</label>
                            <input type="file" name="import_file" id="import_file" class="form-control"
                                accept=".xlsx,.xls" required>
                            <small class="form-text text-muted">يجب أن يكون الملف بصيغة .xlsx أو .xls ويتضمن الأعمدة
                                المطلوبة.</small>
                        </div>
                        <!-- يمكنك إضافة نموذج مثال أو رابط لتنزيل قالب Excel هنا -->
                        <div class="form-group">
                            <a href="{{ route('users.export-template') }}" class="btn btn-link">تحميل قالب الاستيراد</a>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">استيراد</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                    </div>
                </form>
            </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-->
    <script>
        const createUrl = '{{ route('users.create') }}';
        const indexUrl = '{{ route('users.index') }}';

        function initializeDataTable(type_filter, school_filter) {
            $('.user-list-table').DataTable().destroy();
            $('.user-list-table').DataTable({
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: indexUrl,
                    data: {
                        type: type_filter,
                        school_id: school_filter
                    }
                },
                columns: [{
                        data: 'record_select',
                        orderable: false
                    },
                    {
                        data: 'name',
                        orderable: false,
                        render: function(data, type, row) {
                            return `<a href="${row.show_url}">${data}</a>`;
                        }
                    },
                    {
                        data: 'job_title',
                        orderable: false
                    },
                    {
                        data: 'absence',
                        orderable: false
                    },
                    {
                        data: 'registration',
                        orderable: false
                    },
                    {
                        data: 'delay_time_string',
                        orderable: false
                    },
                    {
                        data: 'un_registration',
                        orderable: false
                    },
                    {
                        data: 'school', // العمود الجديد
                        orderable: false
                    },
                    {
                        data: 'actions',
                        orderable: false
                    }
                ],
                order: [1, 'desc'],
                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: {
                        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: [1, 2, 3, 4, 5, 6, 7]
                                }
                            },
                            {
                                extend: 'excel',
                                text: feather.icons['file'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'تصدير Excel',
                                className: 'dropdown-item',
                                exportOptions: {
                                    columns: [1, 2, 3, 4, 5, 6, 7]
                                }
                            },
                            {
                                extend: 'pdf',
                                text: feather.icons['clipboard'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'Pdf',
                                className: 'dropdown-item',
                                exportOptions: {
                                    columns: [1, 2, 3, 4, 5, 6, 7]
                                }
                            }
                        ],
                        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-warning btn-sm mt-50 ml-2',
                        attr: {
                            "id": "bulk-import",
                            'data-toggle': 'modal',
                            'data-target': '#modals-import-bulk',
                        },
                        init: function(api, node, config) {
                            $(node).removeClass('btn-secondary');
                        }
                    },
                    {
                        text: 'اضافة جديد',
                        className: 'add-new btn btn-primary btn-sm mt-50 ml-2',
                        onclick: "",
                        attr: {
                            "type": "button",
                            "onclick": "location.href = '" + createUrl + "'",
                        },
                        init: function(api, node, config) {
                            $(node).removeClass('btn-secondary');
                        }
                    },
                    {
                        text: 'حذف المحدد',
                        className: 'add-new btn btn-danger btn-sm mt-50 ml-2',
                        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 btn-sm mt-50 ml-2',
                        attr: {
                            "id": "bulk-send-message",
                            'data-toggle': 'modal',
                            'data-target': '#modals-send-message-bulk',
                            'disabled': 'true'
                        },
                        init: function(api, node, config) {
                            $(node).removeClass('btn-secondary');
                        }
                    }
                ]
            });
        }

        $(document).ready(function() {
            $('#type_filter, #school_filter').change(function() {
                var type_filter = $('#type_filter').val();
                var school_filter = $('#school_filter').val();
                initializeDataTable(type_filter, school_filter);
            });

            initializeDataTable($('#type_filter').val(), $('#school_filter').val());

            $('#record__select-all').on('change', function() {
                var rows = $('.user-list-table').DataTable().rows({
                    'search': 'applied'
                }).nodes();
                $('input[type="checkbox"]', rows).prop('checked', this.checked);
                toggleBulkActionButtons();
            });

            $('.user-list-table tbody').on('change', 'input[type="checkbox"]', function() {
                if (!this.checked) {
                    var el = $('#record__select-all').get(0);
                    if (el && el.checked && ('indeterminate' in el)) {
                        el.indeterminate = true;
                    }
                }
                toggleBulkActionButtons();
            });

            function toggleBulkActionButtons() {
                const selectedCount = $('.user-list-table tbody input[type="checkbox"]:checked').length;
                $('#bulk-delete').prop('disabled', selectedCount === 0);
                $('#bulk-send-message').prop('disabled', selectedCount === 0);
                $('#record-ids').val(JSON.stringify(getSelectedIds()));
                $('#record-ids-send-message').val(JSON.stringify(getSelectedIds()));
            }

            function getSelectedIds() {
                return $('.user-list-table tbody input[type="checkbox"]:checked').map(function() {
                    return this.value;
                }).get();
            }
        });
    </script>
@stop