 <!-- STEP 2 -->
<div class="form-step" id="step2">
                                <div class="card-top">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="icon-box">
                                            <i class="fa-solid fa-circle-check"></i>
                                        </div>
                            
                                        <div>
                                            <div class="title">Step 2. Personal Information</div>
                                            <div class="subtitle">
                                                Enter your personal details.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-content">
                                    <div class="row g-4">
                                        <div class="col-md-6 mb-4">
                            
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Select Organization  *</label>
        
                                            <!--<select class="form-select" id="organization">-->
                                            
                                            <select id="organization"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600">
                                                <option value="">Select</option>
                                                <option value="Kapston Services Pvt Ltd">Kapston Services Pvt Ltd</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row g-4">
                                        
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Full Name *</label>
                                            <input type="text" id="full_name"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Date of Birth *</label>
                                            <input type="date" id="dob"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Gender *</label>
                                            <select id="gender"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600">
                                                <option value="">Gender</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Marital Status *</label>
                                            <select id="marital_status"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600">
                                                <option value="">Marital Status</option>
                                                <option value="Married">Married</option>
                                                <option value="Unmarried">Un Married</option>
                                            </select>
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Father’s / Spouse Name
                                                *</label>
                                            <input type="text" id="father_name"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Aadhaar Number *</label>
                                            <input type="text" id="aadhaar_number"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">PAN Number *</label>
                                            <input type="text" id="pan_number"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Passport (optional)</label>
                                            <input type="text" id="passport" 
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div>
            
                                        <!-- <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Mobile Number *</label>
                                            <input type="tel"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div>
            
                                        <div class="col-md-6">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Email Address *</label>
                                            <input type="email"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                                        </div> -->
                                    </div>

                                    <!--<h5 class="mt-5 pt-4 mb-0">Address Details</h5>-->
                                    <!-- Current Address -->
                                    <div class="row g-4">
                                        <h5 class="mt-5 pt-4 mb-0">Current Address Details</h5>
            
                                        <div class="col-md-12">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Current Address *
                                            </label>
                                            <textarea rows="4" id="current_address"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600"></textarea>
                                        </div>
                                    
                                        <!-- Current City -->
                                        <div class="col-md-4">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Current City *
                                            </label>
                                    
                                            <input 
                                                type="text"
                                                id="current_city"
                                                name="current_city"
                                                value="{{ old('current_city', $user->current_city ?? '') }}"
                                                placeholder="Enter Current City"
                                                class="form-control tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100"
                                            >
                                    
                                            @error('current_city')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
            
            
                                        <!-- Current State -->
                                        <div class="col-md-4">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Current State *
                                            </label>
                                    
                                            <select 
                                                id="current_state"
                                                name="current_state"
                                                class="form-select tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100"
                                            >
                                                <option value="">Select State</option>
                                    
                                                @php
                                                    $states = [
                                                        'Andhra Pradesh',
                                                        'Arunachal Pradesh',
                                                        'Assam',
                                                        'Bihar',
                                                        'Chhattisgarh',
                                                        'Goa',
                                                        'Gujarat',
                                                        'Haryana',
                                                        'Himachal Pradesh',
                                                        'Jharkhand',
                                                        'Karnataka',
                                                        'Kerala',
                                                        'Madhya Pradesh',
                                                        'Maharashtra',
                                                        'Manipur',
                                                        'Meghalaya',
                                                        'Mizoram',
                                                        'Nagaland',
                                                        'Odisha',
                                                        'Punjab',
                                                        'Rajasthan',
                                                        'Sikkim',
                                                        'Tamil Nadu',
                                                        'Telangana',
                                                        'Tripura',
                                                        'Uttar Pradesh',
                                                        'Uttarakhand',
                                                        'West Bengal'
                                                    ];
                                                @endphp
                                    
                                                @foreach($states as $state)
                                                    <option value="{{ $state }}"
                                                        {{ old('current_state', $user->current_state ?? '') == $state ? 'selected' : '' }}>
                                                        {{ $state }}
                                                    </option>
                                                @endforeach
                                            </select>
                                    
                                            @error('current_state')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
        
                                        <!-- Current Country -->
                                        <div class="col-md-4">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Current Country *
                                            </label>
                                    
                                            <select 
                                                id="current_country"
                                                name="current_country"
                                                class="form-select tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100"
                                            >
                                                <option value="">Select Country</option>
                                                <option value="India" selected>India</option>
                                            </select>
                                    
                                            @error('current_country')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        
                                        <h5 class="mt-5 mb-0">Permanent Address Details</h5>
            
                                        <div class="col-md-12">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Permanent Address * 
                                            </label>
                                            <textarea rows="4" id="permanent_address"
                                                class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600"></textarea>
                                        </div>
                                    
                                        <!-- Permanent City -->
                                        <div class="col-md-4">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Permanent City *
                                            </label>
                                    
                                            <input 
                                                type="text"
                                                id="permanent_city"
                                                name="permanent_city"
                                                value="{{ old('permanent_city', $user->permanent_city ?? '') }}"
                                                placeholder="Enter Permanent City"
                                                class="form-control tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100"
                                            >
                                    
                                            @error('permanent_city')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    
                         
                                        <!-- Permanent State -->           
                                        <div class="col-md-4">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Permanent State *
                                            </label>
                                    
                                            <select 
                                                id="permanent_state"
                                                name="permanent_state"
                                                class="form-select tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100"
                                            >
                                                <option value="">Select State</option>
                                    
                                                @foreach($states as $state)
                                                    <option value="{{ $state }}"
                                                        {{ old('permanent_state', $user->permanent_state ?? '') == $state ? 'selected' : '' }}>
                                                        {{ $state }}
                                                    </option>
                                                @endforeach
                                            </select>
                                    
                                            @error('permanent_state')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        
                                        <!-- Permanent Country -->
                                        <div class="col-md-4">
                                            <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                                Permanent Country *
                                            </label>
                                    
                                            <select 
                                                id="permanent_country"
                                                name="permanent_country"
                                                class="form-select tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100"
                                            >
                                                <option value="">Select Country</option>
                                                <option value="India" selected>India</option>
                                            </select>
                                    
                                            @error('permanent_country')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Residence Type -->
                                    <!-- Residence Type -->
                                    <!--<div class="col-md-6">-->
                                    <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205 d-block">-->
                                    <!--        Residence Type *-->
                                    <!--    </label>-->
        
                                    <!--    <div class="d-flex flex-wrap gap-4 mt-2">-->
                                            <!-- Owned -->
                                    <!--        <div class="form-check">-->
                                    <!--            <input class="form-check-input" type="radio" name="residenceType" id="residencetype"-->
                                    <!--                value="owned" />-->
                                    <!--            <label class="form-check-label text-dark-600" for="owned">-->
                                    <!--                Owned-->
                                    <!--            </label>-->
                                    <!--        </div>-->
        
                                            <!-- Rented -->
                                    <!--        <div class="form-check">-->
                                    <!--            <input class="form-check-input" type="radio" name="residenceType" id="residencetype"-->
                                    <!--                value="rented" />-->
                                    <!--            <label class="form-check-label text-dark-600" for="rented">-->
                                    <!--                Rented-->
                                    <!--            </label>-->
                                    <!--        </div>-->
        
                                            <!-- Company Provided -->
                                    <!--        <div class="form-check">-->
                                    <!--            <input class="form-check-input" type="radio" name="residenceType"-->
                                    <!--                id="residencetype" value="company-provided" />-->
                                    <!--            <label class="form-check-label text-dark-600" for="companyProvided">-->
                                    <!--                Company Provided-->
                                    <!--            </label>-->
                                    <!--        </div>-->
                                    <!--    </div>-->
                                    <!--</div>-->
        
                                    <!-- Duration at Current Address -->
                                    <!--<div class="col-md-6">-->
                                    <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                                    <!--        Duration at Current Address *-->
                                    <!--    </label>-->
                                    <!--    <input type="text" placeholder="e.g. 3 Years" id="address_duration"-->
                                    <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                                    <!--</div>-->
                                    
                                </div>
                        
                                    <div id="step2Message" class="step-message"></div>
                                    
                                    
                                    <!-- Footer -->
                                    <div class="card-footer-area d-flex justify-content-between">
                                        <button class="btn-outline-custom" onclick="prevStep(2)">
                                            Previous
                                        </button>
            
                                       <button type="button" class="btn-primary-custom" onclick="saveStep2()">
                                            Save & Next
                                        </button>
                                    </div>
            
                                </div>
                            

                            <!-- STEP 3 -->
