<!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="{{ csrf_token() }}">
    <title>My Loans | EMI CREDITS</title>

    <style>
        *{box-sizing:border-box}

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

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

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

        .top{
            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
        }

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

        .title{
            flex:1
        }

        .title strong{
            display:block;
            font-size:17px;
            font-weight:900
        }

        .title span{
            display:block;
            margin-top:3px;
            color:#8997a8;
            font-size:12px
        }

        .new-btn{
            padding:9px 11px;
            border-radius:5px;
            background:#1769e0;
            color:#fff;
            font-size:12px;
            font-weight:900
        }

        .content{
            padding:14px 14px 25px
        }

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

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

        .eyebrow{
            font-size:11px;
            text-transform:uppercase;
            letter-spacing:1px;
            color:#b3c9e2;
            font-weight:900
        }

        .hero-number{
            font-size:15px;
            font-weight:900;
            margin-top:5px
        }

        .limit-label{
            font-size:11px;
            color:#b3c9e2;
            margin-top:19px
        }

        .limit{
            font-size:27px;
            font-weight:900;
            margin-top:2px
        }

        .hero-foot{
            display:flex;
            justify-content:space-between;
            margin-top:14px
        }

        .hero-foot span{
            display:block;
            font-size:10px;
            color:#b3c9e2
        }

        .hero-foot strong{
            display:block;
            margin-top:3px;
            font-size:13px
        }

        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin:18px 2px 9px
        }

        .section-head strong{
            font-size:15px
        }

        .section-head span{
            font-size:11px;
            color:#8997a8
        }

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

        .loan-top{
            display:flex;
            justify-content:space-between;
            gap:10px
        }

        .loan-no{
            font-size:11px;
            color:#8b99a9
        }

        .loan-no strong{
            display:block;
            color:#273e59;
            font-size:15px;
            margin-top:3px
        }

        .badge{
            padding:6px 8px;
            border-radius:8px;
            font-size:10px;
            font-weight:900;
            text-transform:uppercase;
            white-space:nowrap
        }

        .pending{
            background:#fff5dc;
            color:#9a6700
        }

        .approved{
            background:#edf5ff;
            color:#1769e0
        }

        

        .completed{
            background:#eef1f5;
            color:#53667d
        }

        .overdue{
            background:#fff0f1;
            color:#b42332
        }

        .closed{
            background:#f0f2f5;
            color:#475569
        }

        .rejected,
        .cancelled{
            background:#f3f4f6;
            color:#667085
        }

        .grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:8px;
            margin-top:14px
        }

        .stat{
            padding:10px;
            border-radius:10px;
            background:#f7faff;
            border:1px solid #e7edf5
        }

        .stat span{
            display:block;
            color:#8997a8;
            font-size:10px;
            margin-bottom:4px
        }

        .stat strong{
            font-size:14px;
            color:#304761
        }

        .blue{
            color:#1769e0!important
        }

        .green{
            color:#198754!important
        }

        .progress{
            margin-top:12px
        }

        .progress-top{
            display:flex;
            justify-content:space-between;
            font-size:10px;
            color:#8997a8;
            margin-bottom:5px
        }

        .track{
            height:7px;
            background:#e9eef4;
            border-radius:20px;
            overflow:hidden
        }

        .fill{
            height:100%;
            background:#1769e0;
            border-radius:20px
        }

        .view{
            display:flex;
            justify-content:flex-end;
            margin-top:12px
        }

        .view a{
            padding:8px 10px;
            border:1px solid #dce5ef;
            border-radius:9px;
            color:#1769e0;
            font-size:11px;
            font-weight:900
        }

        .empty{
            background:#fff;
            border:1px dashed #ccd7e3;
            border-radius:18px;
            padding:32px 20px;
            text-align:center
        }

        .empty-icon{
            width:48px;
            height:48px;
            margin:0 auto 10px;
            border-radius:15px;
            background:#edf5ff;
            color:#1769e0;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:20px
        }

        .empty strong{
            font-size:14px
        }

        .empty p{
            color:#8997a8;
            font-size:12px;
            line-height:1.6;
            margin:6px 0 15px
        }

        .empty a{
            display:inline-flex;
            padding:10px 14px;
            background:#1769e0;
            color:#fff;
            border-radius:10px;
            font-size:12px;
            font-weight:900
        }

        /* Flash Messages */

        .flash{
            margin-bottom:12px;
            padding:11px 12px;
            border-radius:10px;
            font-size:11px;
            font-weight:800;
            line-height:1.5
        }

        .flash.success{
            background:#eaf8f0;
            border:1px solid #ccebd9;
            color:#287646
        }

        .flash.error{
            background:#fff0f1;
            border:1px solid #f3d0d4;
            color:#b42332
        }

        /* Processing Fee */

        .processing-fee-box{
            margin-top:12px;
            padding:12px;
            border-radius:11px;
            background:#fffaf0;
            border:1px solid #f1dfb7
        }

        .processing-fee-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px
        }

        .processing-fee-label{
            display:block;
            color:#8a98a9;
            font-size:10px;
            margin-bottom:4px
        }

        .processing-fee-amount{
            font-size:14px;
            color:#b26b00;
            font-weight:900
        }

        .processing-status{
            padding:6px 8px;
            border-radius:8px;
            font-size:9px;
            font-weight:900;
            white-space:nowrap
        }

        .processing-status.pending{
            background:#fff0d9;
            color:#a66700
        }

        .processing-status.paid{
            background:#eaf8f0;
            color:#198754
        }

        .processing-info{
            margin-top:9px;
            padding:9px 10px;
            border-radius:9px;
            font-size:10px;
            line-height:1.55
        }

        .processing-info.pending{
            background:#fff7e8;
            border:1px solid #f1dfb7;
            color:#8a610b
        }

        .processing-info.paid{
            background:#eef9f3;
            border:1px solid #ccebd9;
            color:#287646
        }

        /* Bottom navigation */

        .nav{
            height:66px !important;
            padding:3px 6px calc(4px + env(safe-area-inset-bottom)) !important;
        }

        .nav a{
            gap:4px !important;
            font-size:11px !important;
            line-height:1.2 !important;
        }

        .nav .icon{
            font-size:18px !important;
        }

        @media(max-width:380px){

            .nav a{
                font-size:11px !important;
            }

            .nav .icon{
                font-size:18px !important;
            }

        }

        @media(max-width:360px){

            .processing-fee-top{
                align-items:flex-start
            }

            .processing-status{
                font-size:8px
            }

        }

    </style>
</head>

<body>

<div class="app">

    <header class="top">

        <a
            href="{{ route('client.dashboard') }}"
            class="back"
        >
            ‹
        </a>

        <div class="title">

            <strong>
                My Loans
            </strong>

            <span>
                Manage your loans & EMI repayments
            </span>

        </div>

        @if($emiCard)

            <a
                href="{{ route('client.loans.create') }}"
                class="new-btn"
            >
                + Apply
            </a>

        @endif

    </header>


    <main class="content">

        {{-- Flash Messages --}}

        @if(session('success'))

            <div class="flash success">
                ✓ {{ session('success') }}
            </div>

        @endif


        @if(session('error'))

            <div class="flash error">
                ⚠ {{ session('error') }}
            </div>

        @endif


        {{-- EMI CARD --}}

        @if($emiCard)

            <div class="hero">

                <div class="eyebrow">
                    Card Number
                </div>

                <div class="hero-number">

                    {{ \App\Helpers\MoneyHelper::formatCardNumber($emiCard->card_number) }}

                </div>


                <div class="limit-label">
                    Available EMI Limit
                </div>

                <div class="limit">

                    {{ money((float)$emiCard->available_limit) }}

                </div>


                <div class="hero-foot">

                    <div>

                        <span>
                            Card Limit
                        </span>

                        <strong>
                            {{ money((float)$emiCard->card_limit) }}
                        </strong>

                    </div>


                    <div style="text-align:right">

                        <span>
                            Status
                        </span>

                        <strong>
                            {{ ucfirst($emiCard->status) }}
                        </strong>

                    </div>

                </div>

            </div>

        @endif


        {{-- LOAN SECTION HEADER --}}

        <div class="section-head">

            <strong>
                My Loans
            </strong>

            <span>
                {{ $loans->count() }}
                loan{{ $loans->count() == 1 ? '' : 's' }}
            </span>

        </div>


        {{-- LOANS --}}

        @forelse($loans as $loan)

            @php

                $status = strtolower((string)$loan->status);

                $statusClass = match($status) {

                    'pending' => 'pending',

                    'approved' => 'approved',

                    'active',
                    'disbursed' => 'active',

                    'completed' => 'completed',

                    'closed' => 'closed',

                    'overdue' => 'overdue',

                    'rejected' => 'rejected',

                    'cancelled' => 'cancelled',

                    default => 'approved'

                };


                $total = (float)$loan->total_payable;

                $outstanding = $status === 'rejected'
    ? 0
    : (float)$loan->outstanding_amount;

                $paid = max(
                    0,
                    $total - $outstanding
                );

                $percent = $total > 0
                    ? min(
                        100,
                        max(
                            0,
                            ($paid / $total) * 100
                        )
                    )
                    : 0;

                $processingFee = (float)$loan->processing_fee;

                $processingFeePaid = !is_null(
                    $loan->processing_fee_paid_at
                );

            @endphp


            <div class="loan">


                {{-- LOAN HEADER --}}

                <div class="loan-top">

                    <div class="loan-no">

                        Loan Number

                        <strong>
                            {{ $loan->loan_number }}
                        </strong>

                    </div>


                    <span class="badge {{ $statusClass }}">

                        {{ ucfirst(
                            str_replace(
                                '_',
                                ' ',
                                $loan->status
                            )
                        ) }}

                    </span>

                </div>


                {{-- LOAN BASIC DETAILS --}}

                <div class="grid">

                    <div class="stat">

                        <span>
                            Loan Amount
                        </span>

                        <strong>
                            {{ money((float)$loan->loan_amount) }}
                        </strong>

                    </div>


                    <div class="stat">

                        <span>
                            Monthly EMI
                        </span>

                        <strong class="blue">
                            {{ money((float)$loan->emi_amount) }}
                        </strong>

                    </div>


                    <div class="stat">

                        <span>
                            Tenure
                        </span>

                        <strong>
                            {{ $loan->tenure_months }}
                            Months
                        </strong>

                    </div>


                    <div class="stat">

                        <span>
                            Outstanding
                        </span>

                        <strong class="green">
                            {{ money($outstanding) }}
                        </strong>

                    </div>

                </div>


                {{-- REPAYMENT PROGRESS --}}

                @if(
                    in_array(
                        $status,
                        [
                            'active',
                            'disbursed',
                            'overdue',
                            'completed'
                        ]
                    )
                    &&
                    $status !== 'closed'
                )

                    <div class="progress">

                        <div class="progress-top">

                            <span>
                                Repayment Progress
                            </span>

                            <span>
                                {{ number_format($percent,0) }}%
                            </span>

                        </div>


                        <div class="track">

                            <div
                                class="fill"
                                style="width:{{ $percent }}%"
                            ></div>

                        </div>

                    </div>

                @endif


                {{-- CLOSED LOAN --}}

                @if($status === 'closed')

                    <div
                        style="
                            margin-top:12px;
                            padding:10px 11px;
                            border-radius:10px;
                            background:#f5f7fa;
                            border:1px solid #e1e6ec;
                            color:#64748b;
                            font-size:11px;
                            line-height:1.55
                        "
                    >

                        <strong
                            style="
                                display:block;
                                color:#475569;
                                font-size:12px;
                                margin-bottom:3px
                            "
                        >
                            Loan Closed
                        </strong>

                        Closed on
                        {{ $loan->closed_at?->format('d M Y') ?? '—' }}

                        @if($loan->close_reason)

                            · {{ $loan->close_reason }}

                        @endif

                    </div>

                @endif


                {{-- =====================================================
                     PROCESSING FEE STATUS
                     CLIENT PAYMENT OPTION REMOVED
                ====================================================== --}}

                @if($processingFee > 0)

                    <div class="processing-fee-box">

                        <div class="processing-fee-top">

                            <div>

                                <span class="processing-fee-label">
                                    Processing Fee
                                </span>

                                <strong class="processing-fee-amount">

                                    {{ money($processingFee) }}

                                </strong>

                            </div>


                            @if($processingFeePaid)

                                <span class="processing-status paid">

                                    ✓ PAYMENT COMPLETE

                                </span>

                            @else

                                <span class="processing-status pending">

                                    PAYMENT PENDING

                                </span>

                            @endif

                        </div>


                        {{-- PAYMENT COMPLETE MESSAGE --}}

                        @if($processingFeePaid)

                            <div class="processing-info paid">

                                <strong>
                                    ✓ Processing fee payment completed.
                                </strong>

                                <br>

                                Paid on
                                {{ $loan->processing_fee_paid_at->format('d M Y h:i A') }}.

                                <br>

                                Loan amount can now be credited/disbursed.

                            </div>


                        {{-- PAYMENT PENDING MESSAGE --}}

                        @else

                            <div class="processing-info pending">

                                <strong>
                                    Processing fee payment is pending.
                                </strong>

                                <br>

                                The loan amount will be credited/disbursed
                                only after the processing fee payment is completed.

                                <br>

                                Please contact the administrator to complete
                                the processing fee payment.

                            </div>

                        @endif

                    </div>

                @endif


                {{-- VIEW LOAN DETAILS --}}

                <div class="view">

                    <a
                        href="{{ route('client.loans.show',$loan) }}"
                    >
                        View Loan Details →
                    </a>

                </div>

            </div>

        @empty


            {{-- EMPTY STATE --}}

            <div class="empty">

                <div class="empty-icon">
                    ₹
                </div>

                <strong>
                    No loans yet
                </strong>

                <p>
                    You don't have any loan applications.
                    Apply using your active EMI card.
                </p>

                @if($emiCard)

                    <a
                        href="{{ route('client.loans.create') }}"
                    >
                        Apply for a Loan
                    </a>

                @endif

            </div>

        @endforelse

    </main>


    {{-- EXISTING BOTTOM NAV --}}

    @include('client.partials.bottom-nav')

</div>

</body>
</html>