@extends('layouts.app')

@section('title', 'index')

@section('content')

<style>
</style>

<section class="container py-3">
    <div class="row g-3">

        <!-- DESKTOP SIDEBAR -->
        <div class="col-12 d-block d-md-none">
            <h3 class="fw-bold mb-0">My Account</h3>
        </div>

        <div class="col-md-3 d-none d-md-block">
            <div classclass="row">
                <div class="col-12">
                    <h3 class="fw-bold mb-3">My Account</h3>
                </div>
            </div>
            <div class="sidebar">

                <a href="#profile-tab" class="active">
                    <i class="fa fa-user"></i>
                    Profile
                </a>

                <a href="#my-loans-tab">
                    <i class="fa fa-credit-card"></i>
                    My Loans
                </a>

                <a href="#security-and-help-tab">
                    <i class="fa fa-shield-alt"></i>
                    Help and Security
                </a>

            </div>
        </div>

        <!-- CONTENT -->
        <div class="col-md-9">
            <div class="row">
                <div class="col-12">
                    <div class="col-12">
                        <h3 class="fw-bold mb-3"><i class="fa-solid fa-arrow-left-long me-3"></i> Loan Application Details</h3>
                    </div>
                </div>
            </div>
            <div class="row mx-0">
                <div class="col-12 px-0">
                    <div id="loanDetails17">
                        <div class="card-custom p-4" style="border-top: 6px solid #104042">
                            <div class="card-body px-0">

                                <!-- PERSONAL -->
                                <div class="preview-section mb-5">
                                    <h5 class="border-bottom pb-2 mb-4">
                                        Personal Information
                                    </h5>

                                    <div class="row g-4">

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Full Name</div>
                                            <div class="fw-semibold">
                                                arun test
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Date of Birth</div>
                                            <div class="fw-semibold">
                                                05-19-2026
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Gender</div>
                                            <div class="fw-semibold">
                                                Male
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Marital Status</div>
                                            <div class="fw-semibold">
                                                Unmarried
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Father Name</div>
                                            <div class="fw-semibold">
                                                testing
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">PAN Number</div>
                                            <div class="fw-semibold">
                                                test123
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Aadhaar Number</div>
                                            <div class="fw-semibold">
                                                123456789012
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- ADDRESS -->
                                <div class="preview-section mb-5">
                                    <h5 class="border-bottom pb-2 mb-4">
                                        Address Details
                                    </h5>

                                    <div class="row g-4">

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="text-muted small">Current Address</div>
                                            <div class="fw-semibold">
                                                202, 2nd Floor, 1-11-110/92/a/56, Shyamlal Buildings
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="text-muted small">Permanent Address</div>
                                            <div class="fw-semibold">
                                                tata chari colony line,Begumpet
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- LOAN -->
                                <div class="preview-section mb-5">
                                    <h5 class="border-bottom pb-2 mb-4">
                                        Loan Details
                                    </h5>

                                    <div class="row g-4">

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Loan Type</div>
                                            <div class="fw-semibold">
                                                personal-loan
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Purpose</div>
                                            <div class="fw-semibold">
                                                Purchase
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Loan Amount</div>
                                            <div class="fw-semibold">
                                                ₹ 1,300,000
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Kit Cost</div>
                                            <div class="fw-semibold">
                                                ₹ {{ number_format((float)($application->kit_cost ?? 0)) }}
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Down Payment</div>
                                            <div class="fw-semibold">
                                                ₹ {{ number_format((float)($application->down_payment ?? 0)) }}
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Membership Fees</div>
                                            <div class="fw-semibold">
                                                ₹ {{ number_format((float)($application->membership_fees ?? 0)) }}
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Documentation Fees</div>
                                            <div class="fw-semibold">
                                                ₹ {{ number_format((float)($application->documentation_fees ?? 0)) }}
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Rate of Interest</div>
                                            <div class="fw-semibold">
                                                {{ isset($application) && $application->rate_of_intrest !== null && $application->rate_of_intrest !== '' ? $application->rate_of_intrest . '%' : 'N/A' }}
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Loan Tenure</div>
                                            <div class="fw-semibold">
                                                17 Months
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Preferred EMI</div>
                                            <div class="fw-semibold">
                                                ₹ 84,748
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Total Interest</div>
                                            <div class="fw-semibold">
                                                ₹ 140,719
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Processing Charges</div>
                                            <div class="fw-semibold">
                                                ₹ 4,000
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Total Payment</div>
                                            <div class="fw-semibold">
                                                ₹ 1,444,719
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- FINANCIAL -->
                                <div class="preview-section mb-5">
                                    <h5 class="border-bottom pb-2 mb-4">
                                        Financial Details
                                    </h5>

                                    <div class="row g-4">

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Monthly Income</div>
                                            <div class="fw-semibold">
                                                ₹ 200,000
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Annual Income</div>
                                            <div class="fw-semibold">
                                                ₹ 4,000,000
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                                            <div class="text-muted small">Employment Type</div>
                                            <div class="fw-semibold">
                                                
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- DOCUMENTS -->
                                <div class="preview-section">
                                    <h5 class="border-bottom pb-2 mb-4">Documents</h5>

                                    <div class="row g-2 g-sm-3">

                                            <div class="col-6 col-sm-6 col-md-6 col-lg-4">
                                                <a href="https://amsngx368.inmotionhosting.com/~neefc25/kapstono/public/storage/loan-documents/IgE6Q6MftT0T1uiaWkpt3sgGi2cNLcpgNa68Rguq.png" target="_blank" class="btn btn-primary-custom w-100">
                                                    ID Proof
                                                </a>
                                            </div>
                                                                
                                                                                                                <div class="col-6 col-sm-6 col-md-6 col-lg-4">
                                                <a href="https://amsngx368.inmotionhosting.com/~neefc25/kapstono/public/storage/loan-documents/JvUVhNdwKI9FiPLfkTzHdOSBqXolAUjBJrKXm2iX.png" target="_blank" class="btn btn-primary-custom w-100">
                                                    Address Proof
                                                </a>
                                            </div>
                                                                
                                                                
                                    </div>
                                </div>

                            </div>
                        </div>

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

@endsection
