@extends('layouts.app')

@section('title', 'index')

@section('content')

<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);
    }
}

.locked {
    pointer-events: none;
    opacity: 0.5;
}

.step-tick{
    display:none !important;
    color:#16a34a;
    margin-left:8px;
    font-size:14px;
}

.step-item.completed .step-tick{
    display:inline-block !important;
}

#globalLoader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.7);
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
}

.loader-content{
    background:#fff;
    padding:25px 35px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 5px 25px rgba(0,0,0,0.15);
}

.loader-content i{
    font-size:30px;
    color:#2563eb;
    margin-bottom:10px;
}

.loader-content p{
    margin:0;
    font-weight:600;
}

.emi-calculator-wrapper {
    background: #f8fafc;
}

.form-range::-webkit-slider-thumb {
    background: #104042;
}

.form-range::-moz-range-thumb {
    background: #104042;
}

input[readonly] {
    background: #f5f5f5 !important;
    cursor: not-allowed;
}
.document-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f5f7fb;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #104042;
    font-weight: 500;
    border: 1px solid #dfe5ee;
    transition: 0.3s;
}

.document-view-btn:hover {
    background: #104042;
    color: #fff;
}

.document-view-btn i {
    font-size: 14px;
}
</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" id="stepNav1">
                <div class="step-number-title">
                    Step 1. Verification
                    <span class="step-tick">
                        <i class="fa fa-check"></i>
                    </span>
                </div>

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

            <div class="step-item locked d-none" id="stepNav2">
                <div class="step-number-title">
                    Step 2. Personal Details
                                         <span class="step-tick">
                            <i class="fa fa-check"></i>
                        </span>
                </div>

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

            <div class="step-item locked d-none" id="stepNav3">
                <div class="step-number-title">
                    Step 3. Loan Details
                                         <span class="step-tick">
                            <i class="fa fa-check"></i>
                        </span>
                </div>

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

            <div class="step-item locked d-none" id="stepNav4">
                <div class="step-number-title">
                    Step 4. Financial Details
                                        <span class="step-tick">
                            <i class="fa fa-check"></i>
                        </span>
                </div>

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

            <div class="step-item locked d-none" id="stepNav5">
                <div class="step-number-title">
                    Step 5. Review & Submit
                                         <span class="step-tick">
                            <i class="fa fa-check"></i>
                        </span>
                </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" id="organization">
                                    <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" id="phone" placeholder="Please Enter your phone number registered with Kapston">
                               <div class="fs-6">
                                    An OTP will be sent for verification
                                </div>
                            </div>
                            
                            <div class="row mt-4 d-none otpSection" id="otpSection">

                                <div class="col-md-6">
                            
                                    <label>Enter OTP</label>
                            
                                    <input type="text"
                                           class="form-control"
                                           id="otp"
                                           placeholder="Enter OTP">
                            
                                    <small class="text-success">
                                        Static OTP: 1234
                                    </small>
                            
                                </div>
                            
                                <div class="col-md-6 d-flex align-items-end">
                            
                                   
                            
                                </div>
                            
                            </div>

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

                                <input type="email" id="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>-->
                            
                             <button
                                        type="button"
                                        class="btn-primary-custom d-none otpSection"
                                        onclick="verifyOtp()">
                            
                                        Verify OTP
                            
                                    </button>
                                    
                            <button
    type="button"
    class="btn-primary-custom"
    id="verifyNumberBtn"
    onclick="verifyUser()">

    Verify 

</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" id="full_name"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Date of Birth *</label>
                                <input type="date" id="dob"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Gender *</label>
                                <select id="gender"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600">
                                    <option value="">Gender</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Marital Status *</label>
                                <select id="marital_status"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600">
                                    <option value="">Marital Status</option>
                                    <option value="Married">Married</option>
                                    <option value="Unmarried">Un Married</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Father’s / Spouse Name
                                    *</label>
                                <input type="text" id="father_name"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Aadhaar Number *</label>
                                <input type="text" id="aadhaar_number"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">PAN Number *</label>
                                <input type="text" id="pan_number"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Passport (optional)</label>
                                <input type="text" id="passport" 
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div>

                            <!-- <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Mobile Number *</label>
                                <input type="tel"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div>

                            <div class="col-md-6">
                                <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">Email Address *</label>
                                <input type="email"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />
                            </div> -->
                        </div>

                        <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" id="current_address"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600"></textarea>
                            </div>

                            <!-- 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" id="permanent_address"
                                    class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600"></textarea>
                            </div>

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

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

                                    <!-- Rented -->
                            <!--        <div class="form-check">-->
                            <!--            <input class="form-check-input" type="radio" name="residenceType" id="residencetype"-->
                            <!--                value="rented" />-->
                            <!--            <label class="form-check-label text-dark-600" for="rented">-->
                            <!--                Rented-->
                            <!--            </label>-->
                            <!--        </div>-->

                                    <!-- Company Provided -->
                            <!--        <div class="form-check">-->
                            <!--            <input class="form-check-input" type="radio" name="residenceType"-->
                            <!--                id="residencetype" value="company-provided" />-->
                            <!--            <label class="form-check-label text-dark-600" for="companyProvided">-->
                            <!--                Company Provided-->
                            <!--            </label>-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->

                            <!-- Duration at Current Address -->
                            <!--<div class="col-md-6">-->
                            <!--    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">-->
                            <!--        Duration at Current Address *-->
                            <!--    </label>-->
                            <!--    <input type="text" placeholder="e.g. 3 Years" id="address_duration"-->
                            <!--        class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 focus-visible-border-main-600" />-->
                            <!--</div>-->
                        </div>

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

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

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

                        </div>

                    </div>

                    <!-- STEP 3 -->
                    <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 id="loan_type"
                                    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>
                            
                              <!-- 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" id="purpose_of_loan" 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>

                            <!-- Loan Amount -->
                            <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"
                                       id="loan_amount"
                                      
                                       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 (Years) *
                                </label>
                            
                                <input type="number"
                                       id="loan_tenure"
                                     
                                
                                       placeholder="e.g. 5"
                                       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"  id="preferred_emi" readonly 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>
                            
                            
                            <!-- Total Interest -->
                                <div class="col-md-6">
                                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                        Total Interest
                                    </label>
                                
                                    <input type="text"
                                           id="total_interest" 
                                           readonly
                                           class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 bg-light" />
                                </div>
                                
                                <div class="col-md-6">
                                        <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                            Processing Charges
                                        </label>
                                    
                                        <input type="text"
                                               id="processing_charges"
                                               readonly
                                               value="4000"
                                               class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 bg-light" />
                                    </div>
                                
                                <!-- Total Payment -->
                                <div class="col-md-6">
                                    <label class="fw-normal tw-text-4 text-dark-600 tw-mb-205">
                                        Total Payment
                                    </label>
                                
                                    <input type="text"
                                           id="total_payment"
                                           readonly
                                           class="tw-px-3 tw-py-3 tw-text-4 text-dark-500 border-neutral-05 border rounded-3 w-100 bg-light" />
                                </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" id="current_emi" 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"  id="existing_loans" 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"  id="credit_card_dues" 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" id="outstanding_amount" 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>
                        
                        <!-- EMI Calculator -->
                                <div class="emi-calculator-wrapper mt-5 p-4 rounded-4 border bg-light">
                                
                                    <h4 class="fw-bold mb-2">
                                        EMI Calculator
                                    </h4>
                                
                                    <p class="text-muted mb-4">
                                        Interest Rate Fixed at 14%
                                    </p>
                                
                                    <!-- Loan Amount -->
                                    <div class="mb-4">
                                
                                        <label class="fw-semibold mb-2 d-block">
                                            Loan Amount
                                        </label>
                                
                                        <input type="range"
                                               class="form-range"
                                               min="50000"
                                               max="5000000"
                                               step="10000"
                                               id="loanAmountRange">
                                
                                        <div class="d-flex justify-content-between">
                                
                                            <span>₹50K</span>
                                
                                            <span id="loanAmountDisplay">
                                                ₹5,00,000
                                            </span>
                                
                                            <span>₹50L</span>
                                
                                        </div>
                                
                                    </div>
                                
                                    <!-- Loan Tenure -->
                                    <div class="mb-4">
                                
                                        <label class="fw-semibold mb-2 d-block">
                                            Loan Tenure (Years)
                                        </label>
                                
                                        <input type="range"
                                               class="form-range"
                                               min="1"
                                               max="10"
                                               step="1"
                                               id="loanTenureRange">
                                
                                        <div class="d-flex justify-content-between">
                                
                                            <span>1 Year</span>
                                
                                            <span id="loanTenureDisplay">
                                                5 Years
                                            </span>
                                
                                            <span>10 Years</span>
                                
                                        </div>
                                
                                    </div>
                                
                                    <!-- EMI Result -->
                                    <div class="row g-3 mt-4">
                                
                                        <div class="col-md-4">
                                
                                            <div class="p-3 rounded-4 bg-white border text-center">
                                
                                                <small class="text-muted d-block">
                                                    Monthly EMI
                                                </small>
                                
                                                <h5 class="fw-bold mt-2 text-success">
                                                    ₹<span id="emiDisplay">0</span>
                                                </h5>
                                
                                            </div>
                                
                                        </div>
                                
                                        <div class="col-md-4">
                                
                                            <div class="p-3 rounded-4 bg-white border text-center">
                                
                                                <small class="text-muted d-block">
                                                    Total Interest
                                                </small>
                                
                                                <h5 class="fw-bold mt-2">
                                                    ₹<span id="interestDisplay">0</span>
                                                </h5>
                                
                                            </div>
                                
                                        </div>
                                
                                        <div class="col-md-4">
                                
                                            <div class="p-3 rounded-4 bg-white border text-center">
                                
                                                <small class="text-muted d-block">
                                                    Total Payment
                                                </small>
                                
                                                <h5 class="fw-bold mt-2">
                                                    ₹<span id="paymentDisplay">0</span>
                                                </h5>
                                
                                            </div>
                                
                                        </div>
                                
                                    </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="saveStep3()">
                                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" id="monthly_income" 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" id="other_income" 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" id="annual_income" 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" id="salary_bank" 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" id="investments" 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"   id="preperty_details"  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"  id="vehicles_owned"  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" id="networth"   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 id="type_of_security"-->
                                <!--        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" id="estimated_value" 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" id="ownership_details" 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" id="bank_details" 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" id="account_number" 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" id="ifsc_code" 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" id="bank_statements"-->
                                <!--        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" id="id_proof"
                                        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 class="mt-2" id="idProofPreview" style="display:none;">

                                            <a href="" target="_blank" id="idProofLink">
                                                <i class="fa fa-eye"></i> View Uploaded File
                                            </a>
                                        
                                        </div>
                                </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" id="address_proof"
                                        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 class="mt-2" id="addressProofPreview" style="display:none;">

                                            <a href="" target="_blank" id="addressProofLink">
                                                <i class="fa fa-eye"></i> View Uploaded File
                                            </a>
                                        
                                        </div>
                                </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) (If Applicable)
                                    </label>

                                    <input type="file" id="income_proof"
                                        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 class="mt-2" id="incomeProofPreview" style="display:none;">

                                            <a href="" target="_blank" id="incomeProofLink">
                                                <i class="fa fa-eye"></i> View Uploaded File
                                            </a>
                                        
                                        </div>
                                </div>

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

                                    <input type="file" id="bankstatements_proof"
                                        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 class="mt-2" id="bankStatementPreview" style="display:none;">

                                            <a href="" target="_blank" id="bankStatementLink">
                                                <i class="fa fa-eye"></i> View Uploaded File
                                            </a>
                                        
                                        </div>
                                </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" id="business_proof"
                                        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 class="mt-2" id="businessProofPreview" style="display:none;">

                                            <a href="" target="_blank" id="businessProofLink">
                                                <i class="fa fa-eye"></i> View Uploaded File
                                            </a>
                                        
                                        </div>
                                </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="saveStep4()">
                                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"><span id="review_full_name"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Date of Birth</div>
                                     
                                    <div class="value-text"><span id="review_dob"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Gender</div>
                                    
                                    <div class="value-text"><span id="review_gender"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Marital Status</div>
                                   
                                    <div class="value-text"> <span id="review_marital_status"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Father / Spouse Name</div>
                                    
                                    <div class="value-text"> <span id="review_father_name"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Aadhaar Number</div>
                                    
                                    <div class="value-text"> <span id="review_aadhaar_number"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">PAN Number</div>
                                    
                                    <div class="value-text"> <span id="review_pan_number"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Passport Number</div>
                                    
                                    <div class="value-text"> <span id="review_passport"></span></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">
                                         <span id="review_current_address"></span>
                                    </div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Permanent Address</div>
                                    
                                    <div class="value-text">
                                        <span id="review_permanent_address"></span>
                                    </div>
                                </div>
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Residence Type</div>-->

                                <!--    <div class="value-text"><span id="review_residence_type"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Duration at Current Address</div>-->
                                     
                                <!--    <div class="value-text"><span id="review_address_duration"></span></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"><span id="review_loan_type"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Loan Amount</div>
                                    
                                    <div class="value-text">₹  <span id="review_loan_amount"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Loan Tenure</div>
                                     
                                    <div class="value-text"><span id="review_loan_tenure"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Purpose of Loan</div>
                                     
                                    <div class="value-text"><span id="review_purpose_of_loan"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Preferred EMI</div>
                                     
                                    <div class="value-text">₹ <span id="review_preferred_emi"></span></div>
                                </div>
                                
                                <div class="col-md-6">
                                        <div class="label-small">
                                            Total Interest
                                        </div>
                                    
                                        <div class="value-text">
                                            ₹ <span id="review_total_interest"></span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="label-small">
                                            Processing Charges
                                        </div>
                                    
                                        <div class="value-text">
                                            ₹ <span id="review_processing_charges"></span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="label-small">
                                            Total Payment
                                        </div>
                                    
                                        <div class="value-text">
                                            ₹ <span id="review_total_payment"></span>
                                        </div>
                                    </div>
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Current EMIs</div>-->
                                     
                                <!--    <div class="value-text">₹ <span id="review_current_emi"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Existing Loans</div>-->
                                     
                                <!--    <div class="value-text"><span id="review_existing_loans"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Credit Card Dues</div>-->
                                     
                                <!--    <div class="value-text">₹ <span id="review_credit_card_dues"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Outstanding Amount</div>-->
                                     
                                <!--    <div class="value-text">₹ <span id="review_outstanding_amount"></span></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">₹  <span id="review_monthly_income"></span></div>
                                </div>
                    
                                 <div class="col-md-6">
                                    <div class="label-small">Other Income Sources</div>
                                     
                                    <div class="value-text"><span id="review_other_income"></span></div>
                                </div>
                    
                                <div class="col-md-6">
                                    <div class="label-small">Annual Income</div>
                                     
                                    <div class="value-text">₹ <span id="review_annual_income"></span></div>
                                </div>
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Salary Account Bank</div>-->
                                     
                                <!--    <div class="value-text"><span id="review_salary_bank"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Savings / Investments</div>-->
                                     
                                <!--    <div class="value-text"><span id="review_investments"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Property Details</div>-->
                                    
                                <!--    <div class="value-text"> <span id="review_preperty_details"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Vehicles Owned</div>-->
                                     
                                <!--    <div class="value-text"><span id="review_vehicles_owned"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Net Worth</div>-->
                                     
                                <!--    <div class="value-text">₹ <span id="review_networth"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Type of Security</div>-->
                                     
                                <!--    <div class="value-text"><span id="review_type_of_security"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-md-6">-->
                                <!--    <div class="label-small">Estimated Value</div>-->
                                     
                                <!--    <div class="value-text">₹ <span id="review_estimated_value"></span></div>-->
                                <!--</div>-->
                    
                                <!--<div class="col-12">-->
                                <!--    <div class="label-small">Ownership Details</div>-->
                                     
                                <!--    <div class="value-text">-->
                                <!--       <span id="review_ownership_details"></span>-->
                                <!--    </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"><span id="review_bank_details"></span></div>-->
                        <!--        </div>-->
                    
                        <!--        <div class="col-md-6">-->
                        <!--            <div class="label-small">Account Number</div>-->
                                     
                        <!--            <div class="value-text"><span id="review_account_number"></span></div>-->
                        <!--        </div>-->
                    
                        <!--        <div class="col-md-6">-->
                        <!--            <div class="label-small">IFSC Code</div>-->
                                     
                        <!--            <div class="value-text"><span id="review_ifsc_code"></span></div>-->
                        <!--        </div>-->
                    
                        <!--    </div>-->
                    
                        <!--</div>-->
                        
                        <!-- Documents -->
                                    <div class="preview-section mt-5">
                                    
                                        <h5 class="mb-4 border-bottom pb-2">
                                            Uploaded Documents
                                        </h5>
                                    
                                        <div class="row g-4">
                                    
                                            <div class="col-md-6" id="review_id_proof_box">
                                                <div class="label-small">
                                                    ID Proof
                                                </div>
                                    
                                                <div class="value-text">
                                                    <a href="" target="_blank" id="review_id_proof_link">
                                                        <i class="fa fa-eye"></i> View Document
                                                    </a>
                                                </div>
                                            </div>
                                    
                                            <div class="col-md-6" id="review_address_proof_box">
                                                <div class="label-small">
                                                    Address Proof
                                                </div>
                                    
                                                <div class="value-text">
                                                    <a href="" target="_blank" id="review_address_proof_link">
                                                        <i class="fa fa-eye"></i> View Document
                                                    </a>
                                                </div>
                                            </div>
                                    
                                            <div class="col-md-6" id="review_income_proof_box">
                                                <div class="label-small">
                                                    Income Proof
                                                </div>
                                    
                                                <div class="value-text">
                                                    <a href="" target="_blank" id="review_income_proof_link">
                                                        <i class="fa fa-eye"></i> View Document
                                                    </a>
                                                </div>
                                            </div>
                                    
                                            <div class="col-md-6" id="review_bankstatement_box">
                                                <div class="label-small">
                                                    Bank Statements
                                                </div>
                                    
                                                <div class="value-text">
                                                    <a href="" target="_blank" id="review_bankstatement_link">
                                                        <i class="fa fa-eye"></i> View Document
                                                    </a>
                                                </div>
                                            </div>
                                    
                                            <div class="col-md-6" id="review_business_proof_box">
                                                <div class="label-small">
                                                    Business Proof
                                                </div>
                                    
                                                <div class="value-text">
                                                    <a href="" target="_blank" id="review_business_proof_link">
                                                        <i class="fa fa-eye"></i> View Document
                                                    </a>
                                                </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"
                                    id="submitApplicationBtn"
                                    class="btn-primary-custom">
                                
                                    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>

<div id="globalLoader">

    <div class="loader-content">

        <i class="fa fa-spinner fa-spin"></i>

        <p id="loaderText">Processing...</p>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

$(document).ready(function () {

    /*
    |--------------------------------------------------------------------------
    | INITIAL STEP LOCK
    |--------------------------------------------------------------------------
    */

    $('.step-item').each(function(index){

        if(index !== 0){

            $(this).addClass('locked d-none');
        }
    });

});


function showLoader(message='Processing...'){

    $('#loaderText').text(message);

    $('#globalLoader').css('display','flex');
}

function hideLoader(){

    $('#globalLoader').hide();
}

/*
|--------------------------------------------------------------------------
| GO TO STEP
|--------------------------------------------------------------------------
*/

function goToStep(stepNumber) {

    $('.form-step').removeClass('active');

    $('#step' + stepNumber).addClass('active');

    $('.step-item').removeClass('active');

    $('.step-item').eq(stepNumber - 1)
        .addClass('active');

    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

/*
|--------------------------------------------------------------------------
| UNLOCK STEP
|--------------------------------------------------------------------------
*/

function unlockStep(stepNumber){

    $('.step-item').eq(stepNumber - 1)
        .removeClass('locked d-none');
}

/*
|--------------------------------------------------------------------------
| PREVIOUS STEP
|--------------------------------------------------------------------------
*/

function prevStep(stepNumber){

    goToStep(stepNumber - 1);
}

/*
|--------------------------------------------------------------------------
| SIDEBAR CLICK
|--------------------------------------------------------------------------
*/

$('.step-item').click(function () {

    if($(this).hasClass('locked')){

        return false;
    }

    let index = $(this).index() + 1;

    goToStep(index);
});

/*
|--------------------------------------------------------------------------
| STEP 1 VERIFY USER
|--------------------------------------------------------------------------
*/

function verifyUser() {
    
    let organization = $('#organization').val();
    let phone = $('#phone').val();
    let consent = $('#creditCheckConsent').is(':checked');

    if(organization == '' || organization == 'Select'){

        Swal.fire({
            
            title:'Required',
            text:'Please select organization'
        });

        return;
    }

    if(phone == ''){

        Swal.fire({
            
            title:'Required',
            text:'Please enter phone number'
        });

        return;
    }

    if(phone.length != 10){

        Swal.fire({
           
            title:'Invalid Phone',
            text:'Phone number must be 10 digits'
        });

        return;
    }

    if(!consent){

        Swal.fire({
           
            title:'Consent Required',
            text:'Please accept terms and conditions'
        });

        return;
    }

    Swal.fire({
        title:'Verifying...',
        text:'Please wait',
        allowOutsideClick:false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({

        url: "{{ url('verify-user') }}",

        type: "POST",

        data: {

            _token: "{{ csrf_token() }}",

            organization: $('#organization').val(),

            phone: $('#phone').val()
        },

        success: function(response) {

            if(response.status){

                $('.otpSection').removeClass('d-none');

                $('#verifyNumberBtn').hide();

                // alert('OTP Sent Successfully');
                  hideLoader();

                    Swal.fire({
                        icon:'success',
                        title:'success',
                        text:'OTP Sent Successfully.'
                    });

            } else {

                //alert(response.message);
                
                 hideLoader();

                    Swal.fire({
                      
                        title:'Error',
                        text:response.message
                    });
            }
        },

        error: function(xhr){

            console.log(xhr.responseText);

           Swal.fire({
               
                title:'Error',
                text:'Something went wrong'
            });
        }
    });
}

/*
|--------------------------------------------------------------------------
| VERIFY OTP
|--------------------------------------------------------------------------
*/

function verifyOtp() {
    
    let otp = $('#otp').val();

    if(otp == ''){
    
        Swal.fire({
           
            title:'Required',
            text:'Please enter OTP'
        });
    
        return;
    }
    
    showLoader('Verifying OTP...');

    $.ajax({

        url: "{{ url('verify-otp') }}",

        type: "POST",

        data: {

            _token: "{{ csrf_token() }}",

            otp: $('#otp').val(),

            organization: $('#organization').val(),

            phone: $('#phone').val(),

            email: $('#email').val()
        },

        success: function(response) {

          if(response.status){
              hideLoader();

                let step = response.current_step;
            
                /*
                PREFILL DATA
                */
            
                fillApplicationData(response.application);

                    /*
                    LOAD REVIEW DATA AGAIN
                    */
                    
                    loadReviewData();
                    
                    /*
                    UNLOCK STEPS
                    */
                    
                    for(let i = 2; i <= step; i++){
                    
                        unlockStep(i);
                        completeStep(i);
                    }
                    
                    /*
                    GO TO SAVED STEP
                    */
                    
                    goToStep(step);
            }else {
                  hideLoader();
                 Swal.fire({
                    
                    title:'Error',
                    text:response.message
                });
            }
        },

        error: function(xhr){

            console.log(xhr.responseText);

            Swal.fire({
                
                title:'Error',
                text:'Something went wrong'
            });
        }
    });
}

/*
|--------------------------------------------------------------------------
| SAVE STEP 2
|--------------------------------------------------------------------------
*/

function saveStep2() {
    
    if($('#full_name').val() == ''){
    return  Swal.fire({
            title: 'Required',
            text: 'Enter full name'
        });
}

if($('#dob').val() == ''){
    return 
     Swal.fire({
            title: 'Required',
            text: 'Select date of birth'
        });
}

if($('#gender').val() == ''){
    return 
     Swal.fire({
            title: 'Required',
            text: 'Select gender'
        });
}

if($('#marital_status').val() == ''){
    return Swal.fire({title: 'Required',text: 'Select marital status'});
}

if($('#father_name').val() == ''){
    
     return Swal.fire({title: 'Required',text: 'Enter father/spouse name'});
}

if($('#aadhaar_number').val() == ''){
    
    return Swal.fire({title: 'Required',text: 'Enter Aadhaar number'});
}

if($('#aadhaar_number').val().length != 12){
    
    return Swal.fire({title: 'Required',text: 'Aadhaar must be 12 digits'});
}

if($('#pan_number').val() == ''){
  
    return Swal.fire({title: 'Required',text: 'Enter PAN number'});
}

if($('#current_address').val() == ''){
    
    return Swal.fire({title: 'Required',text: 'Enter current address'});
}

if($('#permanent_address').val() == ''){
    
    return Swal.fire({title: 'Required',text: 'Enter permanent address'});
}

// if(!$('input[name="residenceType"]:checked').val()){
//     return Swal.fire('Required','Select residence type','error');
// }

// if($('#address_duration').val() == ''){
//     return Swal.fire('Required','Enter address duration','error');
// }
    
    
    showLoader('Saving Personal Details...');

    $.ajax({

        url: "{{ url('save-step-2') }}",

        type: "POST",

        data: {

            _token: "{{ csrf_token() }}",

            full_name: $('#full_name').val(),

            dob: $('#dob').val(),

            gender: $('#gender').val(),

            marital_status: $('#marital_status').val(),

            father_name: $('#father_name').val(),

            aadhaar_number: $('#aadhaar_number').val(),

            pan_number: $('#pan_number').val(),

            current_address: $('#current_address').val(),
            permanent_address: $('#permanent_address').val(),
            address_duration: $('#address_duration').val(),

            city: $('#city').val(),

            state: $('#state').val(),

            pincode: $('#pincode').val()

            // address_duration: $('#address_duration').val(),

            // residence_type: $('input[name="residenceType"]:checked').val()
        },

        success: function(response) {
            hideLoader();

            if(response.status){
                
                completeStep(2);

                unlockStep(3);

                goToStep(3);

            } else {
                hideLoader();

               Swal.fire({
                   
                    title:'Error',
                    text:response.message
                });
            }
        },

        error: function(xhr){

            console.log(xhr.responseText);

           Swal.fire({
                        
                        title:'Error',
                        text:'Something went wrong'
                    });
        }
    });
}

/*
|--------------------------------------------------------------------------
| SAVE STEP 3
|--------------------------------------------------------------------------
*/

function saveStep3() {
    
    if($('#loan_type').val() == ''){
   
    return Swal.fire({title: 'Required',text: 'Select loan type'});
}

if($('#loan_amount').val() == ''){
  
    return Swal.fire({title: 'Required',text: 'Enter loan amount'});
}

if($('#loan_tenure').val() == ''){
   
    return Swal.fire({title: 'Required',text: 'Enter loan tenure'});
}

if($('#purpose_of_loan').val() == ''){
 
    return Swal.fire({title: 'Required',text: 'Enter purpose of loan'});
}

if($('#preferred_emi').val() == ''){
    
    return Swal.fire({title: 'Required',text: 'Enter preferred EMI'});
}

// if($('#current_emi').val() == ''){
//     return Swal.fire('Required','Enter current EMI','error');
// }

// if($('#existing_loans').val() == ''){
//     return Swal.fire('Required','Enter existing loan details','error');
// }

// if($('#credit_card_dues').val() == ''){
//     return Swal.fire('Required','Enter credit card dues','error');
// }

// if($('#outstanding_amount').val() == ''){
//     return Swal.fire('Required','Enter outstanding amount','error');
// }

    showLoader('Saving Loan Details...');

    $.ajax({

        url: "{{ url('save-step-3') }}",

        type: "POST",

        data: {

            _token: "{{ csrf_token() }}",

            loan_type: $('#loan_type').val(),

            loan_amount: $('#loan_amount').val(),

            loan_tenure: $('#loan_tenure').val(),
            purpose_of_loan: $('#purpose_of_loan').val(),
            total_interest: $('#total_interest').val(),
            total_payment: $('#total_payment').val(),
            preferred_emi: $('#preferred_emi').val(),
            processing_charges: $('#processing_charges').val(),
            // current_emi: $('#current_emi').val(),
            // existing_loans: $('#existing_loans').val(),
            // credit_card_dues: $('#credit_card_dues').val(),
            // outstanding_amount: $('#outstanding_amount').val(),
            
            

            employment_type: $('#employment_type').val()

            
        },

        success: function(response) {
            hideLoader();

            if(response.status){
                completeStep(3);
                fillApplicationData(response.application);
                loadReviewData();

                unlockStep(4);

                goToStep(4);
                

            } else {

                 Swal.fire({
                    
                    title:'Error',
                    text:response.message
                });
            }
        },

        error: function(xhr){
            hideLoader();

            console.log(xhr.responseText);

           Swal.fire({
               
                title:'Error',
                text:'Something went wrong'
            });
        }
    });
}

/*
|--------------------------------------------------------------------------
| SAVE STEP 4
|--------------------------------------------------------------------------
*/

function saveStep4() {
    
    if($('#monthly_income').val() == ''){
    
    return Swal.fire({title: 'Required',text: 'Enter monthly income'});
}

if($('#annual_income').val() == ''){
   
    return Swal.fire({title: 'Required',text: 'Enter annual income'});
}

// if($('#salary_bank').val() == ''){
//     return Swal.fire('Required','Enter salary bank name','error');
// }

// if($('#type_of_security').val() == ''){
//     return Swal.fire('Required','Select security type','error');
// }

// if($('#estimated_value').val() == ''){
//     return Swal.fire('Required','Enter estimated value','error');
// }

// if($('#ownership_details').val() == ''){
//     return Swal.fire('Required','Enter ownership details','error');
// }

// if($('#bank_details').val() == ''){
//     return Swal.fire('Required','Enter bank name','error');
// }

// if($('#account_number').val() == ''){
//     return Swal.fire('Required','Enter account number','error');
// }

// if($('#ifsc_code').val() == ''){
//     return Swal.fire('Required','Enter IFSC code','error');
// }

let existingIdProof =
    $('#idProofLink').attr('href');

let existingAddressProof =
    $('#addressProofLink').attr('href');


if(
    $('#id_proof')[0].files.length == 0 &&
    !existingIdProof
){
    return Swal.fire({title: 'Required',text: 'Upload ID proof'});
}

if(
    $('#address_proof')[0].files.length == 0 &&
    !existingAddressProof
){
     return Swal.fire({title: 'Required',text: 'Upload address proof'});
}

// if($('#income_proof')[0].files.length == 0){
//     return Swal.fire('Required','Upload income proof','error');
// }

// if($('#bankstatements_proof')[0].files.length == 0){
//     return Swal.fire('Required','Upload bank statements','error');
// }

    showLoader('Uploading Documents...');

    let formData = new FormData();

    formData.append('_token', "{{ csrf_token() }}");

    /*
    |--------------------------------------------------------------------------
    | FILES
    |--------------------------------------------------------------------------
    */

    if($('#id_proof')[0].files[0]){

        formData.append(
            'id_proof',
            $('#id_proof')[0].files[0]
        );
    }

    if($('#address_proof')[0].files[0]){

        formData.append(
            'address_proof',
            $('#address_proof')[0].files[0]
        );
    }

    if($('#income_proof')[0].files[0]){

        formData.append(
            'income_proof',
            $('#income_proof')[0].files[0]
        );
    }

    if($('#bankstatements_proof')[0].files[0]){

        formData.append(
            'bankstatements_proof',
            $('#bankstatements_proof')[0].files[0]
        );
    }

    if($('#business_proof')[0].files[0]){

        formData.append(
            'business_proof',
            $('#business_proof')[0].files[0]
        );
    }

    /*
    |--------------------------------------------------------------------------
    | TEXT FIELDS
    |--------------------------------------------------------------------------
    */

    formData.append(
        'other_income',
        $('#other_income').val()
    );

    formData.append(
        'annual_income',
        $('#annual_income').val()
    );

    // formData.append(
    //     'salary_bank',
    //     $('#salary_bank').val()
    // );

    // formData.append(
    //     'investments',
    //     $('#investments').val()
    // );

    // formData.append(
    //     'preperty_details',
    //     $('#preperty_details').val()
    // );

    // formData.append(
    //     'vehicles_owned',
    //     $('#vehicles_owned').val()
    // );

    // formData.append(
    //     'networth',
    //     $('#networth').val()
    // );

    // formData.append(
    //     'type_of_security',
    //     $('#type_of_security').val()
    // );

    // formData.append(
    //     'estimated_value',
    //     $('#estimated_value').val()
    // );

    // formData.append(
    //     'ownership_details',
    //     $('#ownership_details').val()
    // );

    // formData.append(
    //     'bank_details',
    //     $('#bank_details').val()
    // );

    // formData.append(
    //     'account_number',
    //     $('#account_number').val()
    // );

    formData.append(
        'monthly_income',
        $('#monthly_income').val()
    );
    
    //   formData.append(
    //     'ifsc_code',
    //     $('#ifsc_code').val()
    // );


    /*
    |--------------------------------------------------------------------------
    | AJAX
    |--------------------------------------------------------------------------
    */

    $.ajax({

        url: "{{ url('save-step-4') }}",

        type: "POST",

        data: formData,

        processData: false,

        contentType: false,

        success: function(response) {
            hideLoader();

            if(response.status){
                completeStep(4);

                unlockStep(5);
                 fillApplicationData(response.application);

                loadReviewData();
                
                goToStep(5);
            } else {
                hideLoader();

                 Swal.fire({
                   
                    title:'Error',
                    text:response.message
                });
            }
        },

        error: function(xhr){

            console.log(xhr.responseText);

            Swal.fire({

                            title:'Error',
                            text:'Something went wrong'
                        });
        }
    });
}

/*
|--------------------------------------------------------------------------
| FINAL SUBMIT
|--------------------------------------------------------------------------
*/

</script>

<script>

$(document).on('click', '#submitApplicationBtn', function () {
    
    if(!$('#declarationCheck').is(':checked')){

    return Swal.fire({title: 'Required',text: 'Please accept declaration'});
}

if(!$('#termsAgreement').is(':checked')){
    
     return Swal.fire({title: 'Required',text: 'Please accept terms and conditions'});
}
    showLoader('Submitting Application...');

    $.ajax({

        url: "{{ url('submit-application') }}",

        type: "POST",

        data: {

            _token: "{{ csrf_token() }}"
        },

        success: function(response) {

            if(response.status){
                 hideLoader();

               Swal.fire({
                    icon:'success',
                    title:'success',
                    text:response.message
                });

                /*
                OPTIONAL SUCCESS PAGE
                */

                $('#step5').html(`

                    <div class="text-center py-5">

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

                    </div>
                `);

            } else {

                Swal.fire({
                    
                    title:'Error',
                    text:response.message
                   });
            }
        },

        error: function(xhr){

            console.log(xhr.responseText);

           Swal.fire({
                    
                        title:'Error',
                        text:'Something went wrong'
                    });
        }
    });
});

</script>

<script>

function loadReviewData(){

    /*
    STEP 1
    */

    $('#review_organization').text(
        $('#organization').val()
    );

    $('#review_phone').text(
        $('#phone').val()
    );

    $('#review_email').text(
        $('#email').val()
    );

    /*
    STEP 2
    */

    $('#review_full_name').text(
        $('#full_name').val()
    );

    $('#review_dob').text(
        $('#dob').val()
    );

    $('#review_gender').text(
        $('#gender').val()
    );

    $('#review_marital_status').text(
        $('#marital_status').val()
    );

    $('#review_father_name').text(
        $('#father_name').val()
    );

    $('#review_aadhaar_number').text(
        $('#aadhaar_number').val()
    );

    $('#review_pan_number').text(
        $('#pan_number').val()
    );
    
      $('#review_passport').text(
        $('#passport').val()
    );
    
       $('#review_current_address').text(
        $('#current_address').val()
    );
    
       $('#review_permanent_address').text(
        $('#permanent_address').val()
    );
    
       $('#review_residence_type').text(
        $('#residence_type').val()
    );
    
       $('#review_address_duration').text(
        $('#address_duration').val()
    );


    /*
    STEP 3
    */

    $('#review_loan_type').text(
        $('#loan_type').val()
    );

    $('#review_loan_amount').text(
        $('#loan_amount').val()
    );

    $('#review_loan_tenure').text(
        $('#loan_tenure').val()
    );

    $('#review_employment_type').text(
        $('#employment_type').val()
    );
    
     $('#review_purpose_of_loan').text(
        $('#purpose_of_loan').val()
    );
    
     $('#review_preferred_emi').text(
        $('#preferred_emi').val()
    );
    
    $('#review_total_interest').text(
    $('#total_interest').val()
    );
    
    $('#review_total_payment').text(
        $('#total_payment').val()
    );
    
   $('#review_processing_charges').text(
    $('#processing_charges').val()
);
    
    //  $('#review_current_emi').text(
    //     $('#current_emi').val()
    // );
    
    //  $('#review_existing_loans').text(
    //     $('#existing_loans').val()
    // );

    // $('#review_credit_card_dues').text(
    //     $('#credit_card_dues').val()
    // );
    
    //  $('#review_outstanding_amount').text(
    //     $('#outstanding_amount').val()
    // );
    
 
    
 
    
//       $('#review_salary_bank').text(
//         $('#salary_bank').val()
//     );
    
//       $('#review_investments').text(
//         $('#investments').val()
//     );


//   $('#review_preperty_details').text(
//         $('#preperty_details').val()
//     );
    
//      $('#review_vehicles_owned').text(
//         $('#vehicles_owned').val()
//     );


//  $('#review_networth').text(
//         $('#networth').val()
//     );


//  $('#review_type_of_security').text(
//         $('#type_of_security').val()
//     );
    
    
//      $('#review_ownership_details').text(
//         $('#ownership_details').val()
//     );
    
    
//      $('#review_bank_details').text(
//         $('#bank_details').val()
//     );
    
//          $('#review_estimated_value').text(
//         $('#estimated_value').val()
//     );
    
//          $('#review_bank_details').text(
//         $('#bank_details').val()
//     );
    
    
//             $('#review_bank_details').text(
//         $('#bank_details').val()
//     );
    
//             $('#review_account_number').text(
//         $('#account_number').val()
//     );




//     /*
//     STEP 4
//     */

    $('#review_annual_income').text(
        $('#annual_income').val()
    );
    
        $('#review_monthly_income').text(
        $('#monthly_income').val()
    );
          $('#review_other_income').text(
        $('#other_income').val()
    );

//     $('#review_ifsc_code').text(
//         $('#ifsc_code').val()
//     );

    
}


function fillApplicationData(data){

    /*
    STEP 1
    */

    $('#organization').val(data.organization);
    $('#phone').val(data.phone);
    $('#email').val(data.email);

    /*
    STEP 2
    */

    $('#full_name').val(data.full_name);
    $('#dob').val(data.dob);
    $('#gender').val(data.gender);
    $('#marital_status').val(data.marital_status);
    $('#father_name').val(data.father_name);
    $('#aadhaar_number').val(data.aadhaar_number);
    $('#pan_number').val(data.pan_number);
    $('#passport').val(data.passport);

    $('#current_address').val(data.current_address);
    $('#permanent_address').val(data.permanent_address);

    // $('#address_duration').val(data.address_duration);

    /*
    RADIO
    */

    // $('input[name="residenceType"][value="' + data.residence_type + '"]')
    //     .prop('checked', true);

    /*
    STEP 3
    */

    $('#loan_type').val(data.loan_type);
    $('#loan_amount').val(data.loan_amount);
    $('#loan_tenure').val(data.loan_tenure);
    $('#purpose_of_loan').val(data.purpose_of_loan);
    $('#preferred_emi').val(data.preferred_emi);
    $('#processing_charges').val(data.processing_charges);
    // $('#current_emi').val(data.current_emi);
    // $('#existing_loans').val(data.existing_loans);
    // $('#credit_card_dues').val(data.credit_card_dues);
    // $('#outstanding_amount').val(data.outstanding_amount);
    
    
    if(data.loan_amount){

    loanAmountRange.value = data.loan_amount;

    $('#loanAmountInput').val(data.loan_amount);
}

if(data.loan_tenure){

    let tenure = parseInt(data.loan_tenure);

    loanTenureRange.value = tenure;

    $('#loanTenureInput').val(tenure);
}

/*
|--------------------------------------------------------------------------
| RECALCULATE EMI AFTER DB LOAD
|--------------------------------------------------------------------------
*/

setTimeout(function(){

    calculateEMI();

    loadReviewData();

}, 200);

    /*
    STEP 4
    */

    $('#monthly_income').val(data.monthly_income);
    $('#other_income').val(data.other_income);
    $('#annual_income').val(data.annual_income);
    // $('#salary_bank').val(data.salary_bank);
    // $('#investments').val(data.investments);

    // $('#preperty_details').val(data.preperty_details);

    // $('#vehicles_owned').val(data.vehicles_owned);

    // $('#networth').val(data.networth);

    // $('#type_of_security').val(data.type_of_security);

    // $('#estimated_value').val(data.estimated_value);

    // $('#ownership_details').val(data.ownership_details);

    // $('#bank_details').val(data.bank_details);

    // $('#account_number').val(data.account_number);

    // $('#ifsc_code').val(data.ifsc_code);
    
    /*
|--------------------------------------------------------------------------
| DOCUMENT PREVIEWS STEP 4
|--------------------------------------------------------------------------
*/

        if(data.id_proof){
        
            $('#idProofPreview').show();
        
            $('#idProofLink').attr(
                'href',
                 '{{ asset("storage") }}/' + data.id_proof
            );
        }
        
        if(data.address_proof){
        
            $('#addressProofPreview').show();
        
            $('#addressProofLink').attr(
                'href',
                '{{ asset("storage") }}/' + data.address_proof
            );
        }
        
        if(data.income_proof){
        
            $('#incomeProofPreview').show();
        
            $('#incomeProofLink').attr(
                'href',
                '{{ asset("storage") }}/' + data.income_proof
            );
        }
        
        if(data.bankstatements_proof){
        
            $('#bankStatementPreview').show();
        
            $('#bankStatementLink').attr(
                'href',
                '{{ asset("storage") }}/' + data.bankstatements_proof
            );
        }
        
        if(data.business_proof){
        
            $('#businessProofPreview').show();
        
            $('#businessProofLink').attr(
                'href',
                '{{ asset("storage") }}/' + data.business_proof
            );
        }
        
        
        /*
        |--------------------------------------------------------------------------
        | STEP 5 DOCUMENTS
        |--------------------------------------------------------------------------
        */
        
        if(data.id_proof){
        
            $('#review_id_proof_box').show();
        
            $('#review_id_proof_link').attr(
                'href',
                '{{ asset("storage") }}/' + data.id_proof
            );
        
        }else{
        
            $('#review_id_proof_box').hide();
        }
        
        if(data.address_proof){
        
            $('#review_address_proof_box').show();
        
            $('#review_address_proof_link').attr(
                'href',
                '{{ asset("storage") }}/' + data.address_proof
            );
        
        }else{
        
            $('#review_address_proof_box').hide();
        }
        
        if(data.income_proof){
        
            $('#review_income_proof_box').show();
        
            $('#review_income_proof_link').attr(
                'href',
                '{{ asset("storage") }}/' + data.income_proof
            );
        
        }else{
        
            $('#review_income_proof_box').hide();
        }
        
        if(data.bankstatements_proof){
        
            $('#review_bankstatement_box').show();
        
            $('#review_bankstatement_link').attr(
                'href',
                '{{ asset("storage") }}/' + data.bankstatements_proof
            );
        
        }else{
        
            $('#review_bankstatement_box').hide();
        }
        
        if(data.business_proof){
        
            $('#review_business_proof_box').show();
        
            $('#review_business_proof_link').attr(
                'href',
                '{{ asset("storage") }}/' + data.business_proof
            );
        
        }else{
        
            $('#review_business_proof_box').hide();
        }
}


function completeStep(step){

    console.log(step);

    $('#stepNav' + step).addClass('completed');

    console.log($('#stepNav' + step));
}
</script>

<script>

const loanAmountRange = document.getElementById('loanAmountRange');
const loanTenureRange = document.getElementById('loanTenureRange');

/*
|--------------------------------------------------------------------------
| DEFAULT VALUES
|--------------------------------------------------------------------------
*/

loanAmountRange.value = 500000;
loanTenureRange.value = 5;

$('#loan_amount').val(500000);
$('#loan_tenure').val(5);

/*
|--------------------------------------------------------------------------
| EMI CALCULATION
|--------------------------------------------------------------------------
*/

function calculateEMI() {

    /*
    GET VALUES FROM STEP 3 INPUTS
    */
    
    const processingCharges = 4000;

    let principal =
        parseFloat($('#loan_amount').val()) || 50000;

    let tenureYears =
        parseFloat($('#loan_tenure').val()) || 1;

    /*
    LOAN LIMITS
    */

    if(principal < 50000){
        principal = 50000;
    }

    if(principal > 5000000){
        principal = 5000000;
    }

    /*
    TENURE LIMITS
    */

    if(tenureYears < 1){
        tenureYears = 1;
    }

    if(tenureYears > 10){
        tenureYears = 10;
    }

    /*
    UPDATE INPUTS
    */

    $('#loan_amount').val(principal);

    $('#loan_tenure').val(tenureYears);

    /*
    SYNC SLIDERS
    */

    loanAmountRange.value = principal;

    loanTenureRange.value = tenureYears;

    /*
    EMI CALCULATION
    */

    const annualInterest = 14;

    const monthlyInterest =
        annualInterest / 12 / 100;

    const months =
        tenureYears * 12;

    const emi =
        (principal * monthlyInterest * Math.pow(1 + monthlyInterest, months)) /
        (Math.pow(1 + monthlyInterest, months) - 1);

    const totalPayment =
    (emi * months) + processingCharges;

    const totalInterest =
        totalPayment - principal;

    /*
    DISPLAY VALUES
    */

    $('#loanAmountDisplay').text(
        '₹' + principal.toLocaleString()
    );

    $('#loanTenureDisplay').text(
        tenureYears + ' Years'
    );

    $('#emiDisplay').text(
        Math.round(emi).toLocaleString()
    );

    $('#interestDisplay').text(
        Math.round(totalInterest).toLocaleString()
    );

    $('#paymentDisplay').text(
        Math.round(totalPayment).toLocaleString()
    );
    
    $('#processing_charges').val(
        Math.round(processingCharges).toLocaleString()
    );

    /*
    AUTO FILL STEP 3 FIELDS
    */
$('#preferred_emi').val(
    Math.round(emi)
);

$('#total_interest').val(
    Math.round(totalInterest)
);

const processingCharges = 40000;

$('#processing_charges').val(
    processingCharges
);

$('#total_payment').val(
    Math.round(totalPayment + processingCharges)
);
}

/*
|--------------------------------------------------------------------------
| SLIDER -> INPUT SYNC
|--------------------------------------------------------------------------
*/

loanAmountRange.addEventListener(
    'input',
    function () {

        $('#loan_amount').val(this.value);

        calculateEMI();
    }
);

loanTenureRange.addEventListener(
    'input',
    function () {

        $('#loan_tenure').val(this.value);

        calculateEMI();
    }
);

/*
|--------------------------------------------------------------------------
| INPUT -> SLIDER SYNC
|--------------------------------------------------------------------------
*/



/*
|--------------------------------------------------------------------------
| INITIAL LOAD
|--------------------------------------------------------------------------
*/

calculateEMI();


$('#loan_tenure').on('blur', function () {

    let tenure = parseInt($(this).val()) || 1;

    /*
    MIN 1
    */

    if(tenure < 1){
        tenure = 1;
    }

    /*
    MAX 10
    */

    if(tenure > 10){
        tenure = 10;
    }

    $(this).val(tenure);

    /*
    UPDATE SLIDER
    */

    loanTenureRange.value = tenure;

    /*
    RECALCULATE EMI
    */

    calculateEMI();
});

$('#loan_amount').on('blur', function () {

    let amount = parseInt($(this).val()) || 50000;

    if(amount < 50000){
        amount = 50000;
    }

    if(amount > 5000000){
        amount = 5000000;
    }

    $(this).val(amount);

    loanAmountRange.value = amount;

    calculateEMI();
});

</script>


@endsection
