@extends('layouts.app')
@section('title','Reservatie wijzigen')
@section('content')
<section class="page-hero compact reservation-hero" style="--page-bg:url('{{ config('genkai.images.food_3') }}')">
  <div class="container">
    <span class="eyebrow">RESERVATIE WIJZIGEN</span>
    <h1>Pas je reservatie aan.</h1>
    <p>Na een wijziging wordt je reservatie opnieuw ter bevestiging aan Genkai aangeboden.</p>
  </div>
</section>

<section class="section reservation-section">
  <div class="container reservation-layout">
    <div class="reservation-copy reveal">
      <span class="eyebrow dark">JOUW RESERVATIE</span>
      <h2>{{ $reservation->name }}</h2>
      <p class="lead">Huidige status: <strong>{{ $reservation->status === 'confirmed' ? 'Bevestigd' : ($reservation->status === 'pending' ? 'In behandeling' : 'Geannuleerd') }}</strong>.</p>
      <p>Je kunt datum, uur, aantal personen en contactgegevens aanpassen zolang het gekozen tijdstip nog niet verstreken is.</p>
    </div>

    <div class="reservation-form-card reveal delay-1">
      @if(session('reservation_changed'))
        <div class="success-panel compact-success">
          <span class="success-icon">✓</span>
          <h3>Wijziging ontvangen</h3>
          <p>Je reservatie is aangepast en staat opnieuw in behandeling.</p>
        </div>
      @endif

      <form method="POST" action="{{ route('reservation.update', [$reservation, $token]) }}" class="reservation-form" data-reservation-form>
        @csrf
        @method('PUT')
        @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', $reservation->name) }}" required></label>
          <label><span>Telefoon *</span><input type="tel" name="phone" value="{{ old('phone', $reservation->phone) }}" required></label>
        </div>
        <label><span>E-mail *</span><input type="email" name="email" value="{{ old('email', $reservation->email) }}" required></label>
        <div class="form-grid three">
          <label><span>Datum *</span><input type="date" name="reservation_date" value="{{ old('reservation_date', $reservation->reservation_date->toDateString()) }}" 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', substr($reservation->reservation_time, 0, 5)) }}">
              <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', $reservation->guests) === $i) selected @endif>{{ $i }}</option>
            @endfor
          </select></label>
        </div>
        <label><span>Opmerking</span><textarea name="notes" rows="4" maxlength="1200">{{ old('notes', $reservation->notes) }}</textarea></label>
        <label class="check-label"><input type="checkbox" name="privacy" value="1" required checked><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">Wijziging opslaan</button>
      </form>
    </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