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

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

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

    .info-box {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px;
        background: #fff;
    }

    .info-label {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 5px;
    }

    .info-value {
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        word-break: break-word;
    }

    .btn-main {
        min-height: 44px;
        border-radius: 12px;
        padding: 0 18px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: .2s;
    }

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

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

    .field-input {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 0 12px;
        outline: none;
        background: #fff;
    }

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

    .field-textarea {
        width: 100%;
        min-height: 92px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px;
        outline: none;
        background: #fff;
        resize: vertical;
    }

    .field-textarea:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 4px rgba(221, 53, 50, .10);
    }
</style>

@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' => 'bg-green-50 text-green-700 border border-green-200',
        'pending_approval' => 'bg-blue-50 text-blue-700 border border-blue-200',
        'pending_deposit', 'draft', 'summary_confirmed', 'nid_uploaded' => 'bg-yellow-50 text-yellow-700 border border-yellow-200',
        'rejected' => 'bg-red-50 text-red-700 border border-red-200',
        default => 'bg-gray-100 text-gray-700 border border-gray-200',
    };
@endphp

<div class="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">Deposit Details</h1>
            <p class="text-gray-500 mt-1">View deposit information and change status</p>
        </div>

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

            <a href="{{ route('admin.loans.index') }}"
               class="btn-main bg-gray-900 text-white">
                <i class="bi bi-list-ul"></i>
                Loan List
            </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

    {{-- Header --}}
    <div class="card p-5 mb-5">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h2 class="text-xl font-black text-gray-900">
                    Deposit #{{ $deposit->id }}
                </h2>

                <p class="text-gray-500 mt-1">
                    Submitted at {{ $deposit->created_at?->format('d M Y, h:i A') }}
                </p>
            </div>

            <div class="flex flex-wrap gap-3">
                <span class="status-pill {{ $statusClass }}">
                    Deposit: {{ ucfirst($deposit->status) }}
                </span>

                <span class="status-pill {{ $loanStatusClass }}">
                    Loan:
                    {{ $oldLoan?->status ? ucfirst(str_replace('_', ' ', $oldLoan->status)) : 'N/A' }}
                </span>
            </div>
        </div>
    </div>

    {{-- Details --}}
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-5 mb-5">

        {{-- Deposit Info --}}
        <div class="card p-5">
            <h3 class="text-lg font-black text-gray-900 mb-4">
                <i class="bi bi-piggy-bank text-[#DD3532]"></i>
                Deposit Information
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="info-box">
                    <div class="info-label">Deposit ID</div>
                    <div class="info-value">#{{ $deposit->id }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Status</div>
                    <div class="info-value">
                        <span class="status-pill {{ $statusClass }}">
                            {{ ucfirst($deposit->status) }}
                        </span>
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Method</div>
                    <div class="info-value">{{ strtoupper($deposit->method) }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Amount</div>
                    <div class="info-value text-green-700">
                        ৳{{ number_format((float) $deposit->amount, 0) }}
                    </div>
                </div>

                <div class="info-box md:col-span-2">
                    <div class="info-label">Transaction ID</div>
                    <div class="info-value">{{ $deposit->transaction_id }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Created At</div>
                    <div class="info-value">
                        {{ $deposit->created_at?->format('d M Y, h:i A') }}
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Updated At</div>
                    <div class="info-value">
                        {{ $deposit->updated_at?->format('d M Y, h:i A') }}
                    </div>
                </div>
            </div>
        </div>

        {{-- User Loan Info --}}
        <div class="card p-5">
            <h3 class="text-lg font-black text-gray-900 mb-4">
                <i class="bi bi-person text-[#DD3532]"></i>
                User & Loan Information
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="info-box">
                    <div class="info-label">User Name</div>
                    <div class="info-value">{{ $user?->name ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Phone</div>
                    <div class="info-value">{{ $user?->phone ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Email</div>
                    <div class="info-value">{{ $user?->email ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">User Balance</div>
                    <div class="info-value">
                        ৳{{ number_format((float) ($user?->balance ?? 0), 0) }}
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Loan ID</div>
                    <div class="info-value">#{{ $oldLoan?->id ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Loan Amount</div>
                    <div class="info-value">
                        ৳{{ number_format((float) ($oldLoan?->amount ?? 0), 0) }}
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Loan Tenure</div>
                    <div class="info-value">
                        {{ $oldLoan?->tenure_months ?? 0 }} Months
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Monthly Installment</div>
                    <div class="info-value">
                        ৳{{ number_format((float) ($oldLoan?->monthly_installment ?? 0), 0) }}
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Total Payable</div>
                    <div class="info-value">
                        ৳{{ number_format((float) ($oldLoan?->total_payable ?? 0), 0) }}
                    </div>
                </div>

                <div class="info-box">
                    <div class="info-label">Loan Created</div>
                    <div class="info-value">
                        {{ $oldLoan?->created_at?->format('d M Y, h:i A') ?? 'N/A' }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Status Change --}}
    <div class="card p-5">
        <h3 class="text-lg font-black text-gray-900 mb-4">
            <i class="bi bi-gear text-[#DD3532]"></i>
            Status Change Options
        </h3>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">

            {{-- Approve --}}
            <form method="POST"
                  action="{{ route('admin.loan-deposits.approve', $deposit) }}"
                  class="info-box">
                @csrf

                <div class="font-black text-gray-900 mb-2">
                    Approve Deposit
                </div>

                <p class="text-sm text-gray-500 mb-4">
                    Deposit approve করলে deposit status approved হবে এবং loan status pending approval হবে।
                </p>

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

            {{-- Reject --}}
            <form method="POST"
                  action="{{ route('admin.loan-deposits.reject', $deposit) }}"
                  class="info-box">
                @csrf

                <div class="font-black text-gray-900 mb-2">
                    Reject Deposit
                </div>

                <p class="text-sm text-gray-500 mb-3">
                    Reject করলে deposit rejected হবে এবং loan status pending deposit হবে।
                </p>

                <textarea name="reason"
                          class="field-textarea mb-3"
                          placeholder="Reject reason optional"></textarea>

                <button type="submit"
                        class="btn-main w-full bg-red-600 text-white"
                        onclick="return confirm('Reject this deposit?')">
                    <i class="bi bi-x-circle"></i>
                    Reject Deposit
                </button>
            </form>

            {{-- Manual Status --}}
            <form method="POST"
                  action="{{ route('admin.loan-deposits.status', $deposit) }}"
                  class="info-box">
                @csrf

                <div class="font-black text-gray-900 mb-2">
                    Manual Status Update
                </div>

                <p class="text-sm text-gray-500 mb-3">
                    দরকার হলে status manually change করুন।
                </p>

                <select name="status" class="field-input mb-3">
                    <option value="pending" @selected($deposit->status === 'pending')>Pending</option>
                    <option value="approved" @selected($deposit->status === 'approved')>Approved</option>
                    <option value="rejected" @selected($deposit->status === 'rejected')>Rejected</option>
                </select>

                <textarea name="reason"
                          class="field-textarea mb-3"
                          placeholder="Reason optional"></textarea>

                <button type="submit"
                        class="btn-main w-full bg-gray-900 text-white">
                    <i class="bi bi-arrow-repeat"></i>
                    Update Status
                </button>
            </form>
        </div>
    </div>
</div>

@endsection