@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 id="smartwizard" class="shadow mb-4">
            <ul class="nav nav-pills nav-justified mb-4">
                <li class="nav-item">
                    <a class="nav-link" href="#step-1">
                        <div class="fw-bold">1</div>
                        Step
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#step-2">
                        <div class="fw-bold">2</div>
                        Step
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#step-3">
                        <div class="fw-bold">3</div>
                        Step
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#step-4">
                        <div class="fw-bold">4</div>
                        Step
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#step-5">
                        <div class="fw-bold">5</div>
                        Step
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#step-6">
                        <div class="fw-bold">6</div>
                        Step
                    </a>
                </li>
            </ul>

            <div class="tab-content px-4">
                <!-- Step 1: Basic Information & Organization -->
                <div id="step-1" class="tab-pane" role="tabpanel">
                    <div class="mb-4">
                        <h2 class="h4 mb-2">Basic Information & Organization</h2>
                        <p class="text-muted">Centre details, contact information, and organization data</p>
                    </div>

                    <form id="basic_information_form">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="centre_name" class="form-label">Training Centre Name <span class="text-danger">*</span></label>
                                <input type="text" id="centre_name" name="centre_name" class="form-control form-input" required placeholder="Enter training centre name">
                            </div>

                            <div class="col-md-6">
                                <label for="director_name" class="form-label">Director/Head Name <span class="text-danger">*</span></label>
                                <input type="text" id="director_name" name="director_name" class="form-control form-input" required placeholder="Enter director name">
                            </div>

                            <div class="col-md-6">
                                <label for="official_email" class="form-label">Official Email <span class="text-danger">*</span></label>
                                <input type="email" id="official_email" name="official_email" class="form-control form-input" required placeholder="Enter official email">
                            </div>

                            <div class="col-md-6">
                                <label for="primary_phone" class="form-label">Primary Phone <span class="text-danger">*</span></label>
                                <input type="tel" id="primary_phone" name="primary_phone" class="form-control form-input" required placeholder="Enter primary phone">
                            </div>

                            <div class="col-md-6">
                                <label for="alternate_phone" class="form-label">Alternate Phone</label>
                                <input type="tel" id="alternate_phone" name="alternate_phone" class="form-control form-input" placeholder="Enter alternate phone">
                                <div class="form-text">Optional secondary contact number</div>
                            </div>

                            <div class="col-md-12">
                                <label for="website" class="form-label">Website</label>
                                <input type="url" id="website" name="website" class="form-control form-input" placeholder="https://example.com">
                                <div class="form-text">Optional website URL</div>
                            </div>

                            <div class="col-md-6">
                                <label for="organization_type" class="form-label">Type <span class="text-danger">*</span></label>
                                <select id="organization_type" name="organization_type" class="form-select" required>
                                    <option value="">Select Type</option>
                                    <option value="NGO">NGO</option>
                                    <option value="Private">Private</option>
                                </select>
                            </div>

                            <div class="col-md-6" id="darpan_field" style="display: none;">
                                <label for="darpan_id" class="form-label">Darpan ID <span class="text-danger">*</span></label>
                                <input type="text" id="darpan_id" name="darpan_id" class="form-control form-input" placeholder="Enter Darpan ID">
                            </div>

                            <div class="col-md-6" id="gst_field" style="display: none;">
                                <label for="gst_no" class="form-label">GST No. <span class="text-danger">*</span></label>
                                <input type="text" id="gst_no" name="gst_no" class="form-control form-input" placeholder="Enter GST Number">
                            </div>

                            <div class="col-md-6">
                                <label for="year_established" class="form-label">Year Established <span class="text-danger">*</span></label>
                                <input type="number" id="year_established" name="year_established" class="form-control form-input" min="1900" max="2024" required placeholder="2020">
                            </div>

                            <div class="col-md-12">
                                <label for="registration_number" class="form-label">Registration Number <span class="text-danger">*</span></label>
                                <input type="text" id="registration_number" name="registration_number" class="form-control form-input" required placeholder="Enter registration number">
                            </div>

                            <div class="col-md-12">
                                <label for="affiliations" class="form-label">Affiliations</label>
                                <textarea id="affiliations" name="affiliations" class="form-control form-input" rows="2" placeholder="Enter any educational board or university affiliations"></textarea>
                                <div class="form-text">Any educational board or university affiliations</div>
                            </div>

                            <div class="col-md-6">
                                <label for="total_staff" class="form-label">Total Staff Count <span class="text-danger">*</span></label>
                                <input type="number" id="total_staff" name="total_staff" class="form-control form-input" min="1" required placeholder="10">
                            </div>

                            <div class="col-md-6">
                                <label for="qualified_trainers" class="form-label">Qualified Trainers <span class="text-danger">*</span></label>
                                <input type="number" id="qualified_trainers" name="qualified_trainers" class="form-control form-input" min="1" required placeholder="5">
                                <div class="form-text">Number of certified/qualified trainers</div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-primary btn_next">
                                <i class="fas fa-arrow-right me-2"></i>Save & Next
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Step 2: Address Details -->
                <div id="step-2" class="tab-pane" role="tabpanel">
                    <div class="mb-4">
                        <h2 class="h4 mb-2">Address Details</h2>
                        <p class="text-muted">Location information</p>
                    </div>

                    <form id="address_details_form">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="address" class="form-label">Complete Address <span class="text-danger">*</span></label>
                                <textarea id="address" name="address" class="form-control form-input" rows="3" required placeholder="Enter complete address"></textarea>
                            </div>

                            <div class="col-md-4">
                                <label for="state" class="form-label">State <span class="text-danger">*</span></label>
                                <select id="state" name="state" class="form-select" required>
                                    <option value="">Select State</option>
                                    <option value="DL">Delhi</option>
                                    <option value="MH">Maharashtra</option>
                                    <option value="KA">Karnataka</option>
                                    <option value="TN">Tamil Nadu</option>
                                    <option value="UP">Uttar Pradesh</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="district" class="form-label">District <span class="text-danger">*</span></label>
                                <select id="district" name="district" class="form-select" required>
                                    <option value="">Select District</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="city" class="form-label">City <span class="text-danger">*</span></label>
                                <input type="text" id="city" name="city" class="form-control form-input" required placeholder="Enter city">
                            </div>

                            <div class="col-md-6">
                                <label for="pincode" class="form-label">Pincode <span class="text-danger">*</span></label>
                                <input type="text" id="pincode" name="pincode" class="form-control form-input" pattern="[0-9]{6}" maxlength="6" required placeholder="123456">
                            </div>

                            <div class="col-md-6">
                                <label for="landmark" class="form-label">Landmark</label>
                                <input type="text" id="landmark" name="landmark" class="form-control form-input" placeholder="Enter landmark">
                                <div class="form-text">Optional landmark for easy location</div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back me-3">
                                <i class="fas fa-arrow-left me-2"></i>Go Back
                            </button>
                            <button type="button" class="btn btn-primary btn_next">
                                <i class="fas fa-arrow-right me-2"></i>Save & Next
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Step 3: Trainers -->
                <div id="step-3" class="tab-pane" role="tabpanel">
                    <div class="mb-4">
                        <h2 class="h4 mb-2">Trainers Information</h2>
                        <p class="text-muted">Add details of all trainers</p>
                    </div>

                    <form id="trainers_form">
                        <div id="trainers_container">
                            <!-- Trainers will be added here -->
                        </div>

                        <button type="button" class="btn btn-outline mb-3 w-100" onclick="addTrainer()">
                            <i class="fas fa-plus me-2"></i> Add Trainer
                        </button>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back me-3">
                                <i class="fas fa-arrow-left me-2"></i>Go Back
                            </button>
                            <button type="button" class="btn btn-primary btn_next">
                                <i class="fas fa-arrow-right me-2"></i>Save & Next
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Step 4: Infrastructure -->
                <div id="step-4" class="tab-pane" role="tabpanel">
                    <div class="mb-4">
                        <h2 class="h4 mb-2">Infrastructure</h2>
                        <p class="text-muted">Facilities and equipment details</p>
                    </div>

                    <form id="infrastructure_form">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="total_area" class="form-label">Total Area (sq ft) <span class="text-danger">*</span></label>
                                <input type="number" id="total_area" name="total_area" class="form-control form-input" min="100" required placeholder="1000">
                            </div>

                            <div class="col-md-6">
                                <label for="classrooms" class="form-label">Number of Classrooms <span class="text-danger">*</span></label>
                                <input type="number" id="classrooms" name="classrooms" class="form-control form-input" min="1" required placeholder="5">
                            </div>

                            <div class="col-md-6">
                                <label for="classroom_size" class="form-label">Classroom Size (sq ft) <span class="text-danger">*</span></label>
                                <input type="number" id="classroom_size" name="classroom_size" class="form-control form-input" min="300" required placeholder="300">
                                <div class="form-text">Minimum 300 square feet required per classroom</div>
                                <div class="text-danger" id="classroom_size_error" style="display: none;">
                                    Classroom size must be at least 300 square feet
                                </div>
                            </div>

                            <div class="col-md-6">
                                <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-control form-input" placeholder="2">
                            </div>

                            <div class="col-md-6">
                                <label for="laboratory_size" class="form-label">Laboratory Size (sq ft)</label>
                                <input type="number" id="laboratory_size" name="laboratory_size" class="form-control form-input" min="700" placeholder="700">
                                <div class="form-text">Minimum 700 square feet required per laboratory</div>
                                <div class="text-danger" id="laboratory_size_error" style="display: none;">
                                    Laboratory size must be at least 700 square feet
                                </div>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">Available Facilities</label>
                                <div class="row">
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="facilities[]" value="1" id="facility1">
                                            <label class="form-check-label" for="facility1">Wi-Fi Internet</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="facilities[]" value="2" id="facility2">
                                            <label class="form-check-label" for="facility2">Air Conditioning</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="facilities[]" value="3" id="facility3">
                                            <label class="form-check-label" for="facility3">Projector/AV Equipment</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="facilities[]" value="4" id="facility4">
                                            <label class="form-check-label" for="facility4">Library</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="facilities[]" value="5" id="facility5">
                                            <label class="form-check-label" for="facility5">Computer Lab</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="facilities[]" value="6" id="facility6">
                                            <label class="form-check-label" for="facility6">Medical First Aid</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back me-3">
                                <i class="fas fa-arrow-left me-2"></i>Go Back
                            </button>
                            <button type="button" class="btn btn-primary btn_next">
                                <i class="fas fa-arrow-right me-2"></i>Save & Next
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Step 5: Programs -->
                <div id="step-5" class="tab-pane" role="tabpanel">
                    <div class="mb-4">
                        <h2 class="h4 mb-2">Training Programs</h2>
                        <p class="text-muted">Select programs you wish to offer</p>
                    </div>

                    <form id="programs_form">
                        <div class="mb-3">
                            <label class="form-label">Programs Interested in Offering <span class="text-danger">*</span></label>
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="programs[]" value="1" id="program1" required>
                                                <label class="form-check-label" for="program1">
                                                    <div class="fw-bold">Caregiver for Elderly - Basic</div>
                                                    <small class="text-muted">
                                                        <i class="far fa-clock"></i> 120 Hours |
                                                        <i class="fas fa-signal"></i> Beginner Level
                                                    </small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="programs[]" value="2" id="program2">
                                                <label class="form-check-label" for="program2">
                                                    <div class="fw-bold">Caregiver for Elderly - Advanced</div>
                                                    <small class="text-muted">
                                                        <i class="far fa-clock"></i> 240 Hours |
                                                        <i class="fas fa-signal"></i> Advanced Level
                                                    </small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="programs[]" value="3" id="program3">
                                                <label class="form-check-label" for="program3">
                                                    <div class="fw-bold">Home Health Aide</div>
                                                    <small class="text-muted">
                                                        <i class="far fa-clock"></i> 180 Hours |
                                                        <i class="fas fa-signal"></i> Intermediate Level
                                                    </small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="programs[]" value="4" id="program4">
                                                <label class="form-check-label" for="program4">
                                                    <div class="fw-bold">Geriatric Care Specialist</div>
                                                    <small class="text-muted">
                                                        <i class="far fa-clock"></i> 300 Hours |
                                                        <i class="fas fa-signal"></i> Expert Level
                                                    </small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-text">Select at least one program you wish to offer</div>
                        </div>

                        <div class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back me-3">
                                <i class="fas fa-arrow-left me-2"></i>Go Back
                            </button>
                            <button type="button" class="btn btn-primary btn_next">
                                <i class="fas fa-arrow-right me-2"></i>Save & Next
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Step 6: Documents & Declaration -->
                <div id="step-6" class="tab-pane" role="tabpanel">
                    <div class="mb-4">
                        <h2 class="h4 mb-2">Documents & Declaration</h2>
                        <p class="text-muted">Upload required documents and complete declaration</p>
                    </div>

                    <form id="documents_form">
                        <div class="bg-light p-4 rounded mb-4">
                            <div class="upload-grid">

                                <!-- Registration Certificate (Required) -->
                                <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" required>
                                    </div>
                                </div>

                                <!-- NOC from Local Authority (Optional) -->
                                <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>

                                <!-- Building Photos (Required, Multiple) -->
                                <div class="upload-group">
                                    <label class="upload-label">Building 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="building_photos[]" accept="image/*" multiple required>
                                    </div>
                                    <div class="form-text">Upload exterior and interior building photos</div>
                                </div>

                                <!-- Classroom Photos (Required, Multiple) -->
                                <div class="upload-group">
                                    <label class="upload-label">Classroom 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="classroom_photos[]" accept="image/*" multiple required>
                                    </div>
                                    <div class="form-text">Upload photos of all classrooms</div>
                                </div>

                                <!-- Laboratory Photos (Optional, Multiple) -->
                                <div class="upload-group">
                                    <label class="upload-label">Laboratory 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="laboratory_photos[]" accept="image/*" multiple>
                                    </div>
                                    <div class="form-text">Upload photos of laboratory facilities</div>
                                </div>

                                <!-- CCTV Control Room Photos (Optional, Multiple) -->
                                <div class="upload-group">
                                    <label class="upload-label">CCTV Control Room 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="cctv_photos[]" accept="image/*" multiple>
                                    </div>
                                    <div class="form-text">Upload photos of CCTV control room setup</div>
                                </div>

                                <!-- Staff Qualification Certificates (Optional, Multiple) -->
                                <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="form-text">Upload trainer and staff certificates</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 class="text-center mt-4">
                            <button type="button" class="btn btn-outline btn_go_back me-3">
                                <i class="fas fa-arrow-left me-2"></i>Go Back
                            </button>
                            <a href="{{ route('training-centers-registration.register-preview') }}" class="btn btn-success">
                                <i class="fas fa-paper-plane me-2"></i> Preview & Submit Application
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Progress bar -->
            <div class="progress mt-4">
                <div class="progress-bar bg-success" role="progressbar" style="width: 16.66%" aria-valuenow="16.66" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('pages-scripts')
<script>
    let trainerCount = 0;

    $(document).ready(function() {
        // Initialize SmartWizard
        $('#smartwizard').smartWizard({
            selected: 0,
            theme: 'arrows',
            autoAdjustHeight: false,
            transition: {
                animation: 'slide-horizontal',
                speed: '400',
                easing: 'ease-in-out'
            },
            toolbar: {
                position: 'none'
            }
        });

        // Add initial trainer
        addTrainer();

        // Organization type change handler
        $('#organization_type').change(function() {
            const type = $(this).val();
            if (type === 'NGO') {
                $('#darpan_field').show().find('input').attr('required', true);
                $('#gst_field').hide().find('input').attr('required', false);
            } else if (type === 'Private') {
                $('#gst_field').show().find('input').attr('required', true);
                $('#darpan_field').hide().find('input').attr('required', false);
            } else {
                $('#darpan_field, #gst_field').hide().find('input').attr('required', false);
            }
        });

        // State change handler
        $('#state').change(function() {
            const state = $(this).val();
            const districts = {
                'DL': ['New Delhi', 'Central Delhi', 'North Delhi', 'South Delhi', 'East Delhi', 'West Delhi'],
                'MH': ['Mumbai', 'Pune', 'Nashik', 'Nagpur', 'Aurangabad'],
                'KA': ['Bangalore', 'Mysore', 'Hubli', 'Mangalore', 'Belgaum'],
                'TN': ['Chennai', 'Coimbatore', 'Madurai', 'Salem', 'Tiruchirappalli'],
                'UP': ['Lucknow', 'Kanpur', 'Ghaziabad', 'Agra', 'Meerut']
            };

            const $district = $('#district');
            $district.empty().append('<option value="">Select District</option>');

            if (state && districts[state]) {
                districts[state].forEach(district => {
                    $district.append(`<option value="${district}">${district}</option>`);
                });
            }
        });

        // Infrastructure validation
        $('#classroom_size').on('input', function() {
            const value = parseInt($(this).val());
            const error = $('#classroom_size_error');
            if (value && value < 300) {
                error.show();
                $(this).addClass('is-invalid');
            } else {
                error.hide();
                $(this).removeClass('is-invalid');
            }
        });

        $('#laboratory_size').on('input', function() {
            const value = parseInt($(this).val());
            const error = $('#laboratory_size_error');
            if (value && value < 700) {
                error.show();
                $(this).addClass('is-invalid');
            } else {
                error.hide();
                $(this).removeClass('is-invalid');
            }
        });

        // Form submissions
        $('form').on('submit', function(e) {
            e.preventDefault();

            $('#smartwizard').smartWizard("next");
        });

        // Go back button
        $('.btn_go_back').on('click', function() {
            $('#smartwizard').smartWizard("prev");
            updateProgressBar();
        });

        $('.btn_next').on('click', function() {
            $('#smartwizard').smartWizard("next");
            updateProgressBar();
        });

        // Update progress bar based on current step
        function updateProgressBar() {
            const currentStep = $('#smartwizard').smartWizard("getStepIndex");
            const progress = ((currentStep + 1) / 6) * 100;
            $('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
        }

        // File upload handlers
        $('input[type="file"]').on('change', function() {
            const files = this.files;
            const label = $(this).prev('label');
            if (files.length > 0) {
                if (files.length === 1) {
                    label.text(label.text().split(' *')[0] + ' (' + files[0].name + ')');
                } else {
                    label.text(label.text().split(' *')[0] + ' (' + files.length + ' files selected)');
                }
            }
        });
    });

    function addTrainer() {
        trainerCount++;
        const trainerHTML = `
                <div class="card mb-3 shadow-sm border-0" id="trainer_${trainerCount}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Trainer ${trainerCount}</h5>
                        <button type="button" class="btn btn-danger btn-sm" onclick="removeTrainer(${trainerCount})">
                            <i class="fas fa-trash me-1"></i>Remove
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="trainer_name[]" class="form-control form-input" required placeholder="Enter trainer name">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Age <span class="text-danger">*</span></label>
                                <input type="number" name="trainer_age[]" class="form-control form-input" min="21" max="65" required placeholder="30">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                <input type="date" name="trainer_dob[]" class="form-control form-input" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Experience (Years) <span class="text-danger">*</span></label>
                                <input type="number" name="trainer_experience[]" class="form-control form-input" min="0" required placeholder="5">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Education Qualification <span class="text-danger">*</span></label>
                                <input type="text" name="trainer_education[]" class="form-control form-input" required placeholder="e.g., B.Sc. Nursing, M.A. Psychology">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">NIDS Certificate <span class="text-danger">*</span></label>
                                <select name="trainer_nids_cert[]" class="form-select" required>
                                    <option value="">Select</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">TOT Certificate <span class="text-danger">*</span></label>
                                <input type="file" name="tot_certificate" class="form-control form-input" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">TOA Certificate (Master Trainer)</label>
                                <input type="file" name="toa_certificate" class="form-control form-input" required />
                                <div class="form-text">Required for Master Trainer certification</div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        $('#trainers_container').append(trainerHTML);
    }

    function removeTrainer(id) {
        if ($('.card').length > 1) {
            $(`#trainer_${id}`).remove();
        } else {
            alert('At least one trainer is required.');
        }
    }
</script>
@endsection