@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;
        --line: #e5e7eb;
    }

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

    .details-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: 700;
        color: #0f172a;
        word-break: break-word;
    }

    .section-title {
        font-size: 18px;
        font-weight: 800;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .section-title i {
        color: var(--brand);
    }

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

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

    .notice-box {
        border-radius: 14px;
        padding: 14px 16px;
        line-height: 1.6;
    }
</style>

@php
    $u = $loan->user;
    $pi = $u?->personalInformation;
    $plan = $loan->loanPlan;

    $avatar = $pi?->selfie_path ? asset('storage/' . $pi->selfie_path) : null;
    $phone = trim(($u?->country_code ?? '') . ' ' . ($u?->phone ?? ''));

    $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',
    };

    $totalPayable = $loan->total_payable ?? ((float) $loan->monthly_installment * (int) $loan->term_months);

    $docs = [
        'ID Front' => $pi?->id_front_path,
        'ID Back' => $pi?->id_back_path,
        'Selfie' => $pi?->selfie_path,
        'Signature' => $pi?->signature_path,
    ];
@endphp

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

    {{-- Header --}}
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5">
        <div>
            <h1 class="text-2xl font-black text-gray-900">Loan Details</h1>
            <p class="text-gray-500 mt-1">View complete Erin loan and user information</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
            </a>

            @if($loan->disbursed_at === null)
                <button
                    type="button"
                    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)
                    )'
                    class="btn-main bg-blue-700 text-white">
                    <i class="bi bi-pencil-square"></i>
                    Edit Loan
                </button>
            @endif

            <button
                type="button"
                onclick='openLevelModal(
                    @json($loan->id),
                    @json((string) $loan->fee_custom),
                    @json($loan->message_custom ?? "")
                )'
                class="btn-main bg-gray-900 text-white">
                <i class="bi bi-sliders"></i>
                Edit Level
            </button>

            <a href="{{ route('admin.loan-deposits.index') }}"
               class="btn-main bg-[#DD3532] text-white">
                <i class="bi bi-piggy-bank"></i>
                Deposit Requests
            </a>
        </div>
    </div>

    {{-- Alerts --}}
    @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

    {{-- User Summary --}}
    <div class="details-card p-5 mb-5">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
            <div class="flex items-center gap-4">
                <div class="w-20 h-20 rounded-xl overflow-hidden bg-gray-100 border flex-shrink-0">
                    @if($avatar)
                        <img src="{{ $avatar }}" class="w-full h-full object-cover" alt="User Photo">
                    @else
                        <div class="w-full h-full flex items-center justify-center text-gray-400">
                            <i class="bi bi-person-circle text-5xl"></i>
                        </div>
                    @endif
                </div>

                <div>
                    <h2 class="text-xl font-black text-gray-900">
                        {{ $u?->name ?? 'N/A' }}
                    </h2>

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

                    <div class="text-gray-500 text-sm mt-1">
                        {{ $u?->email ?? 'No email' }}
                    </div>
                </div>
            </div>

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

                <span class="status-pill bg-gray-100 text-gray-700 border border-gray-200">
                    Loan ID: #{{ $loan->id }}
                </span>

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

    {{-- Loan Information --}}
    <div class="details-card p-5 mb-5">
        <div class="section-title mb-4">
            <i class="bi bi-cash-coin"></i>
            Loan Information
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
            <div class="info-box">
                <div class="info-label">Requested Amount</div>
                <div class="info-value">৳{{ number_format((float) $loan->requested_amount, 0) }}</div>
            </div>

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

            <div class="info-box">
                <div class="info-label">Duration</div>
                <div class="info-value">{{ (int) $loan->term_months }} Months</div>
            </div>

            <div class="info-box">
                <div class="info-label">Interest Rate</div>
                <div class="info-value">{{ number_format((float) $loan->interest_rate_annual, 2) }}%</div>
            </div>

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

            <div class="info-box">
                <div class="info-label">Custom Fee</div>
                <div class="info-value">৳{{ number_format((float) $loan->fee_custom, 2) }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Plan</div>
                <div class="info-value">
                    @if($plan)
                        {{ $plan->term_months }} Months / ৳{{ number_format((float) $plan->amount, 0) }}
                    @else
                        N/A
                    @endif
                </div>
            </div>

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

        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
            <div class="info-box">
                <div class="info-label">Submitted At</div>
                <div class="info-value">
                    {{ $loan->submitted_at ? $loan->submitted_at->format('d M Y, h:i A') : 'N/A' }}
                </div>
            </div>

            <div class="info-box">
                <div class="info-label">Security Approved At</div>
                <div class="info-value">
                    {{ $loan->security_approved_at ? $loan->security_approved_at->format('d M Y, h:i A') : 'N/A' }}
                </div>
            </div>

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

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

        @if($loan->message_custom)
            <div class="mt-4 notice-box bg-orange-50 border border-orange-200 text-orange-800">
                <div class="font-black mb-1">Custom Message</div>
                <div>{{ $loan->message_custom }}</div>
            </div>
        @endif

        @if($loan->notes)
            <div class="mt-4 notice-box bg-red-50 border border-red-200 text-red-800">
                <div class="font-black mb-1">Admin Notes</div>
                <div>{{ $loan->notes }}</div>
            </div>
        @endif
    </div>

    {{-- Personal Info --}}
    <div class="details-card p-5 mb-5">
        <div class="section-title mb-4">
            <i class="bi bi-person-lines-fill"></i>
            User Information
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            <div class="info-box">
                <div class="info-label">Full Name</div>
                <div class="info-value">{{ $pi?->full_name ?? $u?->name ?? 'N/A' }}</div>
            </div>

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

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

            <div class="info-box">
                <div class="info-label">Occupation</div>
                <div class="info-value">{{ $pi?->occupation ?? 'N/A' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Monthly Income</div>
                <div class="info-value">
                    {{ $pi?->monthly_income ? '৳' . number_format((float) $pi->monthly_income, 0) : 'N/A' }}
                </div>
            </div>

            <div class="info-box">
                <div class="info-label">Loan Purpose</div>
                <div class="info-value">{{ $pi?->loan_purpose ?? 'N/A' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Education Level</div>
                <div class="info-value">{{ $pi?->education_level ?? 'N/A' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Family Members</div>
                <div class="info-value">{{ $pi?->family_members_count ?? 'N/A' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Expat</div>
                <div class="info-value">{{ $pi?->is_expat ? 'Yes' : 'No' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Has House</div>
                <div class="info-value">{{ $pi?->has_house ? 'Yes' : 'No' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Has Car</div>
                <div class="info-value">{{ $pi?->has_car ? 'Yes' : 'No' }}</div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="info-box">
                <div class="info-label">Present Address</div>
                <div class="info-value">{{ $pi?->present_address ?? 'N/A' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">Permanent Address</div>
                <div class="info-value">{{ $pi?->permanent_address ?? 'N/A' }}</div>
            </div>
        </div>
    </div>

    {{-- Nominee + Bank --}}
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-5 mb-5">
        <div class="details-card p-5">
            <div class="section-title mb-4">
                <i class="bi bi-people"></i>
                Nominee Information
            </div>

            <div class="grid grid-cols-1 gap-4">
                <div class="info-box">
                    <div class="info-label">Nominee Name</div>
                    <div class="info-value">{{ $pi?->nominee_name ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Relation</div>
                    <div class="info-value">{{ $pi?->nominee_relation ?? 'N/A' }}</div>
                </div>

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

        <div class="details-card p-5">
            <div class="section-title mb-4">
                <i class="bi bi-bank"></i>
                Bank Information
            </div>

            <div class="grid grid-cols-1 gap-4">
                <div class="info-box">
                    <div class="info-label">Account Holder Name</div>
                    <div class="info-value">{{ $pi?->account_holder_name ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Bank Name</div>
                    <div class="info-value">{{ $pi?->bank_name ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Account Number</div>
                    <div class="info-value">{{ $pi?->account_number ?? 'N/A' }}</div>
                </div>

                <div class="info-box">
                    <div class="info-label">Branch Name</div>
                    <div class="info-value">{{ $pi?->branch_name ?? 'N/A' }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Verification --}}
    <div class="details-card p-5 mb-5">
        <div class="section-title mb-4">
            <i class="bi bi-shield-check"></i>
            Verification Information
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-4">
            <div class="info-box">
                <div class="info-label">ID Name</div>
                <div class="info-value">{{ $pi?->id_name ?? 'N/A' }}</div>
            </div>

            <div class="info-box">
                <div class="info-label">ID Number</div>
                <div class="info-value">{{ $pi?->id_number ?? 'N/A' }}</div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
            @foreach($docs as $label => $path)
                <div class="info-box">
                    <div class="info-label mb-2">{{ $label }}</div>

                    @if($path)
                        <a href="{{ asset('storage/' . $path) }}" target="_blank">
                            <img src="{{ asset('storage/' . $path) }}"
                                 class="w-full h-40 object-cover rounded-xl border"
                                 alt="{{ $label }}">
                        </a>

                        <a href="{{ asset('storage/' . $path) }}"
                           target="_blank"
                           class="mt-3 btn-main bg-gray-900 text-white w-full">
                            <i class="bi bi-eye"></i>
                            View
                        </a>
                    @else
                        <div class="h-40 rounded-xl border bg-gray-50 flex flex-col items-center justify-center text-gray-400">
                            <i class="bi bi-image text-3xl"></i>
                            <span class="mt-2 text-sm">No file</span>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    {{-- Actions --}}
    <div class="details-card p-5">
        <div class="section-title mb-4">
            <i class="bi bi-lightning-charge"></i>
            Loan Actions
        </div>

        <div class="flex flex-wrap gap-3">
            @if($loan->status === 'submitted')
                <button
                    type="button"
                    class="btn-main 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="btn-main 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="btn-main 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="btn-main bg-red-600 text-white"
                            onclick="return confirm('Reject this loan?')">
                        <i class="bi bi-x-circle"></i>
                        Reject
                    </button>
                </form>
            @endif

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

            @if($loan->status === 'approved')
                <a href="{{ route('admin.loans.agreements', $loan) }}"
                   class="btn-main bg-blue-900 text-white">
                    <i class="bi bi-journal-check"></i>
                    Agreements
                </a>
            @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="btn-main bg-red-700 text-white">
                        <i class="bi bi-trash"></i>
                        Delete
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>

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

@endsection