<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h2 class="mb-4">
                <i class="fas fa-user-plus me-2" style="color: var(--nis-primary);"></i>
                Migrant Enrollment
            </h2>
        </div>
    </div>
    
    <!-- Progress Bar -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-2">
                <span>Form Progress</span>
                <span id="progressPercentage">14%</span>
            </div>
            <div class="progress-section">
                <div class="progress-bar" id="formProgress" style="width: 14%"></div>
            </div>
            <div class="d-flex justify-content-between small text-muted">
                <span>Biographical</span>
                <span>Residency</span>
                <span>Employment</span>
                <span>Status</span>
                <span>Travel</span>
                <span>Medical</span>
                <span>Biometrics</span>
            </div>
        </div>
    </div>
    
    <!-- Display Errors -->
    <?php if (isset($_SESSION['error'])): ?>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <?= $_SESSION['error'] ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php unset($_SESSION['error']); ?>
    <?php endif; ?>
    
    <?php if (isset($_SESSION['success'])): ?>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <?= $_SESSION['success'] ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php unset($_SESSION['success']); ?>
    <?php endif; ?>
    
    <form id="migrantForm" method="POST" action="<?= APP_URL ?>/migrants/store" enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
        <input type="hidden" name="person_id" value="<?= $person_id ?>">
        <input type="hidden" name="biometrics_json" id="biometrics-json">
        
        <!-- Section 1: BIOGRAPHICAL INFORMATION -->
        <div class="card mb-4" id="section1">
            <div class="card-header">
                <i class="fas fa-id-card me-2"></i>
                BIOGRAPHICAL INFORMATION
                <span class="badge bg-success ms-2">Section 1 of 7</span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">DOCUMENT TYPE <span class="text-danger">*</span></label>
                        <select name="document_type" class="form-select" required>
                            <option value="">SELECT DOCUMENT TYPE</option>
                            <option value="PASSPORT">PASSPORT</option>
                            <option value="REFUGEE PASSPORT">REFUGEE PASSPORT</option>
                            <option value="EMERGENCY TRAVEL CERTIFICATE">EMERGENCY TRAVEL CERTIFICATE</option>
                            <option value="NATIONAL ID">NATIONAL ID</option>
                            <option value="OTHER">OTHER</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">COUNTRY OF ISSUE <span class="text-danger">*</span></label>
                        <select name="country_of_issue" class="form-select" required>
                            <option value="">SELECT COUNTRY</option>
                            <?php
                            $countries = [
                                'AFGHANISTAN', 'ALBANIA', 'ALGERIA', 'ANDORRA', 'ANGOLA', 'ANTIGUA AND BARBUDA', 'ARGENTINA', 'ARMENIA', 'AUSTRALIA', 'AUSTRIA', 'AZERBAIJAN',
                                'BAHAMAS', 'BAHRAIN', 'BANGLADESH', 'BARBADOS', 'BELARUS', 'BELGIUM', 'BELIZE', 'BENIN', 'BHUTAN', 'BOLIVIA', 'BOSNIA AND HERZEGOVINA', 'BOTSWANA', 'BRAZIL', 'BRUNEI', 'BULGARIA', 'BURKINA FASO', 'BURUNDI',
                                'CABO VERDE', 'CAMBODIA', 'CAMEROON', 'CANADA', 'CENTRAL AFRICAN REPUBLIC', 'CHAD', 'CHILE', 'CHINA', 'COLOMBIA', 'COMOROS', 'CONGO', 'COSTA RICA', 'CROATIA', 'CUBA', 'CYPRUS', 'CZECH REPUBLIC',
                                'DEMOCRATIC REPUBLIC OF THE CONGO', 'DENMARK', 'DJIBOUTI', 'DOMINICA', 'DOMINICAN REPUBLIC',
                                'ECUADOR', 'EGYPT', 'EL SALVADOR', 'EQUATORIAL GUINEA', 'ERITREA', 'ESTONIA', 'ESWATINI', 'ETHIOPIA',
                                'FIJI', 'FINLAND', 'FRANCE',
                                'GABON', 'GAMBIA', 'GEORGIA', 'GERMANY', 'GHANA', 'GREECE', 'GRENADA', 'GUATEMALA', 'GUINEA', 'GUINEA-BISSAU', 'GUYANA',
                                'HAITI', 'HONDURAS', 'HUNGARY',
                                'ICELAND', 'INDIA', 'INDONESIA', 'IRAN', 'IRAQ', 'IRELAND', 'ISRAEL', 'ITALY',
                                'JAMAICA', 'JAPAN', 'JORDAN',
                                'KAZAKHSTAN', 'KENYA', 'KIRIBATI', 'KOREA, NORTH', 'KOREA, SOUTH', 'KOSOVO', 'KUWAIT', 'KYRGYZSTAN',
                                'LAOS', 'LATVIA', 'LEBANON', 'LESOTHO', 'LIBERIA', 'LIBYA', 'LIECHTENSTEIN', 'LITHUANIA', 'LUXEMBOURG',
                                'MADAGASCAR', 'MALAWI', 'MALAYSIA', 'MALDIVES', 'MALI', 'MALTA', 'MARSHALL ISLANDS', 'MAURITANIA', 'MAURITIUS', 'MEXICO', 'MICRONESIA', 'MOLDOVA', 'MONACO', 'MONGOLIA', 'MONTENEGRO', 'MOROCCO', 'MOZAMBIQUE', 'MYANMAR',
                                'NAMIBIA', 'NAURU', 'NEPAL', 'NETHERLANDS', 'NEW ZEALAND', 'NICARAGUA', 'NIGER', 'NIGERIA', 'NORTH MACEDONIA', 'NORWAY',
                                'OMAN',
                                'PAKISTAN', 'PALAU', 'PALESTINE', 'PANAMA', 'PAPUA NEW GUINEA', 'PARAGUAY', 'PERU', 'PHILIPPINES', 'POLAND', 'PORTUGAL',
                                'QATAR',
                                'ROMANIA', 'RUSSIA', 'RWANDA',
                                'SAINT KITTS AND NEVIS', 'SAINT LUCIA', 'SAINT VINCENT AND THE GRENADINES', 'SAMOA', 'SAN MARINO', 'SAO TOME AND PRINCIPE', 'SAUDI ARABIA', 'SENEGAL', 'SERBIA', 'SEYCHELLES', 'SIERRA LEONE', 'SINGAPORE', 'SLOVAKIA', 'SLOVENIA', 'SOLOMON ISLANDS', 'SOMALIA', 'SOUTH AFRICA', 'SOUTH SUDAN', 'SPAIN', 'SRI LANKA', 'SUDAN', 'SURINAME', 'SWEDEN', 'SWITZERLAND', 'SYRIA',
                                'TAIWAN', 'TAJIKISTAN', 'TANZANIA', 'THAILAND', 'TIMOR-LESTE', 'TOGO', 'TONGA', 'TRINIDAD AND TOBAGO', 'TUNISIA', 'TURKEY', 'TURKMENISTAN', 'TUVALU',
                                'UGANDA', 'UKRAINE', 'UNITED ARAB EMIRATES', 'UNITED KINGDOM', 'UNITED STATES', 'URUGUAY', 'UZBEKISTAN',
                                'VANUATU', 'VATICAN CITY', 'VENEZUELA', 'VIETNAM',
                                'YEMEN',
                                'ZAMBIA', 'ZIMBABWE'
                            ];
                            foreach ($countries as $country) {
                                echo "<option value=\"$country\">$country</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">DOCUMENT NO <span class="text-danger">*</span></label>
                        <input type="text" name="document_no" class="form-control" required>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">SURNAME <span class="text-danger">*</span></label>
                        <input type="text" name="surname" class="form-control text-uppercase" required>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">GIVEN NAME <span class="text-danger">*</span></label>
                        <input type="text" name="given_name" class="form-control text-uppercase" required>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">NATIONALITY <span class="text-danger">*</span></label>
                        <select name="nationality" class="form-select" required>
                            <option value="">SELECT NATIONALITY</option>
                            <?php
                            foreach ($countries as $country) {
                                echo "<option value=\"$country\">$country</option>";
                            }
                            ?>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">DATE OF BIRTH <span class="text-danger">*</span></label>
                        <input type="date" name="date_of_birth" class="form-control" required max="<?= date('Y-m-d', strtotime('-18 years')) ?>">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">GENDER <span class="text-danger">*</span></label>
                        <select name="sex" class="form-select" required>
                            <option value="">SELECT GENDER</option>
                            <option value="Male">MALE</option>
                            <option value="Female">FEMALE</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">EXPIRY DATE</label>
                        <input type="date" name="expiry_date" class="form-control" min="<?= date('Y-m-d') ?>">
                    </div>
                    
                </div>
                
                <div class="row">
                        <div class="col-md-3 mb-3">
                        <label class="form-label">NATIONAL ID NO</label>
                        <input type="text" name="national_id_no" class="form-control">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">DATE OF ISSUE</label>
                        <input type="date" name="date_of_issue" class="form-control" max="<?= date('Y-m-d') ?>">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">ISSUING AUTHORITY</label>
                        <input type="text" name="issuing_authority" class="form-control">
                    </div>
                    
                </div>
                
                <div class="row">
                         <div class="col-md-3 mb-3">
                        <label class="form-label">OCCUPATION</label>
                        <input type="text" name="occupation" class="form-control">
                    </div>
                    
                        <div class="col-md-3 mb-3">
                        <label class="form-label">PROFESSION</label>
                        <input type="text" name="profession" class="form-control">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">HIGHEST QUALIFICATION</label>
                        <select name="highest_qualification" class="form-select">
                            <option value="">SELECT QUALIFICATION</option>
                            <option value="NO FORMAL EDUCATION">NO FORMAL EDUCATION</option>
                            <option value="PRIMARY EDUCATION">PRIMARY EDUCATION</option>
                            <option value="SECONDARY EDUCATION">SECONDARY EDUCATION</option>
                            <option value="DIPLOMA">DIPLOMA</option>
                            <option value="BACHELOR'S DEGREE">BACHELOR'S DEGREE</option>
                            <option value="MASTER'S DEGREE">MASTER'S DEGREE</option>
                            <option value="DOCTORATE">DOCTORATE</option>
                            <option value="PROFESSIONAL CERTIFICATION">PROFESSIONAL CERTIFICATION</option>
                            <option value="VOCATIONAL TRAINING">VOCATIONAL TRAINING</option>
                            <option value="OTHER">OTHER</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">EMAIL ADDRESS</label>
                        <input type="email" name="email_address" class="form-control">
                    </div>
                    
                         <div class="col-md-3 mb-3">
                        <label class="form-label">BLOOD TYPE</label>
                        <select name="blood_type" class="form-select">
                            <option value="">SELECT BLOOD TYPE</option>
                            <option value="A+">A+</option>
                            <option value="A-">A-</option>
                            <option value="B+">B+</option>
                            <option value="B-">B-</option>
                            <option value="AB+">AB+</option>
                            <option value="AB-">AB-</option>
                            <option value="O+">O+</option>
                            <option value="O-">O-</option>
                        </select>
                    </div>
                    
                     <div class="col-md-3 mb-3">
                        <label class="form-label">MARITAL STATUS</label>
                        <select name="marital_status" class="form-select">
                            <option value="">SELECT MARITAL STATUS</option>
                            <option value="Single">SINGLE</option>
                            <option value="Married">MARRIED</option>
                            <option value="Divorced">DIVORCED</option>
                            <option value="Widowed">WIDOWED</option>
                            <option value="Separated">SEPARATED</option>
                        </select>
                    </div>
                    </div>
                    
                     <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">PLACE OF BIRTH</label>
                        <input type="text" name="place_of_birth" class="form-control">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">COUNTRY OF BIRTH</label>
                        <select name="country_of_birth" class="form-select">
                            <option value="">SELECT COUNTRY</option>
                            <?php
                            foreach ($countries as $country) {
                                echo "<option value=\"$country\">$country</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">STATE/PROVINCE</label>
                        <input type="text" name="state_province" class="form-control">
                    </div>
                    </div>
                    
                     <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">TOWN</label>
                        <input type="text" name="town" class="form-control">
                    </div>
                    </div>
                </div>
            </div>
            <div class="card-footer text-end">
                <button type="button" class="btn btn-nis next-section" data-next="2">Next Section <i class="fas fa-arrow-right ms-2"></i></button>
            </div>
        </div>
        
        <!-- Section 2: RESIDENCY INFORMATION -->
        <div class="card mb-4 d-none" id="section2">
            <div class="card-header">
                <i class="fas fa-map-marker-alt me-2"></i>
                RESIDENCY INFORMATION
                <span class="badge bg-success ms-2">Section 2 of 7</span>
            </div>
            <div class="card-body">
                <h5 class="mb-3">LAST PERMANENT ADDRESS (ABROAD)</h5>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">COUNTRY</label>
                        <select name="foreign_address[country]" class="form-select" id="foreign-country" onchange="updateCountryCode()">
                            <option value="">SELECT COUNTRY</option>
                            <?php
                            // Country codes mapping
                            $countryCodes = [
                                'AFGHANISTAN' => '+93', 'ALBANIA' => '+355', 'ALGERIA' => '+213', 'ANDORRA' => '+376', 'ANGOLA' => '+244',
                                'ARGENTINA' => '+54', 'ARMENIA' => '+374', 'AUSTRALIA' => '+61', 'AUSTRIA' => '+43', 'AZERBAIJAN' => '+994',
                                'BAHAMAS' => '+1-242', 'BAHRAIN' => '+973', 'BANGLADESH' => '+880', 'BARBADOS' => '+1-246', 'BELARUS' => '+375',
                                'BELGIUM' => '+32', 'BELIZE' => '+501', 'BENIN' => '+229', 'BHUTAN' => '+975', 'BOLIVIA' => '+591',
                                'BOSNIA AND HERZEGOVINA' => '+387', 'BOTSWANA' => '+267', 'BRAZIL' => '+55', 'BRUNEI' => '+673', 'BULGARIA' => '+359',
                                'BURKINA FASO' => '+226', 'BURUNDI' => '+257', 'CAMBODIA' => '+855', 'CAMEROON' => '+237', 'CANADA' => '+1',
                                'CAPE VERDE' => '+238', 'CENTRAL AFRICAN REPUBLIC' => '+236', 'CHAD' => '+235', 'CHILE' => '+56', 'CHINA' => '+86',
                                'COLOMBIA' => '+57', 'COMOROS' => '+269', 'CONGO' => '+242', 'COSTA RICA' => '+506', 'CROATIA' => '+385',
                                'CUBA' => '+53', 'CYPRUS' => '+357', 'CZECH REPUBLIC' => '+420', 'DENMARK' => '+45', 'DJIBOUTI' => '+253',
                                'DOMINICA' => '+1-767', 'DOMINICAN REPUBLIC' => '+1-809', 'ECUADOR' => '+593', 'EGYPT' => '+20', 'EL SALVADOR' => '+503',
                                'EQUATORIAL GUINEA' => '+240', 'ERITREA' => '+291', 'ESTONIA' => '+372', 'ESWATINI' => '+268', 'ETHIOPIA' => '+251',
                                'FIJI' => '+679', 'FINLAND' => '+358', 'FRANCE' => '+33', 'GABON' => '+241', 'GAMBIA' => '+220',
                                'GEORGIA' => '+995', 'GERMANY' => '+49', 'GHANA' => '+233', 'GREECE' => '+30', 'GRENADA' => '+1-473',
                                'GUATEMALA' => '+502', 'GUINEA' => '+224', 'GUINEA-BISSAU' => '+245', 'GUYANA' => '+592', 'HAITI' => '+509',
                                'HONDURAS' => '+504', 'HUNGARY' => '+36', 'ICELAND' => '+354', 'INDIA' => '+91', 'INDONESIA' => '+62',
                                'IRAN' => '+98', 'IRAQ' => '+964', 'IRELAND' => '+353', 'ISRAEL' => '+972', 'ITALY' => '+39',
                                'JAMAICA' => '+1-876', 'JAPAN' => '+81', 'JORDAN' => '+962', 'KAZAKHSTAN' => '+7', 'KENYA' => '+254',
                                'KIRIBATI' => '+686', 'KOREA, SOUTH' => '+82', 'KOSOVO' => '+383', 'KUWAIT' => '+965', 'KYRGYZSTAN' => '+996',
                                'LAOS' => '+856', 'LATVIA' => '+371', 'LEBANON' => '+961', 'LESOTHO' => '+266', 'LIBERIA' => '+231',
                                'LIBYA' => '+218', 'LIECHTENSTEIN' => '+423', 'LITHUANIA' => '+370', 'LUXEMBOURG' => '+352', 'MADAGASCAR' => '+261',
                                'MALAWI' => '+265', 'MALAYSIA' => '+60', 'MALDIVES' => '+960', 'MALI' => '+223', 'MALTA' => '+356',
                                'MARSHALL ISLANDS' => '+692', 'MAURITANIA' => '+222', 'MAURITIUS' => '+230', 'MEXICO' => '+52', 'MICRONESIA' => '+691',
                                'MOLDOVA' => '+373', 'MONACO' => '+377', 'MONGOLIA' => '+976', 'MONTENEGRO' => '+382', 'MOROCCO' => '+212',
                                'MOZAMBIQUE' => '+258', 'MYANMAR' => '+95', 'NAMIBIA' => '+264', 'NAURU' => '+674', 'NEPAL' => '+977',
                                'NETHERLANDS' => '+31', 'NEW ZEALAND' => '+64', 'NICARAGUA' => '+505', 'NIGER' => '+227', 'NIGERIA' => '+234',
                                'NORTH MACEDONIA' => '+389', 'NORWAY' => '+47', 'OMAN' => '+968', 'PAKISTAN' => '+92', 'PALAU' => '+680',
                                'PALESTINE' => '+970', 'PANAMA' => '+507', 'PAPUA NEW GUINEA' => '+675', 'PARAGUAY' => '+595', 'PERU' => '+51',
                                'PHILIPPINES' => '+63', 'POLAND' => '+48', 'PORTUGAL' => '+351', 'QATAR' => '+974', 'ROMANIA' => '+40',
                                'RUSSIA' => '+7', 'RWANDA' => '+250', 'SAINT KITTS AND NEVIS' => '+1-869', 'SAINT LUCIA' => '+1-758',
                                'SAINT VINCENT AND THE GRENADINES' => '+1-784', 'SAMOA' => '+685', 'SAN MARINO' => '+378', 'SAO TOME AND PRINCIPE' => '+239',
                                'SAUDI ARABIA' => '+966', 'SENEGAL' => '+221', 'SERBIA' => '+381', 'SEYCHELLES' => '+248', 'SIERRA LEONE' => '+232',
                                'SINGAPORE' => '+65', 'SLOVAKIA' => '+421', 'SLOVENIA' => '+386', 'SOLOMON ISLANDS' => '+677', 'SOMALIA' => '+252',
                                'SOUTH AFRICA' => '+27', 'SOUTH SUDAN' => '+211', 'SPAIN' => '+34', 'SRI LANKA' => '+94', 'SUDAN' => '+249',
                                'SURINAME' => '+597', 'SWEDEN' => '+46', 'SWITZERLAND' => '+41', 'SYRIA' => '+963', 'TAIWAN' => '+886',
                                'TAJIKISTAN' => '+992', 'TANZANIA' => '+255', 'THAILAND' => '+66', 'TIMOR-LESTE' => '+670', 'TOGO' => '+228',
                                'TONGA' => '+676', 'TRINIDAD AND TOBAGO' => '+1-868', 'TUNISIA' => '+216', 'TURKEY' => '+90', 'TURKMENISTAN' => '+993',
                                'TUVALU' => '+688', 'UGANDA' => '+256', 'UKRAINE' => '+380', 'UNITED ARAB EMIRATES' => '+971', 'UNITED KINGDOM' => '+44',
                                'UNITED STATES' => '+1', 'URUGUAY' => '+598', 'UZBEKISTAN' => '+998', 'VANUATU' => '+678', 'VATICAN CITY' => '+379',
                                'VENEZUELA' => '+58', 'VIETNAM' => '+84', 'YEMEN' => '+967', 'ZAMBIA' => '+260', 'ZIMBABWE' => '+263'
                            ];
                            foreach ($countries as $country) {
                                $code = isset($countryCodes[$country]) ? ' data-code="'.$countryCodes[$country].'"' : '';
                                echo "<option value=\"$country\"$code>$country</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">STATE/PROVINCE</label>
                        <input type="text" name="foreign_address[state_province]" class="form-control">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">TOWN</label>
                        <input type="text" name="foreign_address[town]" class="form-control">
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">POSTAL CODE</label>
                        <input type="text" name="foreign_address[postal_code]" class="form-control">
                    </div>
                    
                    <div class="col-md-8 mb-3">
                        <label class="form-label">ADDRESS <span class="text-danger">*</span></label>
                        <textarea name="foreign_address[abroad_address]" class="form-control" rows="2" required></textarea>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">PHONE NUMBER(S)</label>
                        <div class="input-group">
                            <span class="input-group-text" id="country-code-display">+234</span>
                            <input type="tel" name="foreign_address[phone_number]" class="form-control" placeholder="Phone number" id="phone-number-input">
                        </div>
                        <small class="text-muted">Country code auto-fills based on selected country</small>
                    </div>
                </div>
                
                <hr class="my-4">
                
                <h5 class="mb-3">RESIDENCY IN NIGERIA</h5>
                
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">STATE</label>
                        <select name="nigeria_residence[state]" class="form-select" id="nigeria-state" onchange="loadLocalGovernments()">
                            <option value="">SELECT STATE</option>
                            <option value="ABIA">ABIA</option>
                            <option value="ADAMAWA">ADAMAWA</option>
                            <option value="AKWA IBOM">AKWA IBOM</option>
                            <option value="ANAMBRA">ANAMBRA</option>
                            <option value="BAUCHI">BAUCHI</option>
                            <option value="BAYELSA">BAYELSA</option>
                            <option value="BENUE">BENUE</option>
                            <option value="BORNO">BORNO</option>
                            <option value="CROSS RIVER">CROSS RIVER</option>
                            <option value="DELTA">DELTA</option>
                            <option value="EBONYI">EBONYI</option>
                            <option value="EDO">EDO</option>
                            <option value="EKITI">EKITI</option>
                            <option value="ENUGU">ENUGU</option>
                            <option value="FCT">FCT (ABUJA)</option>
                            <option value="GOMBE">GOMBE</option>
                            <option value="IMO">IMO</option>
                            <option value="JIGAWA">JIGAWA</option>
                            <option value="KADUNA">KADUNA</option>
                            <option value="KANO">KANO</option>
                            <option value="KATSINA">KATSINA</option>
                            <option value="KEBBI">KEBBI</option>
                            <option value="KOGI">KOGI</option>
                            <option value="KWARA">KWARA</option>
                            <option value="LAGOS">LAGOS</option>
                            <option value="NASSARAWA">NASSARAWA</option>
                            <option value="NIGER">NIGER</option>
                            <option value="OGUN">OGUN</option>
                            <option value="ONDO">ONDO</option>
                            <option value="OSUN">OSUN</option>
                            <option value="OYO">OYO</option>
                            <option value="PLATEAU">PLATEAU</option>
                            <option value="RIVERS">RIVERS</option>
                            <option value="SOKOTO">SOKOTO</option>
                            <option value="TARABA">TARABA</option>
                            <option value="YOBE">YOBE</option>
                            <option value="ZAMFARA">ZAMFARA</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">LOCAL GOVERNMENT</label>
                        <select name="nigeria_residence[local_government]" class="form-select" id="local-government">
                            <option value="">SELECT LOCAL GOVERNMENT</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">TOWN</label>
                        <input type="text" name="nigeria_residence[town]" class="form-control">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">POSTAL CODE</label>
                        <input type="text" name="nigeria_residence[postal_code]" class="form-control">
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">ADDRESS <span class="text-danger">*</span></label>
                        <textarea name="nigeria_residence[address]" class="form-control" rows="2" required></textarea>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">PHONE NUMBER</label>
                        <input type="tel" name="nigeria_residence[phone_number]" class="form-control" placeholder="080XXXXXXXX">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">REFERENCE PERSON NAME</label>
                        <input type="text" name="nigeria_residence[reference_person_name]" class="form-control">
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">REFERENCE PERSON PHONE</label>
                        <input type="tel" name="nigeria_residence[reference_person_phone]" class="form-control" placeholder="080XXXXXXXX">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="nigeria_residence[is_current]" class="form-check-input" value="1" checked>
                            <label class="form-check-label">Current Address</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button type="button" class="btn btn-outline-nis prev-section" data-prev="1"><i class="fas fa-arrow-left me-2"></i> Previous</button>
                <button type="button" class="btn btn-nis next-section" data-next="3">Next Section <i class="fas fa-arrow-right ms-2"></i></button>
            </div>
        </div>
        
        <!-- Section 3: EMPLOYMENT HISTORY -->
        <div class="card mb-4 d-none" id="section3">
            <div class="card-header">
                <i class="fas fa-briefcase me-2"></i>
                EMPLOYMENT HISTORY
                <span class="badge bg-success ms-2">Section 3 of 7</span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">NAME OF EMPLOYER <span class="text-danger">*</span></label>
                        <input type="text" name="employment[employer_name]" class="form-control" required>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">EMPLOYER'S ADDRESS <span class="text-danger">*</span></label>
                        <textarea name="employment[employer_address]" class="form-control" rows="2" required></textarea>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">EMPLOYER STATE</label>
                        <input type="text" name="employment[employer_state]" class="form-control">
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">JOB TITLE <span class="text-danger">*</span></label>
                        <input type="text" name="employment[job_title]" class="form-control" required>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">START DATE <span class="text-danger">*</span></label>
                        <input type="date" name="employment[start_date]" class="form-control" required max="<?= date('Y-m-d') ?>">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">END DATE</label>
                        <input type="date" name="employment[end_date]" class="form-control" min="<?= date('Y-m-d') ?>">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">EMPLOYER'S PROFESSION/INDUSTRY</label>
                        <input type="text" name="employment[employer_profession_industry]" class="form-control">
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">EMPLOYER'S EMAIL</label>
                        <input type="email" name="employment[employer_email]" class="form-control">
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">EMPLOYER'S PHONE NUMBER</label>
                        <input type="tel" name="employment[employer_phone_number]" class="form-control">
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button type="button" class="btn btn-outline-nis prev-section" data-prev="2"><i class="fas fa-arrow-left me-2"></i> Previous</button>
                <button type="button" class="btn btn-nis next-section" data-next="4">Next Section <i class="fas fa-arrow-right ms-2"></i></button>
            </div>
        </div>
        
        <!-- Section 4: IMMIGRANT STATUS -->
        <div class="card mb-4 d-none" id="section4">
            <div class="card-header">
                <i class="fas fa-passport me-2"></i>
                IMMIGRANT STATUS
                <span class="badge bg-success ms-2">Section 4 of 7</span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">STATUS CATEGORY <span class="text-danger">*</span></label>
                        <select name="immigrant_status[status_category]" class="form-select" required>
                            <option value="">SELECT STATUS</option>
                            <option value="Visitor">VISITOR</option>
                            <option value="Temporary Resident">TEMPORARY RESIDENT</option>
                            <option value="Student">STUDENT</option>
                            <option value="Worker">WORKER</option>
                            <option value="Permanent Resident">PERMANENT RESIDENT</option>
                            <option value="Refugee">REFUGEE</option>
                            <option value="Asylum Seeker">ASYLUM SEEKER</option>
                            <option value="Diplomat">DIPLOMAT</option>
                            <option value="Undocumented">UNDOCUMENTED</option>
                        </select>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">VISA TYPE</label>
                        <select name="immigrant_status[visa_type]" class="form-select">
                            <option value="">SELECT VISA TYPE</option>
                            <option value="Transit Visa">Transit Visa</option>
                            <option value="Visiting Visa (Single Entry)">Visiting Visa (Single Entry)</option>
                            <option value="Business">Business</option>
                            <option value="Business Visa (Multiple Entry)">Business Visa (Multiple Entry)</option>
                            <option value="Tourism Visa">Tourism Visa</option>
                            <option value="Sports Visa">Sports Visa</option>
                            <option value="Creative Arts Visa">Creative Arts Visa</option>
                            <option value="Study Tour Visa">Study Tour Visa</option>
                            <option value="Academic Exchange Programme Visa">Academic Exchange Programme Visa</option>
                            <option value="International Cultural Exchange Visa">International Cultural Exchange Visa</option>
                            <option value="Emergency/Relief Work Visa">Emergency/Relief Work Visa</option>
                            <option value="Returning holders of foreign Passports">Returning holders of foreign Passports</option>
                            <option value="Returning Holders of Foreign Passports">Returning Holders of Foreign Passports</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">PERMIT NUMBER</label>
                        <input type="text" name="immigrant_status[permit_number]" class="form-control">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">DATE GRANTED <span class="text-danger">*</span></label>
                        <input type="date" name="immigrant_status[date_granted]" class="form-control" required max="<?= date('Y-m-d') ?>">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">EXPIRY DATE</label>
                        <input type="date" name="immigrant_status[expiry_date]" class="form-control" min="<?= date('Y-m-d') ?>">
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">SPONSOR TYPE</label>
                        <select name="immigrant_status[sponsor_type]" class="form-select">
                            <option value="">SELECT SPONSOR</option>
                            <option value="Employer">EMPLOYER</option>
                            <option value="Institution">INSTITUTION</option>
                            <option value="Self">SELF</option>
                            <option value="Government">GOVERNMENT</option>
                        </select>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="immigrant_status[is_active]" class="form-check-input" value="1" checked>
                            <label class="form-check-label">Active Status</label>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label">STATUS CONDITIONS</label>
                        <textarea name="immigrant_status[status_condition]" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button type="button" class="btn btn-outline-nis prev-section" data-prev="3"><i class="fas fa-arrow-left me-2"></i> Previous</button>
                <button type="button" class="btn btn-nis next-section" data-next="5">Next Section <i class="fas fa-arrow-right ms-2"></i></button>
            </div>
        </div>
        
        <!-- Section 5: TRAVEL DETAILS -->
        <div class="card mb-4 d-none" id="section5">
            <div class="card-header">
                <i class="fas fa-plane me-2"></i>
                TRAVEL DETAILS (MOST RECENT TRAVELS)
                <span class="badge bg-success ms-2">Section 5 of 7</span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">TRAVELED ON OWN FREE WILL? <span class="text-danger">*</span></label>
                        <select name="travel_history[traveled_on_own_free_will]" class="form-select" required>
                            <option value="">SELECT</option>
                            <option value="1">YES</option>
                            <option value="0">NO</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">PURPOSE OF TRAVEL <span class="text-danger">*</span></label>
                        <select name="travel_history[purpose_of_travel]" class="form-select" required>
                            <option value="">SELECT PURPOSE</option>
                            <option value="Holiday">HOLIDAY</option>
                            <option value="Work">WORK</option>
                            <option value="Study">STUDY</option>
                            <option value="Business">BUSINESS</option>
                            <option value="Medical">MEDICAL</option>
                            <option value="Transit">TRANSIT</option>
                            <option value="Relocation">RELOCATION</option>
                            <option value="Other">OTHER</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">TYPE OF TRANSPORTATION <span class="text-danger">*</span></label>
                        <select name="travel_history[transportation_type]" class="form-select" required>
                            <option value="">SELECT</option>
                            <option value="Flight">FLIGHT</option>
                            <option value="Car">CAR</option>
                            <option value="Bus">BUS</option>
                            <option value="Train">TRAIN</option>
                            <option value="Ship">SHIP</option>
                            <option value="Other">OTHER</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">DEPARTURE DATE <span class="text-danger">*</span></label>
                        <input type="date" name="travel_history[departure_date]" class="form-control" required max="<?= date('Y-m-d') ?>">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">ARRIVAL DATE <span class="text-danger">*</span></label>
                        <input type="date" name="travel_history[arrival_date]" class="form-control" required max="<?= date('Y-m-d') ?>">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">PORT OF ENTRY <span class="text-danger">*</span></label>
                        <input type="text" name="travel_history[port_of_entry]" class="form-control" required>
                    </div>
                </div>
                
                <h5 class="mt-3 mb-3">DEPARTURE DETAILS</h5>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">COUNTRY <span class="text-danger">*</span></label>
                        <select name="travel_history[departure_country]" class="form-select" required>
                            <option value="">SELECT COUNTRY</option>
                            <?php
                            foreach ($countries as $country) {
                                echo "<option value=\"$country\">$country</option>";
                            }
                            ?>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">STATE/PROVINCE</label>
                        <input type="text" name="travel_history[departure_state_province]" class="form-control">
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label class="form-label">TOWN</label>
                        <input type="text" name="travel_history[departure_town]" class="form-control">
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">TRAVEL DOCUMENT TYPE USED <span class="text-danger">*</span></label>
                        <select name="travel_history[travel_document_type]" class="form-select" required>
                            <option value="">SELECT</option>
                            <option value="Passport">PASSPORT</option>
                            <option value="Refugee Passport">REFUGEE PASSPORT</option>
                            <option value="Emergency Travel Certificate">EMERGENCY TRAVEL CERTIFICATE</option>
                            <option value="National ID">NATIONAL ID</option>
                            <option value="Other">OTHER</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button type="button" class="btn btn-outline-nis prev-section" data-prev="4"><i class="fas fa-arrow-left me-2"></i> Previous</button>
                <button type="button" class="btn btn-nis next-section" data-next="6">Next Section <i class="fas fa-arrow-right ms-2"></i></button>
            </div>
        </div>
        
        <!-- Section 6: MEDICAL HISTORY & DOCUMENTS -->
        <div class="card mb-4 d-none" id="section6">
            <div class="card-header">
                <i class="fas fa-hospital me-2"></i>
                MEDICAL HISTORY & DOCUMENTS
                <span class="badge bg-success ms-2">Section 6 of 7</span>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    You will be asked questions on the following:
                    <ul class="mb-0 mt-2">
                        <li>Any illnesses currently suffered from</li>
                        <li>Medications currently taken</li>
                        <li>Illnesses suffered</li>
                        <li>Vaccinations taken</li>
                    </ul>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">ILLNESS NAME</label>
                        <input type="text" name="medical_history[illness_name]" class="form-control">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label">ILLNESS DATE</label>
                        <input type="date" name="medical_history[illness_date]" class="form-control" max="<?= date('Y-m-d') ?>">
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="medical_history[is_current]" class="form-check-input" value="1">
                            <label class="form-check-label">Current Illness</label>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">VACCINE NAME</label>
                        <input type="text" name="medical_history[vaccine_name]" class="form-control">
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label class="form-label">VACCINE DATE</label>
                        <input type="date" name="medical_history[vaccine_date]" class="form-control" max="<?= date('Y-m-d') ?>">
                    </div>
                </div>
                
                <hr>
                
                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label">UPLOAD DOCUMENTS</label>
                        <input type="file" name="documents[]" class="form-control" multiple accept=".pdf,.jpg,.jpeg,.png">
                        <small class="text-muted">Allowed: PDF, JPG, PNG (Max: 5MB each)</small>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button type="button" class="btn btn-outline-nis prev-section" data-prev="5"><i class="fas fa-arrow-left me-2"></i> Previous</button>
                <button type="button" class="btn btn-nis next-section" data-next="7">Next Section <i class="fas fa-arrow-right ms-2"></i></button>
            </div>
            
        </div>
        
        <!-- Section 7: BIOMETRICS CAPTURE - UPDATED WITH THUMBS COMPULSORY -->
        <div class="card mb-4 d-none" id="section7">
            <div class="card-header">
                <i class="fas fa-fingerprint me-2"></i>
                BIOMETRICS CAPTURE
                <span class="badge bg-success ms-2">Section 7 of 7</span>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please capture the following biometric data: <strong>Left Thumb</strong> and <strong>Right Thumb</strong> are required. Other fingers are optional.
                </div>
                
                <div class="row">
                    <!-- Photo Capture Section -->
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header bg-light">
                                <i class="fas fa-camera me-2"></i>
                                Photo Capture
                            </div>
                            <div class="card-body text-center">
                                <div id="camera-container" class="mb-3">
                                    <video id="video" width="100%" height="auto" autoplay playsinline style="border-radius: 10px; border: 2px solid var(--nis-primary);"></video>
                                    <canvas id="canvas" style="display: none;"></canvas>
                                </div>
                                
                                <div id="photo-preview" class="mb-3" style="display: none;">
                                    <img id="captured-photo" src="" alt="Captured Photo" style="max-width: 100%; border-radius: 10px; border: 2px solid var(--nis-primary);">
                                </div>
                                
                                <div class="d-flex justify-content-center gap-2">
                                    <button type="button" id="start-camera" class="btn btn-nis">
                                        <i class="fas fa-camera me-2"></i> Start Camera
                                    </button>
                                    <button type="button" id="capture-photo" class="btn btn-success" style="display: none;">
                                        <i class="fas fa-camera-retro me-2"></i> Capture Photo
                                    </button>
                                    <button type="button" id="retake-photo" class="btn btn-warning" style="display: none;">
                                        <i class="fas fa-redo me-2"></i> Retake
                                    </button>
                                </div>
                                <input type="hidden" name="photo_data" id="photo-data">
                                <small class="text-muted d-block mt-2">Position face clearly in the frame</small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Fingerprint Capture Section -->
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header bg-light">
                                <i class="fas fa-fingerprint me-2"></i>
                                Fingerprint Capture
                            </div>
                            <div class="card-body">
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    Connect fingerprint scanner to continue
                                </div>
                                
                                <!-- Fingerprint Machine Selection -->
                                <div class="mb-3">
                                    <label class="form-label">Select Fingerprint Scanner</label>
                                    <select id="fingerprint-device" class="form-select">
                                        <option value="">-- Select Scanner Type --</option>
                                        <option value="nitgen">Nitgen EnBioScan-D Plus</option>
                                        <option value="suprema">Suprema RealScan-D</option>
                                        <option value="digitalpersona">DigitalPersona U.are.U</option>
                                        <option value="secugen">SecuGen Hamster Pro</option>
                                        <option value="futronic">Futronic FS88</option>
                                        <option value="other">Other Scanner</option>
                                    </select>
                                </div>
                                
                                <!-- Fingerprint Capture UI -->
                                <div class="fingerprint-container text-center">
                                    <div class="fingerprint-placeholder mb-3">
                                        <i class="fas fa-fingerprint fa-5x" style="color: #ccc;"></i>
                                    </div>
                                    
                                    <div class="fingerprint-status alert alert-secondary mb-3">
                                        <span id="fp-status">Waiting for scanner connection...</span>
                                    </div>
                                    
                                    <div class="fingerprint-progress mb-3" style="display: none;">
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                                 style="width: 0%" id="fp-progress">0%</div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <!-- Left Hand -->
                                        <div class="col-md-6">
                                            <h6 class="text-center mb-2">Left Hand</h6>
                                            <div class="finger-grid">
                                                <div class="finger-item required-finger" data-finger="Left Thumb" data-captured="false" data-required="true">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Left Thumb <span class="text-danger">*</span></span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Left Index" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Left Index</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Left Middle" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Left Middle</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Left Ring" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Left Ring</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Left Little" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Left Little</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Right Hand -->
                                        <div class="col-md-6">
                                            <h6 class="text-center mb-2">Right Hand</h6>
                                            <div class="finger-grid">
                                                <div class="finger-item required-finger" data-finger="Right Thumb" data-captured="false" data-required="true">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Right Thumb <span class="text-danger">*</span></span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Right Index" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Right Index</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Right Middle" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Right Middle</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Right Ring" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Right Ring</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                                <div class="finger-item" data-finger="Right Little" data-captured="false" data-required="false">
                                                    <i class="fas fa-fingerprint"></i>
                                                    <span>Right Little</span>
                                                    <i class="fas fa-check-circle text-success captured-icon" style="display: none;"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-3">
                                        <button type="button" id="start-fingerprint" class="btn btn-nis" disabled>
                                            <i class="fas fa-play me-2"></i> Start Capture
                                        </button>
                                        <button type="button" id="simulate-fingerprint" class="btn btn-outline-secondary">
                                            <i class="fas fa-microchip me-2"></i> Simulate (Demo)
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Hidden inputs for fingerprint data -->
                                <input type="hidden" name="fingerprint_data" id="fingerprint-data">
                                <input type="hidden" name="fingerprint_device" id="fingerprint-device-model">
                                <input type="hidden" name="biometrics_captured" id="biometrics-captured" value="0">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Biometrics Status -->
                <div class="alert alert-success" id="biometrics-complete" style="display: none;">
                    <i class="fas fa-check-circle me-2"></i>
                    <span id="biometrics-status">Biometrics captured successfully!</span>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button type="button" class="btn btn-outline-nis prev-section" data-prev="6"><i class="fas fa-arrow-left me-2"></i> Previous</button>
                <button type="submit" class="btn btn-nis" id="submitForm"><i class="fas fa-save me-2"></i> Save as Draft</button>
                <button type="button" class="btn btn-success" id="submitAndContinue"><i class="fas fa-paper-plane me-2"></i> Submit for Review</button>
            </div>
        </div>
    </form>
</div>

<style>
/* Biometrics Styles */
.finger-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finger-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.finger-item:hover {
    border-color: var(--nis-primary);
    background-color: var(--nis-light);
}

.finger-item i:first-child {
    font-size: 1.2rem;
    color: var(--nis-primary);
    margin-right: 10px;
}

.finger-item .captured-icon {
    margin-left: auto;
    font-size: 1.2rem;
}

.finger-item.captured {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.finger-item.captured i:first-child {
    color: #28a745;
}

.finger-item.active {
    border-color: var(--nis-accent);
    background-color: rgba(255, 193, 7, 0.1);
    transform: scale(1.02);
}

.required-finger {
    border-left: 4px solid #dc3545;
}

#video {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    background: #000;
}

#camera-container {
    position: relative;
    min-height: 200px;
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .finger-grid {
        margin-bottom: 20px;
    }
    
    .finger-item {
        padding: 8px;
        font-size: 0.9rem;
    }
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    console.log("Document ready - Initializing form");
    
    let currentSection = 1;
    const totalSections = 7;
    
    // Initialize progress
    updateProgress();
    
    // Next section
    $('.next-section').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        console.log("Next button clicked");
        const next = $(this).data('next');
        console.log("Next section:", next);
        
        if (validateSection(currentSection)) {
            console.log("Validation passed, moving to section", next);
            
            // Hide current section
            $('#section' + currentSection).addClass('d-none');
            
            // Show next section
            $('#section' + next).removeClass('d-none');
            
            // Update current section
            currentSection = next;
            
            // Update progress
            updateProgress();
            
            // Scroll to top
            $('html, body').animate({
                scrollTop: $('#section' + currentSection).offset().top - 100
            }, 500);
        } else {
            console.log("Validation failed");
        }
    });
    
    // Previous section
    $('.prev-section').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        console.log("Previous button clicked");
        const prev = $(this).data('prev');
        console.log("Previous section:", prev);
        
        // Hide current section
        $('#section' + currentSection).addClass('d-none');
        
        // Show previous section
        $('#section' + prev).removeClass('d-none');
        
        // Update current section
        currentSection = prev;
        
        // Update progress
        updateProgress();
        
        // Scroll to top
        $('html, body').animate({
            scrollTop: $('#section' + currentSection).offset().top - 100
        }, 500);
    });
    
    // Update progress bar
    function updateProgress() {
        const percentage = (currentSection / totalSections) * 100;
        $('#formProgress').css('width', percentage + '%');
        $('#progressPercentage').text(Math.round(percentage) + '%');
        console.log("Progress updated:", percentage + '%');
    }
    
    // Validate section
    function validateSection(section) {
        console.log("Validating section", section);
        let isValid = true;
        let firstInvalid = null;
        
        // Check all required fields in the current section
        $('#section' + section + ' [required]').each(function() {
            const $field = $(this);
            const fieldValue = $field.val();
            
            console.log("Checking field:", $field.attr('name'), "Value:", fieldValue);
            
            if (!fieldValue || fieldValue.trim() === '') {
                $field.addClass('is-invalid');
                isValid = false;
                if (!firstInvalid) firstInvalid = $field;
                console.log("Field invalid:", $field.attr('name'));
            } else {
                $field.removeClass('is-invalid');
            }
        });
        
        // Additional validation for dates
        $('#section' + section + ' input[type="date"]').each(function() {
            const $field = $(this);
            if ($field.val()) {
                const date = new Date($field.val());
                const today = new Date();
                today.setHours(0,0,0,0);
                
                if ($field.attr('min') && date < new Date($field.attr('min'))) {
                    $field.addClass('is-invalid');
                    alert('Date cannot be before ' + $field.attr('min'));
                    isValid = false;
                    if (!firstInvalid) firstInvalid = $field;
                }
                if ($field.attr('max') && date > new Date($field.attr('max'))) {
                    $field.addClass('is-invalid');
                    alert('Date cannot be after ' + $field.attr('max'));
                    isValid = false;
                    if (!firstInvalid) firstInvalid = $field;
                }
            }
        });
        
        // Special validation for section 7 (Biometrics)
        if (section == 7) {
            if (!photoCaptured) {
                alert('Please capture a photo before proceeding.');
                return false;
            }
            
            // Check if required thumbs are captured
            if (capturedFingers.indexOf('Left Thumb') === -1) {
                alert('Left Thumb is required. Please capture it before proceeding.');
                return false;
            }
            if (capturedFingers.indexOf('Right Thumb') === -1) {
                alert('Right Thumb is required. Please capture it before proceeding.');
                return false;
            }
        }
        
        if (!isValid) {
            alert('Please fill in all required fields in this section correctly');
            if (firstInvalid) {
                firstInvalid.focus();
            }
        }
        
        return isValid;
    }
    
    // Submit and continue (submit for review)
    $('#submitAndContinue').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        console.log("Submit and continue clicked");
        
        if (validateSection(currentSection)) {
            if (confirm('Are you sure you want to submit this application for review? You will not be able to edit it after submission.')) {
                // Add hidden field for submission
                $('<input>').attr({
                    type: 'hidden',
                    name: 'submit_for_review',
                    value: '1'
                }).appendTo('#migrantForm');
                
                // Collect biometrics data before submit
                collectBiometricsData();
                
                console.log("Submitting form for review");
                $('#migrantForm').submit();
            }
        }
    });
    
    // Form submit
    $('#migrantForm').on('submit', function(e) {
        console.log("Form submit triggered");
        
        if (!validateSection(currentSection)) {
            e.preventDefault();
            e.stopPropagation();
            alert('Please complete the current section before submitting');
            return false;
        }
        
        // Collect biometrics data
        collectBiometricsData();
        
        // Disable submit button to prevent double submission
        $(this).find('button[type="submit"]').prop('disabled', true);
        
        // Show loading indicator
        $(this).find('button[type="submit"]').html('<i class="fas fa-spinner fa-spin me-2"></i> Saving...');
        
        return true;
    });
    
    // Auto-uppercase text inputs
    $(document).on('input', 'input[type="text"]', function() {
        $(this).val($(this).val().toUpperCase());
    });
    
    // File size validation
    $(document).on('change', 'input[type="file"]', function() {
        const maxSize = 5 * 1024 * 1024; // 5MB
        const files = this.files;
        let totalSize = 0;
        
        for (let i = 0; i < files.length; i++) {
            if (files[i].size > maxSize) {
                alert('File ' + files[i].name + ' exceeds 5MB limit');
                $(this).val('');
                return false;
            }
            totalSize += files[i].size;
        }
        
        if (totalSize > 10 * 1024 * 1024) { // 10MB total
            alert('Total file size exceeds 10MB limit');
            $(this).val('');
            return false;
        }
    });
    
    // Date validation
    $(document).on('change', 'input[type="date"]', function() {
        const $field = $(this);
        const date = new Date($field.val());
        const today = new Date();
        today.setHours(0,0,0,0);
        
        if ($field.attr('name') && $field.attr('name').includes('expiry') && date < today) {
            alert('Expiry date cannot be in the past');
            $field.val('');
        }
        
        if ($field.attr('name') && $field.attr('name').includes('date_of_birth')) {
            const age = today.getFullYear() - date.getFullYear();
            const m = today.getMonth() - date.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < date.getDate())) {
                age--;
            }
            if (age < 18) {
                alert('Migrant must be at least 18 years old');
                $field.val('');
            }
        }
    });
    
    // Phone number formatting
    $(document).on('input', 'input[type="tel"]', function() {
        let phone = $(this).val().replace(/\D/g, '');
        if (phone.length > 11) {
            phone = phone.substr(0, 11);
        }
        $(this).val(phone);
    });
    
    console.log("Form initialization complete");

    // =============================================
    // BIOMETRICS CAPTURE FUNCTIONALITY
    // =============================================
    
    // Camera variables
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    let currentStream = null;
    let photoCaptured = false;
    
    // Fingerprint variables
    let fingerprintData = {};
    let capturedFingers = [];
    let currentFinger = null;
    let scannerConnected = false;
    let simulationMode = false;
    
    // Start camera
    $('#start-camera').click(function() {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            const constraints = {
                video: {
                    width: { ideal: 640 },
                    height: { ideal: 480 },
                    facingMode: 'user'
                }
            };
            
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function(stream) {
                    currentStream = stream;
                    video.srcObject = stream;
                    video.play();
                    $('#start-camera').hide();
                    $('#capture-photo').show();
                })
                .catch(function(error) {
                    console.error("Camera error:", error);
                    alert('Unable to access camera. Please check permissions.');
                });
        } else {
            alert('Camera not supported on this device.');
        }
    });
    
    // Capture photo
    $('#capture-photo').click(function() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        
        // Convert to base64
        let photoData = canvas.toDataURL('image/jpeg', 0.8);
        $('#photo-data').val(photoData);
        
        // Show preview
        $('#captured-photo').attr('src', photoData);
        $('#photo-preview').show();
        $('#camera-container').hide();
        $('#capture-photo').hide();
        $('#retake-photo').show();
        
        // Stop camera stream
        if (currentStream) {
            currentStream.getTracks().forEach(track => track.stop());
        }
        
        photoCaptured = true;
        checkBiometricsComplete();
    });
    
    // Retake photo
    $('#retake-photo').click(function() {
        $('#photo-preview').hide();
        $('#camera-container').show();
        $('#retake-photo').hide();
        $('#start-camera').show();
        $('#photo-data').val('');
        photoCaptured = false;
        checkBiometricsComplete();
    });
    
    // Simulate fingerprint capture (for demo without hardware)
    $('#simulate-fingerprint').click(function() {
        simulationMode = true;
        $('#fp-status').text('Simulation mode active. Click on finger positions to simulate capture.');
        $('#fp-status').removeClass('alert-secondary').addClass('alert-info');
        $('#start-fingerprint').prop('disabled', false);
        $('#fingerprint-device').val('simulation');
        
        // Make finger items clickable in simulation mode
        $('.finger-item').css('cursor', 'pointer').off('click').on('click', function() {
            if (!simulationMode) return;
            
            let finger = $(this).data('finger');
            let isCaptured = $(this).data('captured') === true;
            
            if (!isCaptured) {
                // Simulate capture
                let quality = Math.floor(Math.random() * 30) + 70; // Random quality 70-100%
                
                // Show progress
                $('#fp-progress').parent().parent().show();
                let progress = 0;
                let interval = setInterval(function() {
                    progress += 10;
                    $('#fp-progress').css('width', progress + '%').text(progress + '%');
                    
                    if (progress >= 100) {
                        clearInterval(interval);
                        
                        // Mark as captured
                        $(this).addClass('captured');
                        $(this).data('captured', true);
                        $(this).find('.captured-icon').show();
                        
                        capturedFingers.push(finger);
                        fingerprintData[finger] = {
                            quality: quality,
                            template: 'simulated_fingerprint_data_' + Date.now(),
                            format: 'ANSI-378'
                        };
                        
                        $('#fp-progress').parent().parent().hide();
                        $('#fp-status').text('Captured: ' + finger + ' (Quality: ' + quality + '%)');
                        
                        checkBiometricsComplete();
                    }
                }.bind(this), 100);
            }
        });
    });
    
    // Check if all biometrics are complete
    function checkBiometricsComplete() {
        if (photoCaptured && 
            capturedFingers.indexOf('Left Thumb') !== -1 && 
            capturedFingers.indexOf('Right Thumb') !== -1) {
            
            let optionalCount = capturedFingers.length - 2;
            $('#biometrics-complete').show();
            $('#biometrics-status').html(`Biometrics captured successfully! Required thumbs captured. Optional fingers: ${optionalCount} captured.`);
            $('#biometrics-captured').val('1');
        } else {
            $('#biometrics-complete').hide();
            $('#biometrics-captured').val('0');
        }
    }
    
    // Collect biometrics data before form submission
    function collectBiometricsData() {
        let biometrics = {
            photo: $('#photo-data').val(),
            fingerprints: fingerprintData,
            device: $('#fingerprint-device').val(),
            capture_date: new Date().toISOString()
        };
        
        // Add to form as hidden input
        $('#biometrics-json').val(JSON.stringify(biometrics));
    }
    
    // =============================================
    // COUNTRY CODE AUTO-FILL FUNCTIONALITY
    // =============================================
    window.updateCountryCode = function() {
        const select = document.getElementById('foreign-country');
        const selectedOption = select.options[select.selectedIndex];
        const countryCode = selectedOption.getAttribute('data-code') || '+234';
        document.getElementById('country-code-display').textContent = countryCode;
    };
    
    // =============================================
    // NIGERIA LOCAL GOVERNMENT DATA (COMPLETE)
    // =============================================
    const lgaData = {
        'ABIA': ['ABA NORTH', 'ABA SOUTH', 'AROCHUKWU', 'BENDE', 'IKWUANO', 'ISIALA NGWA NORTH', 'ISIALA NGWA SOUTH', 'ISUIKWUATO', 'OBI NGWA', 'OHAFIA', 'OSISIOMA', 'UGWUNAGBO', 'UKWA EAST', 'UKWA WEST', 'UMUAHIA NORTH', 'UMUAHIA SOUTH'],
        'ADAMAWA': ['DEMSA', 'FUFORE', 'GANYE', 'GIREI', 'GOMBI', 'GUYUK', 'HONG', 'JADA', 'LAMURDE', 'MADAGALI', 'MAIHA', 'MAYO BELWA', 'MICHIKA', 'MUBI NORTH', 'MUBI SOUTH', 'NUMAN', 'SHELLENG', 'TOUNGO', 'YOLA NORTH', 'YOLA SOUTH'],
        'AKWA IBOM': ['ABAK', 'EASTERN OBOLO', 'EKET', 'ESIT EKET', 'ESSIEN UDIM', 'ETIM EKPO', 'ETINAN', 'IBENO', 'IBESIKPO ASUTAN', 'IBIONO IBOM', 'IKA', 'IKONO', 'IKOT ABASI', 'IKOT EKPENE', 'INI', 'ITU', 'MBO', 'MKPAT ENIN', 'NSIT ATAI', 'NSIT IBOM', 'NSIT UBIUM', 'OBOT AKARA', 'OKOBO', 'ONNA', 'ORON', 'ORUK ANAM', 'UDUNG UKO', 'UKANAFUN', 'URUAN', 'URUE OFFONG ORUKO', 'UYO'],
        'ANAMBRA': ['AGUATA', 'ANAMBRA EAST', 'ANAMBRA WEST', 'ANAOCHA', 'AWKA NORTH', 'AWKA SOUTH', 'AYAMELUM', 'DUNUKOFIA', 'EKWUSIGO', 'IDEMILI NORTH', 'IDEMILI SOUTH', 'IHALA', 'NJIKOKA', 'NNEWI NORTH', 'NNEWI SOUTH', 'OGBARU', 'ONITSHA NORTH', 'ONITSHA SOUTH', 'ORUMBA NORTH', 'ORUMBA SOUTH', 'OYI'],
        'BAUCHI': ['ALKALERI', 'BAUCHI', 'BOGORO', 'DAMBAM', 'DARAZO', 'DASS', 'GAMAWA', 'GANJUWA', 'GIADE', 'ITAS/GADAU', 'JAMA\'ARE', 'KATAGUM', 'KIRFI', 'MISAU', 'NINGI', 'SHIRA', 'TAFAWA BALEWA', 'TORO', 'WARJI', 'ZAKI'],
        'BAYELSA': ['BRASS', 'EKEREMOR', 'KOLOKUMA/OPOKUMA', 'NEMBE', 'OGBIA', 'SAGBAMA', 'SOUTHERN IJAW', 'YENAGOA'],
        'BENUE': ['ADO', 'AGATU', 'APA', 'BURUKU', 'GBOKO', 'GUMA', 'GWER EAST', 'GWER WEST', 'KATSINA-ALA', 'KONSHISHA', 'KWANDE', 'LOGO', 'MAKURDI', 'OBI', 'OGBADIBO', 'OHIMINI', 'OJU', 'OKPOKWU', 'OTUKPO', 'TARKA', 'USHA', 'VANDEIKYA'],
        'BORNO': ['ABADAM', 'ASKIRA/UBA', 'BAMA', 'BAYO', 'BIU', 'CHIBOK', 'DAMBOA', 'DIKWA', 'GUBIO', 'GUZAMALA', 'GWOZA', 'HAWUL', 'JERE', 'KAGA', 'KALA/BALGE', 'KONDUGA', 'KUKAWA', 'KWAYA KUSAR', 'MAFA', 'MAGUMERI', 'MAIDUGURI', 'MARTE', 'MOBBAR', 'MONGUNO', 'NGALA', 'NGANZAI', 'SHANI'],
        'CROSS RIVER': ['ABI', 'AKAMKPA', 'AKPABUYO', 'BAKASSI', 'BEKWARRA', 'BIASE', 'BOKI', 'CALABAR MUNICIPAL', 'CALABAR SOUTH', 'ETUNG', 'IKOM', 'OBANLIKU', 'OBUBRA', 'OBUDU', 'ODUKPANI', 'OGOJA', 'YAKURR', 'YALA'],
        'DELTA': ['ANIOCHA NORTH', 'ANIOCHA SOUTH', 'BOMADI', 'BURUTU', 'ETHIOPE EAST', 'ETHIOPE WEST', 'IKA NORTH', 'IKA SOUTH', 'ISOKO NORTH', 'ISOKO SOUTH', 'NDOKWA EAST', 'NDOKWA WEST', 'OKPE', 'OSHIMILI NORTH', 'OSHIMILI SOUTH', 'PATANI', 'SAPELE', 'UDU', 'UGHELLI NORTH', 'UGHELLI SOUTH', 'UKWUANI', 'UVWIE', 'WARRI NORTH', 'WARRI SOUTH', 'WARRI SOUTH WEST'],
        'EBONYI': ['ABAKALIKI', 'AFIKPO NORTH', 'AFIKPO SOUTH', 'EBONYI', 'EZZA NORTH', 'EZZA SOUTH', 'IKWO', 'ISHIELU', 'IVO', 'IZZI', 'OHAOZARA', 'OHAUKWU', 'ONICHA'],
        'EDO': ['AKOKO-EDO', 'EGOR', 'ESAN CENTRAL', 'ESAN NORTH EAST', 'ESAN SOUTH EAST', 'ESAN WEST', 'ETSAKO CENTRAL', 'ETSAKO EAST', 'ETSAKO WEST', 'IGUEBEN', 'IKPOBA-OKHA', 'OREDO', 'ORHIONMWON', 'OVIA NORTH EAST', 'OVIA SOUTH WEST', 'OWAN EAST', 'OWAN WEST', 'UHUNMWONDE'],
        'EKITI': ['ADO EKITI', 'EFON', 'EKITI EAST', 'EKITI SOUTH WEST', 'EKITI WEST', 'EMURE', 'GBONYIN', 'IDO OSI', 'IJERO', 'IKERE', 'IKOLE', 'ILEJEMEJE', 'IREPODUN/IFELODUN', 'ISE/ORUN', 'MOBA', 'OYE'],
        'ENUGU': ['ANINRI', 'AWGU', 'ENUGU EAST', 'ENUGU NORTH', 'ENUGU SOUTH', 'EZEAGU', 'IGBO ETITI', 'IGBO EZE NORTH', 'IGBO EZE SOUTH', 'NKANU EAST', 'NKANU WEST', 'NSUKKA', 'OJI RIVER', 'UDENU', 'UDI', 'UZO-UWANI'],
        'FCT': ['ABAJI', 'BWARI', 'GWAGWALADA', 'KUJE', 'KWALI', 'MUNICIPAL'],
        'GOMBE': ['AKKO', 'BALANGA', 'BILLIRI', 'DUKKU', 'FUNAKAYE', 'GOMBE', 'KALTUNGO', 'KWAMI', 'NAFADA', 'SHONGOM', 'YAMALTU/DEBA'],
        'IMO': ['ABOH MBAISE', 'AHIAZU MBAISE', 'EHIME MBANO', 'EZINIHITTE', 'IDEATO NORTH', 'IDEATO SOUTH', 'IHITTE/UBOMA', 'IKEDURU', 'ISIALA MBANO', 'ISU', 'MBAITOLI', 'NGOR OKPALA', 'NJABA', 'NKWERRE', 'NWANGELE', 'OBOWO', 'OGUTA', 'OHAJI/EGBEMA', 'OKIGWE', 'ONUIMO', 'ORLU', 'ORSU', 'ORU EAST', 'ORU WEST', 'OWERRI MUNICIPAL', 'OWERRI NORTH', 'OWERRI WEST', 'UNUIMO'],
        'JIGAWA': ['AUYO', 'BABURA', 'BIRINIWA', 'BIRNIN KUDU', 'BUJI', 'DUTSE', 'GAGARAWA', 'GARKI', 'GUMEL', 'GURI', 'GWARAM', 'GWIWA', 'HADEJIA', 'JAHUN', 'KAFIN HAUSA', 'KAUGAMA', 'KAZAURE', 'KIRIKASAMMA', 'KIYAWA', 'MAIGATARI', 'MALAM MADORI', 'MIGA', 'RINGIM', 'RONI', 'SULE TANKARKAR', 'TAURA', 'YANKWASHI'],
        'KADUNA': ['BIRNIN GWARI', 'CHIKUN', 'GIWA', 'IGABI', 'IKARA', 'JABA', 'JEMA\'A', 'KACHIA', 'KADUNA NORTH', 'KADUNA SOUTH', 'KAGARKO', 'KAJURU', 'KAURA', 'KAURU', 'KUBAU', 'KUDAN', 'LERE', 'MAKARFI', 'SABON GARI', 'SANGA', 'SOBA', 'ZANGON KATAF', 'ZARIA'],
        'KANO': ['AJINGI', 'ALBASU', 'BAGWAI', 'BEBEJI', 'BICHI', 'BUNKURE', 'DALA', 'DAMBATTA', 'DAWAKIN KUDU', 'DAWAKIN TOFA', 'DOGUWA', 'FAGGE', 'GABASAWA', 'GARKO', 'GARUN MALAM', 'GEZAWA', 'GWALE', 'GWARZO', 'KABO', 'KANO MUNICIPAL', 'KARAYE', 'KIBIYA', 'KIRU', 'KUMBOTSO', 'KUNCHI', 'KURA', 'MADOBI', 'MAKODA', 'MINJIBIR', 'NASARAWA', 'RANO', 'RIMIN GADO', 'ROGO', 'SHANONO', 'SUMAILA', 'TAKAI', 'TARAUNI', 'TOFA', 'TSANYAWA', 'TUDUN WADA', 'UNGOGO', 'WARAWA', 'WUDIL'],
        'KATSINA': ['BAKORI', 'BATAGARAWA', 'BATSARI', 'BAURE', 'BINDAWA', 'CHARANCHI', 'DAN MUSA', 'DANDUME', 'DANJA', 'DAURA', 'DUTSI', 'DUTSIN MA', 'FASKARI', 'FUNTUA', 'INGAWA', 'JIBIA', 'KAFUR', 'KAITA', 'KANKARA', 'KANKIA', 'KATSINA', 'KURFI', 'KUSADA', 'MAI\'ADUA', 'MALUMFASHI', 'MANI', 'MASHI', 'MATAZU', 'MUSAWA', 'RIMI', 'SABUWA', 'SAFANA', 'SANDAMU', 'ZANGO'],
        'KEBBI': ['ALEIRO', 'AREWA DANDI', 'ARGUNGU', 'AUGIE', 'BAGUDO', 'BIRNIN KEBBI', 'BUNZA', 'DANKO WASAGU', 'FAKAI', 'GWANDU', 'JEGA', 'KALGO', 'KOKO BESSE', 'MAIYAMA', 'NGASKI', 'SAKABA', 'SHANGA', 'SURU', 'WASAGU DANKO', 'YAURI', 'ZURU'],
        'KOGI': ['ADAVI', 'AJAOKUTA', 'ANKPA', 'BASSA', 'DEKINA', 'IBAJI', 'IDAH', 'IGALAMELA-ODOLU', 'IJUMU', 'IKARA', 'KABBA/BUNU', 'KOGI', 'LOKOJA', 'MOPA MORO', 'OFU', 'OGORI MANGOGO', 'OKEHI', 'OKENE', 'OLAMABORO', 'OMALA', 'YAGBA EAST', 'YAGBA WEST'],
        'KWARA': ['ASA', 'BARUTEN', 'EDU', 'EKITI', 'IFELODUN', 'ILORIN EAST', 'ILORIN SOUTH', 'ILORIN WEST', 'IREPODUN', 'ISIN', 'KAIAMA', 'MORO', 'OFFA', 'OKE ERO', 'OYUN', 'PATIGI'],
        'LAGOS': ['AGEGE', 'AJEROMI-IFELODUN', 'ALIMOSHO', 'AMUWO-ODOFIN', 'APAPA', 'BADAGRY', 'EPE', 'ETI OSA', 'IBEJU-LEKKI', 'IFAKO-IJAIYE', 'IKEJA', 'IKORODU', 'KOSOFE', 'LAGOS ISLAND', 'LAGOS MAINLAND', 'MUSHIN', 'OJO', 'OSHODI-ISOLO', 'SOMOLU', 'SURULERE'],
        'NASSARAWA': ['AKWANGA', 'AWE', 'DOMA', 'KARU', 'KEANA', 'KEFFI', 'KOKONA', 'LAFIA', 'NASSARAWA', 'NASSARAWA EGGON', 'OBI', 'TOTO', 'WAMBA'],
        'NIGER': ['AGAIE', 'AGWARA', 'BIDA', 'BORGU', 'BOSSO', 'CHANCHAGA', 'EDATI', 'GBACO', 'GURARA', 'KATCHA', 'KONTAGORA', 'LAPAI', 'LAVUN', 'MAGAMA', 'MARIGA', 'MASHEGU', 'MOKWA', 'MUYA', 'PAIKORO', 'RAFI', 'RIJAU', 'SHIRORO', 'SULEJA', 'TAFA', 'WUSHISHI'],
        'OGUN': ['ABEOKUTA NORTH', 'ABEOKUTA SOUTH', 'ADO ODO/OTA', 'EGBADO NORTH', 'EGBADO SOUTH', 'EWEKORO', 'IFO', 'IJEBU EAST', 'IJEBU NORTH', 'IJEBU NORTHEAST', 'IJEBU ODE', 'IKENNE', 'IMEKO AFON', 'IPOKIA', 'OBAFEMI OWODE', 'ODEDA', 'ODOGBOLU', 'OGUN WATERSIDE', 'REMO NORTH', 'SAGAMU', 'YEWA NORTH', 'YEWA SOUTH'],
        'ONDO': ['AKOKO NORTH EAST', 'AKOKO NORTH WEST', 'AKOKO SOUTH EAST', 'AKOKO SOUTH WEST', 'AKURE NORTH', 'AKURE SOUTH', 'ESE ODO', 'IDANRE', 'IFEDORE', 'ILAJE', 'ILE OLUJI OKEIGBO', 'IRELE', 'ODIGBO', 'OKITIPUPA', 'ONDO EAST', 'ONDO WEST', 'OSE', 'OWO'],
        'OSUN': ['ATAKUNMOSA EAST', 'ATAKUNMOSA WEST', 'AYEDAADE', 'AYEDIRE', 'BOLUWADURO', 'BORIPE', 'EDE NORTH', 'EDE SOUTH', 'EGBEDORE', 'EJIGBO', 'IFEDAYO', 'IFELODUN', 'ILA', 'ILESHA EAST', 'ILESHA WEST', 'IREPODUN', 'IREWOLE', 'ISOKAN', 'IWO', 'OBOKUN', 'ODO OTIN', 'OLA OLUWA', 'OLORUNDA', 'ORIADE', 'OROLU', 'OSOGBO'],
        'OYO': ['AFIJIO', 'AKINYELE', 'ATIBA', 'ATISBO', 'EGBEDA', 'IBADAN NORTH', 'IBADAN NORTH EAST', 'IBADAN NORTH WEST', 'IBADAN SOUTH EAST', 'IBADAN SOUTH WEST', 'IBARAPA CENTRAL', 'IBARAPA EAST', 'IBARAPA NORTH', 'IDO', 'IREPO', 'ISEIN', 'ITESIWAJU', 'IWAJOWA', 'KAJOLA', 'LAGELU', 'OGBOMOSHO NORTH', 'OGBOMOSHO SOUTH', 'ORELOPE', 'ORI IRE', 'OYO EAST', 'OYO WEST', 'SAKI EAST', 'SAKI WEST', 'SURULERE'],
        'PLATEAU': ['BARKIN LADI', 'BASSA', 'BOKKOS', 'JOS EAST', 'JOS NORTH', 'JOS SOUTH', 'KANAM', 'KANKE', 'LANGTANG NORTH', 'LANGTANG SOUTH', 'MANGU', 'MIKANG', 'PANKSHIN', 'QUA\'AN PAN', 'RIYOM', 'SHENDAM', 'WASE'],
        'RIVERS': ['ABUA/ODUAL', 'AHOADA EAST', 'AHOADA WEST', 'AKUKU TORU', 'ANDONI', 'ASARI-TORU', 'BONNY', 'DEGEMA', 'ELEME', 'EMUOHA', 'ETCHE', 'GOKANA', 'IKWERRE', 'KHANA', 'OBIO/AKPOR', 'OGBA/EGBEMA/NDONI', 'OGU/BOLO', 'OKRIKA', 'OMUMA', 'OPOBO/NEKORO', 'OYIGBO', 'PORT HARCOURT', 'TAI'],
        'SOKOTO': ['BINJI', 'BODINGA', 'DANGE SHUNI', 'GADA', 'GORONYO', 'GUDU', 'GWADABAWA', 'ILLELA', 'ISA', 'KEBBE', 'KWARE', 'RABAH', 'SABON BIRNI', 'SHAGARI', 'SILAME', 'SOKOTO NORTH', 'SOKOTO SOUTH', 'TAMBUWAL', 'TANGZA', 'TURE'],
        'TARABA': ['ARDO KOLA', 'BALI', 'DONGA', 'GASHAKA', 'GASSOL', 'IBI', 'JALINGO', 'KARIM LAMIDO', 'KURMI', 'LAU', 'SARDAUNA', 'TAKUM', 'USSA', 'WUKARI', 'YORRO', 'ZING'],
        'YOBE': ['BADE', 'BURSARI', 'DAMATURU', 'FIKA', 'FUNE', 'GEIDAM', 'GUJBA', 'GULANI', 'JAKUSKO', 'KARASUWA', 'MACHINA', 'NANGERE', 'NGURU', 'POTISKUM', 'TARMUA', 'YUNUSARI', 'YUSUFARI'],
        'ZAMFARA': ['ANKA', 'BAKURA', 'BIRNIN MAGAJI/KIYAW', 'BUKKUYUM', 'BUNGUDU', 'GUMMI', 'GUSAU', 'KAURA NAMODA', 'MARADUN', 'MARU', 'SHINKAFI', 'TALATA MAFARA', 'TURETA']
    };

    window.loadLocalGovernments = function() {
        const stateSelect = document.getElementById('nigeria-state');
        const lgaSelect = document.getElementById('local-government');
        const selectedState = stateSelect.value;
        
        // Clear current options
        lgaSelect.innerHTML = '<option value="">SELECT LOCAL GOVERNMENT</option>';
        
        if (selectedState && lgaData[selectedState]) {
            const lgas = lgaData[selectedState];
            lgas.forEach(lga => {
                const option = document.createElement('option');
                option.value = lga;
                option.textContent = lga;
                lgaSelect.appendChild(option);
            });
            lgaSelect.disabled = false;
        } else {
            lgaSelect.disabled = true;
        }
    };

    // Initialize LGA dropdown on page load (in case state is pre-selected)
    setTimeout(loadLocalGovernments, 500);
});
</script>