@extends('layouts.admin')

@section('title', 'Approvals')

@push('styles')
<style>
    .approval-shell {
        min-height: 100vh;
        background: #f1f5f9;
    }

    .approval-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: 18rem;
        overflow-y: auto;
        border-right: 1px solid rgba(2, 43, 16, 0.12);
        background: #022b10;
        color: #ffffff;
    }

    .approval-main {
        min-height: 100vh;
    }

    .approval-table {
        min-width: 980px;
        width: 100%;
        border-collapse: collapse;
    }

    .approval-table th {
        background: #f8fafc;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
        padding: 0.85rem 1rem;
        text-align: left;
        text-transform: uppercase;
    }

    .approval-table td {
        border-top: 1px solid #e2e8f0;
        color: #475569;
        font-size: 0.86rem;
        font-weight: 600;
        padding: 1rem;
        vertical-align: top;
    }

    @media (max-width: 1279px) {
        .approval-sidebar {
            display: none;
        }
    }

    @media (min-width: 1280px) {
        .approval-main {
            margin-left: 18rem;
        }
    }
</style>
@endpush

@section('content')
@php
    $paymentRequests = $paymentRequests ?? [];
    $withdrawalRequests = $withdrawalRequests ?? [];

    $paymentRows = collect($paymentRequests)->map(function ($payment) {
        $status = $payment['status'] ?? 'Pending Payment Review';
        $type = ($payment['type'] ?? 'plan_payment') === 'wallet_deposit' ? 'Wallet Deposit' : 'Plan Payment';

        return [
            'kind' => 'payment',
            'key' => adminPaymentKey($payment),
            'type' => $type,
            'user' => $payment['user_name'] ?? 'Not provided',
            'email' => $payment['user_email'] ?? 'Not provided',
            'title' => $payment['name'] ?? 'Selected Plan',
            'amount' => portalMoneyAmount($payment['amount'] ?? 0),
            'method' => $payment['payment_method'] ?? 'Not selected',
            'status' => $status,
            'date' => $payment['submitted_at'] ?? '-',
            'reviewed' => $payment['reviewed_at'] ?? '-',
            'note' => $payment['note'] ?? '',
            'admin_note' => $payment['admin_note'] ?? '',
        ];
    });

    $withdrawalRows = collect($withdrawalRequests)->map(function ($withdrawal) {
        $status = $withdrawal['status'] ?? 'Pending Withdrawal Review';

        return [
            'kind' => 'withdrawal',
            'key' => adminWithdrawalKey($withdrawal),
            'type' => 'Withdrawal',
            'user' => $withdrawal['user_name'] ?? 'Not provided',
            'email' => $withdrawal['user_email'] ?? 'Not provided',
            'title' => $withdrawal['account_details'] ?? 'Withdrawal Details',
            'amount' => portalMoneyAmount($withdrawal['amount'] ?? 0),
            'method' => $withdrawal['withdrawal_method'] ?? 'Not selected',
            'status' => $status,
            'date' => $withdrawal['submitted_at'] ?? '-',
            'reviewed' => $withdrawal['reviewed_at'] ?? '-',
            'note' => $withdrawal['note'] ?? '',
            'admin_note' => $withdrawal['admin_note'] ?? '',
        ];
    });

    $approvalRows = $paymentRows->merge($withdrawalRows)->values();
    $pendingRows = $approvalRows->filter(fn ($row) => in_array($row['status'], ['Pending Payment Review', 'Pending Withdrawal Review'], true))->values();
    $approvedRows = $approvalRows->filter(fn ($row) => in_array($row['status'], ['Deposit Approved', 'Payment Completed', 'Withdrawal Paid'], true))->values();
@endphp

<div class="approval-shell">
    <div class="admin-sidebar-backdrop" data-admin-backdrop></div>

    <aside class="approval-sidebar" data-admin-sidebar>
        <div class="border-b border-white/10 bg-primary-900 px-6 py-5">
            <a href="{{ url('/admin/dashboard') }}" class="flex items-center gap-3">
                <span class="flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-gold-300">
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2 2 7l10 5 10-5-10-5ZM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                </span>
                <span>
                    <span class="block text-sm font-extrabold leading-tight">CROSBY FARM</span>
                    <span class="text-xs text-primary-200">Admin Approvals</span>
                </span>
            </a>
        </div>
        <button type="button" class="admin-menu-toggle admin-sidebar-close" aria-label="Close admin menu" aria-expanded="false" data-admin-menu-toggle>
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12"/>
            </svg>
        </button>
        <nav class="space-y-2 px-4 py-5">
            <a href="{{ url('/admin/dashboard') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white">
                <span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span>
                <span>Dashboard</span>
            </a>
            <a href="{{ url('/admin/users') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white">
                <span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span>
                <span>User Approval</span>
            </a>
            <a href="{{ url('/admin/approvals') }}" class="flex items-center gap-3 rounded-lg bg-white/15 px-4 py-3 text-sm font-bold text-white">
                <span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span>
                <span>Approvals</span>
            </a>
            <a href="{{ url('/admin/withdrawals') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white">
                <span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span>
                <span>Withdrawals</span>
            </a>
            <a href="{{ url('/admin/videos') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white">
                <span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span>
                <span>Videos</span>
            </a>
            <a href="{{ url('/admin/admins') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white">
                <span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span>
                <span>Admins & Roles</span>
            </a>
            <a href="{{ url('/admin/contacts') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white">
                <span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span>
                <span>Contact Messages</span>
            </a>
            <a href="{{ url('/admin/logout') }}" class="mt-4 flex items-center justify-center rounded-lg bg-gold-400 px-4 py-3 text-sm font-extrabold text-primary-900 transition hover:bg-gold-300">Logout</a>
        </nav>
    </aside>

    <main class="approval-main" data-admin-main>
        <header class="border-b border-slate-200 bg-white px-4 py-5 sm:px-6">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex items-start gap-3">
                    <button type="button" class="admin-menu-toggle" aria-label="Open admin menu" aria-expanded="false" data-admin-menu-toggle>
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16"/>
                        </svg>
                    </button>
                    <div>
                        <p class="text-sm font-bold uppercase tracking-wide text-primary-600">Administration</p>
                        <h1 class="text-2xl font-extrabold text-slate-900 md:text-3xl">Approval Requests</h1>
                        <p class="mt-1 text-sm font-semibold text-slate-500">Review pending requests and monitor approved deposits, payments, and withdrawals.</p>
                    </div>
                </div>
            </div>
        </header>

        <section class="px-4 py-6 sm:px-6">
            @if (session('status'))
                <div class="mb-6 rounded-lg border border-primary-200 bg-primary-50 px-4 py-3 text-sm font-bold text-primary-700">
                    {{ session('status') }}
                </div>
            @endif

            <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <p class="text-sm font-semibold text-slate-500">Pending Approval</p>
                    <strong class="mt-3 block text-3xl font-extrabold text-slate-900">{{ $pendingRows->count() }}</strong>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <p class="text-sm font-semibold text-slate-500">Approved / Paid</p>
                    <strong class="mt-3 block text-3xl font-extrabold text-slate-900">{{ $approvedRows->count() }}</strong>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <p class="text-sm font-semibold text-slate-500">Pending Amount</p>
                    <strong class="mt-3 block text-3xl font-extrabold text-slate-900">${{ number_format($pendingRows->sum('amount'), 2) }}</strong>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                    <p class="text-sm font-semibold text-slate-500">Approved Amount</p>
                    <strong class="mt-3 block text-3xl font-extrabold text-slate-900">${{ number_format($approvedRows->sum('amount'), 2) }}</strong>
                </div>
            </div>

            <section class="mt-6 rounded-lg border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-200 px-5 py-4">
                    <h2 class="text-lg font-extrabold text-slate-900">Pending Approval</h2>
                    <p class="mt-1 text-sm font-semibold text-slate-500">All requests waiting for admin approval, payment, or rejection.</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="approval-table">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Type</th>
                                <th>Details</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($pendingRows as $row)
                                <tr>
                                    <td>
                                        <strong class="block text-slate-900">{{ $row['user'] }}</strong>
                                        <span class="block text-xs text-slate-500">{{ $row['email'] }}</span>
                                    </td>
                                    <td>{{ $row['type'] }}</td>
                                    <td>
                                        <strong class="block text-slate-800">{{ $row['method'] }}</strong>
                                        <span class="block max-w-sm text-xs leading-5 text-slate-500">{{ $row['title'] }}</span>
                                    </td>
                                    <td class="font-extrabold text-slate-900">${{ number_format($row['amount'], 2) }}</td>
                                    <td><span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-extrabold text-amber-700">{{ $row['status'] }}</span></td>
                                    <td>{{ $row['date'] }}</td>
                                    <td>
                                        @if ($row['kind'] === 'payment')
                                            <form action="{{ url('/admin/payments/' . $row['key'] . '/status') }}" method="POST" class="space-y-2">
                                                @csrf
                                                <input type="hidden" name="redirect_to" value="/admin/approvals">
                                                <select name="status" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-bold text-slate-700">
                                                    @foreach (['Pending Payment Review', 'Deposit Approved', 'Payment Completed', 'Deposit Rejected'] as $option)
                                                        <option value="{{ $option }}" @selected($row['status'] === $option)>{{ $option }}</option>
                                                    @endforeach
                                                </select>
                                                <input name="admin_note" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold" placeholder="Admin note">
                                                <button class="w-full rounded-lg bg-primary-600 px-3 py-2 text-xs font-extrabold text-white">Update</button>
                                            </form>
                                        @else
                                            <form action="{{ url('/admin/withdrawals/' . $row['key'] . '/status') }}" method="POST" class="space-y-2">
                                                @csrf
                                                <input type="hidden" name="redirect_to" value="/admin/approvals">
                                                <select name="status" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-bold text-slate-700">
                                                    @foreach (['Pending Withdrawal Review', 'Withdrawal Paid', 'Withdrawal Rejected'] as $option)
                                                        <option value="{{ $option }}" @selected($row['status'] === $option)>{{ $option }}</option>
                                                    @endforeach
                                                </select>
                                                <input name="admin_note" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-semibold" placeholder="Admin note">
                                                <button class="w-full rounded-lg bg-primary-600 px-3 py-2 text-xs font-extrabold text-white">Update</button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-slate-500">No pending approval requests.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="mt-6 rounded-lg border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-200 px-5 py-4">
                    <h2 class="text-lg font-extrabold text-slate-900">Approved And Paid</h2>
                    <p class="mt-1 text-sm font-semibold text-slate-500">All completed approvals and paid withdrawals.</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="approval-table">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Type</th>
                                <th>Details</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Submitted</th>
                                <th>Reviewed</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($approvedRows as $row)
                                @php
                                    $badgeClass = in_array($row['status'], ['Deposit Approved', 'Payment Completed', 'Withdrawal Paid'], true)
                                        ? 'bg-emerald-50 text-emerald-700'
                                        : 'bg-slate-100 text-slate-700';
                                @endphp
                                <tr>
                                    <td>
                                        <strong class="block text-slate-900">{{ $row['user'] }}</strong>
                                        <span class="block text-xs text-slate-500">{{ $row['email'] }}</span>
                                    </td>
                                    <td>{{ $row['type'] }}</td>
                                    <td>
                                        <strong class="block text-slate-800">{{ $row['method'] }}</strong>
                                        <span class="block max-w-sm text-xs leading-5 text-slate-500">{{ $row['title'] }}</span>
                                    </td>
                                    <td class="font-extrabold text-slate-900">${{ number_format($row['amount'], 2) }}</td>
                                    <td><span class="rounded-full px-3 py-1 text-xs font-extrabold {{ $badgeClass }}">{{ $row['status'] }}</span></td>
                                    <td>{{ $row['date'] }}</td>
                                    <td>{{ $row['reviewed'] }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-slate-500">No approved requests yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>
        </section>
    </main>
</div>
@endsection