@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;
        --bg-2:#eff6ff;
        --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));
    }

    .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;
    }

    .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);
    }

    .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;
    }

    .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;
        gap:10px;
        margin-bottom:8px;
    }

    .card-title{
        font-weight:700;
        font-size:15px;
    }

    .badge{
        display:inline-block;
        padding:4px 10px;
        border-radius:999px;
        font-size:11px;
        font-weight:800;
    }

    .badge-running{background:#e8f5e9;color:#2e7d32;}
    .badge-pending{background:#fff8e1;color:#f9a825;}
    .badge-rejected{background:#ffebee;color:#c62828;}
    .badge-completed{background:#e3f2fd;color:#1565c0;}
    .badge-submitted{background:#eef2ff;color:#3730a3;}
    .badge-security{background:#ecfeff;color:#0e7490;}

    .row{
        display:flex;
        justify-content:space-between;
        gap:12px;
        font-size:13px;
        margin-bottom:5px;
    }

    .label{color:#666;}
    .value{font-weight:600;text-align:right;}

    .section-title{
        font-size:13px;
        font-weight:800;
        margin-top:12px;
        margin-bottom:5px;
        color:#111827;
    }

    .mini-text{
        font-size:12px;
        color:#777;
        line-height:1.6;
    }

    .notice{
        border-radius:12px;
        padding:10px 12px;
        margin-top:10px;
        font-size:12px;
        line-height:1.6;
    }

    .notice-admin{
        background:#fff7ed;
        border:1px solid #fed7aa;
        color:#9a3412;
    }

    .notice-fee{
        background:#fef2f2;
        border:1px solid #fecaca;
        color:#991b1b;
    }

    .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:8px 14px;
        font-size:13px;
        cursor:pointer;
        font-weight:800;
    }

    .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;">
    <div class="loan-page">
        <div class="paper">
            <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>আপনার Eoan application এবং পুরনো loan data এক জায়গায় দেখুন।</p>
                </div>
            </div>

            <div class="loan-list">
                @if(($erinLoans ?? collect())->isEmpty() && ($loans ?? collect())->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

                    {{-- Erin Loan Applications --}}
                    @foreach(($erinLoans ?? collect()) as $loan)
                        @php
                            $status = $loan->status;

                            $badgeClass = 'badge-pending';

                            if ($status === 'approved') {
                                $badgeClass = 'badge-running';
                            } elseif ($status === 'rejected') {
                                $badgeClass = 'badge-rejected';
                            } elseif ($status === 'security_approved') {
                                $badgeClass = 'badge-security';
                            } elseif ($status === 'submitted') {
                                $badgeClass = 'badge-submitted';
                            }

                            $plan = $loan->loanPlan;
                            $totalPayable = $loan->total_payable ?? ((int) $loan->monthly_installment * (int) $loan->term_months);
                        @endphp

                        <div class="loan-card">
                            <div class="card-header">
                                <div class="card-title">
                                     Loan #{{ $loan->id }}
                                </div>

                                <span class="badge {{ $badgeClass }}">
                                    {{ strtoupper(str_replace('_',' ', $status)) }}
                                </span>
                            </div>

                            <div class="row">
                                <div class="label">Plan:</div>
                                <div class="value">
                                    @if($plan)
                                        {{ $plan->term_months }} মাস / ৳ {{ number_format($plan->amount) }}
                                    @else
                                        -
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="label">লোন অ্যামাউন্ট:</div>
                                <div class="value">৳ {{ number_format((float) $loan->requested_amount) }}</div>
                            </div>

                            <div class="row">
                                <div class="label">মেয়াদ:</div>
                                <div class="value">{{ $loan->term_months }} মাস</div>
                            </div>

                            <div class="row">
                                <div class="label">মাসিক কিস্তি:</div>
                                <div class="value">৳ {{ number_format((float) $loan->monthly_installment) }}</div>
                            </div>

                            <div class="row">
                                <div class="label">মোট পরিশোধযোগ্য:</div>
                                <div class="value">৳ {{ number_format((float) $totalPayable) }}</div>
                            </div>

                            <div class="row">
                                <div class="label">ইন্টারেস্ট:</div>
                                <div class="value">{{ number_format((float) $loan->interest_rate_annual, 2) }}%</div>
                            </div>

                            <div class="row">
                                <div class="label">আবেদনের তারিখ:</div>
                                <div class="value">
                                    {{ $loan->submitted_at ? $loan->submitted_at->format('d M Y') : $loan->created_at?->format('d M Y') }}
                                </div>
                            </div>

                            @if((float) $loan->fee_custom > 0)
                                <div class="notice notice-fee">
                                    <strong>Admin Fee:</strong>
                                    ৳ {{ number_format((float) $loan->fee_custom, 2) }}
                                </div>
                            @endif

                            @if(!empty($loan->message_custom))
                                <div class="notice notice-admin">
                                    <strong>Admin Message:</strong>
                                    {{ $loan->message_custom }}
                                </div>
                            @endif

                            @if($loan->approved_at)
                                <div class="section-title">অনুমোদনের তথ্য</div>
                                <div class="mini-text">
                                    Approved at:
                                    {{ $loan->approved_at->format('d M Y, h:i A') }}
                                    @if($loan->disbursed_at)
                                        <br>
                                        Balance added:
                                        {{ $loan->disbursed_at->format('d M Y, h:i A') }}
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach

                    {{-- Old Loans --}}
                    @foreach(($loans ?? collect()) 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
                                ->whereIn('status', ['upcoming', 'pending'])
                                ->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>

                                <span class="badge {{ $badgeClass }}">
                                    {{ strtoupper(str_replace('_',' ', $status)) }}
                                </span>
                            </div>

                            <div class="row">
                                <div class="label">অ্যামাউন্ট:</div>
                                <div class="value">৳ {{ number_format((float) $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((float) $loan->total_payable) }}</div>
                            </div>

                            <div class="row">
                                <div class="label">মাসিক কিস্তি:</div>
                                <div class="value">৳ {{ number_format((float) $loan->monthly_installment) }}</div>
                            </div>

                            <div class="row">
                                <div class="label">আবেদনের তারিখ:</div>
                                <div class="value">{{ $loan->created_at?->format('d M Y') }}</div>
                            </div>

                            <div class="section-title">জামানত / ডিপোজিট</div>

                            @if($latestDeposit)
                                <div class="mini-text">
                                    সর্বশেষ ডিপোজিট:
                                    ৳ {{ number_format((float) $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

                            <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((float) $nextInstallment->amount) }}</div>
                                    <div class="mini-text">
                                        আসল:
                                        ৳ {{ number_format((float) $nextInstallment->principal_part) }},
                                        ইন্টারেস্ট:
                                        ৳ {{ number_format((float) $nextInstallment->interest_part) }}
                                    </div>
                                </div>
                            @else
                                <div class="mini-text">
                                    কোনো upcoming কিস্তি নেই।
                                </div>
                            @endif
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</div>
@endsection