@extends('admin.layouts.app')

@section('admin-content')
    <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Bookings</h1>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Filter by payment status and stylist.</p>
        </div>
    </div>

    @if (session('status'))
        <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200">
            {{ session('status') }}
        </div>
    @endif

    <form method="GET" action="{{ route('admin.bookings.index') }}" class="mt-6 rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            <div class="space-y-2">
                <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="payment_status">Payment Status</label>
                <select
                    id="payment_status"
                    name="payment_status"
                    class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                >
                    <option value="">All</option>
                    @foreach (['Pending', 'Paid', 'Failed'] as $status)
                        <option value="{{ $status }}" {{ ($filters['payment_status'] ?? '') === $status ? 'selected' : '' }}>
                            {{ $status }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="space-y-2">
                <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="stylist_id">Stylist</label>
                <select
                    id="stylist_id"
                    name="stylist_id"
                    class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                >
                    <option value="">All</option>
                    @foreach ($stylists as $stylist)
                        <option value="{{ $stylist->id }}" {{ (string)($filters['stylist_id'] ?? '') === (string) $stylist->id ? 'selected' : '' }}>
                            {{ $stylist->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="flex items-center gap-3 md:justify-end">
                <button type="submit" class="rounded-xl bg-[#FF2D20] px-5 py-2.5 text-sm font-semibold text-white hover:opacity-95">
                    Filter
                </button>
                <a href="{{ route('admin.bookings.index') }}" class="rounded-xl border border-zinc-200 px-5 py-2.5 text-sm font-semibold text-zinc-800 hover:bg-zinc-100 dark:border-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-900">
                    Reset
                </a>
            </div>
        </div>
    </form>

    <div class="mt-6 rounded-2xl border border-zinc-200 bg-white p-0 overflow-hidden dark:border-zinc-800 dark:bg-zinc-950">
        <div class="overflow-x-auto">
            <table class="min-w-[980px] w-full border-collapse">
                <thead class="bg-zinc-50 dark:bg-zinc-900">
                    <tr class="text-left text-xs font-semibold text-zinc-600 dark:text-zinc-300">
                        <th class="px-4 py-3">Booking</th>
                        <th class="px-4 py-3">Appointment</th>
                        <th class="px-4 py-3">Stylist</th>
                        <th class="px-4 py-3">Client</th>
                        <th class="px-4 py-3">Deposit</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Gateway</th>
                        <th class="px-4 py-3">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
                    @foreach ($bookings as $booking)
                        <tr class="text-sm">
                            <td class="px-4 py-3 font-medium">{{ $booking->id }}</td>
                            <td class="px-4 py-3">
                                <div>{{ optional($booking->appointment_starts_at)->format('Y-m-d H:i') }}</div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="font-medium">{{ $booking->stylist?->name ?? 'N/A' }}</div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="font-medium">{{ $booking->full_name }}</div>
                                <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ $booking->whatsapp_number }}</div>
                            </td>
                            <td class="px-4 py-3">
                                {{ number_format((float) $booking->deposit_amount, 2, '.', ',') }} {{ $booking->currency ?? 'TND' }}
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold
                                    {{ $booking->payment_status === 'Paid' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/20 dark:text-emerald-200'
                                    : ($booking->payment_status === 'Pending' ? 'bg-amber-50 text-amber-700 dark:bg-amber-950/20 dark:text-amber-200'
                                    : 'bg-rose-50 text-rose-700 dark:bg-rose-950/20 dark:text-rose-200') }}">
                                    {{ $booking->payment_status }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="text-xs text-zinc-600 dark:text-zinc-300">{{ $booking->payment_gateway ?? '-' }}</div>
                            </td>
                            <td class="px-4 py-3">
                                @if ($booking->payment_status !== 'Paid')
                                    <form method="POST" action="{{ route('admin.bookings.manual-confirm', $booking) }}">
                                        @csrf
                                        <button
                                            type="submit"
                                            class="rounded-xl bg-[#FF2D20] px-3 py-2 text-xs font-semibold text-white hover:opacity-95"
                                        >
                                            Manual Confirm
                                        </button>
                                    </form>
                                @else
                                    <div class="text-xs text-zinc-500 dark:text-zinc-400">—</div>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="p-4">
            {{ $bookings->links() }}
        </div>
    </div>
@endsection