@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') }}?1789556231"
        rel="stylesheet" />
@stop

@section('content')

    <div class="content-wrapper">
        <section class="app-standards-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="standards-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>{{ __('Action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </section>
    </div>

    <!-- Modal to add new paragraph -->
    <div class="modal fade" id="modals-create">
        <div class="modal-dialog">
            <form class="create-new-standards modal-content pt-0" action="{{ route('paragraphs.store') }}" method="POST">
                @csrf
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">اضافة جديد</h5>
                </div>
                @php
                    $id = 1;
                @endphp
                <div class="modal-body">
                    <div class="form-group">
                        <label for="indicator_id">{{ __('المؤشر') }}</label>
                        <select name="indicator_id" class="form-control" id="indicator_id" required>
                            @foreach (App\Models\Indicator::where('school_id', Auth::user()->school_id)->get() as $indicator)
                                <option value="{{ $indicator->id }}"> {{ $id++ }} - {{ $indicator->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="name">{{ __('الفقرة') }}</label>
                        <textarea name="name" class="form-control" required></textarea>
                    </div>
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_private_international"
                                name="is_private_international" value="1">
                            <label class="custom-control-label"
                                for="is_private_international">{{ __('خاص بالمدارس الأهلية العالمية') }}</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="requirements">{{ __('المتطلبات') }}</label>
                        <div id="requirements-container">
                            <div class="input-group mb-2">
                                <input type="text" name="requirements[]" class="form-control">
                                <div class="input-group-append">
                                    <button class="btn btn-danger remove-requirement" type="button">حذف</button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" id="add-requirement">إضافة متطلب</button>
                    </div>
                    <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                    <input type="hidden" name="status" value="0">
                </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('paragraphs.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>
@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>
    <!-- END: Page Vendor JS-->
    <script>
        const indexUrl = '{{ route('paragraphs.index') }}';
    </script>
    <script src="{{ asset('app-assets/js/emad.js?' . time()) }}"></script>
    <!-- END: Page JS-->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('.standards-list-table').DataTable({
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: indexUrl,
                    type: 'GET'
                },
                columns: [{
                        data: 'record_select',
                        orderable: false
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'indicator_id'
                    },
                    {
                        data: 'user'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        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: {
                        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]
                                }
                            },
                            {
                                extend: 'excel',
                                text: feather.icons['file'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'اكسل',
                                className: 'dropdown-item',
                                exportOptions: {
                                    columns: [1, 2, 3, 4, 5, 6]
                                }
                            },
                            {
                                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]
                                }
                            }
                        ],
                        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');
                        }
                    }
                ],
            });

            document.getElementById('record__select-all').addEventListener('change', function(e) {
                const checkboxes = document.querySelectorAll('.record__select');
                const recordIds = [];
                checkboxes.forEach(checkbox => {
                    checkbox.checked = e.target.checked;
                    if (e.target.checked) {
                        recordIds.push(checkbox.value);
                    }
                });
                document.getElementById('record-ids').value = JSON.stringify(recordIds);
                document.getElementById('bulk-delete').disabled = recordIds.length === 0;
            });

            document.querySelectorAll('.record__select').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const recordIds = [];
                    document.querySelectorAll('.record__select:checked').forEach(checked => {
                        recordIds.push(checked.value);
                    });
                    document.getElementById('record-ids').value = JSON.stringify(recordIds);
                    document.getElementById('bulk-delete').disabled = recordIds.length === 0;
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('add-requirement').addEventListener('click', function() {
                const container = document.getElementById('requirements-container');
                const newRequirement = document.createElement('div');
                newRequirement.classList.add('input-group', 'mb-2');
                newRequirement.innerHTML = `
                <input type="text" name="requirements[]" class="form-control">
                <div class="input-group-append">
                    <button class="btn btn-danger remove-requirement" type="button">حذف</button>
                </div>`;
                container.appendChild(newRequirement);
            });

            document.getElementById('requirements-container').addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-requirement')) {
                    e.target.closest('.input-group').remove();
                }
            });
        });
    </script>
@stop