@extends('backend.master')

@section('content')

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<style>
    :root {
        --brand: #DD3532;
        --line: #e5e7eb;
    }

    .deposit-page {
        background: #f8fafc;
        min-height: 100vh;
    }

    .deposit-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    }

    .deposit-input {
        height: 50px;
        border: 1px solid var(--line);
        border-radius: 14px;
        outline: none;
        padding: 0 14px;
        background: #fff;
        width: 100%;
    }

    .deposit-input:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 4px rgba(221, 53, 50, .10);
    }

    .btn-main {
        min-height: 42px;
        border-radius: 12px;
        padding: 0 16px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transition: .2s;
        white-space: nowrap;
    }

    .btn-main:hover {
        opacity: .9;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .mini-text {
        font-size: 12px;
        color: #64748b;
        line-height: 1.5;
    }
</style>

<div class="deposit-page p-4 md:p-6">

    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-5">
        <div>
            <h1 class="text-2xl font-black text-gray-900">Loan Deposit Requests</h1>
            <p class="text-gray-500 mt-1">Approve, reject and view deposit details</p>
        </div>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('admin.loans.index') }}"
               class="btn-main bg-white border border-gray-300 text-gray-700">
                <i class="bi bi-arrow-left"></i>
                Back To Loans
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-green-50 border border-green-200 text-green-800 px-4 py-3">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 rounded-lg bg-red-50 border border-red-200 text-red-700 px-4 py-3">
            {{ session('error') }}
        </div>
    @endif

    @if(session('info'))
        <div class="mb-4 rounded-lg bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3">
            {{ session('info') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-4 rounded-lg bg-red-50 border border-red-200 text-red-700 px-4 py-3">
            <ul class="list-disc ml-5">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Filter --}}
    <div class="deposit-card p-4 mb-5">
        <form method="GET"
              action="{{ route('admin.loan-deposits.index') }}"
              class="grid grid-cols-1 md:grid-cols-4 gap-3">

            <input type="text"
                   name="q"
                   value="{{ $q ?? '' }}"
                   class="deposit-input"
                   placeholder="Search name, phone, email, trx, loan id">

            <select name="status" class="deposit-input">
                <option value="all" @selected(($status ?? 'all') === 'all')>All Status</option>
                <option value="pending" @selected(($status ?? '') === 'pending')>Pending</option>
                <option value="approved" @selected(($status ?? '') === 'approved')>Approved</option>
                <option value="rejected" @selected(($status ?? '') === 'rejected')>Rejected</option>
            </select>

            <select name="per" class="deposit-input">
                @foreach([10, 20, 50, 100] as $n)
                    <option value="{{ $n }}" @selected(($per ?? 20) == $n)>{{ $n }} Per Page</option>
                @endforeach
            </select>

            <button type="submit" class="btn-main w-full bg-[#DD3532] text-white">
                <i class="bi bi-search"></i>
                Search
            </button>
        </form>
    </div>

    {{-- Table --}}
    <div class="deposit-card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-gray-50 text-gray-800">
                    <tr class="text-left">
                        <th class="px-5 py-4 font-bold">User</th>
                        <th class="px-5 py-4 font-bold">Loan</th>
                        <th class="px-5 py-4 font-bold">Method</th>
                        <th class="px-5 py-4 font-bold">Amount</th>
                        <th class="px-5 py-4 font-bold">Transaction ID</th>
                        <th class="px-5 py-4 font-bold">Status</th>
                        <th class="px-5 py-4 font-bold">Date</th>
                        <th class="px-5 py-4 font-bold text-right">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200 bg-white">
                    @forelse($deposits as $deposit)
                        @php
                            $oldLoan = $deposit->loan;
                            $user = $oldLoan?->user;

                            $statusClass = match($deposit->status) {
                                'approved' => 'bg-green-50 text-green-700 border border-green-200',
                                'rejected' => 'bg-red-50 text-red-700 border border-red-200',
                                default => 'bg-yellow-50 text-yellow-700 border border-yellow-200',
                            };

                            $loanStatusClass = match($oldLoan?->status) {
                                'running', 'completed' => 'text-green-700',
                                'pending_approval' => 'text-blue-700',
                                'pending_deposit', 'draft', 'summary_confirmed', 'nid_uploaded' => 'text-yellow-700',
                                'rejected' => 'text-red-700',
                                default => 'text-gray-600',
                            };
                        @endphp

                        <tr>
                            <td class="px-5 py-4 min-w-[230px]">
                                <div class="font-bold text-gray-900">
                                    {{ $user?->name ?? 'N/A' }}
                                </div>

                                <div class="mini-text">
                                    {{ $user?->phone ?? $user?->email ?? 'No contact' }}
                                </div>

                                @if($user?->balance !== null)
                                    <div class="mini-text">
                                        Balance: ৳{{ number_format((float) $user->balance, 0) }}
                                    </div>
                                @endif
                            </td>

                            <td class="px-5 py-4 min-w-[160px]">
                                <div class="font-bold text-gray-900">
                                    Loan #{{ $oldLoan?->id ?? 'N/A' }}
                                </div>

                                <div class="mini-text">
                                    Amount:
                                    ৳{{ number_format((float) ($oldLoan?->amount ?? 0), 0) }}
                                </div>

                                <div class="mini-text {{ $loanStatusClass }}">
                                    Status:
                                    {{ $oldLoan?->status ? strtoupper(str_replace('_', ' ', $oldLoan->status)) : 'N/A' }}
                                </div>
                            </td>

                            <td class="px-5 py-4 font-bold whitespace-nowrap">
                                {{ strtoupper($deposit->method) }}
                            </td>

                            <td class="px-5 py-4 font-black text-green-700 whitespace-nowrap">
                                ৳{{ number_format((float) $deposit->amount, 0) }}
                            </td>

                            <td class="px-5 py-4 font-semibold whitespace-nowrap">
                                {{ $deposit->transaction_id }}
                            </td>

                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="status-pill {{ $statusClass }}">
                                    {{ ucfirst($deposit->status) }}
                                </span>
                            </td>

                            <td class="px-5 py-4 text-gray-600 whitespace-nowrap">
                                {{ $deposit->created_at?->format('d M Y, h:i A') }}
                            </td>

                            <td class="px-5 py-4">
                                <div class="flex flex-col items-end gap-2 min-w-[150px]">
                                    <a href="{{ route('admin.loan-deposits.show', $deposit) }}"
                                       class="btn-main bg-gray-900 text-white w-full">
                                        <i class="bi bi-eye"></i>
                                        Details
                                    </a>

                                    @if($deposit->status !== 'approved')
                                        <form method="POST"
                                              action="{{ route('admin.loan-deposits.approve', $deposit) }}"
                                              class="w-full">
                                            @csrf

                                            <button type="submit"
                                                    class="btn-main bg-green-700 text-white w-full"
                                                    onclick="return confirm('Approve this deposit?')">
                                                <i class="bi bi-check-circle"></i>
                                                Approve
                                            </button>
                                        </form>
                                    @endif

                                    @if($deposit->status !== 'rejected')
                                        <form method="POST"
                                              action="{{ route('admin.loan-deposits.reject', $deposit) }}"
                                              class="w-full">
                                            @csrf

                                            <button type="submit"
                                                    class="btn-main bg-red-600 text-white w-full"
                                                    onclick="return confirm('Reject this deposit?')">
                                                <i class="bi bi-x-circle"></i>
                                                Reject
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-10 text-center text-gray-500">
                                No deposit requests found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="border-t bg-gray-50 px-5 py-4 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
            <div class="text-sm text-gray-600">
                Showing {{ $deposits->firstItem() ?? 0 }} - {{ $deposits->lastItem() ?? 0 }} of {{ $deposits->total() }}
            </div>

            <div>
                {{ $deposits->links() }}
            </div>
        </div>
    </div>
</div>

@endsection