<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
    >
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Apply for Loan | PG Finsev</title>

<style>
/* =========================================================
   CLIENT LOAN CREATE
   Visual system matched to client loans index.blade.php
   Desktop width: 540px
   Mobile width: 100%
   PHP / Blade / JavaScript logic: UNCHANGED
========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-width:0;
    background:#eef3f8;
    color:#172b43;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

.loan-app-page{
    width:540px;
    max-width:100%;
    min-height:100vh;
    margin:0 auto;
    background:#f5f7fb;
    padding:0 0 98px;
}

.loan-app-wrap{
    width:100%;
    max-width:540px;
    min-width:0;
    margin:0 auto;
}

/* =========================================================
   TOP BAR — same sizing/style as index.blade.php
========================================================= */

.loan-app-top{
    width:100%;
    height:72px;
    background:#fff;
    border-bottom:1px solid #e9edf3;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 17px;
    position:sticky;
    top:0;
    z-index:20;
}

.loan-back{
    flex:0 0 38px;
    width:38px;
    height:38px;
    margin:0;
    border-radius:12px;
    background:#f3f6fa;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
    color:#314861;
    border:0;
    text-decoration:none;
}

.loan-heading{
    flex:1;
    min-width:0;
}

.loan-heading h1{
    margin:0;
    color:#172b43;
    font-size:17px;
    line-height:1.2;
    font-weight:900;
}

.loan-heading p{
    display:block;
    margin:3px 0 0;
    color:#8997a8;
    font-size:12px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* =========================================================
   COMMON CARD — same as index .loan
========================================================= */

.loan-card{
    width:100%;
    min-width:0;
    background:#fff;
    border:1px solid #e5ebf2;
    border-radius:17px;
    margin:10px 0 0;
    padding:16px;
    box-shadow:0 7px 20px rgba(31,41,55,.035);
    overflow:hidden;
}

.loan-card-body{
    width:100%;
    min-width:0;
    padding:0;
}

/* First card gets the same top spacing as index content */
.loan-app-wrap > .loan-card:first-of-type{
    margin-top:14px;
}

/* =========================================================
   EMI CARD — index visual language
========================================================= */

.emi-card-summary{
    position:relative;
    overflow:hidden;
    padding:18px;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(140deg,#071b35,#1769e0);
    box-shadow:0 15px 32px rgba(23,105,224,.18);
}

.emi-card-summary:after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-95px;
    top:-100px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
}

.card-summary-label{
    position:relative;
    z-index:2;
    color:#b3c9e2;
    font-size:11px;
    line-height:1.3;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:900;
}

.card-summary-number{
    position:relative;
    z-index:2;
    margin-top:5px;
    color:#fff;
    font-size:15px;
    line-height:1.3;
    font-weight:900;
    letter-spacing:0;
    overflow-wrap:anywhere;
}

.card-summary-row{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:14px;
}

.card-summary-stat{
    min-width:0;
}

.card-summary-stat span{
    display:block;
    color:#b3c9e2;
    font-size:10px;
    line-height:1.3;
}

.card-summary-stat strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:13px;
    line-height:1.3;
    overflow-wrap:anywhere;
}

/* =========================================================
   SECTION TITLES — same as index
========================================================= */

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin:0 2px 9px;
}

.section-title h2{
    margin:0;
    color:#172b43;
    font-size:15px;
    line-height:1.3;
    font-weight:900;
}

.section-title span{
    color:#8997a8;
    font-size:11px;
    line-height:1.3;
    text-align:right;
}

.section-title.compact{
    margin:0 0 9px;
}

.section-title.compact h3{
    margin:0;
    color:#172b43;
    font-size:15px;
    line-height:1.3;
    font-weight:900;
}

/* =========================================================
   LOAN TYPE
========================================================= */

.loan-type-grid{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.loan-type-option{
    position:relative;
    width:100%;
    min-width:0;
}

.loan-type-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.loan-type-option label{
    width:100%;
    min-width:0;
    min-height:70px;
    padding:10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    overflow:hidden;
    background:#fff;
    border:1px solid #e5ebf2;
    border-radius:10px;
    cursor:pointer;
    transition:.18s ease;
}

.loan-type-option label strong{
    min-width:0;
    color:#304761;
    font-size:13px;
    line-height:1.25;
    font-weight:900;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.loan-type-option label small{
    min-width:0;
    color:#8997a8;
    font-size:10px;
    line-height:1.4;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.loan-type-option input:checked+label{
    border-color:#1769e0;
    background:#edf5ff;
    color:#1769e0;
    box-shadow:0 0 0 2px rgba(23,105,224,.07);
}

.loan-type-option input:checked+label strong{
    color:#1769e0;
}

.loan-type-empty{
    padding:32px 20px;
    border:1px dashed #ccd7e3;
    border-radius:18px;
    background:#fff;
    color:#8997a8;
    font-size:12px;
    line-height:1.6;
    text-align:center;
}

/* =========================================================
   LOAN DETAIL PANELS
========================================================= */

.loan-type-details{
    width:100%;
    min-width:0;
    margin-top:12px;
}

.loan-details-panel{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:12px;
    overflow:hidden;
    background:#f7faff;
    border:1px solid #e7edf5;
    border-radius:10px;
}

.loan-details-panel[hidden]{
    display:none!important;
}

.loan-details-grid{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.loan-details-grid>div{
    width:100%;
    min-width:0;
    max-width:100%;
}

.loan-details-grid>.full{
    grid-column:1/-1;
}

.loan-details-grid label{
    display:block;
    margin:0 0 4px;
    color:#8997a8;
    font-size:10px;
    line-height:1.3;
    font-weight:700;
}

.loan-detail-input{
    display:block;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:40px;
    padding:9px 10px;
    border:1px solid #dce5ef;
    border-radius:9px;
    background:#fff;
    color:#304761;
    font-family:inherit;
    font-size:12px;
    line-height:1.35;
    outline:none;
    box-sizing:border-box!important;
}

textarea.loan-detail-input{
    min-height:76px;
    resize:vertical;
}

.loan-detail-input:focus{
    border-color:#1769e0;
    box-shadow:0 0 0 3px rgba(23,105,224,.08);
}

.loan-detail-input.input-error{
    border-color:#dc2626!important;
    box-shadow:0 0 0 2px rgba(220,38,38,.08)!important;
    background:#fffafa!important;
}

/* =========================================================
   AMOUNT
========================================================= */

.amount-box{
    width:100%;
    min-width:0;
    padding:18px;
    border-radius:10px;
    background:#f7faff;
    border:1px solid #e7edf5;
    text-align:center;
}

.amount-label{
    color:#8997a8;
    font-size:10px;
    line-height:1.3;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.amount-input-wrap{
    min-width:0;
    margin:7px auto 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
}

.amount-input-wrap span{
    flex:0 0 auto;
    color:#1769e0;
    font-size:25px;
    line-height:1;
    font-weight:900;
}

.amount-input{
    width:190px;
    max-width:calc(100% - 30px);
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#304761;
    text-align:left;
    font-family:inherit;
    font-size:27px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-1px;
}

.amount-help{
    color:#8997a8;
    font-size:10px;
    line-height:1.4;
}

.amount-slider{
    width:100%;
    max-width:100%;
    margin-top:14px;
    accent-color:#1769e0;
    cursor:pointer;
}

.slider-limits{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:4px;
    color:#8997a8;
    font-size:10px;
}

.quick-amounts{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px;
    margin-top:12px;
}

.quick-amount{
    border:1px solid #dce5ef;
    background:#fff;
    color:#53667d;
    border-radius:9px;
    padding:7px 10px;
    font-family:inherit;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.quick-amount:hover{
    border-color:#8bb5ed;
    color:#1769e0;
    background:#f5f9ff;
}

/* =========================================================
   TENURE
========================================================= */

.tenure-grid{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.tenure-option{
    position:relative;
    min-width:0;
}

.tenure-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.tenure-option label{
    display:block;
    width:100%;
    min-width:0;
    padding:11px 7px;
    border:1px solid #e5ebf2;
    border-radius:10px;
    background:#fff;
    color:#53667d;
    text-align:center;
    font-size:10px;
    line-height:1.3;
    font-weight:900;
    cursor:pointer;
}

.tenure-option label small{
    display:block;
    margin-top:3px;
    color:#8997a8;
    font-size:9px;
    font-weight:600;
}

.tenure-option input:checked+label{
    border-color:#1769e0;
    background:#edf5ff;
    color:#1769e0;
    box-shadow:0 0 0 2px rgba(23,105,224,.07);
}

/* =========================================================
   SUMMARY
========================================================= */

.calculation-card{
    background:#fff;
    border:1px solid #e5ebf2;
}

.calculation-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    padding:10px 0;
    border-bottom:1px solid #edf1f5;
    font-size:11px;
    line-height:1.4;
}

.calculation-row:last-child{
    border-bottom:0;
}

.calculation-row span{
    min-width:0;
    color:#8997a8;
}

.calculation-row strong{
    min-width:0;
    color:#304761;
    text-align:right;
    overflow-wrap:anywhere;
}

.zero-interest,
.interest-enabled{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:5px 8px;
    border-radius:8px;
    font-size:9px;
    line-height:1.2;
    font-weight:900;
    white-space:nowrap;
}

.zero-interest{
    background:#eaf8f0;
    color:#198754!important;
}

.interest-enabled{
    background:#edf5ff;
    color:#1769e0!important;
}

.processing-fee{
    color:#b26b00!important;
}

.total-row{
    padding-top:14px;
    margin-top:3px;
}

.total-row span{
    color:#304761;
    font-weight:900;
}

.total-row strong{
    color:#1769e0;
    font-size:18px;
}

.emi-highlight{
    margin-top:12px;
    padding:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid #dce5ef;
    border-radius:10px;
    background:#edf5ff;
}

.emi-highlight span{
    min-width:0;
    color:#61758d;
    font-size:10px;
}

.emi-highlight strong{
    flex:0 0 auto;
    color:#1769e0;
    font-size:20px;
    font-weight:900;
}

.settings-note{
    margin-top:9px;
    color:#8997a8;
    font-size:9px;
    line-height:1.4;
    text-align:center;
}

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

.loan-warning{
    padding:12px;
    border-radius:10px;
    background:#fff7e8;
    border:1px solid #f1dfb7;
    color:#8a610b;
    font-size:10px;
    line-height:1.55;
}

.loan-error{
    width:100%;
    margin:12px 0 0;
    padding:11px 12px;
    border-radius:10px;
    background:#fff0f1;
    border:1px solid #f3d0d4;
    color:#b42332;
    font-size:11px;
    line-height:1.5;
    font-weight:800;
}

.existing-loan{
    padding:12px;
    border-radius:10px;
    background:#fff7e8;
    border:1px solid #f1dfb7;
    color:#8a610b;
    font-size:10px;
    line-height:1.6;
}

.existing-loan strong{
    display:block;
    margin-bottom:4px;
    color:#8a610b;
    font-size:12px;
}

.loan-submit{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:10px;
    background:#1769e0;
    color:#fff;
    font-family:inherit;
    font-size:12px;
    line-height:1.2;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(23,105,224,.18);
    transition:.18s;
}

.loan-submit:hover{
    transform:translateY(-1px);
    background:#125bc4;
}

.loan-submit:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

.loan-terms{
    margin-top:9px;
    color:#8997a8;
    font-size:9px;
    line-height:1.5;
    text-align:center;
}

/* =========================================================
   FORM CONTROL SAFETY
========================================================= */

.loan-app-page input,
.loan-app-page select,
.loan-app-page textarea,
.loan-app-page button{
    max-width:100%;
    box-sizing:border-box;
}

.loan-app-page img,
.loan-app-page svg{
    max-width:100%;
}

/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:769px){

    .loan-app-page{
        width:540px;
        max-width:540px;
    }

    .loan-app-wrap{
        width:100%;
        max-width:540px;
    }

    .loan-type-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .loan-details-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

/* =========================================================
   MOBILE — same visual language, only width/layout changes
========================================================= */

@media(max-width:768px){

    body{
        background:#f5f7fb;
    }

    .loan-app-page{
        width:100%;
        max-width:100%;
        min-height:100vh;
        margin:0;
        padding:0 0 98px;
    }

    .loan-app-wrap{
        width:100%;
        max-width:100%;
    }

    .loan-app-top{
        width:100%;
        height:72px;
        padding:0 14px;
    }

    .loan-card{
        width:calc(100% - 20px);
        margin-left:10px;
        margin-right:10px;
        padding:14px;
        border-radius:17px;
    }

    .loan-app-wrap > .loan-card:first-of-type{
        margin-top:14px;
    }

    .loan-card-body{
        padding:0;
    }

    .emi-card-summary{
        padding:18px;
        border-radius:10px;
    }

    .loan-type-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .loan-details-grid{
        grid-template-columns:minmax(0,1fr);
        gap:8px;
    }

    .loan-details-grid>.full{
        grid-column:1/-1;
    }

    .loan-details-panel{
        padding:10px;
    }

    .tenure-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .amount-box{
        padding:15px;
    }

    .amount-input{
        width:165px;
        font-size:25px;
    }

    .emi-highlight strong{
        font-size:18px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .loan-app-top{
        height:64px;
        padding:0 12px;
    }

    .loan-back{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:20px;
    }

    .loan-heading h1{
        font-size:17px;
    }

    .loan-heading p{
        font-size:11px;
    }

    .loan-card{
        width:calc(100% - 16px);
        margin-left:8px;
        margin-right:8px;
        padding:12px;
    }

    .loan-type-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .loan-type-option label{
        min-height:64px;
        padding:9px;
    }

    .loan-type-option label strong{
        font-size:12px;
    }

    .loan-type-option label small{
        font-size:9px;
    }

    .loan-details-panel{
        padding:10px;
    }

    .loan-detail-input{
        min-height:40px;
        font-size:12px;
    }

    textarea.loan-detail-input{
        min-height:76px;
    }

    .amount-input{
        width:150px;
        font-size:24px;
    }

    .calculation-row{
        gap:9px;
        font-size:10px;
    }

    .quick-amount{
        padding:6px 8px;
    }
}

/* =========================================================
   VERY SMALL MOBILE — retain same 2-column visual system
========================================================= */

@media(max-width:360px){

    .loan-app-top{
        padding:0 10px;
    }

    .loan-card{
        width:calc(100% - 12px);
        margin-left:6px;
        margin-right:6px;
        padding:10px;
    }

    .loan-type-grid{
        gap:6px;
    }

    .loan-type-option label{
        min-height:60px;
        padding:8px;
    }

    .loan-type-option label strong{
        font-size:11px;
    }

    .loan-type-option label small{
        font-size:8px;
    }

    .amount-input{
        width:135px;
        font-size:22px;
    }

    .emi-highlight{
        gap:8px;
    }

    .emi-highlight strong{
        font-size:16px;
    }
}
</style>

<?php

    $currencySettings = \App\Models\SystemSetting::query()->first();

    $currencySymbol =
        $currencySettings?->currency_symbol ?? '₹';

    $currencyDecimals =
        (int) (
            $currencySettings?->currency_decimal_places ?? 2
        );

    $currencyRound =
        (bool) (
            $currencySettings?->currency_round_display ?? false
        );

    $displayDecimals =
        $currencyRound
            ? 0
            : max(
                0,
                min(
                    4,
                    $currencyDecimals
                )
            );

?>

<div class="loan-app-page">
<div class="loan-app-wrap">

    <div class="loan-app-top">

        <a
            href="<?php echo e(route('client.dashboard')); ?>"
            class="loan-back"
        >
            ←
        </a>

        <div class="loan-heading">

            <h1>
                Apply for Loan
            </h1>

            <p>
                Simple, transparent and flexible EMI financing.
            </p>

        </div>

    </div>


    <?php if(session('error')): ?>

        <div class="loan-error">
            <?php echo e(session('error')); ?>

        </div>

    <?php endif; ?>


    <?php if($errors->any()): ?>

        <div class="loan-error">
            <?php echo e($errors->first()); ?>

        </div>

    <?php endif; ?>


    

    <div class="loan-card">

        <div class="loan-card-body">

            <div class="emi-card-summary">

                <div class="card-summary-label">
                    Active EMI Card
                </div>

                <div class="card-summary-number">
                    <?php echo e($emiCard->card_number); ?>

                </div>

                <div class="card-summary-row">

                    <div class="card-summary-stat">

                        <span>
                            Available Limit
                        </span>

                        <strong>
                            <?php echo e(money((float)$availableLimit)); ?>

                        </strong>

                    </div>


                    <div class="card-summary-stat">

                        <span>
                            Card Limit
                        </span>

                        <strong>
                            <?php echo e(money((float)$emiCard->card_limit)); ?>

                        </strong>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <?php if($activeLoanExists): ?>

        <div class="loan-card">

            <div class="loan-card-body">

                <div class="existing-loan">

                    <strong>
                        Existing Loan Application
                    </strong>

                    You already have a pending or active loan.
                    A new loan application cannot be submitted
                    until the existing loan is completed or closed.

                </div>

            </div>

        </div>

    <?php else: ?>

        <form
            method="POST"
            action="<?php echo e(route('client.loans.store')); ?>"
            id="loanApplicationForm"
        >

            <?php echo csrf_field(); ?>


            

            <div class="loan-card">

                <div class="loan-card-body">

                    <div class="section-title">

                        <h2>
                            Loan Type
                        </h2>

                        <span>
                            Select the purpose of your loan
                        </span>

                    </div>


                    <?php if(isset($loanTypes) && $loanTypes->count()): ?>

                        <div class="loan-type-grid">

                            <?php $__currentLoopData = $loanTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $loanType): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                <div class="loan-type-option">

                                    <input
                                        type="radio"
                                        name="loan_type_id"
                                        id="loanType<?php echo e($loanType->id); ?>"
                                        value="<?php echo e($loanType->id); ?>"
                                        data-code="<?php echo e($loanType->code); ?>"
                                        data-interest-rate="<?php echo e((float)($loanType->interest_rate ?? 0)); ?>"
                                        <?php if(
                                            (int)old('loan_type_id')
                                            ===
                                            (int)$loanType->id
                                        ): echo 'checked'; endif; ?>
                                        required
                                    >

                                    <label
                                        for="loanType<?php echo e($loanType->id); ?>"
                                    >

                                        <strong>
                                            <?php echo e($loanType->name); ?>

                                        </strong>

                                        <?php if($loanType->description): ?>

                                            <small>
                                                <?php echo e($loanType->description); ?>

                                            </small>

                                        <?php endif; ?>

                                    </label>

                                </div>

                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        </div>


                        <div
                            id="loanTypeDetails"
                            class="loan-type-details"
                            hidden
                        >

                            

                            <div
                                class="loan-details-panel"
                                data-loan-details="digital_product"
                                hidden
                            >

                                <div class="section-title compact">

                                    <h3>
                                        Digital Product Details
                                    </h3>

                                    <span>
                                        Product information
                                    </span>

                                </div>

                                <div class="loan-details-grid">

                                    <div>
                                        <label>
                                            Product Type
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[product_type]"
                                            value="<?php echo e(old('loan_details.product_type')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Brand
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[brand]"
                                            value="<?php echo e(old('loan_details.brand')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Model
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[model]"
                                            value="<?php echo e(old('loan_details.model')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            IMEI Number
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[imei]"
                                            value="<?php echo e(old('loan_details.imei')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Serial Number
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[serial_number]"
                                            value="<?php echo e(old('loan_details.serial_number')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Product Value
                                        </label>

                                        <input
                                            type="number"
                                            step="0.01"
                                            min="0"
                                            name="loan_details[product_value]"
                                            value="<?php echo e(old('loan_details.product_value')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Purchase Date
                                        </label>

                                        <input
                                            type="date"
                                            name="loan_details[purchase_date]"
                                            value="<?php echo e(old('loan_details.purchase_date')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div class="full">
                                        <label>
                                            Description
                                        </label>

                                        <textarea
                                            name="loan_details[description]"
                                            class="loan-detail-input"
                                            rows="3"
                                        ><?php echo e(old('loan_details.description')); ?></textarea>
                                    </div>

                                </div>

                            </div>


                            

                            <div
                                class="loan-details-panel"
                                data-loan-details="gold"
                                hidden
                            >

                                <div class="section-title compact">

                                    <h3>
                                        Gold Loan Details
                                    </h3>

                                    <span>
                                        Gold information
                                    </span>

                                </div>

                                <div class="loan-details-grid">

                                    <div>
                                        <label>
                                            Gold Type
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[gold_type]"
                                            value="<?php echo e(old('loan_details.gold_type')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Number of Items
                                        </label>

                                        <input
                                            type="number"
                                            min="1"
                                            name="loan_details[number_of_items]"
                                            value="<?php echo e(old('loan_details.number_of_items')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Gross Weight
                                        </label>

                                        <input
                                            type="number"
                                            step="0.001"
                                            min="0"
                                            name="loan_details[gross_weight]"
                                            value="<?php echo e(old('loan_details.gross_weight')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Net Weight
                                        </label>

                                        <input
                                            type="number"
                                            step="0.001"
                                            min="0"
                                            name="loan_details[net_weight]"
                                            value="<?php echo e(old('loan_details.net_weight')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Purity
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[purity]"
                                            value="<?php echo e(old('loan_details.purity')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Gold Value
                                        </label>

                                        <input
                                            type="number"
                                            step="0.01"
                                            min="0"
                                            name="loan_details[gold_value]"
                                            value="<?php echo e(old('loan_details.gold_value')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div class="full">
                                        <label>
                                            Description
                                        </label>

                                        <textarea
                                            name="loan_details[description]"
                                            class="loan-detail-input"
                                            rows="3"
                                        ><?php echo e(old('loan_details.description')); ?></textarea>
                                    </div>

                                </div>

                            </div>


                            

                            <div
                                class="loan-details-panel"
                                data-loan-details="personal"
                                hidden
                            >

                                <div class="section-title compact">

                                    <h3>
                                        Personal Loan Details
                                    </h3>

                                    <span>
                                        Purpose and income information
                                    </span>

                                </div>

                                <div class="loan-details-grid">

                                    <div>
                                        <label>
                                            Purpose
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[purpose]"
                                            value="<?php echo e(old('loan_details.purpose')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Employment Type
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[employment_type]"
                                            value="<?php echo e(old('loan_details.employment_type')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Company / Business
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[company_business]"
                                            value="<?php echo e(old('loan_details.company_business')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Monthly Income
                                        </label>

                                        <input
                                            type="number"
                                            step="0.01"
                                            min="0"
                                            name="loan_details[monthly_income]"
                                            value="<?php echo e(old('loan_details.monthly_income')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div class="full">
                                        <label>
                                            Remarks
                                        </label>

                                        <textarea
                                            name="loan_details[remarks]"
                                            class="loan-detail-input"
                                            rows="3"
                                        ><?php echo e(old('loan_details.remarks')); ?></textarea>
                                    </div>

                                </div>

                            </div>


                            

<div
    class="loan-details-panel"
    data-loan-details="business"
    hidden
>

    <div class="section-title compact">

        <h3>
            Business Loan Details
        </h3>

        <span>
            Business information
        </span>

    </div>

    <div class="loan-details-grid">

        <div>
            <label>
                Business Name
            </label>

            <input
                type="text"
                name="loan_details[business_name]"
                value="<?php echo e(old('loan_details.business_name')); ?>"
                class="loan-detail-input"
                placeholder="Enter business name"
            >
        </div>

        <div>
            <label>
                Business Type
            </label>

            <input
                type="text"
                name="loan_details[business_type]"
                value="<?php echo e(old('loan_details.business_type')); ?>"
                class="loan-detail-input"
                placeholder="e.g. Retail, Wholesale"
            >
        </div>

        <div class="full">
            <label>
                Business Address
            </label>

            <input
                type="text"
                name="loan_details[business_address]"
                value="<?php echo e(old('loan_details.business_address')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div>
            <label>
                Monthly Turnover
            </label>

            <input
                type="number"
                step="0.01"
                min="0"
                name="loan_details[monthly_turnover]"
                value="<?php echo e(old('loan_details.monthly_turnover')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div>
            <label>
                Business Experience
            </label>

            <input
                type="text"
                name="loan_details[business_experience]"
                value="<?php echo e(old('loan_details.business_experience')); ?>"
                class="loan-detail-input"
                placeholder="e.g. 5 Years"
            >
        </div>

        <div class="full">
            <label>
                Loan Purpose
            </label>

            <input
                type="text"
                name="loan_details[loan_purpose]"
                value="<?php echo e(old('loan_details.loan_purpose')); ?>"
                class="loan-detail-input"
                placeholder="Purpose of business loan"
            >
        </div>

    </div>

</div>




<div
    class="loan-details-panel"
    data-loan-details="emergency"
    hidden
>

    <div class="section-title compact">

        <h3>
            Emergency Loan Details
        </h3>

        <span>
            Urgent financial need
        </span>

    </div>

    <div class="loan-details-grid">

        <div>
            <label>
                Emergency Type
            </label>

            <input
                type="text"
                name="loan_details[emergency_type]"
                value="<?php echo e(old('loan_details.emergency_type')); ?>"
                class="loan-detail-input"
                placeholder="e.g. Accident / Urgent Expense"
            >
        </div>

        <div>
            <label>
                Urgency Level
            </label>

            <select
                name="loan_details[urgency_level]"
                class="loan-detail-input"
            >

                <option value="">
                    Select urgency
                </option>

                <option
                    value="High"
                    <?php if(
                        old('loan_details.urgency_level') === 'High'
                    ): echo 'selected'; endif; ?>
                >
                    High
                </option>

                <option
                    value="Medium"
                    <?php if(
                        old('loan_details.urgency_level') === 'Medium'
                    ): echo 'selected'; endif; ?>
                >
                    Medium
                </option>

                <option
                    value="Low"
                    <?php if(
                        old('loan_details.urgency_level') === 'Low'
                    ): echo 'selected'; endif; ?>
                >
                    Low
                </option>

            </select>
        </div>

        <div>
            <label>
                Required Amount
            </label>

            <input
                type="number"
                step="0.01"
                min="0"
                name="loan_details[required_amount]"
                value="<?php echo e(old('loan_details.required_amount')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div class="full">
            <label>
                Emergency Description
            </label>

            <textarea
                name="loan_details[emergency_description]"
                class="loan-detail-input"
                rows="3"
                placeholder="Briefly describe the emergency"
            ><?php echo e(old('loan_details.emergency_description')); ?></textarea>
        </div>

    </div>

</div>




<div
    class="loan-details-panel"
    data-loan-details="medical"
    hidden
>

    <div class="section-title compact">

        <h3>
            Medical Loan Details
        </h3>

        <span>
            Medical and treatment information
        </span>

    </div>

    <div class="loan-details-grid">

        <div>
            <label>
                Patient Name
            </label>

            <input
                type="text"
                name="loan_details[patient_name]"
                value="<?php echo e(old('loan_details.patient_name')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div>
            <label>
                Treatment Type
            </label>

            <input
                type="text"
                name="loan_details[treatment_type]"
                value="<?php echo e(old('loan_details.treatment_type')); ?>"
                class="loan-detail-input"
                placeholder="e.g. Surgery / Treatment"
            >
        </div>

        <div>
            <label>
                Hospital Name
            </label>

            <input
                type="text"
                name="loan_details[hospital_name]"
                value="<?php echo e(old('loan_details.hospital_name')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div>
            <label>
                Estimated Medical Expense
            </label>

            <input
                type="number"
                step="0.01"
                min="0"
                name="loan_details[medical_expense]"
                value="<?php echo e(old('loan_details.medical_expense')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div>
            <label>
                Treatment Date
            </label>

            <input
                type="date"
                name="loan_details[treatment_date]"
                value="<?php echo e(old('loan_details.treatment_date')); ?>"
                class="loan-detail-input"
            >
        </div>

    </div>

</div>




<div
    class="loan-details-panel"
    data-loan-details="home"
    hidden
>

    <div class="section-title compact">

        <h3>
            Home Loan Details
        </h3>

        <span>
            Property information
        </span>

    </div>

    <div class="loan-details-grid">

        <div>
            <label>
                Property Type
            </label>

            <select
                name="loan_details[property_type]"
                class="loan-detail-input"
            >

                <option value="">
                    Select property type
                </option>

                <option
                    value="House"
                    <?php if(
                        old('loan_details.property_type') === 'House'
                    ): echo 'selected'; endif; ?>
                >
                    House
                </option>

                <option
                    value="Apartment"
                    <?php if(
                        old('loan_details.property_type') === 'Apartment'
                    ): echo 'selected'; endif; ?>
                >
                    Apartment
                </option>

                <option
                    value="Villa"
                    <?php if(
                        old('loan_details.property_type') === 'Villa'
                    ): echo 'selected'; endif; ?>
                >
                    Villa
                </option>

                <option
                    value="Plot"
                    <?php if(
                        old('loan_details.property_type') === 'Plot'
                    ): echo 'selected'; endif; ?>
                >
                    Plot
                </option>

            </select>
        </div>

        <div>
            <label>
                Property Location
            </label>

            <input
                type="text"
                name="loan_details[property_location]"
                value="<?php echo e(old('loan_details.property_location')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div>
            <label>
                Property Value
            </label>

            <input
                type="number"
                step="0.01"
                min="0"
                name="loan_details[property_value]"
                value="<?php echo e(old('loan_details.property_value')); ?>"
                class="loan-detail-input"
            >
        </div>

        <div>
            <label>
                Loan Purpose
            </label>

            <input
                type="text"
                name="loan_details[home_loan_purpose]"
                value="<?php echo e(old('loan_details.home_loan_purpose')); ?>"
                class="loan-detail-input"
                placeholder="Purchase / Construction / Renovation"
            >
        </div>

    </div>

</div>


                            

                            <div
                                class="loan-details-panel"
                                data-loan-details="vehicle"
                                hidden
                            >

                                <div class="section-title compact">

                                    <h3>
                                        Vehicle Loan Details
                                    </h3>

                                    <span>
                                        Vehicle information
                                    </span>

                                </div>

                                <div class="loan-details-grid">

                                    <div>
                                        <label>
                                            Vehicle Type
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[vehicle_type]"
                                            value="<?php echo e(old('loan_details.vehicle_type')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Registration Number
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[registration_number]"
                                            value="<?php echo e(old('loan_details.registration_number')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Chassis Number
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[chassis_number]"
                                            value="<?php echo e(old('loan_details.chassis_number')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Engine Number
                                        </label>

                                        <input
                                            type="text"
                                            name="loan_details[engine_number]"
                                            value="<?php echo e(old('loan_details.engine_number')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Manufacturing Year
                                        </label>

                                        <input
                                            type="number"
                                            min="1900"
                                            max="2100"
                                            name="loan_details[manufacturing_year]"
                                            value="<?php echo e(old('loan_details.manufacturing_year')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div>
                                        <label>
                                            Vehicle Value
                                        </label>

                                        <input
                                            type="number"
                                            step="0.01"
                                            min="0"
                                            name="loan_details[vehicle_value]"
                                            value="<?php echo e(old('loan_details.vehicle_value')); ?>"
                                            class="loan-detail-input"
                                        >
                                    </div>

                                    <div class="full">
                                        <label>
                                            Remarks
                                        </label>

                                        <textarea
                                            name="loan_details[remarks]"
                                            class="loan-detail-input"
                                            rows="3"
                                        ><?php echo e(old('loan_details.remarks')); ?></textarea>
                                    </div>

                                </div>

                            </div>

                        </div>

                    <?php else: ?>

                        <div class="loan-type-empty">
                            No active loan types are available.
                        </div>

                    <?php endif; ?>

                </div>

            </div>


            

            <div class="loan-card">

                <div class="loan-card-body">

                    <div class="section-title">

                        <h2>
                            How much do you need?
                        </h2>

                        <span>
                            Admin configured limits
                        </span>

                    </div>


                    <div class="amount-box">

                        <div class="amount-label">
                            Loan Amount
                        </div>


                        <div class="amount-input-wrap">

                            <span>
                                <?php echo e($currencySymbol); ?>

                            </span>

                            <input
                                type="number"
                                name="loan_amount"
                                id="loanAmount"
                                class="amount-input"
                                min="<?php echo e((float)$settings->minimum_loan_amount); ?>"
                                max="<?php echo e((float)$clientMaximum); ?>"
                                step="1"
                                value="<?php echo e(old(
                                    'loan_amount',
                                    min(
                                        (float)$settings->minimum_loan_amount,
                                        (float)$clientMaximum
                                    )
                                )); ?>"
                                required
                            >

                        </div>


                        <div class="amount-help">

                            Minimum
                            <?php echo e(money((float)$settings->minimum_loan_amount)); ?>


                            ·

                            Maximum
                            <?php echo e(money((float)$clientMaximum)); ?>


                        </div>


                        <input
                            type="range"
                            id="loanAmountSlider"
                            class="amount-slider"
                            min="<?php echo e((float)$settings->minimum_loan_amount); ?>"
                            max="<?php echo e(max(
                                (float)$settings->minimum_loan_amount,
                                (float)$clientMaximum
                            )); ?>"
                            step="1000"
                            value="<?php echo e(old(
                                'loan_amount',
                                min(
                                    (float)$settings->minimum_loan_amount,
                                    (float)$clientMaximum
                                )
                            )); ?>"
                        >


                        <div class="slider-limits">

                            <span>
                                <?php echo e(money((float)$settings->minimum_loan_amount)); ?>

                            </span>

                            <span>
                                <?php echo e(money((float)$clientMaximum)); ?>

                            </span>

                        </div>


                        <div class="quick-amounts">

                            <?php $__currentLoopData = [
                                10000,
                                25000,
                                50000,
                                100000,
                                200000,
                                500000
                            ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $quickAmount): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                <?php if(
                                    $quickAmount >=
                                    (float)$settings->minimum_loan_amount
                                    &&
                                    $quickAmount <=
                                    (float)$clientMaximum
                                ): ?>

                                    <button
                                        type="button"
                                        class="quick-amount"
                                        data-amount="<?php echo e($quickAmount); ?>"
                                    >
                                        <?php echo e(money((float)$quickAmount)); ?>

                                    </button>

                                <?php endif; ?>

                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        </div>

                    </div>

                </div>

            </div>


            

            <div class="loan-card">

                <div class="loan-card-body">

                    <div class="section-title">

                        <h2>
                            Select repayment period
                        </h2>

                        <span>
                            <?php echo e(count($allowedTenures)); ?>

                            options available
                        </span>

                    </div>


                    <?php if(count($allowedTenures)): ?>

                        <div class="tenure-grid">

                            <?php $__currentLoopData = $allowedTenures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $months): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                <div class="tenure-option">

                                    <input
                                        type="radio"
                                        name="tenure_months"
                                        id="tenure<?php echo e($months); ?>"
                                        value="<?php echo e($months); ?>"
                                        <?php if(
                                            (int)old(
                                                'tenure_months',
                                                $allowedTenures[0]
                                            )
                                            ===
                                            (int)$months
                                        ): echo 'checked'; endif; ?>
                                        required
                                    >

                                    <label
                                        for="tenure<?php echo e($months); ?>"
                                    >

                                        <?php echo e($months); ?> Months

                                        <small>
                                            Monthly EMI
                                        </small>

                                    </label>

                                </div>

                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        </div>

                    <?php else: ?>

                        <div
                            class="loan-error"
                            style="margin:0"
                        >
                            No loan tenure is currently available.
                        </div>

                    <?php endif; ?>

                </div>

            </div>


            

            <div class="loan-card calculation-card">

                <div class="loan-card-body">

                    <div class="section-title">

                        <h2>
                            Loan Summary
                        </h2>

                        <span>
                            Live calculation
                        </span>

                    </div>


                    <div class="calculation-row">

                        <span>
                            Loan Amount
                        </span>

                        <strong id="summaryLoanAmount">
                            <?php echo e(money(0)); ?>

                        </strong>

                    </div>


                    <div class="calculation-row">

                        <span>
                            Interest Rate
                        </span>

                        <strong
                            id="summaryInterestRate"
                            class="zero-interest"
                        >
                            ✓ 0% Interest
                        </strong>

                    </div>


                    <div class="calculation-row">

                        <span>
                            Interest Amount
                        </span>

                        <strong id="summaryInterest">
                            <?php echo e(money(0)); ?>

                        </strong>

                    </div>


                    <div class="calculation-row">

                        <span>
                            Processing Fee
                        </span>

                        <strong
                            id="summaryProcessingFee"
                            class="processing-fee"
                        >
                            Calculating...
                        </strong>

                    </div>


                    <div class="calculation-row total-row">

                        <span>
                            Total Payable
                        </span>

                        <strong id="summaryTotal">
                            <?php echo e(money(0)); ?>

                        </strong>

                    </div>


                    <div class="emi-highlight">

                        <span>
                            Estimated Monthly EMI
                        </span>

                        <strong id="summaryEmi">
                            <?php echo e(money(0)); ?>

                        </strong>

                    </div>


                    <div class="settings-note">

                        Processing fee:

                        <?php echo e($settings->processing_fee_type === 'percentage'
                            ? number_format(
                                (float)$settings->processing_fee,
                                2
                            ).'%'
                            : money(
                                (float)$settings->processing_fee
                            )); ?>


                    </div>

                </div>

            </div>


            

            <div class="loan-card">

                <div class="loan-card-body">

                    <div class="loan-warning">

                        <strong>
                            Important:
                        </strong>

                        Interest and processing fee are calculated
                        according to the selected loan type and
                        current approved loan settings.

                        The final calculation is controlled by the
                        approved loan settings.

                    </div>

                </div>

            </div>


            

            <div class="loan-card">

                <div class="loan-card-body">

                    <button
                        type="submit"
                        class="loan-submit"
                        id="submitLoanButton"
                    >
                        Review & Apply for Loan
                    </button>

                    <div class="loan-terms">

                        By continuing, you confirm that the information
                        provided is correct and agree to the applicable
                        loan terms and repayment schedule.

                    </div>

                </div>

            </div>


        </form>

    <?php endif; ?>

</div>
</div>




<script>

(function () {

    const amountInput =
        document.getElementById('loanAmount');

    const amountSlider =
        document.getElementById('loanAmountSlider');

    const tenureInputs =
        document.querySelectorAll(
            'input[name="tenure_months"]'
        );

    const loanTypeInputs =
        document.querySelectorAll(
            'input[name="loan_type_id"]'
        );

    const summaryAmount =
        document.getElementById(
            'summaryLoanAmount'
        );

    const summaryInterestRate =
        document.getElementById(
            'summaryInterestRate'
        );

    const summaryInterest =
        document.getElementById(
            'summaryInterest'
        );

    const summaryFee =
        document.getElementById(
            'summaryProcessingFee'
        );

    const summaryTotal =
        document.getElementById(
            'summaryTotal'
        );

    const summaryEmi =
        document.getElementById(
            'summaryEmi'
        );


    if (!amountInput) {
        return;
    }


    const calculateUrl =
        <?php echo json_encode(
            route('client.loans.calculate')
        , 15, 512) ?>;


    const csrfInput =
        document.querySelector(
            'input[name="_token"]'
        );


    const csrfToken =
        csrfInput
            ? csrfInput.value
            : '';


    let calculationTimer = null;


    const currencySymbol =
        <?php echo json_encode($currencySymbol, 15, 512) ?>;


    const currencyDecimals =
        <?php echo json_encode($displayDecimals, 15, 512) ?>;


    const currencyRound =
        <?php echo json_encode($currencyRound, 15, 512) ?>;


    function formatMoney(value)
    {

        let amount =
            Number(value || 0);


        if (!Number.isFinite(amount)) {

            amount = 0;

        }


        if (currencyRound) {

            amount =
                Math.round(amount);

        }


        return currencySymbol +
            amount.toLocaleString(
                'en-IN',
                {
                    minimumFractionDigits:
                        currencyDecimals,

                    maximumFractionDigits:
                        currencyDecimals
                }
            );
    }


    function getTenure()
    {

        const selected =
            document.querySelector(
                'input[name="tenure_months"]:checked'
            );


        return selected
            ? parseInt(
                selected.value
            )
            : null;
    }


    function getLoanTypeId()
    {

        const selected =
            document.querySelector(
                'input[name="loan_type_id"]:checked'
            );


        return selected
            ? parseInt(
                selected.value
            )
            : null;
    }


    function updateBasicAmount()
    {

        let amount =
            parseFloat(
                amountInput.value
            ) || 0;


        const min =
            parseFloat(
                amountInput.min
            ) || 1;


        const max =
            parseFloat(
                amountInput.max
            ) || 0;


        if (
            max > 0 &&
            amount > max
        ) {

            amount = max;

            amountInput.value =
                Math.floor(max);

        }


        if (
            amount < min
        ) {

            amount = min;

            amountInput.value =
                Math.ceil(min);

        }


        if (amountSlider) {

            amountSlider.value =
                amount;

        }


        summaryAmount.textContent =
            formatMoney(amount);


        return amount;
    }


    function updateInterestRateDisplay(
        interestRate
    )
    {

        const rate =
            Number(
                interestRate || 0
            );


        if (!Number.isFinite(rate) || rate <= 0) {

            summaryInterestRate.textContent =
                '✓ 0% Interest';

            summaryInterestRate.classList.remove(
                'interest-enabled'
            );

            summaryInterestRate.classList.add(
                'zero-interest'
            );

            return;
        }


        summaryInterestRate.textContent =
            '✓ ' +
            rate.toLocaleString(
                'en-IN',
                {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 2
                }
            ) +
            '% Interest';


        summaryInterestRate.classList.remove(
            'zero-interest'
        );

        summaryInterestRate.classList.add(
            'interest-enabled'
        );
    }


    function updateInterestRateFromSelectedType()
    {

        const selected =
            document.querySelector(
                'input[name="loan_type_id"]:checked'
            );


        if (!selected) {

            updateInterestRateDisplay(0);

            return;

        }


        const rate =
            Number(
                selected.dataset.interestRate || 0
            );


        updateInterestRateDisplay(rate);
    }


    async function calculateLoan()
    {

        const amount =
            updateBasicAmount();


        const tenure =
            getTenure();


        const loanTypeId =
            getLoanTypeId();


        updateInterestRateFromSelectedType();


        if (
            !amount ||
            !tenure ||
            !loanTypeId
        ) {

            summaryFee.textContent =
                '—';

            summaryInterest.textContent =
                formatMoney(0);

            summaryTotal.textContent =
                formatMoney(0);

            summaryEmi.textContent =
                formatMoney(0);

            return;
        }


        summaryFee.textContent =
            'Calculating...';


        try {

            const response =
                await fetch(
                    calculateUrl,
                    {
                        method:'POST',

                        headers:{
                            'Content-Type':
                                'application/json',

                            'Accept':
                                'application/json',

                            'X-CSRF-TOKEN':
                                csrfToken,

                            'X-Requested-With':
                                'XMLHttpRequest'
                        },

                        body:JSON.stringify({

                            loan_type_id:
                                loanTypeId,

                            loan_amount:
                                amount,

                            tenure_months:
                                tenure

                        })
                    }
                );


            const result =
                await response.json();


            if (
                !response.ok ||
                !result.success
            ) {

                throw new Error(
                    'Unable to calculate loan.'
                );

            }


            const data =
                result.data;


            /*
            |--------------------------------------------------------------------------
            | IMPORTANT
            |--------------------------------------------------------------------------
            | Interest rate now comes from backend calculation.
            | If backend returns loan type rate, UI will display it.
            |--------------------------------------------------------------------------
            */


            updateInterestRateDisplay(
                data.interest_rate
            );


            summaryInterest.textContent =
                formatMoney(
                    data.interest_amount
                );


            summaryFee.textContent =
                formatMoney(
                    data.processing_fee
                );


            summaryTotal.textContent =
                formatMoney(
                    data.total_payable
                );


            summaryEmi.textContent =
                formatMoney(
                    data.emi_amount
                );


        } catch (error) {

            console.error(error);


            summaryFee.textContent =
                '—';


            summaryInterest.textContent =
                '—';


            summaryTotal.textContent =
                '—';


            summaryEmi.textContent =
                '—';

        }

    }


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

            if (amountSlider) {

                amountSlider.value =
                    this.value;

            }


            clearTimeout(
                calculationTimer
            );


            calculationTimer =
                setTimeout(
                    calculateLoan,
                    250
                );

        }
    );


    if (amountSlider) {

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

                amountInput.value =
                    this.value;

                calculateLoan();

            }
        );

    }


    tenureInputs.forEach(
        function (input) {

            input.addEventListener(
                'change',
                calculateLoan
            );

        }
    );


    loanTypeInputs.forEach(
        function (input) {

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

                    updateInterestRateFromSelectedType();

                    calculateLoan();

                }
            );

        }
    );


    document
        .querySelectorAll(
            '.quick-amount'
        )
        .forEach(
            function (button) {

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

                        amountInput.value =
                            this.dataset.amount;


                        if (amountSlider) {

                            amountSlider.value =
                                this.dataset.amount;

                        }


                        calculateLoan();

                    }
                );

            }
        );


    updateInterestRateFromSelectedType();

    calculateLoan();

})();

</script>




<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {

        const typeInputs =
            document.querySelectorAll(
                'input[name="loan_type_id"]'
            );


        const detailsWrap =
            document.getElementById(
                'loanTypeDetails'
            );


        const panels =
            document.querySelectorAll(
                '[data-loan-details]'
            );


        function updateLoanTypeDetails()
        {

            const selected =
                document.querySelector(
                    'input[name="loan_type_id"]:checked'
                );


            let code =
                selected
                    ? (
                        selected.dataset.code
                        ||
                        selected.closest('.loan-type-option')
                            ?.querySelector('label strong')
                            ?.textContent
                        ||
                        ''
                    )
                    : '';

            code = String(code)
                .toLowerCase()
                .trim()
                .replace(/[-\s]+/g, '_');

            if (code.includes('digital') || code.includes('product') || code.includes('mobile')) {
                code = 'digital_product';
            } else if (code.includes('gold')) {
                code = 'gold';
            } else if (code.includes('personal')) {
                code = 'personal';
            } else if (code.includes('vehicle') || code.includes('car') || code.includes('bike')) {
                code = 'vehicle';
            } else if (code.includes('business')) {
                code = 'business';
            } else if (code.includes('emergency')) {
                code = 'emergency';
            } else if (code.includes('medical')) {
                code = 'medical';
            } else if (code.includes('home')) {
                code = 'home';
            }


            panels.forEach(
                function (panel) {

                    const show =
                        panel.dataset.loanDetails
                        ===
                        code;


                    panel.hidden =
                        !show;


                    panel
                        .querySelectorAll(
                            'input, textarea, select'
                        )
                        .forEach(
                            function (field) {

                                field.disabled =
                                    !show;

                            }
                        );

                }
            );


            if (detailsWrap) {

                detailsWrap.hidden =
                    !code;

            }

        }


        /*
        |--------------------------------------------------------------------------
        | Digital Product
        |--------------------------------------------------------------------------
        */

        const productValueInput =
            document.querySelector(
                'input[name="loan_details[product_value]"]'
            );


        const loanAmountInput =
            document.getElementById(
                'loanAmount'
            );


        const loanAmountSlider =
            document.getElementById(
                'loanAmountSlider'
            );


        const loanForm =
            productValueInput
                ? productValueInput.closest('form')
                : null;


        const availableLimit =
            Number(
                <?php echo json_encode(
                    (float)$availableLimit
                , 15, 512) ?>
            );


        function productValueErrorElement()
        {

            if (!productValueInput) {
                return null;
            }


            let error =
                document.getElementById(
                    'productValueLimitError'
                );


            if (!error) {

                error =
                    document.createElement(
                        'div'
                    );


                error.id =
                    'productValueLimitError';


                error.setAttribute(
                    'role',
                    'alert'
                );


                error.style.cssText =
                    [
                        'display:none',
                        'margin-top:7px',
                        'padding:8px 10px',
                        'border-radius:8px',
                        'background:#fff1f2',
                        'border:1px solid #fecdd3',
                        'color:#dc2626',
                        'font-size:12px',
                        'font-weight:700',
                        'line-height:1.45'
                    ].join(';');


                productValueInput
                    .insertAdjacentElement(
                        'afterend',
                        error
                    );

            }


            return error;

        }


        function showProductValueError(
            message
        )
        {

            const error =
                productValueErrorElement();


            if (error) {

                error.textContent =
                    message;

                error.style.display =
                    'block';

            }


            productValueInput
                .classList
                .add(
                    'input-error'
                );


            productValueInput
                .setCustomValidity(
                    message
                );

        }


        function clearProductValueError()
        {

            const error =
                productValueErrorElement();


            if (error) {

                error.textContent =
                    '';

                error.style.display =
                    'none';

            }


            productValueInput
                .classList
                .remove(
                    'input-error'
                );


            productValueInput
                .setCustomValidity(
                    ''
                );

        }


        function validateProductValue()
        {

            if (!productValueInput) {
                return true;
            }


            const selected =
                document.querySelector(
                    'input[name="loan_type_id"]:checked'
                );


            if (
                !selected ||
                selected.dataset.code
                !==
                'digital_product'
            ) {

                clearProductValueError();

                return true;

            }


            const rawValue =
                productValueInput.value.trim();


            if (rawValue === '') {

                clearProductValueError();

                return true;

            }


            const productValue =
                Number(rawValue);


            if (
                !Number.isFinite(
                    productValue
                )
                ||
                productValue < 0
            ) {

                showProductValueError(
                    'Please enter a valid product value.'
                );

                return false;

            }


            if (
                productValue >
                availableLimit
            ) {

                showProductValueError(

                    'Product Value cannot exceed your Available Limit of '
                    +
                    formatMoney(
                        availableLimit
                    )
                    +
                    '.'

                );


                return false;

            }


            clearProductValueError();

            return true;

        }


        function syncProductValueToLoanAmount()
        {

            if (
                !productValueInput ||
                !loanAmountInput
            ) {

                return;

            }


            if (
                !validateProductValue()
            ) {

                return;

            }


            const selected =
                document.querySelector(
                    'input[name="loan_type_id"]:checked'
                );


            if (
                !selected ||
                selected.dataset.code
                !==
                'digital_product'
            ) {

                return;

            }


            const productValue =
                Number(
                    productValueInput.value
                );


            if (
                !Number.isFinite(
                    productValue
                )
                ||
                productValue <= 0
            ) {

                return;

            }


            loanAmountInput.value =
                Math.round(
                    productValue
                );


            if (loanAmountSlider) {

                const sliderMin =
                    Number(
                        loanAmountSlider.min
                        ||
                        0
                    );


                const sliderMax =
                    Number(
                        loanAmountSlider.max
                        ||
                        0
                    );


                if (
                    productValue >= sliderMin
                    &&
                    productValue <= sliderMax
                ) {

                    loanAmountSlider.value =
                        Math.round(
                            productValue
                        );

                }

            }


            loanAmountInput.dispatchEvent(
                new Event(
                    'input',
                    {
                        bubbles:true
                    }
                )
            );

        }


        if (productValueInput) {

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

                    if (
                        validateProductValue()
                    ) {

                        syncProductValueToLoanAmount();

                    }

                }
            );


            productValueInput.addEventListener(
                'change',
                function () {

                    if (
                        validateProductValue()
                    ) {

                        syncProductValueToLoanAmount();

                    }

                }
            );

        }


        if (loanForm) {

            loanForm.addEventListener(
                'submit',
                function (event) {

                    if (
                        !validateProductValue()
                    ) {

                        event.preventDefault();

                        event.stopPropagation();


                        productValueInput.focus();


                        productValueInput.scrollIntoView(
                            {
                                behavior:'smooth',
                                block:'center'
                            }
                        );

                    }

                },
                true
            );

        }


        typeInputs.forEach(
            function (input) {

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

                        updateLoanTypeDetails();


                        if (
                            input.dataset.code
                            !==
                            'digital_product'
                        ) {

                            clearProductValueError();

                            return;

                        }


                        setTimeout(
                            function () {

                                validateProductValue();

                                syncProductValueToLoanAmount();

                            },
                            0
                        );

                    }
                );

            }
        );


        updateLoanTypeDetails();


        setTimeout(
            function () {

                validateProductValue();

                syncProductValueToLoanAmount();

            },
            0
        );

    }
);

</script>


<?php echo $__env->make('client.partials.bottom-nav', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

</body>
</html><?php /**PATH /home/eduintxshop/public_html/loan.eduintx.shop/resources/views/client/loans/create.blade.php ENDPATH**/ ?>