@extends('layouts.app')

@section('title', __('academic.add_subject_settings'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>{{ __('academic.add_subject_settings') }} </h1>
    </section>

    <!-- Main content -->
    <section class="content">
        {!! html()->form('POST', route('subject_settings.store'))->id('subject_settings_form')->open() !!}

        <div class="row">
            <div class="col-md-12" id="add_subject_settings">
                @component('components.widget', ['title' => __('academic.add_subject_settings')])
                    <div class="subject_settings_form_container " style="width: 100%;">
                        <div class="single_subject_settings_form" style="display: flex; margin-bottom: 3rem;">
                            <div class="group_section_class_filter">
                                <div class="col-md-12">
                                    <div class="form-group" style="text-align: right">
                                        {!! html()->checkbox('status[0]', true)->id('status')->class('input-icheck status') !!}
                                        {!! html()->label('Status', 'status') !!}
                                        @show_tooltip(__('core.tooltip_enable_user_active'))
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" style="width: 100% !important">
                                        {!! html()->label(__('academic.select_academic_class') . ':', 'academic_class_id[0]') !!}
                                        <div class="input-group">
                                            {!! html()->select('academic_class_id[0]', $academic_classes)->class('form-control academic_class_id')->required()->id('academic_class_id[0]')->value(old('academic_class_id[0]')) !!}
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default bg-white btn-flat btn-modal"
                                                    data-href="{{ route('academic_classes.create') }}"
                                                    data-container=".academic_class_modal"><i
                                                        class="fa fa-plus-circle text-primary fa-lg"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" style="width: 100% !important">
                                        {!! html()->label(__('academic.select_group') . ':', 'group[0]') !!}
                                        <div class="input-group">
                                            {!! html()->select('group_id[0]', 'Please Select')->class('form-control group_id')->id('group_id[0]')->value(old('group_id'))->attribute('disabled', true) !!}
                                            <span class="input-group-btn">
                                                <button type="button" disabled id="group_create_btn"
                                                    class="btn btn-default bg-white btn-flat btn-modal group_create_btn"
                                                    data-href="{{ route('academic_groups.create') }}"
                                                    data-container=".group_modal"><i
                                                        class="fa fa-plus-circle text-primary fa-lg"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" style="width: 100% !important">
                                        {!! html()->label(__('academic.select_section') . ':', 'section_id[0]') !!}
                                        <div class="input-group">
                                            {!! html()->select('section_id[0]', 'Please Select')->class('form-control section_id')->id('section_id[0]')->value(old('section_id[0]'))->attribute('disabled', true) !!}
                                            <span class="input-group-btn">
                                                <button type="button" disabled id="section_create_btn"
                                                    class="btn btn-default bg-white btn-flat btn-modal section_create_btn"
                                                    data-href="{{ route('academic_sections.create') }}"
                                                    data-container=".section_modal"><i
                                                        class="fa fa-plus-circle text-primary fa-lg"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" style="width: 100% !important">
                                        {!! html()->label(__('academic.select_subject') . ':', 'subject_id[0]') !!}
                                        <div class="input-group">
                                            {!! html()->select('subject_id[0]', $subjects)->class('form-control subject_id')->id('subject_id[0]')->required()->value(old('subject_id[0]')) !!}
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default bg-white btn-flat btn-modal "
                                                    data-href="{{ route('academic_subjects.create') }}"
                                                    data-container=".subject_modal"><i
                                                        class="fa fa-plus-circle text-primary fa-lg"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" style="width: 100% !important">
                                        {!! html()->label(__('academic.student_payment') . ':', 'student_payment[0]') !!}
                                        {!! html()->number('student_payment[0]')->class('form-control student_payment')->id('student_payment[0]')->value(old('student_payment[0]')) !!}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group" style="width: 100% !important">
                                        {!! html()->label(__('academic.teacher_salary') . ':', 'teacher_salary[0]') !!}
                                        {!! html()->number('teacher_salary[0]')->class('form-control teacher_salary')->id('teacher_salary[0]')->value(old('teacher_salary[0]')) !!}
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        {!! html()->label(__('core.note') . ':', 'note[0]') !!}
                                        {!! html()->textarea('note[0]')->class('form-control')->id('note[0]')->value(old('note[0]')) !!}
                                    </div>

                                </div>
                            </div>
                            <div class="action-button-container"
                                style="display: flex;flex-direction: column; justify-content: center;">
                                <button type="button" class="btn btn-primary duplicate-row"
                                    style="margin-bottom: 1rem;width: fit-content !important; height: fit-content !important;">
                                    Duplicate row
                                </button>
                                {{-- <button type="button" class="btn btn-danger btn-remove remove-subject-settings-duplicate-element">Remove</button> --}}
                            </div>
                        </div>
                    </div>
                @endcomponent
            </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    {!! html()->button(__('messages.save'), 'submit')->class('btn btn-primary btn-big') !!}
                </div>
            </div>
            {!! html()->form()->close() !!}


    </section>
    <div class="modal fade academic_class_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade group_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade section_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade subject_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
@stop

@section('javascript')
    <script type="text/javascript">
        __page_leave_confirmation('#user_form');
        $(document).ready(function() {

            change_group_section_by_class();
            let duplicate_times = 0;
            $(".duplicate-row").on("click", function(e) {
                console.log("clicked add-more-subject-teacher-form");
                let need_to_clone_element = (e.target.closest(".single_subject_settings_form"));
                let data = duplicate_and_remove_element("subject_settings_form_container",
                    "single_subject_settings_form", need_to_clone_element,
                    "remove-subject-settings-duplicate-element", "duplicate-row")
            })


            function duplicate_and_remove_element(container_class_name, need_to_clone_element_class_name,
                need_to_clone_element,
                remove_button_class_name, duplicate_button_class_name) {
                let parent = document.getElementsByClassName(container_class_name)[0];
                let child_of_parent = need_to_clone_element;
                let clone_of_child = child_of_parent.cloneNode(true);

                // Create the button element inside the new div
                if (!clone_of_child.getElementsByClassName(remove_button_class_name)[0]) {
                    let button = document.createElement("button");
                    button.type = "button";
                    button.className = "btn btn-danger " + remove_button_class_name;
                    button.innerHTML = "Remove";
                    button.addEventListener("click",
                        (e) => {
                            let parentDiv = e.target.closest(`.${need_to_clone_element_class_name}`);
                            if (parentDiv) {
                                parentDiv.remove();
                            }
                        });
                    clone_of_child.getElementsByClassName("action-button-container")[0].appendChild(button);
                } else {
                    let button = clone_of_child.getElementsByClassName(remove_button_class_name)[0];
                    button.addEventListener("click",
                        (e) => {
                            let parentDiv = e.target.closest(`.${need_to_clone_element_class_name}`);
                            if (parentDiv) {
                                parentDiv.remove();
                            }
                        });
                }

                clone_of_child.getElementsByClassName(duplicate_button_class_name)[0].addEventListener("click", (
                    e) => {
                    console.log("clicked add-more-subject-teacher-form");
                    let need_to_clone_element = (e.target.closest(".single_subject_settings_form"));
                    let data = duplicate_and_remove_element("subject_settings_form_container",
                        "single_subject_settings_form", need_to_clone_element,
                        "remove-subject-settings-duplicate-element", "duplicate-row")
                });
                parent.appendChild(clone_of_child);
                update_tag_after_duplicate(need_to_clone_element, clone_of_child);
                return clone_of_child;
            }

            function update_tag_after_duplicate(original_element, cloned_element) {
                let selects = original_element.querySelectorAll('select');
                let clone_selects = cloned_element.querySelectorAll("select");
                selects.forEach(function(select, index) {
                    clone_selects[index].value = select.value

                });
                let inputs = cloned_element.querySelectorAll('select, input, textarea');
                inputs.forEach(function(input) {
                    let name = input.getAttribute('name');
                    if (name) {
                        input.setAttribute('name', name.replace(/\[\d+\]/, `[${duplicate_times+1}]`));

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

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

                });
                change_group_section_by_class();
                duplicate_times++;

            }

            function change_group_section_by_class() {
                $(".academic_class_id").on("change", function(e) {
                    let class_id;
                    if (e.target.value) {
                        class_id = Number(e.target.value);
                        let no_group_text = "This class has no group";
                        let no_section_text = "This class has no group";
                        let parent = e.target.closest(".group_section_class_filter");
                        let group_id = parent.getElementsByClassName("group_id")[0];
                        let group_create_btn = parent.getElementsByClassName("group_create_btn")[0];
                        let section_id = parent.getElementsByClassName("section_id")[0];
                        let section_create_btn = parent.getElementsByClassName("section_create_btn")[0];
                        $.ajax({
                            method: "GET",
                            url: `/academic-class/has-group/${class_id}`,
                            success: function(result) {

                                if (result) {
                                    group_id.removeAttribute("disabled")
                                    group_create_btn.removeAttribute("disabled")
                                    change_group(group_id);
                                } else {
                                    group_id.setAttribute("disabled", true);
                                    group_create_btn.setAttribute("disabled", true);
                                }

                            }

                        })
                        $.ajax({
                            method: "GET",
                            url: `/academic-class/has-section/${class_id}`,
                            success: function(result) {

                                if (result) {
                                    section_id.removeAttribute("disabled")
                                    section_create_btn.removeAttribute("disabled")
                                    change_section(section_id);
                                } else {
                                    section_id.setAttribute("disabled", true);
                                    section_create_btn.setAttribute("disabled", true);
                                }

                            }

                        })
                    }
                })
            }

        })

        function removeOptionByText(select_tag, text) {
            $(select_tag + ' option:contains("' + text + '")').remove();
        }

        function removeOptionByNotText(select_tag, text) {
            $(select_tag + " option").not(':contains("' + text + '")').remove();
        }

        function change_group(group_input) {
            $.ajax({
                method: "GET",
                url: "{{ route('academic_groups.get_updated_dropdown') }}",
                async: true,
                success: function(result) {
                    updateDropdown($(group_input), result, false);
                }
            })
        }

        function change_section(section_input) {
            $.ajax({
                method: "GET",
                url: "{{ route('academic_sections.get_updated_dropdown') }}",
                async: true,
                success: function(result) {
                    updateDropdown($(section_input), result, false);
                }
            })
        }






        $(document).on("change", "#min_age", function(e) {
            document.getElementById("max_age").setAttribute("value", Number(e.target.value) + 1);
            document.getElementById("max_age").setAttribute("min", Number(e.target.value) + 1);
        })

        $(document).on("change", "#max_age", function(e) {
            let min_age = document.getElementById("min_age");
            if (min_age && min_age.value + 1 <= e.target.value) {
                min_age.setAttribute("value", Number(e.target.value) - 1);
                min_age.setAttribute("max", Number(e.target.value) - 1);
            } else {
                min_age.setAttribute("max", Number(e.target.value) - 1);
            }
        })




        //date filter for expense table
        $(document).ready(function() {
            var moment_date_format = 'MM/DD/YYYY'; // adjust the date format as needed

            if ($('#dob').length == 1) {
                $('#dob').daterangepicker({
                    singleDatePicker: true,
                    locale: {
                        format: moment_date_format,
                        cancelLabel: 'Clear'
                    }
                });

                $('#dob').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format(moment_date_format));
                });

                $('#dob').on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');
                });
            }
        });




        $(document).on('submit', 'form#subject_settings_form', function(e) {
            e.preventDefault();
            var $form = $(this);
            $(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(result) {
                    if (result.success == true) {

                        toastr.success(result.msg);
                        window.location.href = "{{ route('subject_settings.index') }}";
                    } else {
                        toastr.error(result.msg);
                    }
                },
                error: function(response) {
                    // Clear previous error messages
                    $form.find('.text-danger').remove();
                    if (response.status === 422) {
                        // Validation errors
                        console.log('inside');
                        var errors = response.responseJSON.errors;
                        console.log(errors);
                        for (var field in errors) {
                            // Find the input field and add the error message
                            var $input = $('[name="' + field + '"]');
                            console.log($input);
                            $input.after('<span class="text-danger">' + errors[field][0] + '</span>');
                        }
                    } else {
                        toastr.error('An unexpected error occurred.');
                    }

                    // Re-enable submit button
                    $form.find('button[type="submit"]').attr('disabled', false);
                }
            });
        });


        $(document).on('submit', 'form#academic_class_form', 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(result) {
                    if (result.success == true) {
                        refreshAcademicClassDropdown()
                        $('div.academic_class_modal').modal('hide');
                        toastr.success(result.msg);
                        // academic_class_table.ajax.reload();
                    } else {
                        toastr.error(result.msg);
                        if (result.details) {
                            if (result.details.academic_class) {
                                document.getElementById("academic_class_msg").innerText =
                                    result.details.academic_class[0]
                            } else {
                                document.getElementById("academic_class_msg").innerText =
                                    '';
                            }
                            if (result.details.numeric_name) {
                                document.getElementById("numeric_name_msg").innerText =
                                    result.details.numeric_name[0]
                            } else {
                                document.getElementById("numeric_name_msg").innerText = ""
                            }
                            if (result.details.previous_class_dependency) {
                                document.getElementById("previous_class_dependency_msg")
                                    .innerText = result.details.previous_class_dependency[0]
                            } else {
                                document.getElementById("previous_class_dependency_msg")
                                    .innerText = '';
                            }
                        }
                    }
                }
            });
        });


        $(document).on('submit', 'form#group_form', 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(result) {
                    if (result.success == true) {
                        $('div.group_modal').modal('hide');
                        toastr.success(result.msg);
                        refreshGroupDropdown();
                    } else {
                        toastr.error(result.msg);
                        if (result.details) {
                            if (result.details.group_name) {
                                document.getElementById("group_name_msg").innerText = result
                                    .details.group_name;
                            } else {
                                document.getElementById("group_name_msg").innerText = '';
                            }
                        }
                    }
                }
            });
        });

        $(document).on('submit', 'form#section_form', 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(result) {
                    if (result.success == true) {
                        $('div.section_modal').modal('hide');
                        toastr.success(result.msg);
                        refreshSectionDropdown()
                    } else {
                        toastr.error(result.msg);
                        if (result.details) {
                            if (result.details.section_name) {
                                document.getElementById("section_name_msg").innerText =
                                    result.details.section_name[0];
                            } else {
                                document.getElementById("section_name_msg").innerText = '';

                            }
                        }
                    }
                }
            });
        });

        $(document).on('submit', 'form#subject_form', 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(result) {
                    if (result.success == true) {
                        $('div.subject_modal').modal('hide');
                        toastr.success(result.msg);
                        refreshSubjectDropdown();
                        // group_table.ajax.reload();
                    } else {
                        toastr.error(result.msg);
                        if (result.details) {
                            if (result.details.subject) {
                                document.getElementById("subject_msg").innerText =
                                    result.details.subject[0];
                            } else {
                                document.getElementById("subject_msg").innerText = '';

                            }
                            if (result.details.subject_code) {
                                document.getElementById("subject_code_msg").innerText =
                                    result.details.subject_code[0];
                            } else {
                                document.getElementById("subject_code_msg").innerText = '';

                            }
                        }
                    }
                }
            });
        });


        function refreshAcademicClassDropdown() {
            $.ajax({
                method: "GET",
                url: "{{ route('academic_classes.get_updated_class_dropdown') }}",
                async: true,
                success: function(result) {
                    updateDropdown($(".academic_class_id"), result, false);
                }
            })
        }

        function refreshGroupDropdown() {
            $.ajax({
                method: "GET",
                url: "{{ route('academic_groups.get_updated_dropdown') }}",
                success: function(result) {
                    updateDropdown($(".group_id"), result, false);
                }
            })
        }

        function refreshSubjectDropdown() {
            $.ajax({
                method: "GET",
                url: "{{ route('academic_subjects.get_updated_dropdown') }}",
                success: function(result) {
                    updateDropdown($(".subject_id"), result, false);
                }
            })
        }

        function refreshSectionDropdown() {
            $.ajax({
                method: "GET",
                url: "{{ route('academic_sections.get_updated_dropdown') }}",
                success: function(result) {
                    updateDropdown($(".section_id"), result, false);
                }
            })
        }





        function refreshAddressDropdowns() {
            $.ajax({
                url: "{{ action([\App\Http\Controllers\AddressController::class, 'getUpdatedDropdown']) }}", //Adjust the URL to your actual endpoint
                method: "GET",
                dataType: "json",
                success: function(data) {
                    updateDropdown($('#permanent_address_id'), data, false);
                    updateDropdown($('#present_address_id'), data, false);
                }
            });
        }

        function refreshReligionDropdowns() {
            $.ajax({
                url: "{{ route('religions.get_updated_dropdown') }}",
                // Adjust the URL to your actual endpoint
                method: "GET",
                dataType: "json",
                success: function(data) {
                    updateDropdown($('#religion_id'), data, true);
                }
            });
        }

        function refreshNationalityDropdowns() {
            $.ajax({
                url: "{{ route('nationalities.get_updated_dropdown') }}",
                // Adjust the URL to  your actual endpoint
                method: "GET",
                dataType: "json",
                success: function(data) {
                    updateDropdown($('#nationality_id'), data, true);
                }
            });
        }

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

            // 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:last').prop('selected', true);
            }
        }
    </script>
@endsection