@extends('layouts.website_layout')

@section('content')

<!-- Main Content -->
<main id="main-content">
    <!-- Page Header -->
    <div class="position-relative page-header text-white overflow-hidden">
        <div class="container position-relative">
            <div>
                @if($parentPageTitle)
                <span class="badge bg-white text-primary mb-2">{{ $parentPageTitle }}</span>
                @endif
                <h3 class="display-6 fw-bold mb-1">
                    {{ $pageTitle }}
                </h3>
            </div>
        </div>
    </div>


    <div class="container">
        <!-- Application Header -->
        <div class="application-header">
            <div class="w-100 text-center mt-3">
                <h1 class="application-title">Apply for Caregiver Training</h1>
                <p class="application-subtitle">
                    Join our nationally recognized caregiver training programs and make a difference in elderly care.
                    Complete your application with all required details and documents.
                </p>
            </div>
        </div>


        <div class="bg-white shadow-sm rounded pb-5">
            <!-- SmartWizard html -->
            <div id="smartwizard">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button" href="#step-1">
                            <div class="num">1</div>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button" href="#step-2">
                            <span class="num">2</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button" href="#step-3">
                            <span class="num">3</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button " href="#step-4">
                            <span class="num">4</span>
                            Step
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button " href="#step-5">
                            <span class="num">5</span>
                            Step
                        </a>
                    </li>
                </ul>

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

                    <!-- Step 1: Personal Information -->
                    <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                        <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="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
                                        <input type="text" id="first_name" name="first_name" class="form-input" value="{{ $personalDetails->first_name ?? '' }}" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
                                        <input type="text" id="last_name" name="last_name" class="form-input" value="{{ $personalDetails->last_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 2: Educational Background -->
                    <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                        <form action="" id="education_details_form">
                            @csrf
                            <div class="mb-3">
                                <div class="step-header">
                                    <h2 class="step-title">Educational Details</h2>
                                    <p class="step-subtitle">Add your educational qualifications (you can add multiple)</p>
                                </div>

                                <!-- Show the list here -->
                                <div id="educationDetailsContainer"></div>

                                <!-- Show multiple fields here -->
                                <div class="education-container" id="educationContainer">
                                </div>

                                <button type="button" class="btn btn-outline add-education" id="addEducation">
                                    <i class="fas fa-plus"></i>
                                    Add Another Education
                                </button>
                            </div>

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

                    <!-- Step 3: Course Selection -->
                    <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                        <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 }}" {{ $courseSelection && $courseSelection->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">Duration: {{ $trainingProgram->total_hours }} hours</span>
                                                        <span class="program-type">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>
                            </div>
                        </form>
                    </div>

                    <!-- Step 4: Training Center Selection -->
                    <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                        <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>

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

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

                            
                            <div class="mb-3">
                                <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>
                                        @if($document && $document->photo_full_path)
                                        <div class="upload-preview mt-2">
                                            <a href="{{ $document->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,.png" class="upload-input">
                                        </div>
                                        @if($document && $document->address_proof_full_path)
                                        <div class="upload-preview mt-2">
                                            <a href="{{ $document->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,.jpg,.png" class="upload-input">
                                        </div>
                                        @if($document && $document->medical_certificate_full_path)
                                        <div class="upload-preview mt-2">
                                            <a href="{{ $document->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>
                                        @if($document && $document->medical_certificate_full_path)
                                        <div class="upload-preview mt-2">
                                            <a href="{{ $document->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>
                            </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>
</main>
@endsection

@section('pages-scripts')
<script>
    /**
     * Education mulitple items
     */
    let educationItemIndex = 1;
    let educationItemIndexArray = [];

    let qualifications = @json($qualifications);

    function generateEducationItem(educationItemIndex) {
        let qualificaionOptions = `<option value="">Select Qualification</option>`;

        for (let i = 0; i < qualifications.length; i++) {
            qualificaionOptions += '<option value="' + qualifications[i].id + '">' + qualifications[i].name + '</option>';
        }
        let educationItemHtml = `
            <div class="education-item" data-index="${educationItemIndex}" id="education_item_${educationItemIndex}">
                <div class="d-flex justify-content-between">
                    <h3 class="education-title">Education Detail</h3>
                    <button type="button" class="btn btn-outline btn_remove_education_item" data-index="${educationItemIndex}" title="Remove Education Item"><i class="fa fa-trash"></i></button>
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        <label for="qualification_${educationItemIndex}" class="form-label">Qualification *</label>
                        <select id="qualification_${educationItemIndex}" name="qualification_${educationItemIndex}" class="form-select" required>
                            ${qualificaionOptions}
                        </select>
                    </div>
    
                    <div class="form-group">
                        <label for="board_${educationItemIndex}" class="form-label">Board/University *</label>
                        <input type="text" id="board_${educationItemIndex}" name="board_${educationItemIndex}" class="form-input" required>
                    </div>
    
                    <div class="form-group">
                        <label for="institution_${educationItemIndex}" class="form-label">Institution Name *</label>
                        <input type="text" id="institution_${educationItemIndex}" name="institution_${educationItemIndex}" class="form-input" required>
                    </div>
    
                    <div class="form-group">
                        <label for="year_${educationItemIndex}" class="form-label">Year of Passing *</label>
                        <input type="number" id="year_${educationItemIndex}" name="year_${educationItemIndex}" class="form-input" min="1980" max="2024" required>
                    </div>
    
                    <div class="form-group">
                        <label for="grade_${educationItemIndex}" class="form-label">Percentage/Grade *</label>
                        <input type="text" id="grade_${educationItemIndex}" name="grade_${educationItemIndex}" class="form-input" required>
                    </div>
    
                    <div class="form-group">
                        <label for="file_${educationItemIndex}" class="form-label">Upload Document *</label>
                        <input type="file" id="file_${educationItemIndex}" name="file_${educationItemIndex}" class="form-input" required>
                    </div>
                </div>
            </div>
        `;

        educationItemIndexArray.push(educationItemIndex);
        $('#educationContainer').append(educationItemHtml);
    }

    generateEducationItem(educationItemIndex++);

    /** Add Education Item */
    $(document).on('click', '#addEducation', function() {
        generateEducationItem(educationItemIndex++);
    })

    /** Remove Education Item */
    $(document).on('click', '.btn_remove_education_item', function() {
        let elementIndex = $(this).data('index');
        if (educationItemIndexArray.length < 2) {
            Swal.fire({
                title: 'Error',
                text: 'You can not remove last education item.',
                icon: 'error',
            })
        } else {
            educationItemIndexArray = educationItemIndexArray.filter((educationItem, index) => {
                return parseInt(elementIndex) != parseInt(educationItem);
            })
            $(`#education_item_${elementIndex}`).remove();
        }
    })

    /** 
     * Function to fetch the education details
     */
    function fetchApplyNowEducationDetails() {
        $.ajax({
            url: `${baseUrl}/student-registration/education-details/fetch`,
            type: "GET",
            data: {},
            success: function(response) {
                if (response.success == true) {
                    let educationDetails = response.data;
                    if (educationDetails.length > 0) {
                        $('#btn_save_step_two').show();
                    }
                    displayEducationCards(educationDetails);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching education details:', error);
                $('#educationDetailsContainer').html('<p class="text-danger">Error loading education details.</p>');
            },
        });
    }

    /**
     * Function to display the education cards
     */
    function displayEducationCards(educationDetails) {
        const container = $('#educationDetailsContainer');

        if (!educationDetails || educationDetails.length === 0) {
            container.html('<p class="text-muted">No education details found.</p>');
            return;
        }

        // Find qualification name by ID
        function getQualificationName(qualificationId) {
            const qualification = qualifications.find(q => q.id == qualificationId);
            return qualification ? qualification.name : `Qualification ${qualificationId}`;
        }

        let cardsHtml = '';

        educationDetails.forEach((education, index) => {
            const qualificationName = getQualificationName(education.qualification);
            const formattedDate = new Date(education.created_at).toLocaleDateString();

            cardsHtml += `
            <div class="col-12 mb-3">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-graduation-cap me-2"></i>
                            ${qualificationName}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row mb-2">
                                    <div class="col-sm-4"><strong>Board/University:</strong></div>
                                    <div class="col-sm-8">${education.board}</div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-sm-4"><strong>Institution:</strong></div>
                                    <div class="col-sm-8">${education.institution}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row mb-2">
                                    <div class="col-sm-4"><strong>Year:</strong></div>
                                    <div class="col-sm-8">${education.year}</div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-sm-4"><strong>Grade:</strong></div>
                                    <div class="col-sm-8">${education.grade}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                ${education.file_path ? `
                                <div class="row">
                                    <div class="col-sm-4"><strong>Document:</strong></div>
                                    <div class="col-sm-8">
                                        <a href="${education.file_path}" 
                                        target="_blank" 
                                        class="btn btn-sm btn-outline ms-2">
                                            <i class="fas fa-file-pdf me-1"></i>
                                            View Certificate
                                        </a>
                                    </div>
                                </div>
                                ` : ''}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        });

        // Wrap cards in Bootstrap row
        const finalHtml = `
            <div class="row">
                ${cardsHtml}
            </div>
        `;

        container.html(finalHtml);
    }

    /** 
     * Function to fetch the training centres from program
     */
    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.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">${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);
    }

    $(document).ready(function() {
        $(function() {
            // SmartWizard initialize
            $('#smartwizard').smartWizard({
                theme: "arrows",
                enableUrlHash: true,
                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
                },
                anchor: {
                    markDoneStep: true,
                }
            });
        });

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

        // Fetch education details
        fetchApplyNowEducationDetails();

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

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

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

    /**
     * On Change State Dropdown
     */
    $(document).on('change', '#address_state', function() {
        let stateCode = $(this).val();
        if (stateCode) {
            getDistrictsByState(stateCode, 'address_district');
        }
    });

    /** 
     * Personal Details Form Validation and Submission
     */
    $('#personal_details_form').validate({
        rules: {
            firstName: "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-registration.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"
                        });
                    }
                }
            });
        }
    });

    /** 
     * Educational Details Form Validation and Submission
     */
    $('#education_details_form').validate({
        submitHandler: function(form) {
            let formData = new FormData(form);
            formData.set('education_item_index_array', JSON.stringify(educationItemIndexArray));
            $.ajax({
                url: "{{ route('student-registration.education-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(() => {
                            fetchApplyNowEducationDetails();
                            // After saving the record, show the next button
                            $('#btn_save_step_two').show();
                        });
                    } 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 validation and submission
     */
    $('#course_selection_form').validate({
        rules: {
            training_program: "required"
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('student-registration.course-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"
                        });
                    }
                }
            });
        }
    });

    /** 
     * Training Center Selection Form Validation and Submission
     */
    $('#training_center_selection_form').validate({
        rules: {
            training_centre: {
                required: true,
            }
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "training_centre") {
                error.insertAfter(".training-centers");
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('student-registration.training-centre-preference.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"
                        });
                    }
                }
            });
        }
    });

    /** 
     * Document Upload Form Validation and Submission
     */
    $('#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-registration.document-upload.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(() => {
                            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"
                        });
                    }
                }
            });
        }
    });
</script>
@endsection