@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 to Become Our Partner</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>
                    <li class="nav-item">
                        <a class="nav-link apply-now-stepper-button " href="#step-6">
                            <span class="num">6</span>
                            Step
                        </a>
                    </li>
                </ul>

                <div class="tab-content px-3 py-4">
                    <!-- Step 1: Basic Information -->
                    <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                        <form action="" id="basic_information_form">
                            @csrf
                            <div class="mb-3">
                                <div class="step-header">
                                    <h2 class="step-title">Basic Information</h2>
                                    <p class="step-description">Centre and contact details</p>
                                </div>

                                <div class="form-grid">
                                    <div class="mb-3 span-2">
                                        <label for="centre_name" class="form-label">Training Centre Name *</label>
                                        <input type="text" id="centre_name" name="centre_name" class="form-input" required value="{{ $basicInformation->centre_name ?? '' }}">
                                    </div>

                                    <div class=" mb-3">
                                        <label for="director_name" class="form-label">Director/Head Name *</label>
                                        <input type="text" id="director_name" name="director_name" class="form-input" required value="{{ $basicInformation->director_name ?? '' }}">
                                    </div>

                                    <div class="mb-3">
                                        <label for="official_email" class="form-label">Official Email *</label>
                                        <input type="email" id="official_email" name="official_email" class="form-input" required value="{{ $basicInformation->official_email ?? '' }}">
                                    </div>

                                    <div class="mb-3">
                                        <label for="primary_phone" class="form-label">Primary Phone *</label>
                                        <input type="tel" id="primary_phone" name="primary_phone" class="form-input" required value="{{ $basicInformation->primary_phone ?? '' }}">
                                    </div>

                                    <div class="mb-3">
                                        <label for="alternate_phone" class="form-label">Alternate Phone</label>
                                        <input type="tel" id="alternate_phone" name="alternate_phone" class="form-input" value="{{ $basicInformation->alternate_phone ?? '' }}">
                                        <div class="form-help">Optional secondary contact number</div>
                                    </div>

                                    <div class="mb-3 span-2">
                                        <label for="website" class="form-label">Website</label>
                                        <input type="url" id="website" name="website" class="form-input" placeholder="https://" value="{{ $basicInformation->website ?? '' }}">
                                        <div class="form-help">Optional website URL</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: Address Details -->
                    <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                        <form action="" id="address_details_form">
                            @csrf
                            <div class="mb-3">
                                <div class="step-header">
                                    <h2 class="step-title">Address Details</h2>
                                    <p class="step-description">Location information</p>
                                </div>

                                <div class="mb-3 span-2">
                                    <label for="address" class="form-label">Complete Address *</label>
                                    <textarea id="address" name="address" class="form-control" rows="3" required>{{ $address->address ?? '' }}</textarea>
                                </div>

                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                        <label for="state" class="form-label">State *</label>
                                        <select id="address_state" name="state" class="form-select" required>
                                            <option value="">Select</option>
                                            @foreach ($states as $state)
                                            <option value="{{ $state->state_code }}" {{ $address && $address->state == $state->state_code ? 'selected' : '' }}>{{ $state->state_name_en }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                        <label for="district" class="form-label">District *</label>
                                        <input type="hidden" id="hidden_address_district" value="{{ $address->district ?? '' }}">
                                        <select id="address_district" name="district" class="form-select" required>
                                            <option value="">Select</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                        <label for="city" class="form-label">City *</label>
                                        <input type="text" id="city" name="city" class="form-input" value="{{ $address->city ?? '' }}" required>
                                    </div>


                                    <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3">
                                        <label for="pincode" class="form-label">Pincode *</label>
                                        <input type="text" id="pincode" name="pincode" class="form-input" value="{{ $address->pincode ?? '' }}" pattern="[0-9]{6}" maxlength="6" required>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-3 span-2">
                                        <label for="landmark" class="form-label">Landmark</label>
                                        <input type="text" id="landmark" name="landmark" class="form-input" value="{{ $address->landmark ?? '' }}">
                                        <div class="form-help">Optional landmark for easy location</div>
                                    </div>
                                </div>
                            </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" id="btn_save_step_two" class="btn btn-primary"><i class="fa fa-send"></i> Save & Next</button>
                            </div>
                        </form>
                    </div>

                    <!-- Step 3: Organization Info -->
                    <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                        <form action="" id="organization_info_form">
                            @csrf
                            <div class="mb-3">
                                <div class="step-header">
                                    <h2 class="step-title">Organization Info</h2>
                                    <p class="step-description">Registration and staff details</p>
                                </div>

                                <div class="form-grid">
                                    <div class="mb-3">
                                        <label for="organization_type_id" class="form-label">Type of Organization *</label>
                                        <select id="organization_type_id" name="organization_type_id" class="form-select" required>
                                            <option value="">Select</option>
                                            @foreach ($organizationTypes as $type)
                                            <option value="{{ $type->id }}" {{ $organizationInfo && $organizationInfo->organization_type_id == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label for="year_established" class="form-label">Year Established *</label>
                                        <input type="number" id="year_established" name="year_established" class="form-input" min="1900" max="2024" value="{{ $organizationInfo->year_established ?? '' }}" required>
                                    </div>

                                    <div class="mb-3 span-2">
                                        <label for="registration_number" class="form-label">Registration Number *</label>
                                        <input type="text" id="registration_number" name="registration_number" class="form-input" value="{{ $organizationInfo->registration_number ?? '' }}" required>
                                    </div>

                                    <div class="mb-3 span-2">
                                        <label for="affiliations" class="form-label">Affiliations</label>
                                        <textarea id="affiliations" name="affiliations" class="form-control" rows="2">{{ $organizationInfo->affiliations ?? '' }}</textarea>
                                        <div class="form-help">Any educational board or university affiliations</div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="total_staff" class="form-label">Total Staff Count *</label>
                                        <input type="number" id="total_staff" name="total_staff" class="form-input" min="1" value="{{ $organizationInfo->total_staff ?? '' }}" required>
                                    </div>

                                    <div class="mb-3">
                                        <label for="qualified_trainers" class="form-label">Qualified Trainers *</label>
                                        <input type="number" id="qualified_trainers" name="qualified_trainers" class="form-input" min="1" value="{{ $organizationInfo->qualified_trainers ?? '' }}" required>
                                        <div class="form-help">Number of certified/qualified trainers</div>
                                    </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: Infrastructure -->
                    <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                        <form action="" id="infrastructure_form">
                            @csrf
                            <div class="mb-3">
                                <div class="step-header">
                                    <h2 class="step-title">Infrastructure</h2>
                                    <p class="step-description">Facilities and equipment</p>
                                </div>

                                <div class="form-grid">
                                    <div class="mb-3">
                                        <label for="total_area" class="form-label">Total Area (sq ft) *</label>
                                        <input type="number" id="total_area" name="total_area" class="form-input" min="100" value="{{ $infrastructure->total_area ?? '' }}" required>
                                    </div>

                                    <div class="mb-3">
                                        <label for="classrooms" class="form-label">Number of Classrooms *</label>
                                        <input type="number" id="classrooms" name="classrooms" class="form-input" min="1" value="{{ $infrastructure->classrooms ?? '' }}" required>
                                    </div>

                                    <div class="mb-3 span-2">
                                        <label for="classroom_size" class="form-label">Classroom Size *</label>
                                        <input type="text" id="classroom_size" name="classroom_size" class="form-input" value="{{ $infrastructure->classroom_size ?? '' }}" required />
                                    </div>

                                    <div class="mb-3 span-2">
                                        <label for="number_of_laboratories" class="form-label">Number of Laboratories</label>
                                        <input type="number" id="number_of_laboratories" name="number_of_laboratories" class="form-input" value="{{ $infrastructure->number_of_laboratories ?? '' }}" />
                                    </div>

                                    <div class="mb-3 span-2">
                                        <label for="laboratory_size" class="form-label">Laboratory Size</label>
                                        <input type="text" id="laboratory_size" name="laboratory_size" class="form-input" value="{{ $infrastructure->laboratory_size ?? '' }}" />
                                    </div>

                                    <div class="mb-3 span-2">
                                        <label class="form-label">Available Facilities</label>
                                        <div class="checkbox-grid">
                                            @php
                                            if(!empty($infrastructureFacilities)){
                                            $infrastructureFacilities = $infrastructureFacilities->toArray();
                                            $infrastructureFacilitiesIds = array_column($infrastructureFacilities, 'facility_id');
                                            }
                                            @endphp
                                            @foreach ($facilities as $facility)
                                            <label class="checkbox-label" for="facility_{{ $facility->id }}">
                                                <input type="checkbox" name="facilities[]" value="{{ $facility->id }}" id="facility_{{ $facility->id }}" {{ in_array($facility->id, $infrastructureFacilitiesIds ?? []) ? 'checked' : '' }}>
                                                <span class="checkbox-custom"></span>
                                                {{ $facility->name }}
                                            </label>
                                            @endforeach
                                        </div>
                                    </div>
                                </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: Programs -->
                    <div id="step-5" class="tab-pane" role="tabpanel" aria-labelledby="step-5">
                        <form action="" id="programs_form">
                            @csrf
                            <div class="mb-3">
                                <div class="step-header">
                                    <h2 class="step-title">Programs</h2>
                                    <p class="step-description">Training programs offered</p>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Programs Interested in Offering *</label>
                                    <div class="programs-grid">
                                        @php
                                        if(!empty($trainingCentrePrograms)){
                                        $trainingCentrePrograms = $trainingCentrePrograms->toArray();
                                        $trainingCentreProgramsIds = array_column($trainingCentrePrograms, 'training_program_id');
                                        }
                                        @endphp

                                        @foreach ($trainingPrograms as $trainingProgram)
                                        <label class="checkbox-label program-checkbox" for="program_{{ $trainingProgram->id }}">
                                            <input type="checkbox" name="programs[]" id="program_{{ $trainingProgram->id }}" value="{{ $trainingProgram->id }}" required {{ in_array($trainingProgram->id, $trainingCentreProgramsIds ?? []) ? 'checked' : '' }}>
                                            <span class="checkbox-custom"></span>
                                            <div class="program-info">
                                                <div class="program-name">{{ $trainingProgram->title }}</div>
                                                <div class="program-details">
                                                    <span class="me-3">
                                                        <i class="far fa-clock"></i> {{ $trainingProgram->total_hours }} Hours
                                                    </span>
                                                    <span>
                                                        <i class="fas fa-signal"></i> {{ $trainingProgram->course_type_desc }}
                                                    </span>
                                                </div>
                                            </div>
                                        </label>
                                        @endforeach
                                    </div>
                                    <div class="form-help">Select at least one program you wish to offer</div>
                                </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>

                    <!-- Step 6: Declaration & Documents -->
                    <div id="step-6" class="tab-pane" role="tabpanel" aria-labelledby="step-6">
                        <form action="" id="documents_form">
                            @csrf
                            <div class="mb-3">
                                <div class="step-header">
                                    <h2 class="step-title">Declaration & Documents</h2>
                                    <p class="step-description">Final submission and verification</p>
                                </div>

                                <div class="declaration-section">
                                    <h3 class="declaration-title">Document Upload</h3>
                                    <div class="upload-grid">
                                        <div class="upload-group">
                                            <label class="upload-label">Registration Certificate *</label>
                                            <div class="upload-area">
                                                <i class="fas fa-cloud-upload-alt"></i>
                                                <span class="upload-text">Click to upload</span>
                                                <input type="file" name="reg_certificate" accept=".pdf,.jpg,.png">
                                            </div>
                                            <div class="upload-preview mt-2">
                                                @if($document && $document->reg_certificate_full_path)
                                                <a href="{{ $document->reg_certificate_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="upload-group">
                                            <label class="upload-label">NOC from Local Authority</label>
                                            <div class="upload-area">
                                                <i class="fas fa-cloud-upload-alt"></i>
                                                <span class="upload-text">Click to upload</span>
                                                <input type="file" name="noc" accept=".pdf,.jpg,.png">
                                            </div>
                                            <div class="upload-preview mt-2">
                                                @if($document && $document->noc_full_path)
                                                <a href="{{ $document->noc_full_path }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="upload-group">
                                            <label class="upload-label">Infrastructure Photos *</label>
                                            <div class="upload-area">
                                                <i class="fas fa-cloud-upload-alt"></i>
                                                <span class="upload-text">Click to upload</span>
                                                <input type="file" name="photos[]" accept="image/*" multiple>
                                            </div>
                                            <div class="upload-preview mt-2">
                                                @if($document && count($document->photos_full_paths))
                                                @foreach($document->photos_full_paths as $photo)
                                                <a href="{{ $photo }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                                @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class="upload-group">
                                            <label class="upload-label">Staff Qualification Certificates</label>
                                            <div class="upload-area">
                                                <i class="fas fa-cloud-upload-alt"></i>
                                                <span class="upload-text">Click to upload</span>
                                                <input type="file" name="staff_certs[]" accept=".pdf,.jpg,.png" multiple>
                                            </div>
                                            <div class="upload-preview mt-2">
                                                @if($document && count($document->staff_certs_full_paths))
                                                @foreach($document->staff_certs_full_paths as $cert)
                                                <a href="{{ $cert }}" class="btn btn-outline btn-sm" target="_blank"><i class="fa fa-eye"></i> View File</a>
                                                @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="declaration-text">
                                        <h3 class="declaration-title">Declaration and Agreements</h3>
                                        <p class="declaration-subtitle">Please read and agree to the following terms and conditions to complete your registration.</p>

                                        <div class="declaration-items">
                                            <label class="checkbox-label declaration-item mb-3">
                                                <input type="checkbox" id="terms_agree" name="terms_agree" value="1" required {{ $trainingCentre && $trainingCentre->terms_agree == 1 ? 'checked': '' }}>
                                                <span class="checkbox-custom"></span>
                                                <div class="declaration-content">
                                                    <div class="declaration-text">I agree to the Terms and Conditions and Privacy Policy *</div>
                                                    <div class="declaration-help">You must agree to our terms and privacy policy to proceed with registration.</div>
                                                </div>
                                            </label>

                                            <label class="checkbox-label declaration-item mb-3">
                                                <input type="checkbox" id="inspection_agree" name="inspection_agree" value="1" {{ $trainingCentre && $trainingCentre->inspection_agree == 1 ? 'checked': '' }} required>
                                                <span class="checkbox-custom"></span>
                                                <div class="declaration-content">
                                                    <div class="declaration-text">I agree to facility inspection by NISD officials *</div>
                                                    <div class="declaration-help">NISD reserves the right to inspect your facility as part of the accreditation process.</div>
                                                </div>
                                            </label>

                                            <label class="checkbox-label declaration-item mb-3">
                                                <input type="checkbox" id="accuracy_declaration" name="accuracy_declaration" {{ $trainingCentre && $trainingCentre->accuracy_declaration == 1 ? 'checked': '' }} value="1" required>
                                                <span class="checkbox-custom"></span>
                                                <div class="declaration-content">
                                                    <div class="declaration-text">I declare that all information provided is accurate and complete *</div>
                                                    <div class="declaration-help">Any false information may result in rejection of your application or cancellation of registration.</div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="next-steps-section">
                                        <h3 class="next-steps-title">Next Steps</h3>
                                        <div class="next-steps-list">
                                            <div class="next-step-item">
                                                <div class="step-icon">
                                                    <i class="fas fa-search"></i>
                                                </div>
                                                <div class="step-content">
                                                    <div class="step-name">Application review</div>
                                                    <div class="step-duration">(5-7 business days)</div>
                                                </div>
                                            </div>
                                            <div class="next-step-item">
                                                <div class="step-icon">
                                                    <i class="fas fa-file-check"></i>
                                                </div>
                                                <div class="step-content">
                                                    <div class="step-name">Document verification</div>
                                                </div>
                                            </div>
                                            <div class="next-step-item">
                                                <div class="step-icon">
                                                    <i class="fas fa-building"></i>
                                                </div>
                                                <div class="step-content">
                                                    <div class="step-name">Facility inspection</div>
                                                    <div class="step-duration">(if required)</div>
                                                </div>
                                            </div>
                                            <div class="next-step-item">
                                                <div class="step-icon">
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                                <div class="step-content">
                                                    <div class="step-name">Final approval and registration</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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>
    $(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
                },
            });
        });

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

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

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


    /** 
     * Basic information Details Form Validation and Submission
     */
    $('#basic_information_form').validate({
        rules: {
            centre_name: "required",
            director_name: "required",
            official_email: {
                required: true,
                email: true
            },
            primary_phone: {
                required: true,
                digits: true,
                minlength: 10,
                maxlength: 10
            },
            alternate_phone: {
                digits: true,
                minlength: 10,
                maxlength: 10
            },
            website: {
                url: true
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('training-centers-registration.basic-information.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(() => {
                            $('#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"
                        });
                    }
                }
            });
        }
    });

    /** 
     * Address Details Form Validation and Submission
     */
    $('#address_details_form').validate({
        ignore: [],
        rules: {
            address: "required",
            city: "required",
            district: "required",
            state: "required",
            pincode: {
                required: true,
                digits: true,
                minlength: 6,
                maxlength: 6
            },
            landmark: {
                required: false
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('training-centers-registration.address.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(() => {
                            $('#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"
                        });
                    }
                }
            });
        }
    });

    /** 
     * Organization info form validation and submission
     */
    $('#organization_info_form').validate({
        rules: {
            organization_type_id: "required",
            year_established: {
                required: true,
                digits: true,
                min: 1900,
                max: new Date().getFullYear()
            },
            registration_number: "required",
            affiliations: {
                required: false
            },
            total_staff: {
                required: true,
                digits: true,
                min: 1
            },
            qualified_trainers: {
                required: true,
                digits: true,
                min: 1
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('training-centers-registration.organization-info.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(() => {
                            $('#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"
                        });
                    }
                }
            });
        }
    });

    /** 
     * Infrastructure Form Validation and Submission
     */
    $('#infrastructure_form').validate({
        rules: {
            total_area: {
                required: true,
                digits: true,
                min: 100
            },
            classrooms: {
                required: true,
                digits: true,
                min: 1
            },
            no_of_laboratories: {
                required: false
            },
            'facilities[]': {
                required: true,
                minlength: 1
            },
            infrastructure_details: {
                required: false
            },
            classroom_size: {
                required: false
            }
        },
        messages: {
            'facilities[]': "Please select at least one facility."
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") === "facilities[]") {
                error.insertAfter(".checkbox-grid");
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('training-centers-registration.infrastructure.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(() => {
                            $('#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"
                        });
                    }
                }
            });
        }
    });

    /** 
     * Programs Form Validation and Submission
     */
    $('#programs_form').validate({
        rules: {
            'programs[]': {
                required: true,
                minlength: 1
            }
        },
        messages: {
            'programs[]': "Please select at least one program."
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") === "programs[]") {
                error.insertAfter(".programs-grid");
            } else if (element.attr("name") === "specializations[]") {
                error.insertAfter(".specialization-grid");
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('training-centers-registration.programs.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(() => {
                            $('#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"
                        });
                    }
                }
            });
        }
    });


    /** 
     * Declaration Form Validation and Submission
     */
    $('#documents_form').validate({
        rules: {
            // reg_certificate: {
            //     required: true,
            // },
            // photos: {
            //     required: true,
            // },
            terms_agree: {
                required: true
            },
            inspection_agree: {
                required: true
            },
            accuracy_declaration: {
                required: true
            }
        },
        messages: {
            reg_certificate: "Please upload the registration certificate (PDF, JPG, PNG).",
            photos: "Please upload infrastructure photos (JPG, PNG).",
            terms_agree: "You must agree to the terms and conditions.",
            inspection_agree: "You must agree to facility inspection.",
            accuracy_declaration: "You must confirm the accuracy of the information."
        },
        errorPlacement: function(error, element) {
            if (
                element.attr("name") === "terms_agree" ||
                element.attr("name") === "inspection_agree" ||
                element.attr("name") === "accuracy_declaration"
            ) {
                error.insertAfter(".declaration-items");
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            let formData = new FormData(form);
            $.ajax({
                url: "{{ route('training-centers-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