@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>
            </ul>

            <div class="tab-content px-3 py-4 bg-white">

                {{-- <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">


                    @if (($scrutiny = $studentApplicationScrutinyDetails->firstWhere('student_application_scrutiny_list_id', 1)))

                        <div class="alert alert-danger d-flex align-items-center mb-3" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>
                                <strong>Discrepancy Found On:</strong><br>
                                <span id="discrepancy-details">
                                    {{ $scrutiny->remarks }}
                                </span>
                            </div>
                        </div>

                    @endif
                    

                    <form action="" id="personal_details_form">
                        @csrf
                        <div class="mb-3">
                            <div class="step-header">
                                <h2 class="step-title">Personal Information</h2>
                                <p class="step-subtitle">Please provide your basic personal details</p>
                            </div>

                            <div class="form-grid">
                                <div class="form-group">
                                    <label for="full_name" class="form-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" id="full_name" name="full_name" class="form-input" value="{{ $personalDetails->full_name ?? '' }}" required>
                                </div>

                                <div class="form-group">
                                    <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" id="email" name="email" class="form-input" value="{{ $personalDetails->email ?? '' }}" required>
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                                    <input type="tel" id="phone" name="phone" class="form-input" value="{{ $personalDetails->phone ?? '' }}" required>
                                </div>

                                <div class="form-group">
                                    <label for="dob" class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                    <input type="date" id="dob" name="dob" class="form-input" value="{{ $personalDetails->dob ?? '' }}" required>
                                    <div class="form-help" id="ageDisplay">Age: -- years</div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Gender <span class="text-danger">*</span></label>
                                    <div class="radio-group">
                                        <label class="radio-label">
                                            <input type="radio" name="gender" value="M" {{ $personalDetails && $personalDetails->gender == 'M' ? 'checked': '' }} required>
                                            <span class="radio-custom"></span>
                                            Male
                                        </label>
                                        <label class="radio-label">
                                            <input type="radio" name="gender" value="F" {{ $personalDetails && $personalDetails->gender == 'F' ? 'checked': '' }} required>
                                            <span class="radio-custom"></span>
                                            Female
                                        </label>
                                        <label class="radio-label">
                                            <input type="radio" name="gender" value="O" {{ $personalDetails && $personalDetails->gender == 'O' ? 'checked': '' }} required>
                                            <span class="radio-custom"></span>
                                            Other
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="address-section">
                                <h3 class="section-title">Address Information</h3>

                                <div class="form-grid">
                                    <div class="form-group full-width">
                                        <label for="address" class="form-label">Complete Address <span class="text-danger">*</span></label>
                                        <textarea id="address" name="address" class="form-textarea" rows="3" required>{{ $personalDetails->address ?? '' }}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <label for="state" class="form-label">State <span class="text-danger">*</span></label>
                                        <select id="address_state" name="state" class="form-select" required>
                                            <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="form-group">
                                        <label for="district" class="form-label">District <span class="text-danger">*</span></label>
                                        <input type="hidden" id="hidden_address_district" value="{{ $personalDetails->district ?? '' }}">
                                        <select id="address_district" name="district" class="form-select" required>
                                            <option value="">Select</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="city" class="form-label">City <span class="text-danger">*</span></label>
                                        <input type="text" id="city" name="city" class="form-input" value="{{ $personalDetails->city ?? '' }}" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="pincode" class="form-label">PIN Code <span class="text-danger">*</span></label>
                                        <input type="text" id="pincode" name="pincode" class="form-input" pattern="[0-9]{6}" maxlength="6" value="{{ $personalDetails->pincode ?? '' }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="emergency-section">
                                <h3 class="section-title">Emergency Contact</h3>

                                <div class="form-grid">
                                    <div class="form-group">
                                        <label for="emergency_name" class="form-label">Contact Name <span class="text-danger">*</span></label>
                                        <input type="text" id="emergency_name" name="emergency_name" class="form-input" value="{{ $personalDetails->emergency_name ?? '' }}" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="emergency_phone" class="form-label">Contact Phone <span class="text-danger">*</span></label>
                                        <input type="tel" id="emergency_phone" name="emergency_phone" class="form-input" value="{{ $personalDetails->emergency_phone ?? '' }}" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="relationship" class="form-label">Relationship <span class="text-danger">*</span></label>
                                        <input type="text" id="relationship" name="relationship" class="form-input" value="{{ $personalDetails->relationship ?? '' }}" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="submit" id="btn_save_step_one" class="btn btn-primary">Save & Next</button>
                        </div>
                    </form>
                </div> --}}

                <!-- Step 1: Educational Background -->
                <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-2">

                    @if (($scrutiny = $studentApplicationScrutinyDetails->firstWhere('student_application_scrutiny_list_id', 2)))

                        <div class="alert alert-danger d-flex align-items-center mb-3" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>
                                <strong>Discrepancy Found On:</strong><br>
                                <span id="discrepancy-details">
                                    {{ $scrutiny->remarks }}
                                </span>
                            </div>
                        </div>

                    @endif

                    <x-student.education-detail-card :educationDetails="$student_details->educationDetail" />

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

                <!-- Step 2: Course Selection -->
                <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                    
                    @if (($scrutiny = $studentApplicationScrutinyDetails->firstWhere('student_application_scrutiny_list_id', 3)))

                        <div class="alert alert-danger d-flex align-items-center mb-3" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>
                                <strong>Discrepancy Found On:</strong><br>
                                <span id="discrepancy-details">
                                    {{ $scrutiny->remarks }}
                                </span>
                            </div>
                        </div>

                    @endif

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

                                    <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[0]->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="submit" id="btn_save_step_three" class="btn btn-primary"><i class="fa fa-send"></i> Save & Next</button> -->
                            <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 4: Document Upload -->
                <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-4">

                    @if (($scrutiny = $studentApplicationScrutinyDetails->firstWhere('student_application_scrutiny_list_id', 4)))

                        <div class="alert alert-danger d-flex align-items-center mb-3" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>
                                <strong>Discrepancy Found On:</strong><br>
                                <span id="discrepancy-details">
                                    {{ $scrutiny->remarks }}
                                </span>
                            </div>
                        </div>

                    @endif

                    <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</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>

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

@section('pages-scripts')

@yield('edit-application-education-details-modal-script')

<script>
    $(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 }})
                }
            }
            

            
        });

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

        /** 
         * On page load,
         * Check if the training program already selected by student, then fetch the training centres for tha training program
         */
        // $(function() {
        //     $('.training_program_id').each((index, element) => {
        //         if ($(element).is(":checked")) {
        //             let trainingProgramId = $(element).val();
        //             // console.log(trainingProgramId)
        //             fetchTrainingCentreFromProgram(trainingProgramId);
        //         }
        //     })
        // })

        // For testing purpose i am adding this line of code
        // Remove this later
        fetchTrainingCentreFromProgram(13);
    })

    /** 
     * On Click Button Save Step One
     */
    $(document).on('click', '.btn_go_back', function() {
        // Navigate next
        $('#smartwizard').smartWizard("prev");
    })

    /** 
     * On Click Button Save Step One
     */
   $(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",
            data: {},
            success: function(response) {
                if (response.success == true) {
                    let trainingCentres = response.data;
                    displayTrainingCentre(trainingCentres);
                }
            },
            error: function(xhr, status, error) {
                console.log(error);
                console.error('Error fetching training centre:', 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.training_centre.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="training_centre" value="${trainingCentre.training_centre_id}" required />
                <div class="center-card">
                    <div class="center-header">
                        <h3 class="center-name">${trainingCentre.training_centre.basic_information.centre_name}</h3>
                    </div>
                    <div class="center-address">${trainingCentre.training_centre.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.edit') }}",
                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.edit', ['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.edit', ['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);
                }
            }
            });
        });
    });

    // 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');
        const urlParams = new URLSearchParams(window.location.search);
        let studentApplicationId = urlParams.get('id');

        $.ajax({
            url: `${baseUrl}/student/application-education-details/${educationId}/edit-details?id=${studentApplicationId}`,
            method: 'GET',
            success: function(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');
            }
            
        });
        
    });
</script>
@endsection