@extends('admin.layout')

@section('title', 'Danh sách đặt chỗ')

@section('content')
    <h1 class="text-xl font-bold text-stone-900">Danh sách đặt chỗ</h1>

    <form method="GET" class="mt-4 flex flex-wrap items-end gap-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
        <div class="w-40">
            <label for="status" class="block text-sm font-medium text-stone-700">Trạng thái</label>
            <select name="status" id="status"
                class="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500">
                <option value="" {{ request('status', '') === '' ? 'selected' : '' }}>Tất cả</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Chờ xử lý</option>
                <option value="handled" {{ request('status') === 'handled' ? 'selected' : '' }}>Đã xử lý</option>
            </select>
        </div>

        <div class="w-40">
            <label for="date" class="block text-sm font-medium text-stone-700">Ngày</label>
            <input type="date" name="date" id="date" value="{{ request('date') }}"
                class="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500">
        </div>

        <div class="w-40">
            <label for="time" class="block text-sm font-medium text-stone-700">Khung giờ</label>
            <select name="time" id="time"
                class="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500">
                <option value="">Tất cả</option>
                @foreach (\App\Support\TimeSlots::OPTIONS as $value => $label)
                    <option value="{{ $value }}" {{ request('time') === $value ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>

        <button type="submit" class="rounded-lg bg-amber-600 px-4 py-2.5 font-semibold text-white transition hover:bg-amber-700">
            Tìm kiếm
        </button>

        @if (request('status') || request('date') || request('time'))
            <a href="{{ route('admin.dashboard') }}" class="text-sm font-medium text-stone-500 hover:underline">Xóa bộ lọc</a>
        @endif
    </form>

    <div class="mt-4 flex justify-end gap-3">
        <form method="POST" action="{{ route('admin.bookings.mark-all-handled') }}"
            onsubmit="return confirm('Đánh dấu TẤT CẢ đặt chỗ đang chờ xử lý thành đã xử lý?');">
            @csrf
            @method('PATCH')
            <button type="submit" class="rounded-lg border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800 hover:bg-amber-100">
                Đánh dấu tất cả đã xử lý
            </button>
        </form>

        <button type="button" onclick="location.reload()"
            class="flex items-center gap-2 rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
                <path d="M21 12a9 9 0 1 1-2.64-6.36"></path>
                <polyline points="21 3 21 9 15 9"></polyline>
            </svg>
            Tải lại trang
        </button>
    </div>

    <div class="mt-4 hidden overflow-x-auto rounded-2xl border border-stone-200 bg-white shadow-sm md:block">
        <table class="w-full min-w-[720px] text-left text-sm">
            <thead class="border-b border-stone-200 bg-stone-50 text-stone-600">
                <tr>
                    <th class="px-4 py-3 font-medium">ID</th>
                    <th class="px-4 py-3 font-medium">Họ tên</th>
                    <th class="px-4 py-3 font-medium">Số điện thoại</th>
                    <th class="px-4 py-3 font-medium">Email</th>
                    <th class="px-4 py-3 font-medium">Ngày &amp; Giờ</th>
                    <th class="px-4 py-3 font-medium">Số khách</th>
                    <th class="px-4 py-3 font-medium">Trạng thái</th>
                    <th class="px-4 py-3 font-medium">Đặt lúc</th>
                    <th class="px-4 py-3 font-medium"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-stone-100">
                @forelse ($bookings as $booking)
                    <tr>
                        <td class="px-4 py-3">#{{ $booking->id }}</td>
                        <td class="px-4 py-3">{{ $booking->name }}</td>
                        <td class="px-4 py-3">{{ $booking->phone }}</td>
                        <td class="px-4 py-3">{{ $booking->email }}</td>
                        <td class="px-4 py-3">{{ $booking->booking_at->format('d/m/Y H:i') }}</td>
                        <td class="px-4 py-3">{{ $booking->guests }}</td>
                        <td class="px-4 py-3">
                            @if ($booking->is_handled)
                                <span class="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">Đã xử lý</span>
                            @else
                                <span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">Chờ xử lý</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-stone-500">{{ $booking->created_at->diffForHumans() }}</td>
                        <td class="px-4 py-3 text-right">
                            <a href="{{ route('admin.bookings.show', $booking) }}"
                                data-view-booking
                                data-id="{{ $booking->id }}"
                                data-name="{{ $booking->name }}"
                                data-phone="{{ $booking->phone }}"
                                data-email="{{ $booking->email }}"
                                data-datetime="{{ $booking->booking_at->format('d/m/Y H:i') }}"
                                data-guests="{{ $booking->guests }}"
                                data-note="{{ $booking->note }}"
                                data-handled="{{ $booking->is_handled ? '1' : '0' }}"
                                data-created="{{ $booking->created_at->diffForHumans() }}"
                                data-toggle-url="{{ route('admin.bookings.toggle-handled', $booking) }}"
                                class="font-medium text-amber-700 hover:underline">Xem</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="px-4 py-8 text-center text-stone-500">Chưa có đặt chỗ nào.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4 space-y-3 md:hidden">
        @forelse ($bookings as $booking)
            <div class="rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between gap-3">
                    <span class="font-semibold text-stone-900">{{ $booking->name }}</span>
                    @if ($booking->is_handled)
                        <span class="shrink-0 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">Đã xử lý</span>
                    @else
                        <span class="shrink-0 rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800">Chờ xử lý</span>
                    @endif
                </div>

                <dl class="mt-3 space-y-1.5 text-sm">
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">ID</dt>
                        <dd class="font-medium text-stone-900">{{ $booking->id }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">Số điện thoại</dt>
                        <dd class="font-medium text-stone-900">{{ $booking->phone }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">Email</dt>
                        <dd class="truncate font-medium text-stone-900">{{ $booking->email }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">Ngày &amp; Giờ</dt>
                        <dd class="font-medium text-stone-900">{{ $booking->booking_at->format('d/m/Y H:i') }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">Số khách</dt>
                        <dd class="font-medium text-stone-900">{{ $booking->guests }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">Đặt lúc</dt>
                        <dd class="font-medium text-stone-900">{{ $booking->created_at->diffForHumans() }}</dd>
                    </div>
                </dl>

                <a href="{{ route('admin.bookings.show', $booking) }}"
                    data-view-booking
                    data-id="{{ $booking->id }}"
                    data-name="{{ $booking->name }}"
                    data-phone="{{ $booking->phone }}"
                    data-email="{{ $booking->email }}"
                    data-datetime="{{ $booking->booking_at->format('d/m/Y H:i') }}"
                    data-guests="{{ $booking->guests }}"
                    data-note="{{ $booking->note }}"
                    data-handled="{{ $booking->is_handled ? '1' : '0' }}"
                    data-created="{{ $booking->created_at->diffForHumans() }}"
                    data-toggle-url="{{ route('admin.bookings.toggle-handled', $booking) }}"
                    class="mt-3 block rounded-lg border border-amber-200 py-2 text-center text-sm font-medium text-amber-700 hover:bg-amber-50">Xem chi tiết</a>
            </div>
        @empty
            <div class="rounded-2xl border border-stone-200 bg-white p-8 text-center text-stone-500 shadow-sm">
                Chưa có đặt chỗ nào.
            </div>
        @endforelse
    </div>

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

    <div id="booking-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
        <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-lg">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-bold text-stone-900">Đặt chỗ #<span data-modal-id></span></h2>

                <button type="button" id="booking-modal-close" class="text-stone-500 hover:text-stone-700" aria-label="Đóng">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>

            <dl class="mt-4 space-y-3 text-sm">
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Trạng thái</dt>
                    <dd>
                        <span data-modal-status class="rounded-full px-2 py-1 text-xs font-medium"></span>
                    </dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Họ tên</dt>
                    <dd class="font-medium text-stone-900" data-modal-name></dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Số điện thoại</dt>
                    <dd class="font-medium text-stone-900" data-modal-phone></dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Email</dt>
                    <dd class="font-medium text-stone-900" data-modal-email></dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Ngày &amp; Giờ</dt>
                    <dd class="font-medium text-stone-900" data-modal-datetime></dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Số khách</dt>
                    <dd class="font-medium text-stone-900" data-modal-guests></dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Đặt lúc</dt>
                    <dd class="font-medium text-stone-900" data-modal-created></dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">Ghi chú</dt>
                    <dd class="font-medium text-stone-900" data-modal-note></dd>
                </div>
            </dl>

            <form method="POST" data-modal-toggle-form class="mt-6">
                @csrf
                @method('PATCH')
                <button type="submit" data-modal-toggle-button class="w-full rounded-lg px-4 py-2.5 font-semibold text-white transition"></button>
            </form>
        </div>
    </div>
@endsection