@extends('layouts.master')

@section('title', 'academic basic settings')
@section('content_title', __('Academic.academic basic settings'))

@section('content_summary', 'academic basic settings')

@section('main_content')
    <div class="main-card mb-3 card">
        <div class="card-body">
            <div id="loading-text"
                style="display: block;
    font-size: 18px;
    color: #333;
    text-align: center;
    margin-top: 20px;">
                Loading, please wait...</div>
            <div id="smartwizard" style="display: none">
                <ul class="forms-wizard">
                    <li>
                        <a href="#step-1">
                            <em>1</em>
                            <span>Add classes</span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-2">
                            <em>2</em>
                            <span>add class for shift</span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-3">
                            <em>3</em>
                            <span>Group & Section</span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-4">
                            <em>4</em>
                            <span>Add teacher</span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-5">
                            <em>5</em>
                            <span>Add Class Subject</span>

                        </a>
                    </li>
                    <li>
                        <a href="#step-6">
                            <em>6</em>
                            <span>Subject Teacher</span>
                        </a>
                    </li>
                    <li>
                        <a href="#step-7">
                            <em>7</em>
                            <span>Finish Wizard</span>
                        </a>
                    </li>
                </ul>
                <div class="form-wizard-content">
                    <div id="step-1">
                        <div class="row">
                            <div class="col col-md-12 mb-3">
                                <div class="card">
                                    <form action="{{ route('academic.academic_settings.set_up_setting_submit', [$id]) }}"
                                        method="POST" class="step-1">
                                        <div class="card-body row">
                                            <div class="card-title">Add Class for Academic Year</div>
                                            <div class="col col-md-6">
                                                <label for="" class="form-label">Select Academic year</label>
                                                <select class="form-select set_academic_year" name="set_academic_year"
                                                    id="set_academic_year">
                                                    @foreach ($academic_year_list as $key => $value)
                                                        <option value="{{ $key }}">{{ $value }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col col-md-6">
                                                <label for="" class="form-label">Select Classes</label>
                                                <select multiple class="multiselect-dropdown form-select"
                                                    name="set_academic_classes[]" id="set_academic_classes">
                                                    @foreach ($academic_class_list as $key => $value)
                                                        <option value="{{ $key }}">{{ $value }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                    </form>
                                </div>
                            </div>

                        </div>

                        {{-- <div class="col-md-6">
                                <div class="position-relative mb-3">
                                    <label class="form-label" for="examplePassword22">Password</label>
                                    <input name="password" id="examplePassword22" placeholder="password placeholder"
                                        type="password" class="form-control">
                                </div>
                            </div> --}}
                    </div>
                    {{-- <div class="position-relative mb-3">
                            <label class="form-label" for="exampleAddress">Address</label>
                            <input name="address" id="exampleAddress" placeholder="1234 Main St" type="text"
                                class="form-control">
                        </div>
                        <div class="position-relative mb-3">
                            <label class="form-label" for="exampleAddress2">Address 2</label>
                            <input name="address2" id="exampleAddress2" placeholder="Apartment, studio, or floor"
                                type="text" class="form-control">
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="position-relative mb-3">
                                    <label class="form-label" for="exampleCity">City</label>
                                    <input name="city" id="exampleCity" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="position-relative mb-3">
                                    <label class="form-label" for="exampleState">State</label>
                                    <input name="state" id="exampleState" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="position-relative mb-3">
                                    <label class="form-label" for="exampleZip">Zip</label>
                                    <input name="zip" id="exampleZip" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="position-relative form-check">
                            <input name="check" id="exampleCheck" type="checkbox" class="form-check-input">
                            <label for="exampleCheck" class="form-label form-check-label">Check me out</label>
                        </div> --}}
                </div>

                <div id="step-2">
                    <div class="row">
                        <div class="col col-md-12 mb-3">
                            <div class="card">
                                <form action="{{ route('academic.academic_settings.set_up_setting_submit', [$id]) }}"
                                    method="POST" class="step-2">
                                    <div class="card-body row">
                                        <div class="card-title">Add Class for Shif</div>
                                        <div class="col col-md-6">
                                            <label for="" class="form-label">Select Shift</label>
                                            <select class="form-select" name="set_shift_id" id="set_shift_id">
                                                @foreach ($shift_list as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col col-md-6">
                                            <label for="" class="form-label">Select Class</label>
                                            <select multiple class="multiselect-dropdown form-select academic_classes"
                                                name="academic_classes[]">

                                            </select>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="step-3">
                    <form action="{{ route('academic.academic_settings.set_up_setting_submit', [$id]) }}" method="POST"
                        class="step-3">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="card">

                                    <div class="card-body ">
                                        <div class="card-title">Add sections for class</div>
                                        <div class="row parent-div duplicate-checker-parent">
                                            <div class="row col-12 clone-div section-div change-attribute-parent">
                                                <div class="col col-md-6">
                                                    <label for="" class="form-label">Select Class</label>
                                                    <select required
                                                        class=" form-select single_select_academic_classes change-attribute-by-this-input-value duplicate-checker check-has-section check-has-group"
                                                        name="academic_classes_for_section[]">
                                                    </select>
                                                </div>
                                                <div class="col col-md-6 change-value-child">
                                                    <label for="" class="form-label">Select Section</label>
                                                    <select required class=" form-select set_section_id"
                                                        name="set_section_id[0][]">
                                                        @foreach ($section_list as $key => $value)
                                                            <option value="{{ $key }}">{{ $value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col col-md-12 text-center mt-3">
                                                    <button type="button" class="btn btn-primary add-class">Add</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title">Add groups for class</div>
                                        <div class="row parent-div duplicate-checker-parent">
                                            <div class="row col-12 clone-div group-div change-attribute-parent">
                                                <div class="col col-md-6">
                                                    <label for="" class="form-label">Select Class</label>
                                                    <select required
                                                        class=" form-select single_select_academic_classes change-attribute-by-this-input-value duplicate-checker check-has-section check-has-group"
                                                        name="academic_classes_for_group[]">
                                                    </select>
                                                </div>
                                                <div class="col col-md-6 change-value-child">
                                                    <label for="" class="form-label">Select Section</label>
                                                    <select required class=" form-select set_group_id"
                                                        name="set_group_id[0][]">
                                                        @foreach ($group_list as $key => $value)
                                                            <option value="{{ $key }}">{{ $value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col col-md-12 text-center mt-3">
                                                    <button type="button" class="btn btn-primary add-class">Add</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </form>
                </div>
                <div id="step-4">
                    <form action="{{ route('academic.academic_settings.set_up_setting_submit', [$id]) }}" method="POST"
                        class="step-4">
                        <div class="row">
                            <input type="hidden" name="form_step" value="step-4">
                            <div class="col col-md-6 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title">Add Class Teacher</div>
                                        <div class=" row parent-div">
                                            <div class="col-12 row clone-div change-attribute-parent class-teacher-div">

                                                <div class="col col-md-6">
                                                    <label for="" class="form-label">Select Class</label>
                                                    <select
                                                        class="single_select_academic_classes_without_section change-attribute-by-this-input-value form-select load-class-teacher-class-data"
                                                        name="academic_classes[]">

                                                    </select>
                                                </div>
                                                <div class="col col-md-6 change-value-child">
                                                    <label for="" class="form-label">Select Teacher</label>
                                                    <select class=" form-select load-class-teacher-data"
                                                        name="set_class_teacher[0][]">
                                                        @foreach ($employee_name_list as $key => $value)
                                                            <option value="{{ $key }}">{{ $value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col col-md-12 text-center mt-3">
                                                    <button type="button" class="btn btn-primary add-class">Add
                                                        Class</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col col-md-6 mb-3">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-title">Add Section Teacher</div>
                                        <div class=" row parent-div">
                                            <div class="col-12 row clone-div change-attribute-parent section-teacher-div">
                                                <div class="col col-md-6">
                                                    <label for="" class="form-label">Select Section</label>
                                                    <select
                                                        class="form-select select_section_by_class change-attribute-by-this-input-value load-section-teacher-section-data"
                                                        name="select_section[]">
                                                        <option selected>Select one</option>
                                                    </select>
                                                </div>
                                                <div class="col col-md-6 change-value-child">
                                                    <label for="" class="form-label">Select Teacher</label>
                                                    <select class=" form-select load-section-teacher-data"
                                                        name="set_section_teacher[0][]">
                                                        @foreach ($employee_name_list as $key => $value)
                                                            <option value="{{ $key }}">{{ $value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col col-md-12 text-center mt-3">
                                                    <button type="button" class="btn btn-primary add-class">Add
                                                        Class</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="col col-md-6 mb-3">
                                <div class="card">
                                    <div class="card-body row parent-div">
                                        <div class="card-title">Add Group Teacher</div>
                                        <div class="col-12 row clone-div change-attribute-parent">
                                            <div class="col col-md-6">
                                                <label for="" class="form-label">Select Group</label>
                                                <select
                                                    class="form-select select_group_by_class change-attribute-by-this-input-value load-group-teacher-group-data"
                                                    name="select_group[0]">
                                                    <option selected>Select one</option>
                                                </select>
                                            </div>
                                            <div class="col col-md-6">
                                                <label for="" class="form-label">Select Teacher</label>
                                                <select class=" form-select load-group-teacher-data"
                                                    name="set_group_teacher[0]">
                                                    @foreach ($employee_name_list as $key => $value)
                                                        <option value="{{ $key }}">{{ $value }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col col-md-12 text-center mt-3">
                                                <button type="button" class="btn btn-primary add-class">Add
                                                    Class</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}

                        </div>
                    </form>
                </div>
                <div id="step-5">
                    <form action="{{ route('academic.academic_settings.set_up_setting_submit', [$id]) }}" method="POST"
                        class="step-5">
                        <div class="col col-md-12 mb-3">
                            <div class="card">
                                <div class="card-body row parent-div">
                                    <div class="card-title">Add Subject For Class</div>
                                    <div class="row col-12 clone-div select-class-subject-div change-attribute-parent">
                                        <div class="col col-md-6">
                                            <label for="" class="form-label">Select Class</label>
                                            <select required
                                                class=" form-select single_select_academic_classes change-attribute-by-this-input-value load-class-subject-class-data"
                                                name="academic_classes[]">
                                            </select>
                                        </div>
                                        <div class="col col-md-6 change-value-child">
                                            <label for="" class="form-label">Select Section</label>
                                            <select required multiple
                                                class=" form-select set_subject_id load-class-subject-subject-data"
                                                name="set_subject_id[0][]">
                                                @foreach ($subject_list as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col col-md-12 text-center mt-3">
                                            <button type="button" class="btn btn-primary add-class">Add</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="step-6">
                    <form action="{{ route('academic.academic_settings.set_up_setting_submit', [$id]) }}" method="POST"
                        class="step-6">
                        <div class="col col-md-12 mb-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-title">Add Subject Teacher</div>
                                    <div class=" row parent-div">
                                        <div class="col-12 row clone-div subject-teacher-div change-attribute-parent">
                                            <div class="col col-md-6">
                                                <label for="" class="form-label">Select Subject</label>
                                                <select
                                                    class="form-select select-subject-with-class change-attribute-by-this-input-value load-subject-teacher-subject-data"
                                                    name="select_subject[]">
                                                    <option selected>Select one</option>
                                                </select>
                                            </div>
                                            <div class="col col-md-6 change-value-child">
                                                <label for="" class="form-label">Select Teacher</label>
                                                <select class=" form-select load-subject-teacher-teacher-data"
                                                    name="set_subject_teacher[0][]">
                                                    @foreach ($employee_name_list as $key => $value)
                                                        <option value="{{ $key }}">{{ $value }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col col-md-12 text-center mt-3">
                                                <button type="button" class="btn btn-primary add-class">Add</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="step-7">
                    <div class="no-results">
                        <div class="swal2-icon swal2-success swal2-animate-success-icon">
                            <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);">
                            </div>
                            <span class="swal2-success-line-tip"></span>
                            <span class="swal2-success-line-long"></span>
                            <div class="swal2-success-ring"></div>
                            <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
                            <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);">
                            </div>
                        </div>
                        <div class="results-subtitle mt-4">Finished!</div>
                        <div class="results-title">You arrived at the last form wizard step!</div>
                        <div class="mt-3 mb-3"></div>
                        <div class="text-center">
                            <button class="btn-shadow btn-wide btn btn-success btn-lg finish-button">Finish</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="divider"></div>
        <div class="clearfix">
            <button type="button" id="custom-reset-btn" class="btn-shadow float-start btn btn-link">Reset</button>
            <button type="button" id="custom-next-btn-unique"
                class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-primary">Next</button>
            <button type="button" id="prev-btn"
                class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-secondary">Previous</button>
        </div>
    </div>
    </div>
@endsection

@push('script')
    <script type="text/javascript" src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('vendor/@atomaras/bootstrap-multiselect/dist/js/bootstrap-multiselect.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/smartwizard/dist/js/jquery.smartWizard.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('scripts/form-components/form-wizard.js') }}"></script>
    <script type="text/javascript" src="{{ asset('scripts/form-components/input-select.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Once SmartWizard is initialized, hide the loading message and show the wizard
            $(document).on("click", ".finish-button", function() {
                window.location.href = "{{ route('academic.academic_settings.index') }}";
            })

            let basic_setting_id = "{{ $id ?? '' }}";
            auto_load_setting_data(basic_setting_id);
            $("#set_academic_classes").on("change", function() {
                if ($(this).val().length == 0) {
                    $("#custom-next-btn-unique").attr("disabled", true);
                } else {
                    $("#custom-next-btn-unique").removeAttr("disabled");
                }
            })



            $(".add-class").on("click", function(e) {
                let parent = e.target.closest('.parent-div');
                let clone_div = parent.querySelector('.clone-div:last-of-type');
                let duplicate_ele = duplicate_and_remove_element(parent, clone_div,
                    "<button class='btn btn-danger remove-class'>Remove</button>", 'remove-class', true,
                    'add-class')
                console.log($(duplicate_ele)
                    .find('.duplicate-checker'));




                // multiselect_dropdown_default();
                // $(duplicate_ele)
                // $(duplicate_ele).find(".multiselect-dropdown").select2({
                //     theme: "bootstrap4",
                //     placeholder: "Select an option",
                // });

            })

            $(document).on("click", "#custom-reset-btn", function() {
                $.ajax({
                    method: "post",
                    url: "{{ route('academic.academic_settings.reset_setting') }}",
                    data: {
                        "setting_id": "{{ $id }}"
                    },
                    success: function(result) {
                        console.log(result)
                        // if (result.success) {
                        //     $("#smartwizard").smartWizard("reset");
                        // }
                    }
                })
            })

            $(document).on("click", ".remove-class", function(e) {
                let parent = $('.duplicate-checker-parent');

                if (parent.find('.duplicate-checker').toArray().length == 2) {
                    console.log("running");
                    $(parent).find(".duplicate-checker").html(originalOptions[0])
                    originalOptions = [];
                    previousSelections = []
                }
            })

            $(document).on('change', ".change-attribute-by-this-input-value", function(e) {
                let val = $(this).val() ? $(this).val() : 0;
                let parent = e.target.closest(".change-attribute-parent")
                if (parent.getElementsByClassName("change-value-child") && parent.getElementsByClassName(
                        "change-value-child").length > 0) {
                    parent = parent.querySelectorAll(".change-value-child");
                    parent.forEach(ele => {
                        update_tag_name_to_array(ele, val);
                    })
                } else {
                    update_tag_name_to_array(parent, val);
                }
                console.log(parent);

            })

            $(document).on("change", ".check-has-section", function(e) {
                if ($(this).val()) {
                    $.ajax({
                        method: "get",
                        url: "{{ route('academic.academic_classes.has_section', [':id']) }}"
                            .replace(":id",
                                $(this).val()),
                        success: function(response) {
                            if (response) {
                                $(e.target).closest('.clone-div').find('.set_section_id')
                                    .removeAttr("disabled")
                            } else {
                                $(e.target).closest('.clone-div').find('.set_section_id').attr(
                                    "disabled", true)
                                $(e.target).closest('.clone-div').find('.set_section_id').val(
                                    '')

                            }
                        }

                    })
                }
            })

            $(document).on("change", ".check-has-group", function(e) {
                if ($(this).val()) {
                    $.ajax({
                        method: "get",
                        url: "{{ route('academic.academic_classes.has_group', [':id']) }}".replace(
                            ":id", $(
                                this).val()),
                        success: function(response) {
                            if (response) {
                                $(e.target).closest('.clone-div').find('.set_group_id')
                                    .removeAttr("disabled")
                            } else {
                                $(e.target).closest('.clone-div').find('.set_group_id').attr(
                                    "disabled", true)
                                $(e.target).closest('.clone-div').find('.set_group_id').val('')

                            }
                        }

                    })
                }
            })


            $(document).on('change', ".duplicate-checker", function(e) {
                // setupDuplicateChecker('duplicate-checker-parent', 'duplicate-checker')

                // manageSelectOptions('.duplicate-checker-parent', '.duplicate-checker', $(this));
                console.log(previousSelections, originalOptions);

            });

            // this function runs when next button is clicked
            $("#custom-next-btn-unique").on("click", function() {
                let $btn = $(this);
                $btn.prop("disabled", true); // Disable the button
                const hash = window.location.hash;

                // Log the hash value to the console
                // console.log(hash); // This will output: #step-1

                // If you want to remove the '#' character and just get 'step-1'
                const step = hash.substring(1);
                // console.log(step);
                var formData = $(`.${step}`)
                if (step == 'step-7') {
                    window.location.href = "{{ route('academic.academic_settings.index') }}";
                    return;
                }
                $.ajax({
                    method: formData.attr("method"),
                    url: formData.attr("action"),
                    data: formData.serialize(),
                    success: function(result) {
                        $("#smartwizard").smartWizard("next");
                    },
                    error: function(response) {
                        // Clear previous error messages
                        $(formData).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", "form_error_msg");
                                    span.innerText = errors[field][0];
                                    $input.each(function(e) {

                                        $input[e].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
                    }
                })
                auto_load_setting_data(basic_setting_id);
                $btn.prop("disabled", false); // Disable the button
            })

            // This function is used to auto load the data of setting of the setting data is not seted then it will auto load after submiting data.
            function auto_load_setting_data(id) {
                $('.form_error_msg').remove();
                $.ajax({
                    method: "post",
                    url: "{{ route('academic.academic_settings.load_setting_data') }}",
                    data: {
                        "setting_id": id
                    },
                    success: function(result) {
                        if ($(".remove-class")) {
                            $(".remove-class").click().trigger("click");
                        }
                        let academic_classes = [];
                        let section_clone_number = 0;
                        let group_clone_number = 0;
                        if (result.AcademicBasicSetting && result.AcademicBasicSetting.length > 0) {
                            $(".set_academic_year").val(result.AcademicBasicSetting[0]
                                .academic_year_id);
                        }
                        if (result.AcaBasicSettingClassDetail && result.AcaBasicSettingClassDetail
                            .length > 0) {
                            result.AcaBasicSettingClassDetail.forEach(ele => {
                                if (ele.academic_class_id) {
                                    academic_classes.push(ele.academic_class_id);
                                }
                            });
                        }

                        if (result.AcaBasicSettingShiftDetail) {
                            $("#set_shift_id").val(result.AcaBasicSettingShiftDetail.shift_id);
                        }

                        if ($('#set_academic_classes')) {
                            $('#set_academic_classes').val(academic_classes).trigger('change');
                        }
                        if ($('.academic_classes')) {
                            updateDropdown($('.academic_classes'), result.academic_class_list)
                            $('.academic_classes').val(academic_classes).trigger('change');
                        }

                        if ($('.single_select_academic_classes')) {
                            updateDropdown($('.single_select_academic_classes'), result
                                .academic_class_list);
                        }

                        // load submited data of step 3
                        if (result.AcaBasicSettingSectionDetail && result.AcaBasicSettingSectionDetail
                            .length > 0) {
                            for (let index = 0; index < result.AcaBasicSettingSectionDetail.length -
                                1; index++) {
                                $(".section-div").find(".add-class").click();
                            }
                            result.AcaBasicSettingSectionDetail.forEach((data, index) => {
                                console.log(data);

                                $($(".section-div")[index]).find(
                                    '.single_select_academic_classes').val(data
                                    .academic_class_id)
                                $($(".section-div")[index]).find(
                                    '.set_section_id').val(data
                                    .section_id)
                                $($(".section-div")[index]).find(
                                    '.single_select_academic_classes').trigger("change")
                            })
                        }
                        if (result.AcaBasicSettingGroupDetail &&
                            result.AcaBasicSettingGroupDetail

                            .length > 0) {
                            for (let index = 0; index < result.AcaBasicSettingGroupDetail.length -
                                1; index++) {
                                $(".group-div").find(".add-class").click();
                            }
                            result.AcaBasicSettingGroupDetail.forEach((data, index) => {
                                console.log(data);

                                $($(".group-div")[index]).find(
                                    '.single_select_academic_classes').val(data
                                    .academic_class_id)
                                $($(".group-div")[index]).find(
                                    '.set_group_id').val(data
                                    .group_id)
                                $($(".group-div")[index]).find(
                                    '.single_select_academic_classes').trigger("change")
                            })
                        }

                        if (result.class_section_list) {
                            updateDropdown($('.select_section_by_class'), result.class_section_list,
                                true)
                        }
                        if (result.class_group_list) {
                            updateDropdown($('.select_group_by_class'), result.class_group_list, true)
                        }

                        if (result.without_section_class_list && Object.keys(result
                                .without_section_class_list).length > 0) {
                            $('.single_select_academic_classes_without_section')
                                .closest(".parent-div")
                                .find("button, input, select, textarea")
                                .removeAttr("disabled");
                            updateDropdown($('.single_select_academic_classes_without_section'), result
                                .without_section_class_list, true);
                        } else {
                            $('.single_select_academic_classes_without_section')
                                .closest(".parent-div")
                                .find("button, input, select, textarea")
                                .attr("disabled", true);
                        }

                        // step 4 start
                        // if (result.AcaBasicSettingTeacherDetail && result.AcaBasicSettingTeacherDetail
                        //     .length > 0) {
                        //     let class_teacher_data = result.AcaBasicSettingTeacherDetail.filter(
                        //         function(data) {
                        //             return data.section_id == null;
                        //         })
                        //     let section_teacher_data = result.AcaBasicSettingTeacherDetail.filter(
                        //         function(data) {
                        //             return data.section_id !== null;
                        //         })

                        //     if (class_teacher_data.length == 1 && class_teacher_data.length > 0) {
                        //         $(".load-class-teacher-class-data").val(class_teacher_data[0]
                        //             .academic_class_id).trigger("change");
                        //         $(".load-class-teacher-data").val(class_teacher_data[0].teacher_id)
                        //             .trigger("change");
                        //     } else {
                        //         for (let index = 0; index < class_teacher_data.length - 1; index++) {
                        //             $('.class-teacher-div').find(".add-class").click();
                        //         }
                        //         class_teacher_data.forEach((data, index) => {
                        //             $($(".load-class-teacher-class-data")[index]).val(data
                        //                 .academic_class_id).trigger("change");
                        //             $($(".load-class-teacher-data")[index]).val(data.teacher_id)
                        //                 .trigger("change");
                        //         })
                        //     }
                        //     if (section_teacher_data.length == 1 && section_teacher_data.length > 0) {
                        //         let key = {
                        //             "academic_class_id": section_teacher_data[0].academic_class_id,
                        //             "section_id": section_teacher_data[0].section_id
                        //         }
                        //         $($(".load-section-teacher-section-data")[index]).val(JSON.stringify(
                        //             key)).trigger("change");
                        //         $(".load-section-teacher-data").val(section_teacher_data[0].teacher_id)
                        //             .trigger("change");
                        //     } else {
                        //         for (let index = 0; index < section_teacher_data.length - 1; index++) {
                        //             $('.section-teacher-div').find(".add-class").click();
                        //         }
                        //         section_teacher_data.forEach((data, index) => {
                        //             let key = {
                        //                 "academic_class_id": data.academic_class_id,
                        //                 "section_id": data.section_id
                        //             }

                        //             $($(".load-section-teacher-section-data")[index]).val(JSON
                        //                 .stringify(key)).trigger("change");
                        //             $($(".load-section-teacher-data")[index]).val(data
                        //                     .teacher_id)
                        //                 .trigger("change");
                        //         })
                        //     }

                        //     // result.AcaBasicSettingTeacherDetail.forEach(data=>{
                        //     //     if (!data.section_id) {
                        //     //         $(".class-teacher-div").find(".add-class").click();
                        //     //     }
                        //     // })
                        // }
                        //


                        // step 4 start
                        if (result.AcaBasicSettingTeacherDetail && result.AcaBasicSettingTeacherDetail
                            .length > 0) {
                            let class_teacher_data = result.AcaBasicSettingTeacherDetail.filter(data =>
                                data.section_id == null);
                            let section_teacher_data = result.AcaBasicSettingTeacherDetail.filter(
                                data => data.section_id !== null);

                            // Handle class teachers
                            if (class_teacher_data.length === 1) {
                                $(".load-class-teacher-class-data").val(class_teacher_data[0]
                                    .academic_class_id).trigger("change");
                                $(".load-class-teacher-data").val(class_teacher_data[0].teacher_id)
                                    .trigger("change");
                            } else if (class_teacher_data.length > 1) {
                                for (let i = 0; i < class_teacher_data.length - 1; i++) {
                                    $('.class-teacher-div').find(".add-class").click();
                                }
                                class_teacher_data.forEach((data, index) => {
                                    $($(".load-class-teacher-class-data")[index]).val(data
                                        .academic_class_id).trigger("change");
                                    $($(".load-class-teacher-data")[index]).val(data.teacher_id)
                                        .trigger("change");
                                });
                            }

                            // Handle section teachers
                            if (section_teacher_data.length === 1) {
                                let key = {
                                    academic_class_id: section_teacher_data[0].academic_class_id,
                                    section_id: section_teacher_data[0].section_id
                                };
                                $($(".load-section-teacher-section-data")[0]).val(JSON.stringify(key))
                                    .trigger("change");
                                $($(".load-section-teacher-data")[0]).val(section_teacher_data[0]
                                    .teacher_id).trigger("change");
                            } else if (section_teacher_data.length > 1) {
                                for (let i = 0; i < section_teacher_data.length - 1; i++) {
                                    $('.section-teacher-div').find(".add-class").click();
                                }
                                section_teacher_data.forEach((data, index) => {
                                    let key = {
                                        academic_class_id: data.academic_class_id,
                                        section_id: data.section_id
                                    };
                                    $($(".load-section-teacher-section-data")[index]).val(JSON
                                        .stringify(key)).trigger("change");
                                    $($(".load-section-teacher-data")[index]).val(data
                                        .teacher_id).trigger("change");
                                });
                            }
                        }
                        // step 4 end


                        //  // step 4 end

                        // step 5 start

                        if (result.AcaBasicSettingSubjectDetails && result
                            .AcaBasicSettingSubjectDetails.length > 0) {
                            let data = {};

                            // Assuming result is the input JSON object
                            result.AcaBasicSettingSubjectDetails.forEach(element => {
                                // Initialize the array for the class ID if it doesn't exist
                                if (!data[element.academic_class_id]) {
                                    data[element.academic_class_id] = [];
                                }

                                // Push the subject_id into the array for that class
                                data[element.academic_class_id].push(element.subject_id);
                            });

                            for (let classId in data) {
                                if (data.hasOwnProperty(classId)) {
                                    console.log(`Class ID: ${classId}, Subject IDs: ${data[classId]}`);
                                    data[classId].forEach(subjectId => {
                                        console.log(`Subject ID: ${subjectId}`);
                                    });
                                }
                            }
                            for (let index = 0; index < Object.entries(data).length - 1; index++) {
                                $('.select-class-subject-div').find('.add-class').click();
                            }
                            let i = 0;
                            Object.entries(data).forEach(([classId, subjectIds]) => {
                                $($(".load-class-subject-class-data")[i]).val(classId).trigger(
                                    "change");
                                $($(".load-class-subject-subject-data")[i]).val(subjectIds);
                                i++;
                                subjectIds.forEach(subjectId => {
                                    console.log(`Subject ID: ${subjectId}`);
                                });
                            });


                        }

                        // step 5 end



                        // step 6 start

                        if (result.subject_list) {
                            updateDropdown($('.select-subject-with-class'), result.subject_list, true)
                        }
                        if (result.AcademicTeacherSetting && result.AcademicTeacherSetting.length > 0) {
                            for (let index = 0; index < result.AcademicTeacherSetting.length -
                                1; index++) {
                                const element = result.AcademicTeacherSetting[index];
                                $(".subject-teacher-div").find(".add-class").click();
                            }
                            result.AcademicTeacherSetting.forEach((data, index) => {
                                $($(".load-subject-teacher-subject-data")[index]).val(data
                                    .subject_id).trigger('change');
                                $($(".load-subject-teacher-teacher-data")[index]).val(data
                                    .teacher_id);
                            });
                        }
                        // step 6 end




                    }
                })
            }


            function duplicate_and_remove_element(container, clone_element,
                remove_button_inner_html, remove_button_class_name, replace_remove_button_by_add_button =
                false,
                add_button_class_name = false, exam_id_value) {
                let parent = container;
                let child_of_parent = clone_element;
                let clone_of_child = child_of_parent.cloneNode(
                    true);
                if (replace_remove_button_by_add_button && add_button_class_name) {

                    clone_of_child.getElementsByClassName(add_button_class_name)[0].parentElement
                        .innerHTML =
                        remove_button_inner_html;
                    clone_of_child.getElementsByClassName(remove_button_class_name)[0].addEventListener(
                        "click",
                        (e) => {
                            let parentDiv = clone_of_child;
                            if (parentDiv) {
                                parentDiv.remove();
                            }
                        });

                } else {
                    var newDiv = document.createElement('div');

                    // Create the button element inside the new div
                    newDiv.innerHTML =
                        remove_button_inner_html;
                    newDiv.getElementsByClassName(remove_button_class_name)[0].addEventListener("click",
                        (e) => {
                            let parentDiv = clone_of_child;
                            if (parentDiv) {
                                parentDiv.remove();
                            }
                        });
                    clone_of_child.appendChild(newDiv);
                }
                // parent.appendChild(clone_of_child);
                parent.insertBefore(clone_of_child, parent.firstChild);
                return clone_of_child;
            }





            /**
             * Prevents duplicate option selection in select fields within a parent.
             *
             * @param {string} parent_class - Class of the parent container.
             * @param {string} select_class - Class of the select fields.
             *
             * Usage: setupDuplicateChecker('parent-class', 'select-class');
             */

            function setupDuplicateChecker(parent_class, select_class) {
                // Find all parents and iterate through each
                $("." + parent_class).each(function() {
                    let parent = $(this);

                    // Gather all selected values within this parent
                    let selectedValues = [];
                    parent.find("." + select_class).each(function() {
                        let val = $(this).val();
                        if (val) {
                            selectedValues.push(val); // Collect selected values
                        }
                    });

                    // Loop through all select elements within the parent to update their options
                    parent.find("." + select_class).each(function() {
                        let currentSelect = $(this);

                        // Enable/Disable options based on selected values
                        currentSelect.find('option').each(function() {
                            let optionValue = $(this).val();
                            // Disable the option if it is already selected in another select
                            if (selectedValues.includes(optionValue) && optionValue !==
                                currentSelect.val()) {
                                $(this).attr('disabled', true);
                            } else {
                                $(this).attr('disabled', false);
                            }
                        });
                    });
                });
            }


            // Initialize the previous selections and original options storage
            let previousSelections = [];
            let originalOptions = [];

            // function manageSelectOptions(parentClass, selectClass, currentSelect) {
            //     let parent = $(parentClass); // Reference to the parent container
            //     let selectedValue = currentSelect.val(); // The newly selected value
            //     let currentIndex = parent.find(selectClass).index(
            //         currentSelect); // Index of the current select element
            //     let prevValue = previousSelections[currentIndex]; // Previous value for this select element

            //     // Ignore if the selected value is '' or null
            //     if (!selectedValue) {
            //         previousSelections.splice(currentIndex, 1);
            //         originalOptions.splice(currentIndex, 1);
            //         return;
            //     }

            //     // If this is the first time, store the original options for each select element
            //     if (!originalOptions[currentIndex]) {
            //         originalOptions[currentIndex] = currentSelect.html(); // Store all options of the current select
            //     }

            //     // Re-add the previously selected option to other select elements within the same parent
            //     if (prevValue) {
            //         parent.find(selectClass).each(function(index) {
            //             if (index !== currentIndex) {
            //                 // Restore original options for this select element before making any changes
            //                 $(this).html(originalOptions[index]);

            //                 // Remove the currently selected option from this select element if it was previously selected
            //                 if (prevValue) {
            //                     if ($(this).find(`option[value="${prevValue}"]`)) {
            //                         $(this).find(`option[value="${prevValue}"]`).remove();
            //                     }

            //                 }
            //             }
            //         });
            //     }

            //     // Remove the newly selected option from other select elements within the same parent
            //     if (selectedValue) {
            //         parent.find(selectClass).each(function(index) {
            //             if (index !== currentIndex) {
            //                 if ($(this).find(`option[value="${selectedValue}"]`)) {
            //                     $(this).find(`option[value="${selectedValue}"]`)
            //                         .remove(); // Remove the selected option
            //                 }

            //             }
            //         });
            //     }

            //     // Update the previous selection for the current select element
            //     previousSelections[currentIndex] = selectedValue;
            // }







            // function manageSelectOptions(parentClass, selectClass, currentSelect) {
            //     let selectedValue = currentSelect.val();
            //     let parent_ele = $(currentSelect).closest(parentClass);
            //     let all_select_ele2 = $(parent_ele).find(selectClass);
            //     let select_ele = $(parent_ele).find(selectClass).not(currentSelect);
            //     if (originalOptions.length < 1) {
            //         originalOptions.push(currentSelect.html())
            //     }
            //     let all_select_ele = $(parent_ele).find(selectClass).toArray();
            //     let currentIndex = all_select_ele.indexOf($(currentSelect).get(
            //         0)); // Convert currentSelect to a DOM element

            //     let found_data = previousSelections.find(function(result) {
            //         return result == currentSelect.val()
            //     });

            //     if (selectedValue) {
            //         $(parentClass).find(selectClass).not(currentSelect).each(function() {
            //             console.log($(this).find(`option[value="${selectedValue}"]`), selectedValue);
            //             if ($(this).find(`option[value="${selectedValue}"]`)) {
            //                 $(this).find(`option[value="${selectedValue}"]`)
            //                     .remove(); // Remove the selected option
            //             }
            //         });
            //     }

            //     if (!found_data && currentSelect.val() !== '' && currentSelect.val()) {
            //         previousSelections[currentIndex] = (currentSelect.val())
            //     } else {
            //         let temp_vall = previousSelections[currentIndex];
            //         let temp_option = $(currentSelect).find(`option[value="${temp_vall}"]`)
            //         console.log(temp_option[0],temp_vall);
            //         $(parentClass).find(selectClass).each(function() {
            //             console.log($(this));

            //             $(this).append(temp_option[0]);
            //         });
            //         previousSelections.splice(currentIndex, 1);
            //     }

            //     if (select_ele.length == 0) {
            //         let c_vall = select_ele.val();
            //         select_ele.html(originalOptions[0]);
            //         select_ele.val(c_vall)
            //     }

            // }






            // this function will help to update the input field name attribute
            // function update_tag_name_to_array(elements, key) {
            //     let inputs = elements.querySelectorAll('select, input, textarea');
            //     inputs.forEach(function(input) {
            //         let name = input.getAttribute('name');
            //         if (name) {
            //             // Replace anything inside square brackets with the new key
            //             input.setAttribute('name', name.replace(/\[.*?\]/, `[${key}]`));

            //             // Update the id attribute
            //             let id = input.getAttribute('id');
            //             if (id) {
            //                 // Replace anything inside square brackets with the new key
            //                 input.setAttribute('id', id.replace(/\[.*?\]/, `[${key}]`));
            //             }

            //             // Update the for attribute in the label
            //             let label = input.closest('.col').querySelector('label[for]');
            //             if (label) {
            //                 label.setAttribute('for', label.getAttribute('for').replace(/\[.*?\]/,
            //                     `[${key}]`));
            //             }
            //         }
            //     });
            // }

            // function update_tag_name_to_array(elements, key) {
            //     let inputs = elements.querySelectorAll('select, input, textarea');

            //     inputs.forEach(function(input) {
            //         let name = input.getAttribute('name');
            //         if (name) {
            //             // Replace the first set of square brackets only, leaving the second [] intact
            //             input.setAttribute('name', name.replace(/\[(\d+)?\](?=\[\])/, `[${key}]`));

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

            //             // Update the 'for' attribute of the label if it exists
            //             let label = input.closest('.col')?.querySelector('label[for]');
            //             if (label) {
            //                 let forAttr = label.getAttribute('for');
            //                 if (forAttr) {
            //                     forAttr = forAttr.replace(/\[(\d+)?\](?=\[\])/, `[${key}]`);
            //                     label.setAttribute('for', forAttr);
            //                 }
            //             }
            //         }
            //     });
            // }

            function update_tag_name_to_array(elements, key) {
                let inputs = elements.querySelectorAll('select, input, textarea');

                inputs.forEach(function(input) {
                    let name = input.getAttribute('name');
                    if (name) {
                        // Replace the first set of square brackets (with any content inside) before an empty []
                        input.setAttribute(
                            'name',
                            name.replace(/\[(.*?)\](?=\[\])/, `[${key}]`)
                        );
                    }

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

                    // Update the 'for' attribute of the label if it exists
                    let label = input.closest('.col')?.querySelector('label[for]');
                    if (label) {
                        let forAttr = label.getAttribute('for');
                        if (forAttr) {
                            forAttr = forAttr.replace(/\[(.*?)\](?=\[\])/, `[${key}]`);
                            label.setAttribute('for', forAttr);
                        }
                    }
                });
            }



            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