@extends('layouts.master')

@section('title', __('exam.exam_schedule'))

@section('content_title', __('exam.manage_exam_schedule'))

@section('content_summary', 'exam schedule summary')

@if (auth()->user()->can('exam.academic_exam_schedule.create'))
    @section('content_taskbar')
        <li class="nav-item">
            <a href="{{ route('exam.academic_exam_schedule.create') }}" class="nav-link modal-triger" data-bs-toggle="modal"
                data-bs-target="#basicModal">
                <i class="nav-link-icon pe-7s-plus"></i>
                <span>{{ __('core.add') }}</span>
            </a>
        </li>
    @endsection
@endif
@section('main_content')
    <div class="main-card mb-3 ">
        <div class="card mb-4">
            <div class="card-body">
                <form id="search_exam_schedule" action="{{ route('exam.academic_exam_schedule.index') }}" method="get">
                    <x-academicFilter class="row">
                        <x-slot:show_business>
                            <x-slot:show_business_child class="filter-dropdown"></x-slot:show_business_child>
                        </x-slot:show_business>
                        <x-slot:show_academic_year>
                            <x-slot:show_academic_year_child class="filter-dropdown" id='academic_year'></x-slot:show_academic_year_child>
                        </x-slot:show_academic_year>

                        <x-slot:show_academic_class>
                            <x-slot:show_academic_class_child class="filter-dropdown" id="academic_class"></x-slot:show_academic_class_child>
                        </x-slot:show_academic_class>
                        <div class="col-6 col-md-3 mb-3">
                            <label for="" class="form-label">Select Exam</label>
                            <select class="form-select form-select-sm select_exam_id filter-dropdown"
                                name="academic_exam_id" id="select_exam_id">
                                <option selected value="">Select one</option>
                            </select>
                        </div>

                    </x-academicFilter>
                    {{-- <div class="text-center mt-2">
                        <button type="submit" class="btn btn-primary btn-hover-shine btn-lg">Search</button>
                    </div> --}}

                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a data-bs-toggle="tab" href="#tab-eg10-0"
                            class="mb-2 me-2 btn btn-shadow-primary btn-primary">{{ __('core.home') }}</a>
                    </li>
                    @if (auth()->user()->can('exam.academic_exam_schedule.trash_view'))
                        <li class="nav-item">
                            <a data-bs-toggle="tab" href="#tab-eg10-1" class="mb-2 me-2 btn btn-shadow-danger btn-danger">
                                {{ __('core.trash') }}
                            </a>
                        </li>
                    @endif
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-eg10-0" role="tabpanel">
                        @include('exam::exam_schedules.partials.exam_schedule_list')
                    </div>
                    <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                        @include('exam::exam_schedules.partials.trash_list')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@include('partials.js.sweet_alert')
@include('partials.js.crud')
@include('partials.js.datatable')
@include('partials.js.datatable_features')
@push('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var data = {
                business_id: "{{ auth()->user()->business_id }}"
            }
            $(document).on("submit", "#exam_schedule_form", function(e) {
                e.preventDefault(); // make sure default form submit is prevented
                ModalFormSubmit("#exam_schedule_form")
                    .then(() => {
                        loadData();
                    });
            })

            setupActionButtons({
                actions: {
                    '.toggle_button': {
                        method: 'PUT',
                        confirmTitle: "{{ __('core.sure') }}",
                        confirmText: "{{ __('core.confirm_update_status') }}",
                    },
                    '.toggle_publish_button': {
                        method: 'PUT',
                        confirmTitle: "{{ __('core.sure') }}",
                        confirmText: "{{ __('core.confirm_update_status') }}",
                    },
                    '.delete_button': {
                        method: 'DELETE',
                        confirmTitle: "{{ __('core.confirm_delete') }}",
                        confirmText: "{{ __('core.confirm_delete_msg') }}",
                        forceDeleteRetry: true
                    },
                    '.restore_button': {
                        method: 'POST',
                        confirmTitle: "{{ __('core.confirm_restore') }}",
                        confirmText: "{{ __('core.confirm_restore_msg') }}",
                    },
                    '.force_delete_button': {
                        method: 'DELETE',
                        icon: "error",
                        confirmTitle: "{{ __('core.confirm_delete') }}",
                        confirmText: "{{ __('core.confirm_delete_msg') }}",
                    }
                },
                onSuccess: () => {
                    loadData(data);
                },
                onError: (err) => {
                    if (!err.cancelled) {
                        console.error("Request failed", err);
                        toastr.error("Something went wrong.");
                    }
                }
            });



            $(document).on("change", ".start-time", function(e) {
                let parent = e.target.closest("td");
                let start_time = e.target.value;
                parent.getElementsByClassName("end-time")[0].setAttribute("min", start_time);
                if (parent.getElementsByClassName("end-time")[0].value < start_time) {
                    parent.getElementsByClassName("end-time")[0].value = start_time;
                }
            })

            $(document).on("change", ".end-time", function(e) {
                let parent = e.target.closest("td");
                let end_time = e.target.value;
                parent.getElementsByClassName("start-time")[0].setAttribute("max", end_time);
                if (parent.getElementsByClassName("start-time")[0].value > end_time) {
                    parent.getElementsByClassName("start-time")[0].value = end_time;
                }
            })




            $(document).on('submit', 'form.exam_subject_wise_schedules_form', function(e) {
                e.preventDefault();
                $(this).find('button[type="submit"]').attr('disabled', false);
                var data = $(this).serialize();
                var params = new URLSearchParams(data);
                var isNullPresent = false;

                // Iterate through all key-value pairs
                for (let [key, value] of params.entries()) {
                    if (value === "") { // Check if the value is empty (null)
                        isNullPresent = true;
                        break;
                    }
                }

                if (isNullPresent) {
                    e.preventDefault(); // Prevent form submission
                    toastr.error("Please enter correct date value")
                    return;
                }
                $.ajax({
                    method: $(this).attr('method'),
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    success: function(result) {
                        if (result.success == true) {
                            toastr.success(result.msg);

                        } else {
                            toastr.error(result.msg);
                        }
                        loadData();
                    },
                    error: function(response) {
                        // Clear previous error messages
                        $(this).find('.text-danger').remove();

                        if (response.status === 422) {
                            // Validation errors
                            var errors = response.responseJSON.errors;
                            for (var field in errors) {
                                // Find the input field and add the error message
                                let key = field;
                                let parts = key.split('.');
                                let input_name = parts[0]; // "input field name value"
                                let index = parts[1];
                                if (index) {
                                    var $input = $(".exam_subject_wise_schedules_form").find(
                                        '[name="' + input_name + '[]"]')[index];
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input.parentElement.appendChild(span);
                                } else {
                                    var $input = $(".exam_subject_wise_schedules_form").find(
                                        '[name="' + field + '"]');
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input[0].parentElement.appendChild(span);
                                }
                                toastr.error(errors[field][0]);

                            }
                        } else {
                            toastr.error('An unexpected error occurred.');
                        }

                        // Re-enable submit button
                    }
                });
            });




            // this function loads the filtered data




            $('.select_business_id ').on("change", function() {
                let business_id = $(this).val();
                if (business_id) {
                    loadExamData(business_id)
                } else {
                    updateDropdown($("#select_exam_id"), [], true);
                }
            })

            function loadExamData(business_id) {
                $.ajax({
                    method: "get",
                    url: "{{ route('exam.academic_exams.dropdown') }}",
                    data: {
                        business_id
                    },
                    success: function(res) {
                        updateDropdown($("#select_exam_id"), res, true);
                    }
                })
            }




            // $(document).on("submit", "#search_exam_schedule", function(e) {
            //     e.preventDefault();
            //     $(this).find('button[type="submit"]').attr('disabled', false);
            //     var data = $(this).serialize();

            //     $.ajax({
            //         method: $(this).attr('method'),
            //         url: $(this).attr("action"),
            //         dataType: "json",
            //         data: data,
            //         success: function(response) {
            //             $('#exam-schedule-table-data').html(response.examData);
            //             $('#exam-schedule-trash-table-data').html(response.trashData);
            //         },
            //         error: function(response) {
            //             // Clear previous error messages
            //             $(this).find('.text-danger').remove();

            //             if (response.status === 422) {
            //                 // Validation errors
            //                 var errors = response.responseJSON.errors;
            //                 for (var field in errors) {
            //                     // Find the input field and add the error message
            //                     let key = field;
            //                     let parts = key.split('.');
            //                     let input_name = parts[0]; // "input field name value"
            //                     let index = parts[1];
            //                     if (index) {
            //                         var $input = $('[name="' + input_name + '[]"]')[index];
            //                         let span = document.createElement("span");
            //                         span.classList.add("text-danger");
            //                         span.innerText = errors[field][0];
            //                         $input.parentElement.appendChild(span);
            //                     } else {
            //                         var $input = $('[name="' + field + '"]');
            //                         let span = document.createElement("span");
            //                         span.classList.add("text-danger");
            //                         span.innerText = errors[field][0];
            //                         $input[0].parentElement.appendChild(span);
            //                     }
            //                     toastr.error(errors[field][0]);

            //                 }
            //             } else {
            //                 toastr.error('An unexpected error occurred.');
            //             }

            //             // Re-enable submit button
            //         }
            //     });
            // })



            function updateDropdown($select, data, selected) {
                $select.empty(); // Clear the existing options
                // Add default option
                $select.append($('<option></option>').attr('value', '').text(
                    'Please Select'));
                // Add the new options
                $.each(data, function(key, value) {
                    $select.append($('<option></option>').attr('value', key).text(value));
                });

                if (selected) {
                    // Select the last option
                    $select.find('option:first').prop('selected', true);
                }
            }


            $(".filter-dropdown").on("change", function() {
                let data = $("#search_exam_schedule").serialize();
                loadData(data);
            });


            // Load data
            function loadData(data = data) {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('exam.academic_exam_schedule.index') }}",
                    data: data,
                    success: function(response) {
                        // Destroy the existing DataTable instance
                        if ($.fn.DataTable.isDataTable('#exam_schedule_table')) {
                            $('#exam_schedule_table').DataTable().destroy();
                        }
                        if ($.fn.DataTable.isDataTable('#trash_exam_schedule_table')) {
                            $('#trash_exam_schedule_table').DataTable().destroy();
                        }

                        // Replace the table body with the new data
                        $('#exam-schedule-table-data').html(response.examData);
                        $('#exam-schedule-trash-table-data').html(response.trashData);

                        // // Reinitialize the DataTable
                        // $('#exam_schedule_table').DataTable({
                        //     processing: true,
                        //     responsive: true,
                        // });
                        // $('#trash_exam_schedule_table').DataTable({
                        //     processing: true,
                        //     responsive: true,
                        // });
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            }

            // Initial load
            loadData(data);



        });
    </script>
@endpush