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

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

@section('content')

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

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

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

    .loan-title-pill{
        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;
    }

    /* status badges */
    .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;
    }

    .loan-table th{
        font-size:.78rem;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:#6b7280;
        border-bottom:1px solid #e5e7eb;
        white-space:nowrap;
    }
    .loan-table td{
        font-size:.85rem;
        vertical-align:middle;
        border-bottom:1px solid #f3f4f6;
    }

    @media (max-width: 768px){
        .loan-card{
            border-radius:1.25rem;
        }
        .loan-actions{
            justify-content:flex-start !important;
        }
    }
</style>

<div class="loan-page-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-bank2 text-danger fs-5"></i>
                    <span>Loan Management</span>
                </h5>
                <small class="text-muted">All user loans at a glance – review, approve or reject.</small>
            </div>

            <div class="loan-title-pill">
                <i class="bi bi-shield-check"></i>
                <span>Total: {{ $loans->total() }}</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="card loan-card">
            <div class="card-body pb-2 pb-md-3">

                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="fw-semibold text-muted small">Loan List</span>
                    </div>

                    <div class="input-group input-group-sm" style="max-width:260px;">
                        <span class="input-group-text bg-transparent border-end-0">
                            <i class="bi bi-search text-muted"></i>
                        </span>
                        <input type="text" class="form-control border-start-0" placeholder="Search (UI only)">
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table align-middle mb-0 loan-table">
                        <thead>
                        <tr>
                            <th>#ID</th>
                            <th>User</th>
                            <th>Phone</th>
                            <th>Amount</th>
                            <th>Tenure</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th class="text-end">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($loans as $loan)
                            @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
                            <tr>
                                <td class="fw-semibold">#{{ $loan->id }}</td>

                                <td>
                                    <div class="fw-semibold text-body">{{ optional($loan->user)->name ?? 'N/A' }}</div>
                                    <div class="small text-muted">UID: {{ optional($loan->user)->id ?? '—' }}</div>
                                </td>

                                <td>
                                    <span class="small text-body">{{ optional($loan->user)->phone ?? 'N/A' }}</span>
                                </td>

                                <td>
                                    <div class="fw-semibold text-body">
                                        ৳ {{ number_format($loan->amount) }}
                                    </div>
                                    <div class="small text-muted">Total: ৳ {{ number_format($loan->total_payable) }}</div>
                                </td>

                                <td>
                                    <span class="fw-semibold">{{ $loan->tenure_months }} মাস</span>
                                    <div class="small text-muted">
                                        EMI: ৳ {{ number_format($loan->monthly_installment) }}
                                    </div>
                                </td>

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

                                <td>
                                    <div class="small fw-semibold">
                                        {{ $loan->created_at->format('d M Y') }}
                                    </div>
                                    <div class="small text-muted">
                                        {{ $loan->created_at->format('h:i A') }}
                                    </div>
                                </td>

                                <td class="text-end">
                                    <div class="d-flex flex-wrap justify-content-end loan-actions gap-1">
                                        <a href="{{ route('admin.loans.show', $loan) }}"
                                           class="btn btn-soft-secondary btn-sm d-inline-flex align-items-center gap-1">
                                            <i class="bi bi-eye"></i>
                                            <span class="d-none d-sm-inline">View</span>
                                        </a>

                                        @if(!in_array($loan->status, ['running','rejected']))
                                            <form action="{{ route('admin.loans.approve', $loan) }}"
                                                  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.loans.reject', $loan) }}"
                                                  method="POST"
                                                  class="d-inline"
                                                  onsubmit="return confirm('Are you sure you want to reject this loan?');">
                                                @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>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-4 text-muted">
                                    <i class="bi bi-inbox me-1"></i>
                                    কোনো লোন পাওয়া যায়নি।
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <small class="text-muted">
                        Showing {{ $loans->firstItem() ?? 0 }}–{{ $loans->lastItem() ?? 0 }}
                        of {{ $loans->total() }} loans
                    </small>
                    <div class="mb-0">
                        {{ $loans->links() }}
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection