@extends('admin.layout')

@section('title', 'Cài đặt khung giờ')

@section('content')
    <h1 class="text-xl font-bold text-stone-900">Cài đặt khung giờ</h1>
    <p class="mt-1 text-sm text-stone-500">
        Giới hạn mặc định áp dụng cho mọi ngày. Để trống nghĩa là không giới hạn, nhập 0 nghĩa là không cho đặt khung giờ đó.
    </p>

    <form method="POST" action="{{ route('admin.time-slots.update') }}" class="mt-4 rounded-2xl border border-stone-200 bg-white shadow-sm">
        @csrf
        @method('PUT')

        <div class="divide-y divide-stone-100">
            @foreach ($slots as $time => $label)
                <div class="flex items-center justify-between gap-4 px-4 py-3">
                    <label for="max_bookings_{{ $time }}" class="font-medium text-stone-900">{{ $label }}</label>
                    <input type="number" min="0" name="max_bookings[{{ $time }}]" id="max_bookings_{{ $time }}"
                        value="{{ old('max_bookings.'.$time, $limits[$time] ?? '') }}"
                        placeholder="Không giới hạn"
                        class="w-40 rounded-lg border border-stone-300 px-3 py-2 text-right focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500">
                </div>
            @endforeach
        </div>

        <div class="border-t border-stone-200 p-4">
            <button type="submit" class="rounded-lg bg-amber-600 px-4 py-2.5 font-semibold text-white transition hover:bg-amber-700">
                Lưu cài đặt
            </button>
        </div>
    </form>

    <h2 class="mt-8 text-xl font-bold text-stone-900">Giới hạn riêng theo ngày</h2>
    <p class="mt-1 text-sm text-stone-500">
        Ghi đè giới hạn mặc định cho một ngày cụ thể (VD: lễ, sự kiện đặc biệt). Nếu không có giới hạn riêng, hệ thống dùng giới hạn mặc định ở trên.
    </p>

    @if ($overrides->isNotEmpty())
        <div class="mt-4 overflow-x-auto rounded-2xl border border-stone-200 bg-white shadow-sm">
            <table class="w-full 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">Ngày</th>
                        <th class="px-4 py-3 font-medium">Khung giờ</th>
                        <th class="px-4 py-3 font-medium">Giới hạn</th>
                        <th class="px-4 py-3 font-medium"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-stone-100">
                    @foreach ($overrides as $override)
                        <tr>
                            <td class="px-4 py-3">{{ $override->date->format('d/m/Y') }}</td>
                            <td class="px-4 py-3">{{ $slots[$override->time] ?? $override->time }}</td>
                            <td class="px-4 py-3">{{ $override->max_bookings }}</td>
                            <td class="px-4 py-3 text-right">
                                <form method="POST" action="{{ route('admin.time-slots.overrides.destroy', $override) }}"
                                    onsubmit="return confirm('Xóa giới hạn riêng này?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="font-medium text-red-600 hover:underline">Xóa</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.time-slots.overrides.store') }}"
        class="mt-4 flex flex-wrap items-start gap-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
        @csrf

        <div class="w-48">
            <label for="override_date" class="block text-sm font-medium text-stone-700">Ngày</label>
            <input type="date" name="date" id="override_date" value="{{ old('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">
            @error('date')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="w-48">
            <label for="override_time" class="block text-sm font-medium text-stone-700">Khung giờ</label>
            <select name="time" id="override_time" required
                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">
                @foreach ($slots as $time => $label)
                    <option value="{{ $time }}" {{ old('time') === $time ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            @error('time')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div class="w-48">
            <label for="override_max_bookings" class="block text-sm font-medium text-stone-700">Giới hạn</label>
            <input type="number" min="0" name="max_bookings" id="override_max_bookings" value="{{ old('max_bookings') }}"
                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">
            @error('max_bookings')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <button type="submit" class="mt-6 rounded-lg bg-amber-600 px-4 py-2.5 font-semibold text-white transition hover:bg-amber-700">
            Thêm giới hạn riêng
        </button>
    </form>
@endsection