@php
    use App\Models\LevelCompletionModule\LevelCompletion;
@endphp
<x-dashboard.admin-layout>
    <x-slot name='title'>Level Completion Details - Dreamers Academy</x-slot>

    <div class="container-fluid">
        <x-inc.breadcrumb title="Level Completion Details" />

        <div class="row mb-4">
            <div class="accordion" id="accordion_filter">
                <div class="accordion-item" >
                    <h2 class="accordion-header" id="accordion_search">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_search" aria-expanded="false" aria-controls="collapse_search">Search Here</button>
                    </h2>
                    <div id="collapse_search" class="accordion-collapse collapse" aria-labelledby="accordion_search" data-bs-parent="#accordion_filter">
                        <div class="accordion-body h-auto">
                            <form action="" class="filter-form">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label" for="level_completion_month">Level Completion Month</label>
                                        <input class="form-control" type="month" min="2021-01" name="level_completion_month" id="level_completion_month" onchange="searchMapping()" >
                                    </div>
                                    <div class="col-md-3">
                                        <label for="status" class="form-label"> Status</label>
                                        <select id="status" name="status" class="form-control select2" onchange="searchMapping()">
                                            <option value="" disabled selected >Select Status</option>
                                            <option value="{{ LevelCompletion::STATUS_ANNOUNCED }}" @if(request()->status == LevelCompletion::STATUS_ANNOUNCED) selected @endif>{{ LevelCompletion::STATUS_ANNOUNCED }}</option>
                                            <option value="{{ LevelCompletion::STATUS_COMPLETED }}" @if(request()->status == LevelCompletion::STATUS_COMPLETED) selected @endif>{{ LevelCompletion::STATUS_COMPLETED }}</option>
                                            <option value="{{ LevelCompletion::STATUS_CANCELLED }}" @if(request()->status == LevelCompletion::STATUS_CANCELLED) selected @endif>{{ LevelCompletion::STATUS_CANCELLED }}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="teacher_id" class="form-label">Instructor</label>
                                        <select id="teacher_id" name="teacher_id" class="form-control select2" onchange="searchMapping()">
                                            <option value="" disabled selected >Select Instructor</option>
                                            @foreach($teachers as $teacher)
                                                <option value="{{ $teacher->id }}">{{ $teacher->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="coordinator_id" class="form-label"> Coordinator</label>
                                        <select id="coordinator_id" name="coordinator_id" class="form-control select2" onchange="searchMapping()">
                                            <option value="" disabled selected >Select Coordinator</option>
                                            @foreach($coordinators as $coordinator)
                                                <option value="{{ $coordinator->id }}">{{ $coordinator->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 col-sm-12 ">
                                        <button type="button" onclick="resetForm()" class="btn btn-outline-danger float-end" style="margin-top: 30px" title="Reset">
                                            <i class="ti ti-refresh" style="font-size: 17px;"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive overflow-x-auto overflow-y-hidden">
                            <table id="datatable" class="table border table-striped table-bordered display datatable-data">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>Class</th>
                                        <th>Instructor</th>
                                        <th>Coordinator</th>
                                        <th>Level Completion Date</th>
                                        <th>Estimated PTM Date</th>
                                        <th>PTM Completion Date</th>
                                        <th>Parent Feedback</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <x-slot name="script">
        <script src="{{asset('assets/js/ajax_form_submit-1.0.1.js')}}"></script>
        <script src="{{asset('assets/js/custom-script-1.0.0.js')}}"></script>
        <script>
            let urlParams = new URLSearchParams(window.location.search);
            var datatable = $('.datatable-data').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                ajax: {
                    url: "{{ route('level.completion.data') }}",
                    type: "GET",
                    data: function (data) {
                        data.level_completion_month = $('#level_completion_month').val();
                        data.status = urlParams.has('status') ? urlParams.get('status') : $('#status').val();
                        data.teacher_id = $('#teacher_id').val();
                        data.coordinator_id = $('#coordinator_id').val();
                    }
                },
                order: [
                    [4, 'DESC']
                ],
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'class_id',
                        name: 'class_id',
                    },
                    {
                        data: 'teacher_id',
                        name: 'teacher_id',
                    },
                    {
                        data: 'coordinator_id',
                        name: 'coordinator_id',
                    },
                    {
                        data: 'level_completion_date',
                        name: 'level_completion_date',
                    },
                    {
                        data: 'estimated_ptm_date',
                        name: 'estimated_ptm_date',
                    },
                    {
                        data: 'ptm_completed_date',
                        name: 'ptm_completed_date',
                    },
                    {
                        data: 'parent_feedback',
                        name: 'parent_feedback',
                    },
                    {
                        data: 'status',
                        name: 'status',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                    },
                ]
            });
        </script>

        <script>

            var currentUrl = window.location.href;

            function searchMapping() {
                if (currentUrl.includes('?') && urlParams.has('status')) {
                    urlParams.set('status', $('#status').val());
                    let url = new URL(currentUrl);
                    url.search = urlParams.toString();
                    window.history.replaceState(null, '', url.toString());
                }
                $("#datatable").DataTable().ajax.reload();
            }

            function resetForm() {
                if (currentUrl.includes('?')) {
                    if (urlParams.has('status')) {
                        urlParams.delete('status');
                    }
                    window.history.replaceState(null, '', currentUrl.split('?')[0]);
                }
                $('.filter-form')[0].reset();
                $('.select2').val(null).trigger('change');
                datatable.search('').order([]).draw();
                searchMapping();
            }
        </script>
    </x-slot>

</x-dashboard.admin-layout>