@extends('layouts.master')

@section('title', __('core.my_profile'))
@section('content_title', __('core.my_profile'))

@section('content_taskbar')
    <li class="nav-item">
        <a href="{{ route('users.create') }}" class="nav-link" id="add">
            <i class="nav-link-icon pe-7s-plus"></i>
            <span>{{ __('core.add') }}</span>
        </a>
    </li>
@endsection

@section('main_content')

    <div class="main-card" id="main-content">

        @include('userportal::user_portal.user_data')


    </div>
@endsection


@push('script')
    <script>
        $(document).ready(function() {
            // this is a update form of modal loading
            window.localStorage.setItem("tab", $('a[data-bs-toggle="tab"].active').attr('href'));
            $(document).on("click", '[data-bs-toggle="tab"]', function() {
                var target = $(this).attr('href');
                window.localStorage.setItem("tab", target);
            });
            $($('.modal-triger').attr('data-bs-target')).find(".modal-dialog").html('');
            $(document).on("click", ".modal-triger", function(e) {
                e.preventDefault(); // Prevent default anchor behavior

                let modal_selector = $(this).attr("data-bs-target");
                let modal = $(modal_selector);
                modal.modal('hide');
                // Load new content dynamically
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    beforeSend: function() {
                        // Show a loading indicator inside the modal (optional)
                        modal.find(".modal-dialog").html(
                            '<div class="text-center p-4">Loading...</div>');
                    },
                    success: function(response) {
                        // Replace modal content
                        modal.html(response);

                        // Open the modal AFTER content is fully loaded
                    },
                    error: function() {
                        alert('Something went wrong. Please try again.');
                    }
                });

                modal.modal('show');



            });



            $(document).on('submit', 'form#edit_form', function(e) {
                e.preventDefault();
                var form = this;
                var formData = new FormData(form);

                // Disable submit button to prevent double submission
                $(form).find('button[type="submit"]').attr('disabled', true);

                $.ajax({
                    method: $(form).attr('method'),
                    url: $(form).attr('action'),
                    data: formData,
                    contentType: false, // Needed for file upload
                    processData: false, // Needed for file upload
                    dataType: "json",
                    success: function(result) {
                        if (result.success == true) {
                            $("#edit_form").parent().closest('.modal').modal("hide");
                            toastr.success(result.msg);
                            loadData()
                        } else {
                            toastr.error(result.msg);
                            if (result.details) {
                                if (result.details.exam_name) {
                                    document.getElementById("exam_name_msg").innerText = result
                                        .details.exam_name[0];
                                } else {
                                    document.getElementById("exam_name_msg").innerText = '';
                                }
                            }
                        }
                    },
                    error: function(response) {
                        // Clear previous error messages
                        $("#edit_form").find('.text-danger').remove();

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

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

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





            // load address
            $(document).on('change', '#present_country_id, #permanent_country_id', function() {
                let type = $(this).attr('id').includes('permanent') ? 'permanent' : 'present';
                $.ajax({
                    method: 'GET',
                    url: "{{ route('load_divisions') }}",
                    data: {
                        country_id: $(this).val()
                    },
                    success: function(response) {
                        $('#' + type + '_division_id').html(response.data);
                    }
                });
            });

            $(document).on('change', '#present_division_id, #permanent_division_id', function() {
                let type = $(this).attr('id').includes('permanent') ? 'permanent' : 'present';
                $.ajax({
                    method: 'GET',
                    url: "{{ route('load_districts') }}",
                    data: {
                        division_id: $(this).val()
                    },
                    success: function(response) {
                        $('#' + type + '_district_id').html(response.data);
                    }
                });
            });

            $(document).on('change', '#present_district_id, #permanent_district_id', function() {
                let type = $(this).attr('id').includes('permanent') ? 'permanent' : 'present';
                $.ajax({
                    method: 'GET',
                    url: "{{ route('load_upazila_thanas') }}",
                    data: {
                        district_id: $(this).val()
                    },
                    success: function(response) {
                        $('#' + type + '_upazila_thana_id').html(response.data);
                    }
                });
            });


            // edit student profile

            $(document).on('change', '#academic_year_id', function() {
                academicYearId = $(this).val();
                loadAcademicClass(businessId, academicYearId);
            });

            $(document).on('change', '#academic_class_id', function() {
                loadAcademicSection(businessId, academicYearId, $(this).val());
                loadAcademicGroup(businessId, academicYearId, $(this).val());
                loadAcademicShift(businessId, academicYearId, $(this).val());
            })


            // Load data
            function loadData() {
                $.ajax({
                    method: 'post',
                    url: "{{ route('user_portal.index') }}",
                    data: null,
                    success: function(response) {


                        // Replace the table body with the new data
                        $('#main-content').html(response.homeData);
                        let storedTab = window.localStorage.getItem("tab");
                        if (storedTab) {
                            let $tab = $('#main-content').find('a[data-bs-toggle="tab"][href="' +
                                storedTab + '"]');
                            if ($tab.length) {
                                let tab = new bootstrap.Tab($tab[0]);
                                tab.show(); // Properly activate the tab
                            }
                        }




                    },
                    error: function(response) {}
                });
            }


            // Initial load
            loadData();



        });
    </script>
@endpush