<!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 | PG Finsev</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:92px}
        .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:9px}
        .new-btn{padding:9px 11px;border-radius:10px;background:#1769e0;color:#fff;font-size:9px;font-weight:900}
        .content{padding:14px 14px 25px}
        .hero{padding:18px;border-radius:20px;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:8px;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:8px;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:7px;color:#b3c9e2}.hero-foot strong{display:block;margin-top:3px;font-size:10px}
        .section-head{display:flex;justify-content:space-between;align-items:center;margin:18px 2px 9px}.section-head strong{font-size:13px}.section-head span{font-size:8px;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:8px;color:#8b99a9}.loan-no strong{display:block;color:#273e59;font-size:13px;margin-top:3px}
        .badge{padding:6px 8px;border-radius:8px;font-size:7px;font-weight:900;text-transform:uppercase;white-space:nowrap}.pending{background:#fff5dc;color:#9a6700}.approved{background:#edf5ff;color:#1769e0}.active{background:#eaf8f0;color:#198754}.completed{background:#eef1f5;color:#53667d}.overdue{background:#fff0f1;color:#b42332}.completed{background:#eef1f5;color:#53667d}.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:7px;margin-bottom:4px}.stat strong{font-size:11px;color:#304761}.blue{color:#1769e0!important}.green{color:#198754!important}
        .progress{margin-top:12px}.progress-top{display:flex;justify-content:space-between;font-size:7px;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:8px;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:9px;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:9px;font-weight:900}
        .nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;height:62px;background:#fff;border-top:1px solid #e7edf4;box-shadow:none;display:grid;grid-template-columns:repeat(4,1fr);z-index:50;padding:3px 6px calc(4px + env(safe-area-inset-bottom))}
        .nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#94a3b8;font-size:8px;font-weight:800}.nav a.active{color:#1769e0}.icon{font-size:16px}
        .flash{padding:11px 13px;border-radius:11px;margin-bottom:12px;font-size:9px;font-weight:700}.success{background:#eaf8ef;border:1px solid #ccebd9;color:#287646}.error{background:#fff0f1;border:1px solid #f0ccd1;color:#a52834}
        @media(min-width:700px){body{background:#e8eef5}.app{box-shadow:0 0 50px rgba(31,41,55,.08)}}
    </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">
        @if(session('success'))<div class="flash success">✓ {{ session('success') }}</div>@endif
        @if(session('error'))<div class="flash error">⚠ {{ session('error') }}</div>@endif

        @if($emiCard)
            <div class="hero">
                <div class="eyebrow">Available EMI Limit</div>
                <div class="hero-number">{{ $emiCard->card_number }}</div>
                <div class="limit-label">Available for new loans</div>
                <div class="limit">₹{{ number_format((float)$emiCard->available_limit,0) }}</div>
                <div class="hero-foot">
                    <div><span>Card Limit</span><strong>₹{{ number_format((float)$emiCard->card_limit,0) }}</strong></div>
                    <div style="text-align:right"><span>Status</span><strong>{{ ucfirst($emiCard->status) }}</strong></div>
                </div>
            </div>
        @endif

        <div class="section-head">
            <strong>My Loans</strong>
            <span>{{ $loans->count() }} loan{{ $loans->count() == 1 ? '' : 's' }}</span>
        </div>

        @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=(float)$loan->outstanding_amount;
                $paid=max(0,$total-$outstanding);
                $percent=$total>0?min(100,max(0,($paid/$total)*100)):0;
            @endphp
            <div class="loan">
                <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>

                <div class="grid">
                    <div class="stat"><span>Loan Amount</span><strong>₹{{ number_format((float)$loan->loan_amount,2) }}</strong></div>
                    <div class="stat"><span>Monthly EMI</span><strong class="blue">₹{{ number_format((float)$loan->emi_amount,2) }}</strong></div>
                    <div class="stat"><span>Tenure</span><strong>{{ $loan->tenure_months }} Months</strong></div>
                    <div class="stat"><span>Outstanding</span><strong class="green">₹{{ number_format($outstanding,2) }}</strong></div>
                </div>

                @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

                @if($status === 'closed')
                    <div style="margin-top:12px;padding:10px 11px;border-radius:10px;background:#f5f7fa;border:1px solid #e1e6ec;color:#64748b;font-size:8px;line-height:1.55">
                        <strong style="display:block;color:#475569;font-size:9px;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

                @if((float)$loan->processing_fee > 0)
                    <div style="margin-top:12px;padding:11px;border-radius:11px;background:#fffaf0;border:1px solid #f1dfb7">
                        <div style="display:flex;justify-content:space-between;align-items:center;gap:10px">
                            <div>
                                <span style="display:block;color:#8a98a9;font-size:7px;margin-bottom:4px">Processing Fee</span>
                                <strong style="font-size:12px;color:#b26b00">
                                    ₹{{ number_format((float)$loan->processing_fee,2) }}
                                </strong>
                            </div>

                            @if($loan->processing_fee_paid_at)
                                <span style="padding:6px 8px;border-radius:8px;background:#eaf8f0;color:#198754;font-size:7px;font-weight:900">
                                    ✓ PAID
                                </span>
                            @elseif($status === 'approved')
                                <span style="padding:6px 8px;border-radius:8px;background:#fff0d9;color:#a66700;font-size:7px;font-weight:900">
                                    UNPAID
                                </span>
                            @else
                                <span style="padding:6px 8px;border-radius:8px;background:#f1f4f7;color:#718096;font-size:7px;font-weight:900">
                                    AFTER APPROVAL
                                </span>
                            @endif
                        </div>

                        @if($loan->processing_fee_paid_at)
                            <div style="margin-top:7px;color:#68788d;font-size:7px">
                                Paid on {{ $loan->processing_fee_paid_at->format('d M Y h:i A') }}
                            </div>
                        @elseif($status === 'approved')
                            <form method="POST"
                                  action="{{ route('client.loans.pay-processing-fee',$loan) }}"
                                  style="margin-top:10px">
                                @csrf

                                <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px">
                                    <select name="payment_method" required
                                            style="height:37px;width:100%;border:1px solid #e0e7ef;border-radius:9px;background:#fff;padding:0 8px;color:#304761;font-size:8px">
                                        <option value="cash">Cash</option>
                                        <option value="upi">UPI</option>
                                        <option value="bank_transfer">Bank Transfer</option>
                                    </select>

                                    <input type="text"
                                           name="reference_number"
                                           placeholder="Reference no. (optional)"
                                           style="height:37px;width:100%;border:1px solid #e0e7ef;border-radius:9px;background:#fff;padding:0 8px;color:#304761;font-size:8px">
                                </div>

                                <button type="submit"
                                        style="width:100%;height:38px;margin-top:7px;border:0;border-radius:9px;background:#1769e0;color:#fff;font-size:8px;font-weight:900;cursor:pointer"
                                        onclick="return confirm('Confirm processing fee payment of ₹{{ number_format((float)$loan->processing_fee,2) }}?')">
                                    Pay Processing Fee · ₹{{ number_format((float)$loan->processing_fee,2) }}
                                </button>
                            </form>
                        @endif
                    </div>
                @endif

                <div class="view"><a href="{{ route('client.loans.show',$loan) }}">View Loan Details →</a></div>
            </div>
        @empty
            <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>

    <nav class="nav">
        <a href="{{ route('client.dashboard') }}" class="{{ request()->routeIs('client.dashboard')?'active':'' }}"><span class="icon">🏠</span>Home</a>
        <a href="{{ route('client.emi-card') }}" class="{{ request()->routeIs('client.emi-card')?'active':'' }}"><span class="icon">💳</span>EMI Card</a>
        <a href="{{ route('client.loans') }}" class="active"><span class="icon">💰</span>Loans</a>
        <a href="{{ route('client.payments') }}" class="{{ request()->routeIs('client.payments')?'active':'' }}"><span class="icon">₹</span>Payments</a>
    </nav>
</div>
</body>
</html>