@extends('admin.layouts.master')

@section('title') {{__('exam_schedules.exam_schedules')}} @endsection
@section('css')

    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}" />

@endsection
@section('content')


    <div class="container-xxl flex-grow-1 container-p-y">

        <!-- Products List Table -->
        <div class="card">
            <div class="card-header border-bottom">
                <h5 class="card-title mb-3">{{__('exam_schedules.exam_schedules')}}</h5>
            </div>
            <div class="card-datatable table-responsive">
                <table class="datatables-records table">
                    <thead class="border-top">
                    <tr>
                        <th>{{__('general.fields.name')}}</th>

                        <th>{{__('general.actions.control')}}</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <!-- Offcanvas to add new Expense -->
            <div
                    class="offcanvas offcanvas-end"
                    tabindex="-1"
                    id="offcanvasAddRecord"
                    aria-labelledby="offcanvasAddRecordLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasAddRecordLabel" class="offcanvas-title"> {{__('general.actions.add')}} {{__('exam_schedules.exam_schedules')}}</h5>
                    <button
                            type="button"
                            class="btn-close text-reset"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                </div>
                <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100">
                    <form class="add-new-Brand pt-0 form-block" id="addNewRecordForm"  method="POST" action="{{route('admin.exam_schedules.store')}}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label" for="name">{{__('general.fields.name')}}</label>
                            <select name="term_id" required class="form-control">
                                <option value="">Select Term</option>
                                @foreach ($terms as $term)
                                    <option value="{{ $term->id }}">{{ $term->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="school_year_id">{{__('school_years.school_year')}}</label>
                            <select name="level_id" required class="form-control">
                                <option value="">Select Level</option>
                                @foreach ($levels as $level)
                                    <option value="{{ $level->id }}">{{ $level->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="school_year_id">{{__('school_years.school_year')}}</label>
                            <select name="subject_id" required class="form-control">
                                <option value="">Select Subject</option>
                                @foreach ($levels as $level)
                                    @foreach ($level->subjects as $subject)
                                        <option value="{{ $subject->id }}">{{ $subject->name }} ({{ $level->name }})</option>
                                    @endforeach
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3" id="exam-fields">
                            <div class="row mb-2">
                                <h5>Exam 1</h5>
                                <div class="col-12">
                                    <input type="text" name="exams[0][exam_name]" placeholder="Exam Name" class="form-control" required>
                                </div>
                                <div class="col-12">
                                    <input type="number" name="exams[0][coefficient]" step="0.1" placeholder="Coefficient" class="form-control" required>
                                </div>
                                <div class="col-12">
                                    <input type="date" name="exams[0][exam_date]" class="form-control" required>
                                </div>
                            </div>

                        </div>


                        <hr>

                        <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit btn-form-block-spinner">{{__('general.actions.submit')}} </button>
                        <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">{{__('general.actions.cancel')}} </button>
                    </form>
                </div>
            </div>
            <!-- Offcanvas to add new Expense -->
            <div
                    class="offcanvas offcanvas-end"
                    tabindex="-1"
                    id="offcanvasUpdateRecord"
                    aria-labelledby="offcanvasUpdateRecordLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasUpdateRecordLabel" class="offcanvas-title">{{__('general.actions.edit')}} {{__('exam_schedules.exam_schedules')}} </h5>
                    <button
                            type="button"
                            class="btn-close text-reset"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                </div>
                <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100" id="updateRecordDiv">

                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>


    <script>
        var table = $('.datatables-records').DataTable({

            processing: true,
            serverSide: true,

            ajax: "{{ route('admin.exam_schedules') }}",
            columns: [

                { data: 'name', name: 'name' },

                { data: 'action', name: 'action', orderable: false, searchable: false }

            ],
            order: [[1, 'desc']],
            dom:
                '<"row me-2"' +
                '<"col-md-2"<"me-3"l>>' +
                '<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>' +
                '>t' +
                '<"row mx-2"' +
                '<"col-sm-12 col-md-6"i>' +
                '<"col-sm-12 col-md-6"p>' +
                '>',
            language: {
                sLengthMenu: '_MENU_',
                search: '',
                searchPlaceholder: '{{__('general.search')}}...'
            },
            // Buttons with Dropdown
            buttons: [
                {
                    extend: 'collection',
                    className: 'btn btn-label-secondary dropdown-toggle mx-3 waves-effect waves-light',
                    text: '<i class="ti ti-screen-share me-1 ti-xs"></i>{{__('general.actions.export')}}',
                    buttons: [
                        {
                            extend: 'print',
                            text: '<i class="ti ti-printer me-2" ></i>Print',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'csv',
                            text: '<i class="ti ti-file-text me-2" ></i>Csv',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'excel',
                            text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'pdf',
                            text: '<i class="ti ti-file-code-2 me-2"></i>Pdf',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'copy',
                            text: '<i class="ti ti-copy me-2" ></i>Copy',
                            className: 'dropdown-item',
                        }
                    ]
                },
                {
                    text: '<i class="ti ti-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">{{__('general.actions.add')}} {{__('exam_schedules.exam_schedules')}}</span>',
                    className: 'add-new btn btn-primary waves-effect waves-light',
                    attr: {
                        'data-bs-toggle': 'offcanvas',
                        'data-bs-target': '#offcanvasAddRecord'
                    }
                }
            ],

            aLengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],

            responsive:false,
            /*initComplete: function () {
                // Apply the search
                this.api()
                    .columns()
                    .every(function () {
                        var that = this;
                        $('input', this.footer()).on('keyup change clear', function () {
                            if (that.search() !== this.value) {
                                that.search(this.value).draw();
                            }
                        });
                    });
            },*/
        });

    </script>
    <script>
        let examIndex = 1;
        function addExamRow() {
            const row = `
        <div class="row mb-2">
            <h5>Exam ${examIndex+1}</h5>
            <div class="col-12">
                <input type="text" name="exams[${examIndex}][exam_name]" placeholder="Exam Name" class="form-control" required>
            </div>
            <div class="col-12">
                <input type="number" name="exams[${examIndex}][coefficient]" step="0.1" placeholder="Coefficient" class="form-control" required>
            </div>
            <div class="col-12">
                <input type="date" name="exams[${examIndex}][exam_date]" class="form-control" required>
            </div>
        </div>
    `;
            document.getElementById('exam-fields').insertAdjacentHTML('beforeend', row);
            examIndex++;
        }
    </script>
@endsection