@extends('frontend.layout_2')
@section('title','আমার লোন')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
    :root{
        --bg-1:#fef2f2;        /* light red */
        --bg-2:#eff6ff;        /* light indigo */
        --ink:#0f172a;
        --muted:#6b7280;
        --primary:#ef4444;
        --card:#ffffff;
        --ring:rgba(15,23,42,.06);
        --green:#2e7d32;
    }

    *{box-sizing:border-box;margin:0;padding:0;}

    .page-wrap{
        position:relative;
        isolation:isolate;
        min-height:calc(100dvh - 120px);
        background:
            radial-gradient(800px 400px at 10% -10%, #fecaca66 10%, transparent 60%),
            radial-gradient(900px 480px at 110% 0%, #bfdbfe66 10%, transparent 60%),
            linear-gradient(180deg,var(--bg-1),var(--bg-2));
    }
    .float-bubbles{
        position:absolute;inset:0;z-index:0;
        pointer-events:none;opacity:.55;filter:blur(12px);
    }
    @keyframes drift{
        0%{transform:translateY(0) translateX(0) scale(1);}
        50%{transform:translateY(-10px) translateX(8px) scale(1.03);}
        100%{transform:translateY(0) translateX(0) scale(1);}
    }

    .loan-page{
        position:relative;
        z-index:1;
        max-width:900px;
        margin:0 auto;
        padding:24px 14px 32px;
        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
        color:var(--ink);
    }

    .paper{
        background:var(--card);
        border-radius:18px;
        border:1px solid var(--ring);
        box-shadow:0 12px 30px rgba(15,23,42,.08);
        padding:18px 18px 20px;
    }

    /* ===== Header (title + pills) ===== */
    .loan-header{
        display:flex;
        align-items:flex-start;
        gap:12px;
        margin-bottom:14px;
    }
    .loan-title-block h1{
        font-size:20px;
        font-weight:800;
    }
    .loan-title-block p{
        margin-top:4px;
        font-size:13px;
        line-height:1.5;
        color:var(--muted);
    }

    /* left pill icon */
    .loan-avatar{
        width:44px;
        height:44px;
        border-radius:999px;
        background:var(--primary);
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 10px 24px rgba(239,68,68,.55);
        flex-shrink:0;
    }
    .loan-avatar-inner{
        width:20px;
        height:20px;
        border-radius:999px;
        background:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        color:var(--primary);
        font-size:12px;
    }

    /* right close/back pill */
    .loan-close{
        margin-left:auto;
        width:22px;
        height:40px;
        border-radius:999px;
        border:1px solid #d1d5db;
        background:#ffffff;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#9ca3af;
        text-decoration:none;
        padding: 10px;
        transition:
            background .15s ease,
            color .15s ease,
            transform .1s ease,
            box-shadow .15s ease;
    }
    .loan-close i{
        font-size:14px;
    }
    .loan-close:hover{
        background:#f3f4f6;
        color:#6b7280;
        box-shadow:0 4px 10px rgba(15,23,42,.12);
        transform:translateY(-1px);
    }
    .loan-close:active{
        transform:translateY(0);
        box-shadow:0 2px 6px rgba(15,23,42,.08);
    }

    /* ===== Loan cards ===== */
    .loan-list{
        margin-top:10px;
    }
    .loan-card{
        background:#fff;
        border-radius:16px;
        border:1px solid var(--ring);
        box-shadow:0 6px 18px rgba(15,23,42,.06);
        padding:14px 16px 16px;
        margin-bottom:14px;
    }
    .card-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:8px;
    }
    .card-title{
        font-weight:600;
        font-size:15px;
    }
    .badge{
        display:inline-block;
        padding:3px 10px;
        border-radius:999px;
        font-size:11px;
    }
    .badge-running   { background:#e8f5e9;color:#2e7d32; }
    .badge-pending   { background:#fff8e1;color:#f9a825; }
    .badge-rejected  { background:#ffebee;color:#c62828; }
    .badge-completed { background:#e3f2fd;color:#1565c0; }

    .row{
        display:flex;
        justify-content:space-between;
        font-size:13px;
        margin-bottom:4px;
    }
    .label{color:#666;}
    .value{font-weight:500;}

    .section-title{
        font-size:13px;
        font-weight:600;
        margin-top:10px;
        margin-bottom:4px;
    }
    .mini-text{
        font-size:12px;
        color:#777;
    }
    .installment{
        border-left:2px solid var(--primary);
        padding-left:8px;
        margin-bottom:6px;
        font-size:12px;
    }

    .empty{
        text-align:center;
        font-size:14px;
        color:#555;
        margin:32px 0 6px;
    }
    .empty-icon{
        font-size:40px;
        margin-bottom:8px;
    }
    a.btn-link{
        text-decoration:none;
        color:inherit;
    }
    .btn{
        border:none;
        border-radius:999px;
        padding:7px 14px;
        font-size:13px;
        cursor:pointer;
    }
    .btn-primary{
        background:var(--primary);
        color:#fff;
    }

    @media(max-width:640px){
        .loan-page{padding:20px 12px 26px;}
    }
</style>
@endpush

@section('sub_layout')
<div class="page-wrap" style="margin-bottom: 100px;">
    {{-- soft animated bubbles --}}
    <svg class="float-bubbles" viewBox="0 0 1200 800" preserveAspectRatio="none" aria-hidden="true">
        <defs>
            <linearGradient id="loanGrad" x1="0" x2="1" y1="0" y2="1">
                <stop offset="0%" stop-color="#fecaca"/>
                <stop offset="100%" stop-color="#bfdbfe"/>
            </linearGradient>
        </defs>
        <g style="transform-origin:15% 15%;animation:drift 16s ease-in-out infinite;">
            <circle cx="170" cy="120" r="110" fill="url(#loanGrad)"/>
        </g>
        <g style="transform-origin:90% 10%;animation:drift 20s ease-in-out infinite reverse;">
            <circle cx="1030" cy="90" r="120" fill="#fecaca"/>
        </g>
        <g style="transform-origin:60% 95%;animation:drift 18s ease-in-out infinite;">
            <circle cx="640" cy="720" r="140" fill="#bfdbfe"/>
        </g>
    </svg>

    <div class="loan-page">
        <div class="paper">
            {{-- Header --}}
            <div class="loan-header">
                <div class="loan-avatar">
                    <span class="loan-avatar-inner">
                        <i class="fa-solid fa-sack-dollar"></i>
                    </span>
                </div>

                <div class="loan-title-block">
                    <h1>আমার লোন</h1>
                    <p>আপনার চলমান ও পূর্বের সব লোনের স্ট্যাটাস এক জায়গায় দেখুন।</p>
                </div>

                
            </div>

            {{-- Content --}}
            <div class="loan-list">
                @if($loans->isEmpty())
                    <div class="empty">
                        <div class="empty-icon">📄</div>
                        <div>আপনি এখনো কোনো লোন করেননি।</div>
                        <a href="{{ route('loan.apply') }}" class="btn-link">
                            <button class="btn btn-primary" style="margin-top:10px;">
                                নতুন লোন আবেদন করুন
                            </button>
                        </a>
                    </div>
                @else
                    @foreach($loans as $loan)
                        @php
                            $status = $loan->status;
                            $badgeClass = 'badge-pending';
                            if ($status === 'running') $badgeClass = 'badge-running';
                            elseif ($status === 'rejected') $badgeClass = 'badge-rejected';
                            elseif (in_array($status, ['completed','closed'])) $badgeClass = 'badge-completed';

                            $nextInstallment = $loan->installments
                                ->where('status', 'upcoming')
                                ->sortBy('due_date')
                                ->first();

                            $latestDeposit = $loan->deposits->sortByDesc('created_at')->first();
                        @endphp

                        <div class="loan-card">
                            <div class="card-header">
                                <div class="card-title">
                                    Loan #{{ $loan->id }}
                                </div>
                                <div>
                                    <span class="badge {{ $badgeClass }}">
                                        {{ strtoupper(str_replace('_',' ', $status)) }}
                                    </span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="label">অ্যামাউন্ট:</div>
                                <div class="value">৳ {{ number_format($loan->amount) }}</div>
                            </div>
                            <div class="row">
                                <div class="label">মেয়াদ:</div>
                                <div class="value">{{ $loan->tenure_months }} মাস</div>
                            </div>
                            <div class="row">
                                <div class="label">মোট পরিশোধযোগ্য:</div>
                                <div class="value">৳ {{ number_format($loan->total_payable) }}</div>
                            </div>
                            <div class="row">
                                <div class="label">মাসিক কিস্তি:</div>
                                <div class="value">৳ {{ number_format($loan->monthly_installment) }}</div>
                            </div>
                            <div class="row">
                                <div class="label">আবেদনের তারিখ:</div>
                                <div class="value">{{ $loan->created_at->format('d M Y') }}</div>
                            </div>

                            {{-- Deposit summary --}}
                            <div class="section-title">জামানত / ডিপোজিট</div>
                            @if($latestDeposit)
                                <div class="mini-text">
                                    সর্বশেষ ডিপোজিট: ৳ {{ number_format($latestDeposit->amount) }}
                                    ({{ strtoupper($latestDeposit->method) }}) –
                                    স্ট্যাটাস: {{ ucfirst($latestDeposit->status) }}<br>
                                    trx: {{ $latestDeposit->transaction_id ?? '-' }} •
                                    {{ $latestDeposit->created_at->diffForHumans() }}
                                </div>
                            @else
                                <div class="mini-text">এই লোনের জন্য এখনো কোনো ডিপোজিট নেই।</div>
                            @endif

                            {{-- Next installment --}}
                            <div class="section-title">পরবর্তী কিস্তি</div>
                            @if($nextInstallment)
                                <div class="installment">
                                    <div>{{ \Carbon\Carbon::parse($nextInstallment->due_date)->format('d M Y') }}</div>
                                    <div>৳ {{ number_format($nextInstallment->amount) }}</div>
                                    <div class="mini-text">
                                        আসল: ৳ {{ number_format($nextInstallment->principal_part) }},
                                        ইন্টারেস্ট: ৳ {{ number_format($nextInstallment->interest_part) }}
                                    </div>
                                </div>
                            @else
                                <div class="mini-text">
                                    কোনো upcoming কিস্তি নেই (সম্ভবত লোন চলছে না বা শেষ)।
                                </div>
                            @endif
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</div>
@endsection