@extends('layouts.admin')

@section('title', 'Offline Payments')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <!-- Header -->
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-[#0c2340]">Offline Payments</h1>
            <p class="text-[#0c2340]/70 mt-2">Review and manage offline payment submissions</p>
        </div>
        <a href="{{ route('admin.offline-payments.settings') }}" class="px-6 py-2 bg-[#c9a84c] text-[#0c2340] rounded-lg hover:bg-[#0c2340] hover:text-white transition">
            Settings
        </a>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
            <p class="text-[#0c2340]/70 text-sm">Pending</p>
            <p class="text-3xl font-bold text-yellow-600">{{ $stats['pending'] }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
            <p class="text-[#0c2340]/70 text-sm">Approved</p>
            <p class="text-3xl font-bold text-green-600">{{ $stats['approved'] }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
            <p class="text-[#0c2340]/70 text-sm">Rejected</p>
            <p class="text-3xl font-bold text-red-600">{{ $stats['rejected'] }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
            <p class="text-[#0c2340]/70 text-sm">Total</p>
            <p class="text-3xl font-bold text-blue-600">{{ $stats['total'] }}</p>
        </div>
    </div>

    <!-- Offline Payments Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="w-full">
            <thead class="bg-[#0c2340] text-white">
                <tr>
                    <th class="px-6 py-3 text-left text-sm font-semibold">Booking Reference</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold">Customer</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold">Amount</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold">Method</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold">Status</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold">Submitted</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($offlinePayments as $payment)
                    <tr class="hover:bg-[#f5f1ea] transition">
                        <td class="px-6 py-4">
                            <a href="{{ route('admin.offline-payments.detail', $payment->id) }}" class="text-[#c9a84c] hover:underline font-semibold">
                                {{ $payment->booking->booking_reference }}
                            </a>
                        </td>
                        <td class="px-6 py-4">
                            <div>
                                <p class="font-semibold text-[#0c2340]">{{ $payment->user->name ?? $payment->booking->full_name }}</p>
                                <p class="text-[#0c2340]/70 text-sm">{{ $payment->booking->email }}</p>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <p class="font-semibold">{{ $payment->formatted_amount }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-[#0c2340]/70">{{ $payment->payment_method_label }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                @if($payment->status === 'pending') bg-yellow-100 text-yellow-800
                                @elseif($payment->status === 'approved') bg-green-100 text-green-800
                                @else bg-red-100 text-red-800
                                @endif">
                                {{ ucfirst($payment->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-[#0c2340]/70">
                            {{ $payment->submitted_at->format('d M Y, H:i') }}
                        </td>
                        <td class="px-6 py-4">
                            <a href="{{ route('admin.offline-payments.detail', $payment->id) }}" class="text-[#c9a84c] hover:text-[#0c2340] font-semibold">
                                Review
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-6 py-8 text-center text-[#0c2340]/70">
                            No offline payments found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $offlinePayments->links() }}
    </div>
</div>
@endsection
