<?php include 'layouts/header.php'; ?>

<style>

</style>

  <section class="py-5 px-2 px-sm-3 px-lg-5">
      <div class="container">
        <div class="row">
          <div class="col-12 px-0 px-md-3">
            <!-- Stepper -->

            <div class="stepper d-flex justify-content-between mb-5">
              <div class="step-item">
                <div class="step-circle active" id="circle1">1</div>
                <div class="step-label">Personal</div>
              </div>

              <div class="step-item">
                <div class="step-circle" id="circle2">2</div>
                <div class="step-label">Loan</div>
              </div>

              <div class="step-item">
                <div class="step-circle" id="circle3">3</div>
                <div class="step-label">Financial</div>
              </div>

              <div class="step-item">
                <div class="step-circle" id="circle4">4</div>
                <div class="step-label">Review</div>
              </div>
            </div>

            <div class="custom-card">
              <!-- STEP 1 -->

              <div class="form-step active" id="step1">
                <h1 class="fw-bold mb-3">Personal Information</h1>

                <p class="text-secondary mb-5">
                  Please provide your legal details as they appear on your
                  government-issued ID.
                </p>

                <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"
                      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"
                      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
                      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="1">Gender</option>
                      <option value="1">Male</option>
                      <option value="1">Female</option>
                      <option value="1">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
                      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="1">Marital Status</option>
                      <option value="1">Married</option>
                      <option value="1">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"
                      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"
                      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"
                      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"
                      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>

                <div class="row g-4">
                  <h5 class="mt-5 pt-4 mb-0">Address Details</h5>
                  <!-- Current Address -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Current Address *
                    </label>
                    <textarea
                      rows="4"
                      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 Address -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Permanent Address *
                    </label>
                    <textarea
                      rows="4"
                      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>

                  <!-- 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="owned"
                          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="rented"
                          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="companyProvided"
                          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"
                      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 class="row g-4">
                  <h5 class="mt-5 pt-4 mb-0">Employment / Business Details</h5>

                  <h6>For Salaried:</h6>
                  <!-- Company Name -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Company Name *
                    </label>

                    <input
                      type="text"
                      placeholder="Enter company 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>

                  <!-- Job Title -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Job Title *
                    </label>

                    <input
                      type="text"
                      placeholder="Enter job title"
                      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>

                  <!-- Employment Type -->
                  <div class="col-md-6">
                    <label
                      class="fw-normal tw-text-4 text-dark-600 tw-mb-205 d-block"
                    >
                      Employment Type *
                    </label>

                    <div class="d-flex flex-wrap gap-4 mt-2">
                      <!-- Permanent -->
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="radio"
                          name="employmentType"
                          id="permanent"
                          value="permanent"
                        />
                        <label
                          class="form-check-label text-dark-600"
                          for="permanent"
                        >
                          Permanent
                        </label>
                      </div>

                      <!-- Contract -->
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="radio"
                          name="employmentType"
                          id="contract"
                          value="contract"
                        />
                        <label
                          class="form-check-label text-dark-600"
                          for="contract"
                        >
                          Contract
                        </label>
                      </div>
                    </div>
                  </div>

                  <!-- Work Experience -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Work Experience (Years) *
                    </label>

                    <input
                      type="number"
                      placeholder="Enter years of experience"
                      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>

                  <!-- Office Address -->
                  <div class="col-12">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Office Address *
                    </label>

                    <textarea
                      rows="4"
                      placeholder="Enter office 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>

                  <h6>For Self-employed:</h6>
                  <!-- Business Name -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Business Name *
                    </label>

                    <input
                      type="text"
                      placeholder="Enter business 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>

                  <!-- Business Type -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Business Type *
                    </label>

                    <select
                      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 Business Type</option>
                      <option value="sole-proprietorship">
                        Sole Proprietorship
                      </option>
                      <option value="partnership">Partnership</option>
                      <option value="private-limited">Private Limited</option>
                      <option value="llp">LLP</option>
                      <option value="public-limited">Public Limited</option>
                      <option value="other">Other</option>
                    </select>
                  </div>

                  <!-- Registration Details -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Registration Details (GST, etc.) *
                    </label>

                    <input
                      type="text"
                      placeholder="Enter GST / Registration details"
                      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>

                  <!-- Years in Business -->
                  <div class="col-md-6">
                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                      Years in Business *
                    </label>

                    <input
                      type="number"
                      placeholder="Enter years in business"
                      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 class="border-top mt-5 pt-4 d-flex justify-content-end">
                  <button class="btn-primary-custom" onclick="nextStep(1)">
                    Next
                  </button>
                </div>
              </div>

              <!-- STEP 2 -->

              <div class="form-step" id="step2">
                <h1 class="fw-bold mb-2">Loan Details</h1>

                <p class="text-secondary mb-5">
                  Tell us about the capital you need to grow your organization.
                </p>

                <div class="mb-5">
                  <label class="fw-bold mb-4 d-block">
                    What is the primary purpose of this loan?
                  </label>

                  <div class="row g-4">
                    <!-- Loan Type -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Loan Type *
                      </label>

                      <select
                        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 Loan Type</option>
                        <option value="personal-loan">Personal Loan</option>
                        <option value="home-loan">Home Loan</option>
                        <option value="education-loan">Education Loan</option>
                        <option value="business-loan">Business Loan</option>
                        <option value="vehicle-loan">Vehicle Loan</option>
                        <option value="gold-loan">Gold Loan</option>
                      </select>
                    </div>

                    <!-- Loan Amount Required -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Loan Amount Required *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter required loan amount"
                        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>

                    <!-- Loan Tenure -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Loan Tenure (Months/Years) *
                      </label>

                      <input
                        type="text"
                        placeholder="e.g. 24 Months or 5 Years"
                        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>

                    <!-- Purpose of Loan -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Purpose of Loan *
                      </label>

                      <input
                        type="text"
                        placeholder="e.g. Home, Education, Business"
                        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>

                    <!-- Preferred EMI -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Preferred EMI *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter preferred EMI amount"
                        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>

                    <h6>Existing Loans / Liabilities</h6>

                    <!-- Current EMIs -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Current EMIs *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter current EMI amount"
                        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>

                    <!-- Existing Loans -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Existing Loans (Bank/NBFC Name) *
                      </label>

                      <input
                        type="text"
                        placeholder="Enter bank or NBFC 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>

                    <!-- Credit Card Dues -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Credit Card Dues *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter credit card dues"
                        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>

                    <!-- Total Outstanding Amount -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Total Outstanding Amount *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter total outstanding amount"
                        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>

                <div class="border-top pt-4 d-flex justify-content-between">
                  <button class="btn-outline-custom" onclick="prevStep(2)">
                    Previous
                  </button>

                  <button class="btn-secondary-custom" onclick="nextStep(2)">
                    Next
                  </button>
                </div>
              </div>

              <!-- STEP 3 -->

              <div class="form-step" id="step3">
                <h1 class="fw-bold mb-2">Financial Information</h1>

                <p class="text-secondary mb-5">
                  Provide your financial background details.
                </p>

                <form>
                  <div class="row g-4">
                    <!-- Monthly Salary / Income -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Monthly Salary / Income *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter monthly salary or income"
                        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>

                    <!-- Other Income Sources -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Other Income Sources
                      </label>

                      <input
                        type="text"
                        placeholder="Enter other income sources"
                        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>

                    <!-- Annual Income -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Annual Income *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter annual income"
                        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>

                    <!-- Salary Account Bank Name -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Salary Account Bank Name *
                      </label>

                      <input
                        type="text"
                        placeholder="Enter bank 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>

                    <!-- Savings / Investments -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Savings / Investments
                      </label>

                      <input
                        type="text"
                        placeholder="Enter savings or investment details"
                        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>

                    <!-- Property Details -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Property Details
                      </label>

                      <input
                        type="text"
                        placeholder="Enter property details"
                        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>

                    <!-- Vehicles Owned -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Vehicles Owned
                      </label>

                      <input
                        type="text"
                        placeholder="Enter vehicle details"
                        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>

                    <!-- Net Worth -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Net Worth (Optional)
                      </label>

                      <input
                        type="number"
                        placeholder="Enter estimated net worth"
                        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>

                    <!-- Type of Security -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Type of Security *
                      </label>

                      <select
                        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 Security Type</option>
                        <option value="property">Property</option>
                        <option value="fd">Fixed Deposit (FD)</option>
                        <option value="gold">Gold</option>
                        <option value="vehicle">Vehicle</option>
                        <option value="land">Land</option>
                        <option value="other">Other</option>
                      </select>
                    </div>

                    <!-- Estimated Value -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Estimated Value *
                      </label>

                      <input
                        type="number"
                        placeholder="Enter estimated value"
                        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>

                    <!-- Ownership Details -->
                    <div class="col-12">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Ownership Details *
                      </label>

                      <textarea
                        rows="4"
                        placeholder="Enter ownership details"
                        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>

                    <h6>Bank Account Details</h6>

                    <!-- Bank Name -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Bank Name *
                      </label>

                      <input
                        type="text"
                        placeholder="Enter bank 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>

                    <!-- Account Number -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Account Number *
                      </label>

                      <input
                        type="text"
                        placeholder="Enter account 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>

                    <!-- IFSC Code -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        IFSC Code *
                      </label>

                      <input
                        type="text"
                        placeholder="Enter IFSC code"
                        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>

                    <!-- Bank Statement Upload -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Last 6 Months Bank Statement *
                      </label>

                      <input
                        type="file"
                        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600"
                      />

                      <small class="text-muted d-block mt-2">
                        Upload PDF, JPG, or PNG (Max 5MB)
                      </small>
                    </div>

                    <h6>Document Upload</h6>

                    <!-- ID Proof Upload -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        ID Proof (Aadhaar / PAN / Passport) *
                      </label>

                      <input
                        type="file"
                        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600"
                      />

                      <small class="text-muted d-block mt-2">
                        Upload PDF, JPG, or PNG
                      </small>
                    </div>

                    <!-- Address Proof Upload -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Address Proof *
                      </label>

                      <input
                        type="file"
                        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600"
                      />

                      <small class="text-muted d-block mt-2">
                        Upload PDF, JPG, or PNG
                      </small>
                    </div>

                    <!-- Income Proof Upload -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Income Proof (Salary Slips / ITR) *
                      </label>

                      <input
                        type="file"
                        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600"
                      />

                      <small class="text-muted d-block mt-2">
                        Upload PDF, JPG, or PNG
                      </small>
                    </div>

                    <!-- Bank Statements Upload -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Bank Statements *
                      </label>

                      <input
                        type="file"
                        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600"
                      />

                      <small class="text-muted d-block mt-2">
                        Upload PDF, JPG, or PNG
                      </small>
                    </div>

                    <!-- Business Proof Upload -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Business Proof (If Applicable)
                      </label>

                      <input
                        type="file"
                        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600"
                      />

                      <small class="text-muted d-block mt-2">
                        Upload PDF, JPG, or PNG
                      </small>
                    </div>

                    <!-- Declaration of Correctness -->
                    <div class="col-12">
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="declarationCheck"
                        />

                        <label
                          class="form-check-label text-dark-600"
                          for="declarationCheck"
                        >
                          I hereby declare that all the information provided is
                          true and correct to the best of my knowledge.
                        </label>
                      </div>
                    </div>

                    <!-- Consent for Credit Check -->
                    <div class="col-12">
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="creditCheckConsent"
                        />

                        <label
                          class="form-check-label text-dark-600"
                          for="creditCheckConsent"
                        >
                          I authorize the lender to perform credit checks
                          including CIBIL verification.
                        </label>
                      </div>
                    </div>

                    <!-- Terms & Conditions Agreement -->
                    <div class="col-12">
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          id="termsAgreement"
                        />

                        <label
                          class="form-check-label text-dark-600"
                          for="termsAgreement"
                        >
                          I agree to the Terms & Conditions and Privacy Policy.
                        </label>
                      </div>
                    </div>

                    <!-- Aadhaar E-sign / Signature -->
                    <div class="col-md-6">
                      <label
                        class="fw-normal tw-text-4 text-dark-600 tw-mb-205"
                      >
                        Aadhaar E-sign / Signature *
                      </label>

                      <input
                        type="file"
                        class="form-control tw-py-3 tw-text-4 border-neutral-05 rounded-3 focus-visible-border-main-600"
                      />

                      <small class="text-muted d-block mt-2">
                        Upload signature image or signed document
                      </small>
                    </div>
                  </div>

                  <div
                    class="border-top mt-5 pt-4 d-flex justify-content-between"
                  >
                    <button
                      type="button"
                      class="btn-outline-custom"
                      onclick="prevStep(3)"
                    >
                      Previous
                    </button>

                    <button
                      type="button"
                      class="btn-primary-custom"
                      onclick="nextStep(3)"
                    >
                      Next
                    </button>
                  </div>
                </form>
              </div>

              <!-- STEP 4 -->

              <div class="form-step" id="step4">
                <div class="mb-5">
                  <h1 class="fw-bold mb-2">Review & Submit</h1>

                  <p class="text-secondary">
                    Please verify all information before finalizing your
                    institutional loan application.
                  </p>
                </div>

                <section class="section-card mb-4">
                  <div
                    class="d-flex justify-content-between align-items-center mb-4"
                  >
                    <h4 class="fw-bold mb-0">Personal Information</h4>

                    <a href="#" class="edit-link"> Edit Step 1 </a>
                  </div>

                  <div class="row g-4">
                    <div class="col-md-6">
                      <div class="label-small">Full Legal Name</div>
                      <div class="value-text">Alexander J. Montgomery</div>
                    </div>

                    <div class="col-md-6">
                      <div class="label-small">Date of Birth</div>
                      <div class="value-text">October 14, 1982</div>
                    </div>
                  </div>
                </section>

                <div class="info-box mb-4">
                  <div class="form-check d-flex align-items-start gap-3">
                    <input
                      class="form-check-input mt-1"
                      type="checkbox"
                      id="terms"
                    />

                    <label class="form-check-label" for="terms">
                      I certify that all information provided is accurate and
                      complete.
                    </label>
                  </div>
                </div>

                <div class="border-top pt-4 d-flex justify-content-between">
                  <button class="btn-outline-custom" onclick="prevStep(4)">
                    Previous
                  </button>

                  <button class="submit-btn">Submit Application</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


<?php include 'layouts/footer.php'; ?>