@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-5xl text-cream font-bold mb-3" data-aos="fade-up">Table Reservation</h1>
    <p class="text-cream/60 text-lg" data-aos="fade-up" data-aos-delay="100">Reserve your seat for an unforgettable Bengali dining experience</p>
    <div class="section-divider mt-4"></div>
</div>

<div class="max-w-4xl mx-auto px-4 py-16">
    @if(session('success'))
    <div class="glass-card border border-green-500/40 text-green-400 p-4 mb-8 rounded-xl flex items-center gap-3">
        <i class="fas fa-check-circle text-xl"></i>{{ session('success') }}
    </div>
    @endif

    <div class="glass-card p-8 md:p-12" data-aos="fade-up">
        <h2 class="font-playfair text-3xl text-cream text-center mb-8">Book Your Table</h2>

        <form action="{{ route('reservation.store') }}" method="POST" id="reservationForm" x-data="reservationForm()">
            @csrf
            <div class="grid md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-cream/70 text-sm mb-2">Select Branch *</label>
                    <select name="branch_id" x-model="branchId" @change="fetchSlots()"
                            class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors" required>
                        <option value="">-- Choose Branch --</option>
                        @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ request('branch_id')==$branch->id?'selected':'' }}>
                            {{ $branch->name }} — {{ $branch->city }}
                        </option>
                        @endforeach
                    </select>
                    @error('branch_id')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-cream/70 text-sm mb-2">Your Name *</label>
                    <input type="text" name="customer_name" value="{{ old('customer_name') }}" placeholder="Full Name"
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors" required>
                    @error('customer_name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-cream/70 text-sm mb-2">Phone Number *</label>
                    <input type="tel" name="customer_phone" value="{{ old('customer_phone') }}" placeholder="+880 1X-XXXX-XXXX"
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors" required>
                    @error('customer_phone')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-cream/70 text-sm mb-2">Email Address</label>
                    <input type="email" name="customer_email" value="{{ old('customer_email') }}" placeholder="your@email.com"
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors">
                </div>

                <div>
                    <label class="block text-cream/70 text-sm mb-2">Number of Guests *</label>
                    <select name="guest_count" class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors" required>
                        <option value="">-- Select --</option>
                        @for($i=1;$i<=20;$i++)
                        <option value="{{ $i }}" {{ old('guest_count')==$i?'selected':'' }}>{{ $i }} {{ $i==1?'Person':'People' }}</option>
                        @endfor
                    </select>
                    @error('guest_count')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-cream/70 text-sm mb-2">Reservation Date *</label>
                    <input type="date" name="reservation_date" value="{{ old('reservation_date') }}"
                           min="{{ date('Y-m-d') }}"
                           x-model="selectedDate" @change="fetchSlots()"
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors" required>
                    @error('reservation_date')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-cream/70 text-sm mb-2">Preferred Time *</label>
                    <template x-if="slots.length === 0">
                        <select name="reservation_time" class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors" required>
                            <option value="">-- Select date & branch first --</option>
                        </select>
                    </template>
                    <template x-if="slots.length > 0">
                        <select name="reservation_time" class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors" required>
                            <template x-for="slot in slots" :key="slot.time">
                                <option :value="slot.time" :disabled="!slot.available"
                                        x-text="slot.time + (slot.available ? ' (' + slot.remaining + ' left)' : ' — Full')">
                                </option>
                            </template>
                        </select>
                    </template>
                    @error('reservation_time')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-cream/70 text-sm mb-2">Occasion</label>
                    <select name="occasion" class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors">
                        <option value="">-- Select Occasion --</option>
                        @foreach(['Birthday','Anniversary','Business Meeting','Family Gathering','Date Night','Eid Celebration','Engagement','Other'] as $occ)
                        <option value="{{ $occ }}" {{ old('occasion')==$occ?'selected':'' }}>{{ $occ }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-cream/70 text-sm mb-2">Special Requests</label>
                    <textarea name="special_requests" rows="3" placeholder="Any dietary restrictions, seating preferences, or special arrangements..."
                              class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 focus:outline-none focus:border-gold transition-colors resize-none">{{ old('special_requests') }}</textarea>
                </div>
            </div>

            <div class="mt-8 text-center">
                <button type="submit" class="btn-gold text-base px-14 py-4 shadow-xl">
                    <i class="fas fa-calendar-check mr-2"></i>Confirm Reservation
                </button>
                <p class="text-cream/40 text-xs mt-3">
                    <i class="fas fa-info-circle mr-1"></i>
                    You'll receive confirmation via email/WhatsApp within 30 minutes
                </p>
            </div>
        </form>
    </div>
</div>
</div>

@push('scripts')
<script>
function reservationForm() {
    return {
        branchId: '{{ request('branch_id','') }}',
        selectedDate: '',
        slots: [],
        fetchSlots() {
            if (!this.branchId || !this.selectedDate) return;
            axios.get('{{ route('reservation.slots') }}', {
                params: { branch_id: this.branchId, date: this.selectedDate }
            }).then(r => {
                this.slots = r.data.slots.filter(s => s.available || true);
            }).catch(e => console.error(e));
        }
    }
}
</script>
@endpush
@endsection