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

<style>
/* =========================================
   LAYOUT
========================================= */

.main-wrapper {
    overflow: hidden;
}

.main-content {
    padding: 3rem 0rem 0rem 3rem;
    min-height: 100vh;
}

/* =========================================
   SIDEBAR
========================================= */

/* =========================================
   SIDEBAR
========================================= */

.sidebar-container {

    background-color: #ebebeb;

    padding: 3rem;

    height: 100vh;

    position: sticky;

    top: 0;

    overflow-y: auto;

    border-right: 1px solid #ddd;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}

/* =========================================
   SIDEBAR BOTTOM BUTTON
========================================= */

.sidebar-bottom {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 40px;
}

.save-exit-btn {

    width: 100%;

    max-width: 260px;

    height: 56px;

    border: none;

        border-radius: 14px;
    background: #ffffff;
    color: #104042;
    border: 1px solid #104042;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;

    cursor: pointer;
}

.save-exit-btn:hover {

    background: #104042;
    color: #fff;
    transform: translateY(-2px);
}

/* Sidebar Scrollbar */

.sidebar-container::-webkit-scrollbar {
    width: 4px;
}

.sidebar-container::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 20px;
}

/* Sidebar Heading */

.loan-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.2;
}

.loan-subtitle {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* =========================================
   SIDEBAR STEPS
========================================= */

.steps-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.step-item {
    background: transparent;
    border-radius: 14px;
    padding: 22px;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.step-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

.step-item.active {
    background: #fff;
    border-left: 5px solid #104042;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.step-number-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111;
}

.step-description {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
}

/* =========================================
   FORM CARD
========================================= */

.custom-card {
    background: #fff;
    border-radius: 20px;
    padding: 0px;
    box-shadow: none;
    border: none;
}

/* =========================================
   FORM STEP
========================================= */

.form-step {
    display: none;
    animation: fadeIn 0.35s ease;
}

.form-step.active {
    display: block;
}

/* =========================================
   INPUTS
========================================= */

.form-control,
.form-select {
    height: 54px;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    padding: 12px 16px;
    font-size: 15px;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

textarea.form-control {
    height: auto;
    min-height: 120px;
    resize: none;
}

.form-control:focus,
.form-select:focus {
    border-color: #104042;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.08) !important;
}

.form-control::placeholder {
    color: #999;
}

/* =========================================
   RADIO & CHECKBOX
========================================= */

.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
    color: #555;
}

/* =========================================
   BUTTONS
========================================= */

.btn-primary-custom,
.btn-secondary-custom,
.submit-btn {
    background: #104042;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 32px;
    font-weight: 600;
    transition: all 0.3s ease;
    min-width: 140px;
}

.btn-primary-custom:hover,
.btn-secondary-custom:hover,
.submit-btn:hover {
    background: #218838;
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-custom {
    background: transparent;
    border: 1px solid #104042;
    color: #104042;
    border-radius: 12px;
    padding: 13px 32px;
    font-weight: 600;
    transition: all 0.3s ease;
    min-width: 140px;
}

.btn-outline-custom:hover {
    background: #104042;
    color: #fff;
}

/* =========================================
   SECTION CARD
========================================= */

.section-card {
    border: 1px solid #ededed;
    border-radius: 16px;
    padding: 28px;
    background: #fff;
}

.label-small {
    font-size: 13px;
    color: #888;
    margin-bottom: 6px;
}

.value-text {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}



.border-top.d-flex {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.border-top.d-flex .btn-outline-custom,
.border-top.d-flex .btn-primary-custom,
.border-top.d-flex .submit-btn {

    width: auto;
    min-width: 140px;
}
/* =========================================
   INFO BOX
========================================= */

.info-box {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #ececec;
}

/* =========================================
   FILE INPUT
========================================= */

input[type="file"] {
    padding: 12px;
}

/* =========================================
   PROGRESS BAR
========================================= */

.progress {
    height: 8px;
    border-radius: 20px;
    overflow: hidden;
    background: #e9ecef;
}

.progress-bar {
    background: #104042;
}

/* =========================================
   EDIT LINK
========================================= */

.edit-link {
    color: #104042;
    font-weight: 600;
    font-size: 14px;
}

.edit-link:hover {
    color: #218838;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .sidebar-container {

    position: relative;

    height: auto;

    min-height: auto;

    overflow: visible;

    padding: 2rem;

    border-right: none;

    display: block;
}

    .main-content {
        padding: 2rem;
    }

    .custom-card {
        padding: 30px;
    }

    .loan-title {
        font-size: 28px;
    }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .border-top.d-flex {

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .border-top.d-flex .btn-outline-custom,
    .border-top.d-flex .btn-primary-custom,
    .border-top.d-flex .submit-btn {

        width: 48%;
        min-width: unset;
    }

    .sidebar-container {
        padding: 1.5rem;
    }

    .main-content {
        padding: 1rem;
    }

    .custom-card {
        padding: 20px;
        border-radius: 14px;
    }

    .loan-title {
        font-size: 24px;
    }

    .loan-subtitle {
        font-size: 14px;
    }

    .step-item {
        padding: 18px;
    }

    .step-number-title {
        font-size: 15px;
    }

    .step-description {
        font-size: 13px;
    }

    .btn-primary-custom,
    .btn-secondary-custom,
    .btn-outline-custom,
    .submit-btn {

        width: 100%;
        min-width: 100%;
    }

    .border-top.d-flex .btn-outline-custom,
    .border-top.d-flex .btn-primary-custom,
    .border-top.d-flex .submit-btn {

        width: 48%;
        min-width: unset;
        padding: 12px 10px;
        font-size: 14px;
    }

    .main-content h1,
    .main-content h2 {
        font-size: 26px;
    }

    .form-control,
    .form-select {
        height: 50px;
        font-size: 14px;
    }
    .sidebar-bottom {

    margin-top: 25px;
}

.save-exit-btn {

    max-width: 100%;
}
}

/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media (max-width: 480px) {

    .custom-card {
        padding: 16px;
    }

    .sidebar-container {
        padding: 1rem;
    }

    .loan-title {
        font-size: 22px;
    }

    .step-item {
        padding: 15px;
    }

    .step-number-title {
        font-size: 14px;
    }

    .step-description {
        font-size: 12px;
    }
}

label {
   
    color: #000;
}

/* =========================================
   SUCCESS SCREEN
========================================= */

/* SUCCESS SCREEN */

.submit-success-wrapper {

    width: 100%;
    min-height: 70vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 80px 20px;
    background: #fff;
}

.success-box {

    text-align: center;
    animation: fadeInUp 0.5s ease;
}

.success-icon i {

    font-size: 110px;
    color: #198754;
    display: inline-block;
    animation: popScale 0.6s ease;
}

.success-title {

    font-size: 42px;
    font-weight: 800;
    color: #104042;
    margin-top: 25px;
    margin-bottom: 12px;
}

.success-text {

    font-size: 18px;
    color: #666;
}

/* Animations */

@keyframes popScale {

    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fadeInUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


</style>

<article>
    <section class="container-fluid p-0 p-md-0 p-lg-5">
        <div class="row g-0">

            <!-- Sidebar -->
            <!-- Sidebar -->
<aside class=" col-12 col-lg-4 col-md-5 sidebar-container d-none d-lg-block">

    <!-- Top Content -->
    <div>

        <h2 class="loan-title">
           Get started with your  Loan Application
        </h2>

        <p class="loan-subtitle">
            Complete your application step by step.
        </p>

        <!-- Steps -->
        <div class="steps-wrapper">

            <div class="step-item active">
                <div class="step-number-title">
                    Step 1. Verification
                </div>

                <div class="step-description">
                    Verify your information
                </div>
            </div>

            <div class="step-item">
                <div class="step-number-title">
                    Step 2. Personal Details
                </div>

                <div class="step-description">
                    Enter your personal details
                </div>
            </div>

            <div class="step-item">
                <div class="step-number-title">
                    Step 3. Loan Details
                </div>

                <div class="step-description">
                    Provide loan information
                </div>
            </div>

            <div class="step-item">
                <div class="step-number-title">
                    Step 4. Financial Details
                </div>

                <div class="step-description">
                    Upload documents & income details
                </div>
            </div>

            <div class="step-item">
                <div class="step-number-title">
                    Step 5. Review & Submit
                </div>

                <div class="step-description">
                    Final review before submission
                </div>
            </div>

        </div>

    </div>

    <!-- Bottom Button -->
    <!--  <div class="sidebar-bottom">

        <button class="save-exit-btn" onclick="saveAndExit()">

    Save & Continue Later

</button>

    </div> -->

</aside>

            <!-- Main Content -->
            <main class="col-12 col-lg-8  col-md-12 main-content px-0 px-lg-3">

                <div class="custom-card">
                    <h1 class="loan-title d-block d-lg-none pb-4 pb-lg-0">
            Get started with your Loan Application
        </h1>

                    <!-- STEP 1 -->
                    <div class="form-step active" id="step1">

                        <h2 class="fw-bold mb-3">
                            Step 1. Verification
                        </h2>

                        <p class="text-secondary mb-5">
                            Verify your information
                        </p>

                        <div class="row g-4">

                            <div class="col-md-6">
                                <label class="mb-2">Select Organization *</label>

                                <select class="form-select">
                                    <option>Select</option>
                                    <option>Kapston Services Pvt Ltd</option>
                                    
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="mb-2">Phone Number *</label>

                                <input type="tel" class="form-control" placeholder="Please Enter your phone number registered with Kapston">
                               <div class="fs-6">
                                    An OTP will be sent for verification
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="mb-2">Email Address (Optional)</label>

                                <input type="email" class="form-control" placeholder="Enter email address">
                            </div>
                             <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">
                                           By proceeding, you agree with our Terms & Conditions & Privacy Policy
                                        </label>
                                    </div>
                                </div>

                        </div>

                        <div class="border-top mt-5 pt-4 text-end">
                            <button class="btn-primary-custom" onclick="nextStep(1)">
                                Next
                            </button>
                        </div>

                    </div>

                    <!-- STEP 2 -->
                    <div class="form-step" id="step2">

                        <h2 class="fw-bold mb-3">
                           Step 2. Personal Information
                        </h2>

                        <p class="text-secondary mb-5">
                            Enter your personal details.
                        </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-between">

                            <button class="btn-outline-custom" onclick="prevStep(2)">
                                Previous
                            </button>

                            <button class="btn-primary-custom" onclick="nextStep(2)">
                                Save & Next
                            </button>

                        </div>

                    </div>

                    <!-- STEP 3 -->
                    <div class="form-step" id="step3">

                        <h2 class="fw-bold mb-3">
                            Step 3. Loan Details
                        </h2>

                        <p class="text-secondary mb-5">
                            Enter required loan details.
                        </p>

                        <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 class="border-top mt-5 pt-4 d-flex justify-content-between">

                            <button class="btn-outline-custom" onclick="prevStep(3)">
                                Previous
                            </button>

                            <button class="btn-primary-custom" onclick="nextStep(3)">
                                Save & Next
                            </button>

                        </div>

                    </div>

                    <!-- STEP 4 -->
                    <div class="form-step" id="step4">

                        <h2 class="fw-bold mb-3">
                            Step 4. Financial Details
                        </h2>

                        <p class="text-secondary mb-5">
                            Enter financial details and upload documents.
                        </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 -->
                               

                                <!-- 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>
                        </form>

                        <div class="border-top mt-5 pt-4 d-flex justify-content-between">

                            <button class="btn-outline-custom" onclick="prevStep(4)">
                                Previous
                            </button>

                            <button class="btn-primary-custom" onclick="nextStep(4)">
                                Save & Next
                            </button>

                        </div>

                    </div>

                    <!-- STEP 5 -->
                    <div class="form-step" id="step5">

                        <h2 class="fw-bold mb-3">
                            Step 5. Review & Submit
                        </h2>

                        <p class="text-secondary mb-5">
                            Review all details before submission.
                        </p>

                        

                        <!-- Personal Information -->
                        <div class="preview-section">
                    
                            <h5 class="mb-4 border-bottom pb-2">
                                Personal Information
                            </h5>
                    
                            <div class="row g-4">
                    
                                <div class="col-md-6">
                                    <div class="label-small">Full Name</div>
                                    <div class="value-text">John Doe</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Date of Birth</div>
                                    <div class="value-text">19/05/1995</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Gender</div>
                                    <div class="value-text">Male</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Marital Status</div>
                                    <div class="value-text">Married</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Father / Spouse Name</div>
                                    <div class="value-text">Ramesh Kumar</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Aadhaar Number</div>
                                    <div class="value-text">XXXX XXXX 4587</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">PAN Number</div>
                                    <div class="value-text">ABCDE1234F</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Passport Number</div>
                                    <div class="value-text">N1234567</div>
                                </div>
                    
                            </div>
                    
                        </div>
                    
                        <!-- Address Details -->
                        <div class="preview-section mt-5">
                    
                            <h5 class="mb-4 border-bottom pb-2">
                                Address Details
                            </h5>
                    
                            <div class="row g-4">
                    
                                <div class="col-md-6">
                                    <div class="label-small">Current Address</div>
                                    <div class="value-text">
                                        12-45, MG Road, Hyderabad, Telangana
                                    </div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Permanent Address</div>
                                    <div class="value-text">
                                        12-45, MG Road, Hyderabad, Telangana
                                    </div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Residence Type</div>
                                    <div class="value-text">Owned</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Duration at Current Address</div>
                                    <div class="value-text">3 Years</div>
                                </div>
                    
                            </div>
                    
                        </div>
                    
                        <!-- Loan Details -->
                        <div class="preview-section mt-5">
                    
                            <h5 class="mb-4 border-bottom pb-2">
                                Loan Details
                            </h5>
                    
                            <div class="row g-4">
                    
                                <div class="col-md-6">
                                    <div class="label-small">Loan Type</div>
                                    <div class="value-text">Personal Loan</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Loan Amount</div>
                                    <div class="value-text">₹ 5,00,000</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Loan Tenure</div>
                                    <div class="value-text">36 Months</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Purpose of Loan</div>
                                    <div class="value-text">Home Renovation</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Preferred EMI</div>
                                    <div class="value-text">₹ 15,000</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Current EMIs</div>
                                    <div class="value-text">₹ 8,000</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Existing Loans</div>
                                    <div class="value-text">HDFC Bank</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Credit Card Dues</div>
                                    <div class="value-text">₹ 20,000</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Outstanding Amount</div>
                                    <div class="value-text">₹ 1,50,000</div>
                                </div>
                    
                            </div>
                    
                        </div>
                    
                        <!-- Financial Details -->
                        <div class="preview-section mt-5">
                    
                            <h5 class="mb-4 border-bottom pb-2">
                                Financial Details
                            </h5>
                    
                            <div class="row g-4">
                    
                                <div class="col-md-6">
                                    <div class="label-small">Monthly Salary</div>
                                    <div class="value-text">₹ 65,000</div>
                                </div>
                    
                                 <div class="col-md-6">
                                    <div class="label-small">Other Income Sources</div>
                                    <div class="value-text">Freelancing</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Annual Income</div>
                                    <div class="value-text">₹ 7,80,000</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Salary Account Bank</div>
                                    <div class="value-text">ICICI Bank</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Savings / Investments</div>
                                    <div class="value-text">Mutual Funds</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Property Details</div>
                                    <div class="value-text">2BHK Apartment</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Vehicles Owned</div>
                                    <div class="value-text">Hyundai i20</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Net Worth</div>
                                    <div class="value-text">₹ 25,00,000</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Type of Security</div>
                                    <div class="value-text">Property</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Estimated Value</div>
                                    <div class="value-text">₹ 35,00,000</div>
                                </div>
                    
                                <div class="col-12">
                                    <div class="label-small">Ownership Details</div>
                                    <div class="value-text">
                                        Self-owned residential property located in Hyderabad.
                                    </div>
                                </div>
                    
                            </div>
                    
                        </div>
                    
                        <!-- Bank Details -->
                        <div class="preview-section mt-5">
                    
                            <h5 class="mb-4 border-bottom pb-2">
                                Bank Details
                            </h5>
                    
                            <div class="row g-4">
                    
                                <div class="col-md-6">
                                    <div class="label-small">Bank Name</div>
                                    <div class="value-text">ICICI Bank</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Account Number</div>
                                    <div class="value-text">XXXXXX4587</div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">IFSC Code</div>
                                    <div class="value-text">ICIC0001234</div>
                                </div>
                    
                            </div>
                    
                        </div>


                         <div class="col-12 mt-4">
                                    <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 pb-4">
                                    <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>

                        <!-- <div class="info-box mb-4">

                            <div class="form-check">

                                <input class="form-check-input" type="checkbox" id="finalcheck">

                                <label class="form-check-label" for="finalcheck">

                                    I confirm all information is correct.

                                </label>

                            </div>

                        </div> -->

                        <div class="border-top pt-4 d-flex justify-content-between">

                            <button class="btn-outline-custom" onclick="prevStep(5)">
                                Previous
                            </button>

                             <button type="button" class="submit-btn" id="submitApplicationBtn">
                                Submit Application
                            </button>

                        </div>

                    </div>

                </div>

            </main>

        </div>
    </section>
</article>

<!-- SUCCESS SCREEN -->
<div class="submit-success-wrapper d-none" id="successScreen">

    <div class="success-box">

        <div class="success-icon">

            <i class="bi bi-check-circle-fill"></i>

        </div>

        <h2 class="success-title">
            Application Submitted Successfully
        </h2>

        <p class="success-text">
            Thank you! Your loan application has been submitted successfully.
        </p>
        <p>Reference ID: 13445455666767</p>

    </div>

</div>

<script>

document.getElementById('submitApplicationBtn')
.addEventListener('click', function (e) {

    // Prevent form reload
    e.preventDefault();

    // Hide only loan form section
    document.querySelector('.container-fluid')
        .classList.add('d-none');

    // Show success screen
    document.getElementById('successScreen')
        .classList.remove('d-none');

    // Smooth scroll top
    window.scrollTo({

        top: 0,
        behavior: 'smooth'
    });

});

</script>

<script>
function nextStep(current) {

    document.getElementById('step' + current)
        .classList.remove('active');

    document.getElementById('step' + (current + 1))
        .classList.add('active');

    updateSidebar(current + 1);
}

function prevStep(current) {

    document.getElementById('step' + current)
        .classList.remove('active');

    document.getElementById('step' + (current - 1))
        .classList.add('active');

    updateSidebar(current - 1);
}

function updateSidebar(step) {

    const items = document.querySelectorAll('.step-item');

    items.forEach((item, index) => {

        item.classList.remove('active');

        if ((index + 1) === step) {

            item.classList.add('active');
        }
    });
}
</script>

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

<script>
// Sidebar click support
const sidebarSteps = document.querySelectorAll('.step-item');

sidebarSteps.forEach((step, index) => {

    step.addEventListener('click', function() {

        goToStep(index + 1);
    });
});

// Next button
function nextStep(currentStep) {

    goToStep(currentStep + 1);
}

// Previous button
function prevStep(currentStep) {

    goToStep(currentStep - 1);
}

// Main function
function goToStep(stepNumber) {

    // Hide all form steps
    document.querySelectorAll('.form-step')
        .forEach((step) => {

            step.classList.remove('active');
        });

    // Remove active from sidebar
    document.querySelectorAll('.step-item')
        .forEach((item) => {

            item.classList.remove('active');
        });

    // Show current form step
    const activeForm = document.getElementById('step' + stepNumber);

    if (activeForm) {

        activeForm.classList.add('active');
    }

    // Activate sidebar item
    const activeSidebar = document.querySelectorAll('.step-item')[stepNumber - 1];

    if (activeSidebar) {

        activeSidebar.classList.add('active');
    }

    // Scroll to top smoothly
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}
</script>

<script>

function saveAndExit() {

    // Get all form fields
    const inputs = document.querySelectorAll('input, select, textarea');

    inputs.forEach((input) => {

        // Save using input name or id
        const key = input.name || input.id;

        if(key){

            localStorage.setItem(key, input.value);
        }
    });

    // Success message
    alert('Your progress has been saved successfully.');

    // Redirect
    window.location.href = 'index.php';
}

window.addEventListener('load', () => {

    const inputs = document.querySelectorAll('input, select, textarea');

    inputs.forEach((input) => {

        const key = input.name || input.id;

        if(key){

            const savedValue = localStorage.getItem(key);

            if(savedValue !== null){

                input.value = savedValue;
            }
        }
    });
});

</script>