@extends('layouts.app')

@section('title', 'Reserveren')

@section('content')
<section class="page-hero compact reservation-hero" style="--page-bg:url('{{ config('genkai.images.food_3') }}')">
    <div class="container">
        <span class="eyebrow">RESERVEER BIJ GENKAI</span>
        <h1>Jouw tafel.<br>Zo geregeld.</h1>
        <p>Kies een beschikbare datum en een tijdstip dat nog moet komen. Je aanvraag verschijnt meteen bij het Genkai-team.</p>
    </div>
</section>

<section class="section reservation-section">
    <div class="container reservation-layout">
        <div class="reservation-copy reveal">
            <span class="eyebrow dark">ONLINE RESERVEREN</span>
            <h2>Reserveer je bezoek.</h2>
            <p class="lead">Voor gezelschappen tot {{ $settings['max_guests'] }} personen kun je hier rechtstreeks een aanvraag plaatsen.</p>
            <p>Reservaties voor vandaag zijn <strong>{{ $settings['allow_same_day'] === '1' ? 'mogelijk' : 'niet mogelijk' }}</strong>. Voor vandaag tonen we automatisch alleen tijdstippen die nog kunnen worden gereserveerd.</p>
            @if ((int) $settings['min_lead_minutes'] > 0)
                <p>Online reserveren kan minimaal <strong>{{ $settings['min_lead_minutes'] }} minuten vooraf</strong>.</p>
            @endif
            <div class="reservation-info-card">
                <strong>{{ $settings['restaurant_name'] }}</strong>
                <span>{{ $settings['restaurant_address'] }}</span>
                <a href="tel:{{ preg_replace('/\s+/', '', $settings['restaurant_phone']) }}">{{ $settings['restaurant_phone'] }}</a>
            </div>
        </div>

        <div class="reservation-form-card reveal delay-1">
            @if (session('reservation_success'))
                <div class="success-panel">
                    <span class="success-icon">✓</span>
                    <h3>Reservatie ontvangen</h3>
                    <p>Bedankt! Je reservatieaanvraag is opgeslagen. Je ontvangt een e-mail met de gegevens van je reservatie wanneer e-mailmeldingen actief zijn.</p>
                    <a class="btn btn-dark" href="{{ route('home') }}">Terug naar home</a>
                </div>
            @else
                @if (session('reservation_error'))
                    <div class="form-errors">{{ session('reservation_error') }}</div>
                @endif

                <form method="POST" action="{{ route('reservation.store') }}" class="reservation-form" data-reservation-form>
                    @csrf
                    @if ($errors->any())
                        <div class="form-errors">
                            <strong>Controleer je gegevens:</strong>
                            <ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                        </div>
                    @endif

                    <div class="form-grid two">
                        <label><span>Naam *</span><input type="text" name="name" value="{{ old('name') }}" required autocomplete="name"></label>
                        <label><span>Telefoon *</span><input type="tel" name="phone" value="{{ old('phone') }}" required autocomplete="tel"></label>
                    </div>

                    <label><span>E-mail *</span><input type="email" name="email" value="{{ old('email') }}" required autocomplete="email"></label>

                    <div class="form-grid three">
                        <label><span>Datum *</span><input type="date" name="reservation_date" value="{{ old('reservation_date') }}" min="{{ $minDate }}" max="{{ $maxDate }}" required data-reservation-date></label>
                        <label>
                            <span>Tijdstip *</span>
                            <select name="reservation_time" required data-reservation-time data-old-value="{{ old('reservation_time') }}">
                                <option value="">Kies eerst een datum</option>
                            </select>
                        </label>
                        <label>
                            <span>Personen *</span>
                            <select name="guests" required>
                                @for ($i = 1; $i <= (int) $settings['max_guests']; $i++)
                                    <option value="{{ $i }}" @if ((int) old('guests', 2) === $i) selected @endif>{{ $i }}</option>
                                @endfor
                            </select>
                        </label>
                    </div>

                    <label><span>Opmerking</span><textarea name="notes" rows="4" maxlength="1200" placeholder="Allergieën, kinderstoel, speciale gelegenheid...">{{ old('notes') }}</textarea></label>
                    <label class="check-label"><input type="checkbox" name="privacy" value="1" required @if (old('privacy')) checked @endif><span>Ik ga akkoord dat mijn gegevens worden gebruikt om deze reservatie te verwerken. *</span></label>
                    <button class="btn btn-primary btn-lg full-btn" type="submit">Reservatie aanvragen</button>
                </form>
            @endif
        </div>
    </div>
</section>

<script>
window.GENKAI_RESERVATION = {
    slots: {!! json_encode($slots) !!},
    allowSameDay: {{ $settings['allow_same_day'] === '1' ? 'true' : 'false' }},
    minLeadMinutes: {{ (int) $settings['min_lead_minutes'] }}
};
</script>
@endsection