@extends('layouts.master')

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

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

@section('content_summary', 'exam_room_schedules summary')

@section('content_taskbar')
    <li class="nav-item">
        <a href="{{ route('exam.academic_exam_room_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

@section('main_content')
    <div class="main-card mb-3 ">
        <div class="card mb-4">
            <div class="card-body">
                <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 required 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>
        </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_room_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">
                        <div class="table-responsive">
                            {!! $html1->table([], true) !!}
                        </div>

                    </div>
                    @if (auth()->user()->can('exam.academic_exam_room_schedule.trash_view'))
                        <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                            <div class="table-responsive">
                                {!! $html2->table([], true) !!}
                            </div>
                        </div>
                    @endif
                </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')
    {!! $html1->scripts() !!}
    {!! $html2->scripts() !!}
    <script type="text/javascript">
        $(document).ready(function() {

            var home_table = $('#home-table').DataTable();
            var trash_table = $('#trash-table').DataTable();


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

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






            $(document).on("submit", "#modal_form", function(e) {
                e.preventDefault(); // make sure default form submit is prevented

                ModalFormSubmit("#modal_form")
                    .then(() => {
                        home_table.ajax.reload();
                        trash_table.ajax.reload();
                    });
            });




            $(".filter-dropdown").on("change", function() {
                home_table.ajax.reload();
                trash_table.ajax.reload();
            })



            setupActionButtons({
                actions: {
                    '.toggle_publish_button': {
                        method: 'PUT',
                        confirmTitle: "{{ __('core.sure') }}",
                        confirmText: "{{ __('core.confirm_update_status') }}",
                    },
                    '.toggle_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: () => {
                    home_table.ajax.reload();
                    trash_table.ajax.reload();
                },
                onError: (err) => {
                    if (!err.cancelled) {
                        console.error("Request failed", err);
                        toastr.error("Something went wrong.");
                    }
                }
            });


        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            var business_id = null;





            $(document).on("change", ".modal-dialog .select_business_id", function() {
                business_id = $(this).val();
                loadAndRenderBusinessIdRelatedData(business_id)
            })

            var academic_basic_settings = null;





            $(document).on("change", ".modal-dialog .exam_id", function(e) {
                let exam_id = $(this).val()
                var $class_rooms = $(this).closest('.subject_child').find(".type-container .class_room_id");
                let elements = e.target.closest(".subject_child").getElementsByClassName(
                    "type-container")[
                    0];
                var $exam_input = $(this);
                business_id = $(".modal-dialog .select_business_id").val();
                if (!business_id) {
                    toastr.error("Please select business")
                    return
                }
                if (!$(".modal-dialog .select_academic_year_id").val()) {
                    toastr.error("Please select academic year")
                    return
                }
                if (!$(".modal-dialog .select_academic_class_id").val()) {
                    toastr.error("Please select academic class id")
                    return
                }
                let academic_year_id = $(".modal-dialog .select_academic_year_id").val()
                let academic_class_id = $(".modal-dialog .select_academic_class_id").val()
                $.ajax({
                    method: "post",
                    url: "{{ route('exam.academic_exam_room_schedule.getExamSchedule') }}",
                    data: {
                        "business_id": business_id,
                        "academic_year_id": academic_year_id,
                        "academic_class_id": academic_class_id,
                        "academic_exam_id": exam_id
                    },
                    success: function(response) {
                        if (response.length > 0) {
                            $exam_input.closest(".subject_child").find(
                                '.exam_schedule_id').val(response[0].id)
                            let inputs = elements.querySelectorAll('select, input, textarea');
                            inputs.forEach(function(input) {

                                input.removeAttribute("disabled")


                            });
                            // update_tag_name_to_array(elements, null, true);
                            if (response[0].id) {
                                update_tag_name_to_array(elements, response[0].id)
                            } else {
                                // update_tag_name_to_array(elements, null, true);
                            }
                            load_class_room_and_enable_input_tag(business_id, $class_rooms)

                        } else {
                            $exam_input.closest(".subject_child").find(
                                '.exam_schedule_id').val('');
                            // update_tag_name_to_array(elements, null, true);
                            let inputs = elements.querySelectorAll('select, input, textarea');
                            inputs.forEach(function(input) {
                                input.setAttribute("disabled", true);
                            });

                            toastr.info("Please create an exam shcedule for this exam.")
                        }
                    }
                })

            })

            $(document).on("change", ".modal-dialog .class_room_id", function(e) {
                business_id = $(".modal-dialog .business_id").val();
                let class_room_id = $(this).val();
                let $class_room = $(this);
                $.ajax({
                    method: "post",
                    url: "{{ route('academic.class_rooms.get_class_room_details_by_id') }}",
                    data: {
                        class_room_id: class_room_id,
                    },
                    success: function(response) {
                        if (response && Object.keys(response).length > 0) {
                            $class_room.closest(".type-child").find(
                                '.class_room_set_up_id').val(
                                response.get_class_room_setup[0].id);
                            let elements = e.target.closest(".type-child")
                            // update_tag_name_to_array(elements, response.get_class_room_setup[0]
                            //     .id, false)
                            add_remove_disable($class_room, false)
                            auto_select_class_roll($class_room, response.max_capacity)
                        } else {
                            $class_room.closest(".type-child").find(
                                '.class_room_set_up_id').val('');
                            add_remove_disable($class_room, true)
                            let elements = e.target.closest(".type-child")
                            // update_tag_name_to_array(elements, null, false)
                            toastr.error("This class room dont have room setup")
                        }
                    }
                })
            })


            function auto_select_class_roll($class_room, capacity) {
                let $from_roll = $class_room.closest(".type-child").find(".from_roll option");
                let $to_roll = $class_room.closest(".type-child").find(".to_roll option");
                $from_roll.eq(1).prop('selected', true);
                if ($to_roll.length > capacity) {
                    $to_roll.eq(capacity).prop('selected', true);

                } else {
                    $to_roll.eq($to_roll.length - 1).prop('selected', true);
                }
            }

            function add_remove_disable($class_room, add = true) {
                let $from_roll = $class_room.closest(".type-child").find(".from_roll");
                let $to_roll = $class_room.closest(".type-child").find(".to_roll");
                $from_roll.find('option:first').prop('selected', true);
                $to_roll.find('option:first').prop('selected', true);

                if (add) {
                    $from_roll.attr("disabled", true)
                    $to_roll.attr("disabled", true)
                    $class_room.closest(".modal-dialog [type='submit']").attr("disabled", true);
                } else {
                    $from_roll.removeAttr("disabled");
                    $to_roll.removeAttr("disabled");
                    $class_room.closest(".modal-dialog [type='submit']").removeAttr("disabled");
                }
            }

            function load_class_room_and_enable_input_tag(business_id, $class_rooms) {
                $.ajax({
                    method: "post",
                    url: "{{ route('exam.academic_exam_room_schedule.getClassRoomByBusinessId') }}",
                    data: {
                        "business_id": business_id,
                    },
                    success: function(response) {

                        if (Object.keys(response.class_room_list).length > 0) {
                            $class_rooms.removeAttr("disable")
                            updateDropdown($class_rooms, response.class_room_list, true);
                        }

                    }
                })
            }

            function loadAndRenderBusinessIdRelatedData(business_id) {
                $.ajax({
                    method: "post",
                    url: "{{ route('exam.academic_exam_room_schedule.getDataByBusinessId') }}",
                    data: {
                        "business_id": business_id
                    },
                    success: function(response) {
                        // updateDropdown($(".modal-dialog .academic_year_id"), response.academic_year_list, true)
                        // updateDropdown($(".modal-dialog .academic_class_id"), response.academic_class_list, true)
                        updateDropdown($(".modal-dialog .exam_id"), response.exam_list, true)
                        updateDropdown($(".modal-dialog .student_roll"), response.student_roll_list,
                            true)
                    }
                })

            }

            function update_tag_name_to_array(elements, key) {

                console.log("this code is runnnig in index");
                let inputs = elements.querySelectorAll('select, input, textarea');
                inputs.forEach(function(input) {
                    let name = input.getAttribute('name');
                    console.log(name);
                    if (name) {
                        input.setAttribute('name', name.replace(/\[\d*\]\[\]/, `[]`).replace(/\[\]/,
                            `[${key}][]`));

                        // Update id attribute
                        let id = input.getAttribute('id');
                        if (id) {
                            input.setAttribute('id', id.replace(/\[\d*\]\[\]/, `[]`).replace(/\[\]/,
                                `[${key}][]`));
                        }

                        let label = input.closest('.form-group').querySelector('label[for]');
                        if (label) {
                            label.setAttribute('for', label.getAttribute('for').replace(/\[\d*\]\[\]/, `[]`)
                                .replace(/\[\]/,
                                    `[${key}][]`));
                        }
                    }

                });
            }








            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);
                }
            }


        });
    </script>
@endpush