@php
  use App\Models\Tavolo;

  /** @var \App\Models\Attivita $attivita */
  $tavoli = Tavolo::query()
    ->where('attivita_id', $attivita->id)
    ->where('is_attivo', true)
    ->orderBy('label')
    ->get(['id', 'label', 'posti']);
@endphp

@extends('layouts/guest')

@section('title', 'Prenota un tavolo')

@section('page-meta')
  <script>document.documentElement.classList.add('prenota-tavolo-page');</script>
@endsection

@section('page-style')
<style>
  html.prenota-tavolo-page,
  html.prenota-tavolo-page body {
    background: #f5f2fa;
  }

  html.prenota-tavolo-page .misc-wrapper {
    text-align: start;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    max-width: 100%;
    min-block-size: auto;
    background: transparent;
  }

  .prenota-tavolo {
    --brand-primary: #602d91;
    --brand-accent: #f58220;
    --brand-text: #1a2744;
    --brand-muted: #58627a;
    --radius: 1rem;
    --card-shadow: 0 8px 28px rgba(21, 38, 92, 0.08), 0 2px 6px rgba(21, 38, 92, 0.06);

    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.2rem 0.9rem 2rem;
    color: var(--brand-text);
  }

  .prenota-tavolo__card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: calc(var(--radius) + 0.1rem);
    box-shadow: var(--card-shadow);
    padding: 1.2rem 1.15rem;
    margin-bottom: 0.95rem;
  }

  .prenota-tavolo__header {
    text-align: center;
    margin-bottom: 1rem;
  }

  .prenota-tavolo__title {
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand-primary);
    margin: 0 0 .35rem;
  }

  .prenota-tavolo__subtitle {
    margin: 0;
    color: var(--brand-muted);
    font-size: .92rem;
  }

  .prenota-tavolo__attivita {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .65rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(96, 45, 145, .1);
    color: var(--brand-primary);
    font-weight: 700;
    font-size: .78rem;
  }

  .prenota-tavolo__label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-muted);
    margin-bottom: .32rem;
  }

  .prenota-tavolo__required {
    color: #d72c0d;
  }

  .prenota-tavolo__form-control,
  .prenota-tavolo__form-select {
    border-radius: .8rem;
    border-color: rgba(21, 38, 92, .16);
    min-height: 44px;
    color: var(--bs-primary)
  }

  .prenota-tavolo__form-control:focus,
  .prenota-tavolo__form-select:focus {
    border-color: rgba(96, 45, 145, .55);
    box-shadow: 0 0 0 .2rem rgba(96, 45, 145, .15);
  }

  .prenota-tavolo__help {
    margin-top: .2rem;
    font-size: .74rem;
    color: var(--brand-muted);
  }

  .prenota-tavolo__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: .85rem;
    font-weight: 700;
    font-size: .98rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-accent) 0%, #ff9a2e 100%);
    box-shadow: 0 6px 18px rgba(245, 130, 32, .28);
  }

  .prenota-tavolo__submit:hover {
    color: #fff;
  }

  .prenota-tavolo__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 44px;
    border-radius: .8rem;
    border: 1px solid rgba(21, 38, 92, .18);
    background: #fff;
    color: var(--brand-text);
    font-weight: 700;
    text-decoration: none;
  }

  .prenota-tavolo__back:hover {
    color: var(--brand-text);
    background: rgba(255, 255, 255, .94);
  }
</style>
@endsection

@section('content')
<div class="prenota-tavolo">
  <div class="prenota-tavolo__card">
    <div class="prenota-tavolo__header">
      <h1 class="prenota-tavolo__title">Prenota il tuo tavolo</h1>
      <p class="prenota-tavolo__subtitle">Compila i dati richiesti e invia la tua richiesta.</p>
      <span class="prenota-tavolo__attivita">
        <i class="bx bx-building-house"></i>
        {{ $attivita->nome ?? 'Attività' }}
      </span>
    </div>

    @if(session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
      <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if($errors->any())
      <div class="alert alert-danger">
        <strong>Controlla i campi:</strong>
        <ul class="mb-0 mt-2 ps-3">
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form action="{{ route('cliente.prenotazione-tavolo.prenota' , ['attivita_id' => $attivita->id]) }}" method="POST" class="row g-3">
      <input type="hidden" name="attivita_id" value="{{ $attivita->id }}">
      @csrf
      <div class="col-12 col-md-6">
        <label class="prenota-tavolo__label" for="nome">Nome <span class="prenota-tavolo__required">*</span></label>
        <input
          type="text"
          id="nome"
          name="nome"
          class="form-control prenota-tavolo__form-control text-primary"
          value="{{ old('nome') }}"+
          placeholder="Inserisci il nome della prenotazione"
          required
        >
      </div>

      <div class="col-12 col-md-6">
        <label class="prenota-tavolo__label" for="telefono">Telefono <span class="prenota-tavolo__required">*</span></label>
        <input
          type="tel"
          id="telefono"
          name="telefono"
          class="form-control prenota-tavolo__form-control text-primary"
          value="{{ old('telefono') }}"
          placeholder="Inserisci un numero a cui possiamo contattarti"
          required
        >
      </div>

      <div class="col-12">
        <label class="prenota-tavolo__label" for="email">Email <span class="prenota-tavolo__required">*</span></label>
        <input
          type="email"
          id="email"
          name="email"
          class="form-control prenota-tavolo__form-control text-primary"
          value="{{ old('email') }}"
          required
        >
      </div>

      <div class="col-12 col-md-6">
        <label class="prenota-tavolo__label" for="tavolo_id">Tavolo <span class="prenota-tavolo__required">*</span></label>
        <select id="tavolo_id" name="tavolo_id" class="form-select prenota-tavolo__form-select text-primary" required>
          <option value="">Seleziona un tavolo...</option>
          @foreach($tavoli as $tavolo)
            <option value="{{ $tavolo->id }}" @selected((string)old('tavolo_id') === (string)$tavolo->id)>
              {{ $tavolo->label }} @if($tavolo->posti) · {{ $tavolo->posti }} posti @endif
            </option>
          @endforeach
        </select>
        @if($tavoli->isEmpty())
          <p class="prenota-tavolo__help">Non risultano tavoli attivi per questa attività.</p>
        @endif
      </div>

      <div class="col-12 col-md-3">
        <label class="prenota-tavolo__label" for="data_prenotazione">Data <span class="prenota-tavolo__required">*</span></label>
        <input
          type="date"
          id="data_prenotazione"
          name="data_prenotazione"
          class="form-control prenota-tavolo__form-control text-primary"
          value="{{ old('data_prenotazione') }}"
          required
        >
      </div>

      <div class="col-12 col-md-3">
        <label class="prenota-tavolo__label" for="ora_prenotazione">Ora <span class="prenota-tavolo__required">*</span></label>
        <input
          type="time"
          id="ora_prenotazione"
          name="ora_prenotazione"
          class="form-control prenota-tavolo__form-control text-primary"
          value="{{ old('ora_prenotazione') }}"
          required
        >
      </div>

      <div class="col-12 col-md-4">
        <label class="prenota-tavolo__label" for="coperti">Coperti</label>
        <input
          type="number"
          min="1"
          id="coperti"
          name="coperti"
          class="form-control prenota-tavolo__form-control text-primary"
          value="{{ old('coperti') }}"
        >
      </div>

      <div class="col-12">
        <label class="prenota-tavolo__label" for="note">Note</label>
        <textarea
          id="note"
          name="note"
          rows="3"
          class="form-control prenota-tavolo__form-control text-primary"
        >{{ old('note') }}</textarea>
      </div>

      <div class="col-12">
        <button type="submit" class="prenota-tavolo__submit" @disabled($tavoli->isEmpty())>
          <i class="bx bx-calendar-check"></i>
          Invia prenotazione
        </button>
      </div>

      <div class="col-12">
        <a
          href="{{ route('cliente.attivita.show', ['attivita_id' => $attivita->id]) }}"
          class="prenota-tavolo__back"
        >
          <i class="bx bx-arrow-back"></i>
          Torna alla pagina attività
        </a>
      </div>
    </form>
  </div>
</div>
@endsection
