@extends('backend.master')
@section('title','Manage Loan')

@push('styles')
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
@endpush

@section('content')

@php
    $status = $loan->status;
    $badgeClass = 'badge-other';
    if ($status === 'running') {
        $badgeClass = 'badge-running';
    } elseif (in_array($status, ['pending_deposit','pending_approval','nid_uploaded','summary_confirmed','draft'])) {
        $badgeClass = 'badge-pending';
    } elseif ($status === 'rejected') {
        $badgeClass = 'badge-rejected';
    }
@endphp

<style>
    :root{
        --loan-primary:#dc2626;
        --loan-primary-soft:#fee2e2;
        --loan-bg:#f5f5f5;
    }

    .loan-bg{
        background:var(--loan-bg);
    }

    .loan-card{
        border-radius:1rem;
        box-shadow:0 10px 30px rgba(15,23,42,.08);
        border:1px solid #e5e7eb;
    }

    .loan-section-title{
        font-size:.8rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:#6b7280;
        margin-bottom:.35rem;
    }

    .pill-title{
        display:inline-flex;
        align-items:center;
        gap:.4rem;
        padding:.25rem .8rem;
        border-radius:999px;
        background:var(--loan-primary-soft);
        color:var(--loan-primary);
        font-size:.78rem;
        font-weight:600;
    }

    .badge-loan{
        border-radius:999px;
        padding:.25rem .6rem;
        font-size:.7rem;
        font-weight:600;
        display:inline-flex;
        align-items:center;
        gap:.25rem;
    }
    .badge-loan span.dot{
        width:.45rem;
        height:.45rem;
        border-radius:999px;
        display:inline-block;
    }
    .badge-running{
        background:#ecfdf3;
        color:#15803d;
    }
    .badge-running .dot{ background:#22c55e; }

    .badge-pending{
        background:#fffbeb;
        color:#b45309;
    }
    .badge-pending .dot{ background:#f59e0b; }

    .badge-rejected{
        background:#fef2f2;
        color:#b91c1c;
    }
    .badge-rejected .dot{ background:#ef4444; }

    .badge-other{
        background:#eef2ff;
        color:#3730a3;
    }
    .badge-other .dot{ background:#6366f1; }

    .btn-soft-secondary{
        background:#f9fafb;
        color:#374151;
        border:1px solid #e5e7eb;
    }
    .btn-soft-secondary:hover{
        background:#e5e7eb;
        border-color:#d1d5db;
    }

    .btn-soft-success{
        background:#ecfdf3;
        color:#15803d;
        border:1px solid #bbf7d0;
    }
    .btn-soft-success:hover{
        background:#22c55e;
        border-color:#22c55e;
        color:#fff;
    }

    .btn-soft-danger{
        background:#fef2f2;
        color:#b91c1c;
        border:1px solid #fecaca;
    }
    .btn-soft-danger:hover{
        background:#ef4444;
        border-color:#ef4444;
        color:#fff;
    }

    .mini-label{
        font-size:.75rem;
        color:#6b7280;
    }
    .mini-value{
        font-size:.88rem;
        font-weight:600;
        color:#111827;
    }

    .loan-table-sm th{
        font-size:.76rem;
        text-transform:uppercase;
        letter-spacing:.05em;
        color:#9ca3af;
        border-bottom:1px solid #e5e7eb;
        white-space:nowrap;
    }
    .loan-table-sm td{
        font-size:.82rem;
        vertical-align:middle;
        border-bottom:1px solid #f3f4f6;
        white-space:nowrap;
    }

    .timeline-item{
        position:relative;
        padding-left:1.3rem;
        margin-bottom:.8rem;
    }
    .timeline-item::before{
        content:"";
        position:absolute;
        left:.3rem;
        top:.15rem;
        bottom:-.4rem;
        width:2px;
        background:#e5e7eb;
    }
    .timeline-badge{
        position:absolute;
        left:0;
        top:.1rem;
        width:.7rem;height:.7rem;
        border-radius:999px;
        background:#fff;
        border:2px solid var(--loan-primary);
    }
    .timeline-title{
        font-size:.86rem;
        font-weight:600;
    }
    .timeline-sub{
        font-size:.8rem;
        color:#6b7280;
    }

    .nid-img{
        border-radius:.75rem;
        border:1px solid #e5e7eb;
        box-shadow:0 8px 20px rgba(15,23,42,.08);
    }

    @media (max-width: 992px){
        .loan-card{
            border-radius:1.1rem;
        }
        .mt-lg-0{ margin-top:1rem!important; }
    }
</style>

<div class="loan-bg py-3 py-md-4">
    <div class="container-fluid">

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div>
                <h5 class="mb-1 fw-semibold d-flex align-items-center gap-2">
                    <i class="bi bi-file-earmark-text-fill text-danger fs-5"></i>
                    <span>Loan #{{ $loan->id }} details</span>
                </h5>
                <small class="text-muted">
                    User: {{ optional($loan->user)->name ?? 'N/A' }} (ID: {{ optional($loan->user)->id ?? '—' }})
                </small>
            </div>

            <div class="pill-title">
                <i class="bi bi-activity"></i>
                <span>Status:</span>
                <span class="text-uppercase">
                    {{ str_replace('_',' ',$status) }}
                </span>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success border-0 shadow-sm py-2 px-3 mb-3">
                <i class="bi bi-check-circle-fill me-1"></i>
                {{ session('success') }}
            </div>
        @endif

        <div class="row g-3 g-lg-4">

            <div class="col-lg-8">

                <div class="card loan-card mb-3" style="padding:13px;">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <div class="loan-section-title">Deposits</div>
                            <small class="text-muted">Security deposits submitted for this loan.</small>
                        </div>
                    </div>

                    @if($loan->deposits->isEmpty())
                        <p class="text-muted small mb-0">এই লোনের জন্য এখনো কোনো জামানত ডিপোজিট নেই।</p>
                    @else
                        <div class="table-responsive mt-2">
                            <table class="table table-sm align-middle loan-table-sm">
                                <thead>
                                <tr>
                                    <th>Method</th>
                                    <th>Amount</th>
                                    <th>TRX ID</th>
                                    <th>Status</th>
                                    <th>Time</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($loan->deposits as $deposit)
                                    <tr>
                                        <td class="fw-semibold text-uppercase">
                                            {{ $deposit->method }}
                                        </td>
                                        <td>৳ {{ number_format($deposit->amount) }}</td>
                                        <td class="small">{{ $deposit->transaction_id }}</td>
                                        <td class="small text-capitalize">{{ $deposit->status }}</td>
                                        <td class="small text-muted">{{ $deposit->created_at->diffForHumans() }}</td>
                                        <td class="text-end">
                                            @if($deposit->status === 'pending')
                                                <form action="{{ route('admin.deposits.approve', $deposit) }}"
                                                      method="POST" class="d-inline">
                                                    @csrf
                                                    <button type="submit"
                                                            class="btn btn-soft-success btn-sm d-inline-flex align-items-center gap-1">
                                                        <i class="bi bi-check2-circle"></i>
                                                        <span class="d-none d-xl-inline">Approve</span>
                                                    </button>
                                                </form>

                                                <form action="{{ route('admin.deposits.reject', $deposit) }}"
                                                      method="POST" class="d-inline"
                                                      onsubmit="return confirm('Reject this deposit?');">
                                                    @csrf
                                                    <button type="submit"
                                                            class="btn btn-soft-danger btn-sm d-inline-flex align-items-center gap-1">
                                                        <i class="bi bi-x-circle"></i>
                                                        <span class="d-none d-xl-inline">Reject</span>
                                                    </button>
                                                </form>
                                            @else
                                                <span class="text-muted small">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>

                <div class="card loan-card mb-3" style="padding:13px;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <div class="loan-section-title">Loan Summary</div>
                            <small class="text-muted">Core details & status of this loan.</small>
                        </div>
                        <span class="badge-loan {{ $badgeClass }}">
                            <span class="dot"></span>
                            {{ strtoupper(str_replace('_',' ',$status)) }}
                        </span>
                    </div>

                    <div class="row g-3">
                        <div class="col-sm-6">
                            <div class="mini-label">User</div>
                            <div class="mini-value">
                                {{ optional($loan->user)->name ?? 'N/A' }}
                                <span class="text-muted small"> · ID: {{ optional($loan->user)->id ?? '—' }}</span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mini-label">Phone</div>
                            <div class="mini-value">{{ optional($loan->user)->phone ?? 'N/A' }}</div>
                        </div>

                        {{-- Nominee Info Start --}}
                        <div class="col-sm-4">
                            <div class="mini-label">Nominee Name</div>
                            <div class="mini-value">{{ optional($loan->user)->nominee_name ?? 'N/A' }}</div>
                        </div>
                        <div class="col-sm-4">
                            <div class="mini-label">Nominee Phone</div>
                            <div class="mini-value">{{ optional($loan->user)->nominee_phone ?? 'N/A' }}</div>
                        </div>
                        <div class="col-sm-4">
                            <div class="mini-label">Nominee Relation</div>
                            <div class="mini-value">{{ optional($loan->user)->nominee_relation ?? 'N/A' }}</div>
                        </div>
                        {{-- Nominee Info End --}}

                        <div class="col-sm-4">
                            <div class="mini-label">Amount</div>
                            <div class="mini-value">৳ {{ number_format($loan->amount) }}</div>
                        </div>
                        <div class="col-sm-4">
                            <div class="mini-label">Tenure</div>
                            <div class="mini-value">{{ $loan->tenure_months }} মাস</div>
                        </div>
                        <div class="col-sm-4">
                            <div class="mini-label">Interest</div>
                            <div class="mini-value">{{ $loan->interest_rate }}%</div>
                        </div>

                        <div class="col-sm-4">
                            <div class="mini-label">Total Payable</div>
                            <div class="mini-value">৳ {{ number_format($loan->total_payable) }}</div>
                        </div>
                        <div class="col-sm-4">
                            <div class="mini-label">Monthly EMI</div>
                            <div class="mini-value">৳ {{ number_format($loan->monthly_installment) }}</div>
                        </div>
                        <div class="col-sm-4">
                            <div class="mini-label">Purpose</div>
                            <div class="mini-value text-capitalize">{{ $loan->purpose }}</div>
                        </div>

                        <div class="col-sm-6">
                            <div class="mini-label">Created at</div>
                            <div class="mini-value">
                                {{ $loan->created_at->format('d M Y · h:i A') }}
                            </div>
                        </div>
                        @if($loan->approved_at)
                            <div class="col-sm-6">
                                <div class="mini-label">Approved at</div>
                                <div class="mini-value">
                                    {{ $loan->approved_at->format('d M Y · h:i A') }}
                                </div>
                            </div>
                        @endif
                    </div>

                    @if(!in_array($loan->status, ['running','rejected']))
                        <div class="mt-3 d-flex flex-wrap gap-2">
                            <form action="{{ route('admin.loans.approve', $loan) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit"
                                        class="btn btn-soft-success d-inline-flex align-items-center gap-1">
                                    <i class="bi bi-check2-circle"></i>
                                    <span>Approve loan</span>
                                </button>
                            </form>

                            <form action="{{ route('admin.loans.reject', $loan) }}" method="POST" class="d-inline"
                                  onsubmit="return confirm('Reject this loan?');">
                                @csrf
                                <button type="submit"
                                        class="btn btn-soft-danger d-inline-flex align-items-center gap-1">
                                    <i class="bi bi-x-circle"></i>
                                    <span>Reject loan</span>
                                </button>
                            </form>
                        </div>
                    @endif
                </div>

                <div class="card loan-card" style="padding:13px;">
                    <div class="loan-section-title mb-2">Installment Schedule</div>
                    @forelse($loan->installments as $ins)
                        <div class="timeline-item">
                            <div class="timeline-badge"></div>
                            <div class="timeline-title">
                                {{ \Carbon\Carbon::parse($ins->due_date)->format('d M Y') }}
                            </div>
                            <div class="timeline-sub">
                                ৳ {{ number_format($ins->amount) }}
                                (Principal: {{ number_format($ins->principal_part) }},
                                Interest: {{ number_format($ins->interest_part) }})
                            </div>
                            <div class="timeline-sub">
                                Status: <span class="text-capitalize">{{ $ins->status }}</span>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted small mb-0">কোনো কিস্তি তৈরি নেই।</p>
                    @endforelse
                </div>
            </div>

            <div class="col-lg-4 mt-lg-0">

                <div class="card loan-card mb-3" style="padding:13px;">
                    <div class="loan-section-title mb-2">NID Documents</div>

                    @if($loan->nid_front_path || $loan->nid_back_path)
                        <div class="row g-2">
                            @if($loan->nid_front_path)
                                <div class="col-6">
                                    <div class="mini-label mb-1">Front</div>
                                    <img src="{{ asset('storage/'.$loan->nid_front_path) }}"
                                         alt="NID Front" class="img-fluid nid-img">
                                </div>
                            @endif

                            @if($loan->nid_back_path)
                                <div class="col-6">
                                    <div class="mini-label mb-1">Back</div>
                                    <img src="{{ asset('storage/'.$loan->nid_back_path) }}"
                                         alt="NID Back" class="img-fluid nid-img">
                                </div>
                            @endif
                        </div>

                        <small class="text-muted d-block mt-2" style="font-size:.72rem;">
                            ইমেজ না দেখালে নিশ্চিত হন যে <code>php artisan storage:link</code> রান করা আছে।
                        </small>
                    @else
                        <p class="text-muted small mb-0">User এখনও কোনো NID আপলোড করেনি।</p>
                    @endif
                </div>

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

@endsection