@extends('layouts.student_layout')

@section('content')
<div class="row">
    <div class="col-12">
        <!-- SmartWizard html -->
        <div id="smartwizard">
            <ul class="nav">
                {{-- <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-1">
                        <div class="num">1</div>
                        Step
                    </a>
                </li> --}}
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-1">
                        <span class="num">1</span>
                        Step
                    </a>
                </li>
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button" href="#step-2">
                        <span class="num">2</span>
                        Step
                    </a>
                </li>
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button " href="#step-3">
                        <span class="num">3</span>
                        Step
                    </a>
                </li>
                <li class="nav-item mb-0">
                    <a class="nav-link apply-now-stepper-button " href="#step-4">
                        <span class="num">4</span>
                        Step
                    </a>
                </li>
            </ul>

            <div class="tab-content px-3 py-4 bg-white">
                <!-- Step 1: Educational Background -->
                <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                    <div class="col-12 mb-4">
                        <button type="button" class="btn btn-primary btn-sm" id="openEducationModal"><i class="fa fa-plus"></i> Add Education Detail</button>
                    </div>
                    <form action="" id="education_application_details_form">
                        @csrf

                        <x-student.education-detail-card :educationDetails="$educationDetails" />
                        
                        <div class="text-center mt-4">
                            @if($educationDetails->count() > 0)
                                @if ($latest_application_status == 'INITIATED')
                                    <button type="button" class="btn btn-primary btn-next"><i class="fa fa-send"></i> Complete Application Process</button>
                                @elseif (!in_array($latest_application_status , ['PENDING','DISCRIPENCY_FOUND','DISCRIPENCY_REMOVED']))
                                    <button type="button" class="btn btn-primary btn-next"><i class="fa fa-send"></i> Start Application Process</button>
                                @elseif ($is_completed)
                                    <button type="button" class="btn btn-primary btn-next"><i class="fa fa-send"></i> Start Application Process</button>
                                @endif
                            @endif
                        </div>
                    </form>
                </div>

                <!-- Step 2: Course Selection -->
                <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                    <form action="" id="course_selection_form">
                        @csrf
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Course Selection</h2>
                                <p class="step-subtitle">Choose your preferred training program</p>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Select Training Program <span class="text-danger">*</span></label>
                                <div class="program-options">


                                    @if($trainingPrograms->count() > 0)
                                    @foreach ($trainingPrograms as $trainingProgram)



                                    {{-- {{ dd($student_details->courseSelectionDetail) }} --}}

                                    <label class="program-option">
                                        <input type="radio" class="training_program_id" name="training_program" value="{{ $trainingProgram->id }}" {{ isset($student_details->courseSelectionDetail) && isset($student_details->courseSelectionDetail->training_program_id) == $trainingProgram->id ? 'checked' : '' }} required>
                                        <div class="program-card-option">
                                            <div class="program-header">
                                                <h3 class="program-name">{{ $trainingProgram->title }}</h3>
                                                <div class="program-meta">
                                                    <span class="program-duration bg-success text-white">Duration: {{ $trainingProgram->total_hours }} hours</span>
                                                    <span class="program-type bg-info text-white">Type: {{ $trainingProgram->course_type_desc }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                    @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                           <button type="button" id="btn_back_step_two" class="btn btn-outline btn_go_back">Go Back</button>
                            <button type="button" id="btn_save_step_three" class="btn btn-primary btn-next"><i class="fa fa-send"></i> Save & Next</button>
                        </div>
                    </form>
                </div>

                <!-- Step 3: Training Center Selection -->
                <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                    <form action="" id="training_center_selection_form">
                        @csrf
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Training Center Selection</h2>
                                <p class="step-subtitle">Select your preferred training centers</p>
                            </div>

                            <!-- Filter -->
                            <div class="row mb-3">
                                <div class="col-md-4 col-12">
                                    <label for="state_filter" class="form-label">Filter by State</label>
                                    <select name="state_filter" id="state_filter" class="form-input form-control">
                                        <option value="">Select</option>
                                        @foreach ($states as $state)
                                        <option value="{{ $state->state_code }}" {{ $personalDetails && $personalDetails->state == $state->state_code ? 'selected' : '' }}>{{ $state->state_name_en }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 col-12">
                                    <label for="district_filter" class="form-label">Filter by District</label>
                                    <select name="district_filter" id="district_filter" class="form-input form-control">
                                        <option value="">Select</option>
                                    </select>
                                </div>
                            </div>

                            <div class="training-centers" id="trainingCentresContainer">
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <!-- <button type="button" id="btn_back_step_three" class="btn btn-outline btn_go_back btn_go_back">Go Back</button>
                            <button type="submit" id="btn_save_step_four" class="btn btn-primary"><i class="fa fa-send"></i> Save & Next</button> -->
                            <button type="button" id="btn_back_step_three" class="btn btn-outline btn_go_back btn_go_back">Go Back</button>
                            <button type="button" id="btn_save_step_four" class="btn btn-primary btn-next"><i class="fa fa-send"></i> Save & Next</button>
                        </div>
                    </form>
                </div>

                <!-- Step 4: Document Upload -->
                <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                    <form action="" id="document_upload_form">
                        @csrf
                        <div class="mb-3">


                            {{-- {{ dd($student_details) }} --}}
                            <div class="step-header">
                                <h2 class="step-title">Document Upload</h2>
                                <p class="step-subtitle">Upload required documents (optional for now)</p>
                            </div>

                            <div class="upload-grid">
                                <div class="upload-group">
                                    <label for="photo" class="upload-label">Passport Size Photograph <span class="text-danger">*</span></label>
                                    <div class="upload-area" data-upload="photo">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <span class="upload-text">Click to upload or drag and drop</span>
                                        <input type="file" id="photo" name="photo" accept=".jpg,.jpeg,.png" class="upload-input">
                                    </div>
                                    <div>
                                        <span class="text-danger text-sm">Max size 500KB, Accept only .jpg,.jpeg,.png.</span>
                                    </div>
                                    @if(isset($student_details->uploadDetail) && $student_details->uploadDetail->photo_full_path)
                                    <div class="upload-preview mt-2">
                                        <a href="{{ $student_details->uploadDetail->photo_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                    </div>
                                    @endif
                                </div>

                                <div class="upload-group">
                                    <label for="address_proof" class="upload-label">Address Proof <span class="text-danger">*</span></label>
                                    <div class="upload-area" data-upload="address_proof">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <span class="upload-text">Click to upload or drag and drop</span>
                                        <input type="file" id="address_proof" name="address_proof" accept=".pdf,.jpg,.jpeg,.png" class="upload-input">
                                    </div>
                                    <div>
                                        <span class="text-danger text-sm">Max size 2MB, Accept only .pdf, .jpg,.jpeg,.png.</span>
                                    </div>
                                    @if(isset($student_details->uploadDetail) && $student_details->uploadDetail->address_proof_full_path)
                                    <div class="upload-preview mt-2">
                                        <a href="{{ $student_details->uploadDetail->address_proof_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                    </div>
                                    @endif
                                </div>

                                <div class="upload-group">
                                    <label for="experience_certificate" class="upload-label">Experience Certificate</label>
                                    <div class="upload-area" data-upload="experience_certificate">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <span class="upload-text">Click to upload or drag and drop</span>
                                        <input type="file" id="experience_certificate" name="experience_certificate" accept=".pdf" class="upload-input">
                                    </div>
                                    <div>
                                        <span class="text-danger text-sm">Max size 2MB, Accept only .pdf.</span>
                                    </div>
                                    @if(isset($student_details->uploadDetail) && $student_details->uploadDetail->medical_certificate_full_path)
                                    <div class="upload-preview mt-2">
                                        <a href="{{ $student_details->uploadDetail->medical_certificate_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                    </div>
                                    @endif
                                </div>

                                <div class="upload-group">
                                    <label for="medical_certificate" class="upload-label">Medical Certificate</label>
                                    <div class="upload-area" data-upload="medical_certificate">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <span class="upload-text">Click to upload or drag and drop</span>
                                        <input type="file" id="medical_certificate" name="medical_certificate" accept=".pdf,.jpg,.png" class="upload-input">
                                    </div>
                                    <div>
                                        <span class="text-danger text-sm">Max size 2MB, Accept only .pdf.</span>
                                    </div>
                                    @if(isset($student_details->uploadDetail) && $student_details->uploadDetail->medical_certificate_full_path)
                                    <div class="upload-preview mt-2">
                                        <a href="{{ $student_details->uploadDetail->medical_certificate_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <div class="document-requirements">
                                <h3 class="requirements-title">Document Requirements:</h3>
                                <ul class="requirements-list">
                                    <li>All documents must be in PDF, JPG, or PNG format</li>
                                    <li>Maximum file size: 5MB per document</li>
                                    <li>Documents must be clear and legible</li>
                                    <li>You can upload multiple files for each document type</li>
                                    <li>Photographs must be recent (taken within the last 6 months)</li>
                                </ul>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <!-- <button type="button" id="btn_back_step_four" class="btn btn-outline btn_go_back btn_go_back">Go Back</button>
                            <button type="submit" id="btn_save_final_submit" class="btn btn-primary"><i class="fa fa-send"></i> Save & Preview</button> -->
                            <button type="button" id="btn_back_step_four" class="btn btn-outline btn_go_back btn_go_back">Go Back</button>
                            <button  id="btn_save_final_submit" class="btn btn-primary"><i class="fa fa-send"></i> Save & Preview</a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Include optional progressbar HTML -->
            <div class="progress">
                <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<x-student.add-education-detail-modal :qualifications="$qualifications" />
<x-student.edit-application-education-detail-modal :qualifications="$qualifications"  />
@endsection

@section('pages-scripts')
@yield('add-education-details-modal-script')
@yield('edit-application-education-details-modal-script')

<script>
    let allTrainingCentres = [];
    $(document).ready(function() {
        $(function() {
            // SmartWizard initialize
            $('#smartwizard').smartWizard({
                theme: "arrows",
                autoAdjustHeight: false, // Automatically adjust content height
                toolbar: {
                    position: 'bottom', // none|top|bottom|both
                    showNextButton: false, // show/hide a Next button
                    showPreviousButton: false, // show/hide a Previous button
                },
            });
            const student_application_id = "{{ $student_application_id }}";

            if (student_application_id != '') {
                const url = new URL(window.location.href);
                const params = url.searchParams;

                if (params.size < 1) {
                    params.append('id', "{{$student_application_id}}")
                    window.history.pushState({}, '', url.toString());
                } else {
                    params.append('id', "{{$student_application_id}}")
                }
            }

        });

        $('#smartwizard').on("showStep", function(e, anchorObject, stepIndex, stepDirection) {
            // When moving into Step 3 (0-based index: step 0 = step-1, 1 = step-2, etc.)
            if (stepIndex === 2) { 
                const checkedProgram = $('input[name="training_program"]:checked').val();

                if (checkedProgram) {
                    console.log("Fetching training centres for Program ID:", checkedProgram);
                    fetchTrainingCentreFromProgram(checkedProgram);
                } else {
                    console.warn("No training program selected yet.");
                    $('#trainingCentresContainer').html('<p class="text-danger">Please go back and select a training program first.</p>');
                }
            }
        });

        // Check if address state is selected
        if ($('#address_state').val()) {
            getDistrictsByState($('#address_state').val(), 'address_district', $('#hidden_address_district').val());
        }

        if ($('#state_filter').val()) {
            getDistrictsByState($('#state_filter').val(), 'district_filter', $('#hidden_address_district').val());
        }

        // fetchTrainingCentreFromProgram(programId);
    })

    $(document).on('click', '.btn_go_back', function() {
        // Navigate next
        $('#smartwizard').smartWizard("prev");
    })

   
    $(document).on('click', '.btn-next', function() {
        // Optionally trigger form submit if inside a form
        let form = $(this).closest("form");
        if (form.length) {
            form.submit(); // this will trigger jQuery Validate
        } else {
            $('#smartwizard').smartWizard("next");
        }
    });

    $(document).on('click', '#address_state', function() {
        let stateCode = $(this).val();
        getDistrictsByState(stateCode, 'address_district', '');
    })

    $(document).on('click', '#state_filter', function() {
        let stateCode = $(this).val();
        getDistrictsByState(stateCode, 'district_filter', '');
    })

    function fetchTrainingCentreFromProgram(trainingProgramId) {
        $.ajax({
            url: `${baseUrl}/student-registration/training-centres/fetch-from-program?program_id=${trainingProgramId}`,
            type: "GET",
            success: function(response) {
                if (response.success === true) {

                    allTrainingCentres = response.data;        // Store all centres
                    displayTrainingCentre(allTrainingCentres); // Show full list
                    populateDistricts(allTrainingCentres);     // Load districts
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                $('#trainingCentresContainer').html('<p class="text-danger">Error loading training centre.</p>');
            },
        });
    }

    function displayTrainingCentre(trainingCentres) {
        if (trainingCentres.length <= 0) {
            $('#trainingCentresContainer').html('<p class="text-danger text-center">No training centre available for the selected course.</p>');
            return;
        }

        let html = '';
        trainingCentres.forEach((trainingCentre, index) => {
            let facilities = '';
            trainingCentre.center_applications.facilities_mapping.forEach((facilityMapping, index) => {
                facilities += `<span class="feature bg-info text-white">${facilityMapping.facility.name}</span>`;
            })
            html += `
                <label class="center-option">
                <input type="radio" name="centre_applications" value="${trainingCentre.center_applications.id}" required />
                <div class="center-card">
                    <div class="center-header">
                        <h3 class="center-name">${trainingCentre.center_applications.basic_information.centre_name}</h3>
                    </div>
                    <div class="center-address">${trainingCentre.center_applications.basic_information.address.address}</div>
                    <div class="center-features">
                        ${facilities}
                    </div>
                </div>
            </label>
            `;
        })

        $('#trainingCentresContainer').html(html);
    }

    $('#personal_details_form').validate({
        rules: {
            full_name: "required",
            // lastName: "required",
            email: {
                required: true,
                email: true
            },
            phone: "required",
            dob: "required",
            gender: "required",
            address: "required",
            state: "required",
            district: "required",
            city: "required",
            pincode: {
                required: true,
                digits: true,
                minlength: 6,
                maxlength: 6
            },
            emergencyName: "required",
            emergencyPhone: "required",
            relationship: "required"
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('student.personal-details.store') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success === true) {
                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then(() => {
                            // Navigate next
                            $('#smartwizard').smartWizard("next");
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().join("<br>");
                        Swal.fire({
                            title: "Validation Error",
                            html: errorMessages,
                            icon: "error"
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                }
            });
        }
    });

    $('#course_selection_form').validate({
        rules: {
            training_program: "required",
        },
        submitHandler: function(form) {

            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('student.course-details.store', ['id'=>$student_application_id]) }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success === true) {
                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then(() => {
                            // Navigate next

                            $('#smartwizard').smartWizard("next");
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().join("<br>");
                        Swal.fire({
                            title: "Validation Error",
                            html: errorMessages,
                            icon: "error"
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                }
            });
        }
    });

    $('#training_center_selection_form').validate({
        rules: {
            centre_applications: {
                required: true,
            }
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "centre_applications") {
                error.insertAfter(".training-centers");
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('student.training-centre-selection.store', ['id'=>$student_application_id]) }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success === true) {
                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then(() => {
                            // Navigate next
                            $('#smartwizard').smartWizard("next");
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().join("<br>");
                        Swal.fire({
                            title: "Validation Error",
                            html: errorMessages,
                            icon: "error"
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                }
            });
        }
    });

    $('#document_upload_form').validate({
        rules: {
            photo: "required",
            address_proof: "required"
        },
        messages: {
            photo: "Please upload your photograph.",
            address_proof: "Please upload Aadhaar card."
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('student.student-document-upload.store', ['id'=>$student_application_id]) }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success === true) {
                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then(() => {
                            window.location.href = response.redirect_url;
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: response.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().join("<br>");
                        Swal.fire({
                            title: "Validation Error",
                            html: errorMessages,
                            icon: "error"
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                }
            });
        }
    });



    $(document).ready(function() {
        $(".upload-area").each(function() {
            const $area = $(this);
            const $input = $area.find(".upload-input");

            // Prevent recursion when input itself is clicked
            $input.on("click", function(e) {
                e.stopPropagation();
            });

            // Click → open file picker
            $area.on("click", function() {
                $input[0].click(); // Use native click, not trigger()
            });

            // Drag over → highlight
            $area.on("dragover", function(e) {
                e.preventDefault();
                $area.addClass("dragover");
            });

            // Drag leave → remove highlight
            $area.on("dragleave", function() {
                $area.removeClass("dragover");
            });

            // Drop → assign file(s) to input
            $area.on("drop", function(e) {
                e.preventDefault();
                $area.removeClass("dragover");

                const files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    $input[0].files = files;

                    console.log("Dropped file:", files[0].name);

                    const $textSpan = $area.find(".upload-text");
                    if ($textSpan.length) {
                        $textSpan.text(files[0].name);
                    }
                }
            });

            // File selected via click → update text
            $input.on("change", function() {
                if (this.files.length > 0) {
                    const $textSpan = $area.find(".upload-text");
                    if ($textSpan.length) {
                        $textSpan.text(this.files[0].name);
                    }
                }
            });
        });
    });

    $('#education_application_details_form').validate({
        submitHandler: function(form) {
            let formData = new FormData(form);
            const latestStatus = "{{ $latest_application_status }}";
            const is_completed = {{ $is_completed ? 'true' : 'false' }};
            const apporvedStatus = {{ !in_array($latest_application_status , ['PENDING','DISCRIPENCY_FOUND','DISCRIPENCY_REMOVED']) ? 'true' : 'false' }};
            if (latestStatus === 'INITIATED') {
                $('#smartwizard').smartWizard("goToStep", "{{$step - 1}}");
            } else if (is_completed || apporvedStatus) {
                $.ajax({
                    url: "{{ route('student.education-details.store-student-application-id') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success === true) {
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success",
                                confirmButtonText: "OK"
                            }).then(() => {
                                $('#smartwizard').smartWizard("next");
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: response.message || "Something went wrong. Please try again.",
                                icon: "error"
                            });
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorMessages = Object.values(errors).flat().join("<br>");
                            Swal.fire({
                                title: "Validation Error",
                                html: errorMessages,
                                icon: "error"
                            });
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                                icon: "error"
                            });
                        }
                    }
                });
            }

        }
    });

    // On click open the education detail modal
    $(document).on('click', '#openEducationModal', function() {
        $('#educationDetailsModal').modal('show');
    });

    $(document).on('click', '#editEducationModal', function() {
        
        let educationId = $(this).data('id');
        $.ajax({
            url: `${baseUrl}/student/education-details/${educationId}/edit-details`,
            method: 'GET',
            success: function(response) {

                // console.log('AJAX response:', response);
                $('#edit_qualification').val(response.qualification_id);
                $('#edit_board').val(response.board || '');
                $('#edit_institution').val(response.institution || '');
                $('#edit_year').val(response.year || '');
                $('#edit_grade').val(response.grade || '');

                $('#edit_education_id').val(educationId);

                $('#editEducationDetailsModal').modal('show');
            },
            error: function(xhr) {
                let msg = xhr.responseJSON?.message || 'Error loading details.';
                Swal.fire('Error!', msg, 'error');
            }
            
        });
        
    });
    function applyFilters() {
        const selectedState = $('#state_filter').val();
        const selectedDistrict = $('#district_filter').val();

        let filtered = allTrainingCentres;

        if (selectedState) {
            filtered = filtered.filter(tc =>
                tc.center_applications.basic_information.address.state == selectedState
            );
        }

        if (selectedDistrict) {
            filtered = filtered.filter(tc =>
                tc.center_applications.basic_information.address.district == selectedDistrict
            );
        }

        displayTrainingCentre(filtered);
    }

    function populateDistricts(centres) {
        $('#district_filter').html('<option value="">Select</option>');

        const districtMap = new Map(); // ensures uniqueness by ID

        centres.forEach(tc => {
            const address = tc.center_applications.basic_information.address;
            const mapped = address.district_mapped;

            if (mapped && mapped.district_code) {
                districtMap.set(mapped.district_code, mapped.district_name_en);
            }
        });

        districtMap.forEach((name, id) => {
            $('#district_filter').append(`<option value="${id}">${name}</option>`);
        });
    }

    function updateDistrictDropdown() {
        const selectedState = $('#state_filter').val();

        let centresToUse = selectedState
            ? allTrainingCentres.filter(tc =>
                tc.center_applications.basic_information.address.state == selectedState
            )
            : allTrainingCentres;

        populateDistricts(centresToUse);
    }

    $('#state_filter').on('change', function () {
        updateDistrictDropdown(); // refresh districts based on selected state
        applyFilters();
    });

    $('#district_filter').on('change', function () {
        applyFilters();
    });

</script>
@endsection