@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-->
@stop

@section('content')
    <div class="content-wrapper">
        <section class="app-building-facilities-list">
            <div class="card">
                <div class="card-header mb-2">
                    <h4 class="card-title">{{ __('مرافق المبنى المدرسي') }}</h4>
                </div>
                <div class="card-datatable table-responsive pt-0">

                    <table class="building-facilities-list-table table">
                        <thead class="thead-light">
                            <tr>
                                <th>
                                    <input type="checkbox" id="record__select-all">
                                    <span class="label-text"></span>
                                </th>
                                <th>{{ __('اسم المرفق') }}</th>
                                <th>{{ __('العدد') }}</th>
                                <th>{{ __('المستخدم') }}</th>
                                <th>{{ __('تاريخ الإنشاء') }}</th>
                                <th>{{ __('العمليات') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </section>
    </div>

    <!-- Modal to add new facility -->
    <div class="modal fade" id="modals-create">
        <div class="modal-dialog">
            <form class="create-new-facility modal-content pt-0" action="{{ route('building-facilities.store') }}"
                method="POST">
                @csrf
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">إضافة مرفق جديد</h5>
                </div>
                <div class="modal-body">
                    <div id="facilities-pairs-container">
                        <div class="facility-pair input-group mb-2">
                            <input type="text" name="facility_names[]" class="form-control" placeholder="اسم المرفق"
                                required>
                            <input type="number" name="counts[]" class="form-control" placeholder="عدد المرافق"
                                min="0" required>
                            <div class="input-group-append">
                                <button class="btn btn-danger remove-facility-pair" type="button">حذف</button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="add-facility-pair">إضافة مرفق</button>
                </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>

    <!-- Modal to confirm bulk deletion -->
    <div class="modal fade" id="modals-delete-bulk">
        <div class="modal-dialog">
            <form method="post" action="{{ route('building-facilities.bulk-delete') }}" class="modal-content">
                @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>
        </div>
    </div>

    <!-- Dynamic Edit Modal for each facility -->
    @foreach ($facilities as $facility)
        <div class="modal fade" id="modals-edit-{{ $facility->id }}">
            <div class="modal-dialog">
                <form class="edit-facility modal-content pt-0"
                    action="{{ route('building-facilities.update', $facility->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header mb-1">
                        <h5 class="modal-title" id="exampleModalLabel">تعديل المرفق</h5>
                    </div>
                    <div class="modal-body">
                        <div class="facility-pair input-group mb-2">
                            <input type="text" name="facility_name" class="form-control" placeholder="اسم المرفق"
                                value="{{ old('facility_name', $facility->facility_name) }}" required>
                            <input type="number" name="count" class="form-control" placeholder="عدد المرافق"
                                min="0" value="{{ old('count', $facility->count) }}" required>
                            <div class="input-group-append">
                                <button class="btn btn-danger remove-facility-pair" type="button">حذف</button>
                            </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>
    @endforeach
@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/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.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/dataTables.rowGroup.min.js') }}"></script>
    <script src="https://unpkg.com/feather-icons"></script> <!-- مكتبة Feather icons -->
    <!-- END: Page Vendor JS-->

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

    <script>
        $(document).ready(function() {
            // تهيئة DataTable
            let table = $('.building-facilities-list-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('building-facilities.index') }}',
                columns: [{
                        data: 'record_select',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'facility_name'
                    },
                    {
                        data: 'count'
                    },
                    {
                        data: 'user.name',
                        name: 'user.name'
                    },
                    {
                        data: 'created_at',
                        render: function(data) {
                            return new Date(data).toLocaleString('en-EG', {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                second: '2-digit'
                            });
                        }
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [1, 'asc']
                ],
                language: {
                    sLengthMenu: 'عرض _MENU_',
                    search: 'بحث',
                    searchPlaceholder: 'بحث..',
                    paginate: {
                        previous: '&nbsp;',
                        next: '&nbsp;'
                    }
                },
                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>' +
                    '>',
                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: 'طباعة',
                                className: 'dropdown-item'
                            },
                            {
                                extend: 'excel',
                                text: 'اكسل',
                                className: 'dropdown-item'
                            },
                            {
                                extend: 'pdf',
                                text: 'Pdf',
                                className: 'dropdown-item'
                            }
                        ]
                    },
                    {
                        text: 'إضافة جديد',
                        className: 'add-new btn btn-primary mr-2 mt-50',
                        attr: {
                            'data-toggle': 'modal',
                            'data-target': '#modals-create'
                        }
                    },
                    {
                        text: 'حذف المحدد',
                        className: 'add-new btn btn-danger mt-50',
                        attr: {
                            "id": "bulk-delete",
                            'data-toggle': 'modal',
                            'data-target': '#modals-delete-bulk',
                            'disabled': 'true'
                        }
                    }
                ]
            });

            // جمع المعرفات المحددة وتحديث الحقل المخفي
            $('#bulk-delete').on('click', function() {
                let selectedIds = [];
                $('input[name="record_select[]"]:checked').each(function() {
                    selectedIds.push($(this).val());
                });
                $('#record-ids').val(JSON.stringify(selectedIds)); // تحديث الحقل المخفي مع القيم المجمعة
            });

            // تفعيل زر "حذف المحدد" بناءً على حالة التحديد
            function updateBulkDeleteButton() {
                let hasChecked = $('input[name="record_select[]"]:checked').length > 0;
                $('#bulk-delete').prop('disabled', !hasChecked);
            }

            // التأكد من تحديث زر "حذف المحدد" عند تغيير حالة checkbox
            $(document).on('change', 'input[name="record_select[]"], #record__select-all', function() {
                if ($(this).attr('id') === 'record__select-all') {
                    $('input[name="record_select[]"]').prop('checked', $(this).prop('checked'));
                }
                updateBulkDeleteButton();
            });

            // تفعيل الأيقونات بعد تحميل الصفحة
            feather.replace();

            // **بدء التعديلات لإضافة وإزالة الحقول الديناميكية**

            // إضافة حقل مرفق جديد عند الضغط على زر "إضافة مرفق"
            $('#add-facility-pair').on('click', function() {
                let facilityPair = `
                    <div class="facility-pair input-group mb-2">
                        <input type="text" name="facility_names[]" class="form-control" placeholder="اسم المرفق" required>
                        <input type="number" name="counts[]" class="form-control" placeholder="عدد المرافق" min="0" required>
                        <div class="input-group-append">
                            <button class="btn btn-danger remove-facility-pair" type="button">حذف</button>
                        </div>
                    </div>`;
                $('#facilities-pairs-container').append(facilityPair);
            });

            // إزالة الحقل الديناميكي عند الضغط على زر "حذف"
            $(document).on('click', '.remove-facility-pair', function() {
                $(this).closest('.facility-pair').remove();
            });

            // **نهاية التعديلات لإضافة وإزالة الحقول الديناميكية**
        });
    </script>
@stop