@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;
        --brand-dark: #c92d2a;
        --blue: #173f91;
        --green: #0f5f2d;
        --line: #d9dee7;
    }

    .loan-page {
        background: #fff;
        min-height: 100vh;
    }

    .loan-input {
        height: 58px;
        border-radius: 14px;
        border: 1px solid var(--line);
        outline: none;
        transition: .2s;
    }

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

    .loan-table-card {
        border: 1px solid var(--line);
        border-radius: 18px;
        overflow: hidden;
        background: #fff;
    }

    .loan-btn {
        border-radius: 12px;
        min-height: 42px;
        font-weight: 700;
        transition: .2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }

    .loan-btn:hover {
        opacity: .92;
    }

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

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

    .bank-modal-input {
        height: 52px;
        border-radius: 12px;
        border: 1px solid var(--line);
        outline: none;
        transition: .2s;
    }

    .bank-modal-input:focus {
        border-color: var(--green);
        box-shadow: 0 0 0 4px rgba(15, 95, 45, .10);
    }
</style>

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

    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-5">

        <form class="flex-1" method="GET" action="{{ route('admin.loans.index') }}">
            <div class="relative max-w-md">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                    <i class="bi bi-search"></i>
                </span>

                <input
                    type="text"
                    name="q"
                    value="{{ $q ?? '' }}"
                    class="loan-input w-full pl-11 pr-4 text-gray-700"
                    placeholder="Search Loans"
                >
            </div>
        </form>

        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('admin.loan-deposits.index') }}"
               class="loan-btn bg-[#DD3532] text-white px-5">
                <i class="bi bi-piggy-bank"></i>
                Deposit Requests
            </a>

            <a href="{{ url()->previous() }}"
               class="w-14 h-14 rounded-xl border border-gray-300 flex items-center justify-center hover:bg-gray-50">
                <span class="text-2xl leading-none">×</span>
            </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

    <div class="loan-table-card">
        <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-6 py-4 font-bold">User</th>
                        <th class="px-6 py-4 font-bold">Date</th>
                        <th class="px-6 py-4 font-bold">Amount</th>
                        <th class="px-6 py-4 font-bold">Installments</th>
                        <th class="px-6 py-4 font-bold">Per Installment</th>
                        <th class="px-6 py-4 font-bold">Actions</th>
                        <th class="px-6 py-4 font-bold">Status</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200 bg-white">
                    @forelse($loans as $loan)
                        @php
                            $u = $loan->user;
                            $pi = $u?->personalInformation;
                            $avatar = $pi?->selfie_path ? asset('storage/' . $pi->selfie_path) : null;

                            $balance = $u?->balance ?? 0;
                            $loanShow = $loan->total_payable ?? $loan->requested_amount ?? 0;
                            $phone = trim(($u?->country_code ?? '') . ' ' . ($u?->phone ?? ''));

                            $dateText = $loan->created_at
                                ? $loan->created_at->format('l, F d, Y \a\t g:i A')
                                : 'N/A';

                            $statusClass = match($loan->status) {
                                'submitted' => 'bg-yellow-50 text-yellow-700 border border-yellow-200',
                                'security_approved' => 'bg-green-50 text-green-700 border border-green-200',
                                'approved' => 'bg-blue-50 text-blue-700 border border-blue-200',
                                'rejected' => 'bg-red-50 text-red-700 border border-red-200',
                                default => 'bg-gray-100 text-gray-700 border border-gray-200',
                            };
                        @endphp

                        <tr>
                            <td class="px-6 py-6 min-w-[320px]">
                                <div class="flex items-center gap-4">
                                    <div class="w-16 h-16 rounded-md overflow-hidden bg-gray-100 border flex-shrink-0">
                                        @if($avatar)
                                            <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="avatar">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-gray-400">
                                                <i class="bi bi-person-circle text-4xl"></i>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="min-w-0">
                                        <div class="font-bold text-base text-gray-900">
                                            {{ $u?->name ?? 'N/A' }}
                                        </div>

                                        <div class="text-blue-900">
                                            {{ $phone ?: 'No phone' }}
                                        </div>

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

                                        <div class="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-700">
                                            <div class="flex items-center gap-2">
                                                <span>💰</span>
                                                <span>Balance:</span>
                                                <span class="font-bold">{{ number_format((float) $balance, 0) }}</span>
                                            </div>

                                            <div class="flex items-center gap-2">
                                                <span>💸</span>
                                                <span>Loan:</span>
                                                <span class="font-bold">{{ number_format((float) $loanShow, 0) }}</span>
                                            </div>
                                        </div>

                                        <div class="mt-2 mini-text">
                                            <div>
                                                <strong>Bank:</strong>
                                                {{ $pi?->bank_name ?? 'N/A' }}
                                            </div>
                                            <div>
                                                <strong>A/C:</strong>
                                                {{ $pi?->account_number ?? 'N/A' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td class="px-6 py-6 text-gray-700 whitespace-nowrap">
                                {{ $dateText }}
                            </td>

                            <td class="px-6 py-6 font-bold whitespace-nowrap">
                                ৳{{ number_format((float) $loan->requested_amount, 0) }}
                            </td>

                            <td class="px-6 py-6 whitespace-nowrap">
                                {{ (int) $loan->term_months }} Months
                            </td>

                            <td class="px-6 py-6 whitespace-nowrap">
                                ৳{{ number_format((float) $loan->monthly_installment, 2) }}
                            </td>

                            <td class="px-6 py-6">
                                <div class="flex flex-col gap-3 w-44">
                                    <a href="{{ route('admin.loans.show', $loan) }}"
                                       class="loan-btn bg-gray-900 text-white">
                                        <i class="bi bi-eye"></i>
                                        View Details
                                    </a>

                                    <button
                                        type="button"
                                        class="loan-btn border border-blue-700 text-blue-800 hover:bg-blue-50"
                                        onclick='openLevelModal(
                                            @json($loan->id),
                                            @json((string) $loan->fee_custom),
                                            @json($loan->message_custom ?? "")
                                        )'>
                                        <i class="bi bi-sliders"></i>
                                        Edit Level
                                    </button>

                                    @if($loan->disbursed_at === null)
                                        <button
                                            type="button"
                                            class="loan-btn bg-blue-900 text-white"
                                            onclick='openLoanEditModal(
                                                @json($loan->id),
                                                @json((int) $loan->requested_amount),
                                                @json((float) $loan->interest_rate_annual),
                                                @json((int) $loan->term_months),
                                                @json((float) $loan->monthly_installment)
                                            )'>
                                            <i class="bi bi-pencil-square"></i>
                                            Edit Loan
                                        </button>
                                    @endif

                                    <button
                                        type="button"
                                        class="loan-btn bg-[#0f5f2d] text-white"
                                        onclick='openBankEditModal(
                                            @json(route("admin.loans.updateBankInfo", $loan)),
                                            @json($pi?->account_holder_name ?? ""),
                                            @json($pi?->bank_name ?? ""),
                                            @json($pi?->account_number ?? ""),
                                            @json($pi?->branch_name ?? "")
                                        )'>
                                        <i class="bi bi-bank"></i>
                                        Bank Edit
                                    </button>

                                    <a href="{{ route('admin.loans.certificate', $loan) }}"
                                       class="loan-btn border border-blue-700 text-blue-800 hover:bg-blue-50">
                                        <i class="bi bi-file-earmark-text"></i>
                                        Certificate
                                    </a>

                                    @if($loan->status === 'approved')
                                        <a href="{{ route('admin.loans.agreements', $loan) }}"
                                           class="loan-btn bg-blue-700 text-white">
                                            <i class="bi bi-journal-check"></i>
                                            Agreements
                                        </a>
                                    @endif
                                </div>
                            </td>

                            <td class="px-6 py-6">
                                <div class="flex flex-col gap-3 w-56">

                                    <span class="status-pill {{ $statusClass }}">
                                        {{ ucfirst(str_replace('_', ' ', $loan->status)) }}
                                    </span>

                                    @if($loan->status === 'submitted')
                                        <button
                                            type="button"
                                            class="loan-btn bg-green-700 text-white"
                                            onclick="openConfirmModal('security', '{{ route('admin.loans.approveSecurity', $loan) }}')">
                                            <i class="bi bi-check-circle"></i>
                                            Approve For Security
                                        </button>

                                        <form method="POST" action="{{ route('admin.loans.reject', $loan) }}">
                                            @csrf
                                            <button type="submit"
                                                    class="loan-btn w-full bg-red-600 text-white"
                                                    onclick="return confirm('Reject this loan?')">
                                                <i class="bi bi-x-circle"></i>
                                                Reject
                                            </button>
                                        </form>
                                    @endif

                                    @if($loan->status === 'security_approved')
                                        <button
                                            type="button"
                                            class="loan-btn bg-green-700 text-white"
                                            onclick="openConfirmModal('approve', '{{ route('admin.loans.approve', $loan) }}')">
                                            <i class="bi bi-check2-circle"></i>
                                            Final Approve
                                        </button>

                                        <form method="POST" action="{{ route('admin.loans.reject', $loan) }}">
                                            @csrf
                                            <button type="submit"
                                                    class="loan-btn w-full bg-red-600 text-white"
                                                    onclick="return confirm('Reject this loan?')">
                                                <i class="bi bi-x-circle"></i>
                                                Reject
                                            </button>
                                        </form>
                                    @endif

                                    @if($loan->status === 'approved' && $loan->disbursed_at)
                                        <span class="status-pill bg-green-50 text-green-700 border border-green-200">
                                            Balance Added
                                        </span>
                                    @endif

                                    @if(!($loan->status === 'approved' && $loan->disbursed_at !== null))
                                        <form method="POST"
                                              action="{{ route('admin.loans.delete', $loan) }}"
                                              onsubmit="return confirm('Delete this loan?')">
                                            @csrf
                                            @method('DELETE')

                                            <button type="submit"
                                                    class="loan-btn w-full bg-red-700 text-white">
                                                <i class="bi bi-trash"></i>
                                                Delete
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-10 text-center text-gray-500">
                                No loans found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

            <div class="flex items-center gap-3">
                <form method="GET" action="{{ route('admin.loans.index') }}">
                    <input type="hidden" name="q" value="{{ $q ?? '' }}">

                    <select name="per"
                            onchange="this.form.submit()"
                            class="border rounded-xl px-3 py-2 bg-white">
                        @foreach([10, 20, 50, 100] as $n)
                            <option value="{{ $n }}" @selected(($per ?? 10) == $n)>{{ $n }}</option>
                        @endforeach
                    </select>
                </form>

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

@include('admin.loans.partials.modals')

<div id="bankEditModal"
     class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/50 px-4">
    <div class="w-full max-w-lg rounded-2xl bg-white shadow-xl">
        <div class="flex items-center justify-between border-b px-6 py-4">
            <h3 class="text-lg font-bold text-gray-900">
                Step 3: Bank Information Edit
            </h3>

            <button type="button"
                    onclick="closeBankEditModal()"
                    class="h-10 w-10 rounded-full border text-xl hover:bg-gray-50">
                ×
            </button>
        </div>

        <form id="bankEditForm" method="POST" action="">
            @csrf

            <div class="space-y-4 px-6 py-5">
                <div>
                    <label class="mb-2 block font-semibold text-gray-700">
                        Account Holder Name
                    </label>
                    <input type="text"
                           name="account_holder_name"
                           id="bank_account_holder_name"
                           class="bank-modal-input w-full px-4"
                           required>
                </div>

                <div>
                    <label class="mb-2 block font-semibold text-gray-700">
                        Bank Name
                    </label>
                    <input type="text"
                           name="bank_name"
                           id="bank_name"
                           class="bank-modal-input w-full px-4"
                           required>
                </div>

                <div>
                    <label class="mb-2 block font-semibold text-gray-700">
                        Account Number
                    </label>
                    <input type="text"
                           name="account_number"
                           id="bank_account_number"
                           class="bank-modal-input w-full px-4"
                           required>
                </div>

                <div>
                    <label class="mb-2 block font-semibold text-gray-700">
                        Branch Name
                    </label>
                    <input type="text"
                           name="branch_name"
                           id="bank_branch_name"
                           class="bank-modal-input w-full px-4">
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 border-t bg-gray-50 px-6 py-4">
                <button type="button"
                        onclick="closeBankEditModal()"
                        class="loan-btn border border-gray-300 bg-white px-5 text-gray-700">
                    Cancel
                </button>

                <button type="submit"
                        class="loan-btn bg-[#0f5f2d] px-5 text-white">
                    <i class="bi bi-check-circle"></i>
                    Update Bank
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openBankEditModal(actionUrl, accountHolderName, bankName, accountNumber, branchName) {
        const modal = document.getElementById('bankEditModal');
        const form = document.getElementById('bankEditForm');

        if (! modal || ! form) {
            return;
        }

        form.action = actionUrl;

        document.getElementById('bank_account_holder_name').value = accountHolderName || '';
        document.getElementById('bank_name').value = bankName || '';
        document.getElementById('bank_account_number').value = accountNumber || '';
        document.getElementById('bank_branch_name').value = branchName || '';

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeBankEditModal() {
        const modal = document.getElementById('bankEditModal');

        if (! modal) {
            return;
        }

        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            closeBankEditModal();
        }
    });

    document.addEventListener('click', function (event) {
        const modal = document.getElementById('bankEditModal');

        if (! modal || modal.classList.contains('hidden')) {
            return;
        }

        if (event.target === modal) {
            closeBankEditModal();
        }
    });
</script>

@endsection