<!--
  Questo file fa parte di MyTown.
  MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
  i termini della GNU Affero General Public License come pubblicata dalla
  Free Software Foundation, versione 3.
  Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
  Copyright (C) Kondor Consulting & Services S.r.l.
  SPDX-License-Identifier: AGPL-3.0-or-later
-->
<ion-header class="ion-no-border">
	<ion-toolbar class="page-toolbar">
		<ion-buttons slot="start">
			<ion-button class="back-btn" fill="clear" (click)="goBack()">
				<ion-icon name="arrow-back-outline" slot="icon-only"></ion-icon>
			</ion-button>
		</ion-buttons>
		<ion-title>{{ 'Prenotazione' | translate }}</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content>
	<div class="resv">
		<!-- Riepilogo evento -->
		@if (bakeka?.bk_title) {
			<div class="event-summary">
				<div class="event-icon">
					<ion-icon name="ticket-outline"></ion-icon>
				</div>
				<div class="event-meta">
					<h2 class="event-title">{{ bakeka.bk_title }}</h2>
					<span class="event-date">
						<ion-icon name="calendar-outline"></ion-icon>
						{{ bakeka.bk_date | date: 'dd/MM/yyyy' }}
						@if (bakeka.bk_date_to && bakeka.bk_date_to !== bakeka.bk_date) {
							— {{ bakeka.bk_date_to | date: 'dd/MM/yyyy' }}
						}
					</span>
				</div>
			</div>
		}

		<!-- Step 1 — Biglietti -->
		<div class="panel">
			<p class="step-title"><span class="step-num">1</span>{{ 'Numero biglietti' | translate }}</p>
			<div class="stepper">
				<button type="button" class="step-btn" [disabled]="tickets <= 1" (click)="tickets = tickets > 1 ? tickets - 1 : 1" aria-label="Diminuisci">
					<ion-icon name="remove-outline"></ion-icon>
				</button>
				<div class="step-val">{{ tickets || 0 }}</div>
				<button type="button" class="step-btn" (click)="tickets = (tickets || 0) + 1" aria-label="Aumenta">
					<ion-icon name="add-outline"></ion-icon>
				</button>
			</div>
		</div>

		<!-- Step 2 — Data -->
		<div class="panel">
			<p class="step-title"><span class="step-num">2</span>{{ 'Seleziona la data' | translate }}</p>
			@if (rangeDate.length > 0) {
				<div class="calendar-wrapper">
					<ion-datetime
						presentation="date"
						[min]="bakeka.bk_date"
						[max]="bakeka.bk_date_to"
						[value]="selectedDate"
						(ionChange)="onDaySelected($event)"
						[dayValues]="rangeDate"
						[highlightedDates]="highlightedDatesArray">
					</ion-datetime>
				</div>
				<div class="legend-row">
					<span class="legend-item"><span class="legend-dot legend-dot--green"></span>{{ 'Disponibile' | translate }}</span>
					<span class="legend-item"><span class="legend-dot legend-dot--yellow"></span>{{ 'Quasi pieno' | translate }}</span>
					<span class="legend-item"><span class="legend-dot legend-dot--red"></span>{{ 'Pieno' | translate }}</span>
				</div>
			} @else {
				<div class="resv-empty">
					<ion-icon name="calendar-clear-outline"></ion-icon>
					<p>{{ 'Nessuna data disponibile' | translate }}</p>
				</div>
			}
		</div>

		<!-- Step 3 — Fascia oraria -->
		@if (tickets > 0 && tabDay == true) {
			<div class="panel">
				<p class="step-title"><span class="step-num">3</span>{{ 'Fascia oraria' | translate }}</p>
				<div class="slots-list">
					@for (slot of filteredSlots; track slot; let i = $index) {
						<button
							type="button"
							class="slot-card"
							[class.is-selected]="selectedSlot?.bks_id === slot.bks_id"
							[class.is-disabled]="!canFitInSlot(slot)"
							(click)="onSlotSelected(slot)">
							<div class="slot-main">
								<div class="slot-time">
									<ion-icon name="time-outline"></ion-icon>
									{{ slot.bks_hr_from }} – {{ slot.bks_hr_to }}
								</div>
								<div class="slot-price">{{ 'Price' | translate }} {{ '€' + slot.bks_tk_price }}</div>
								<div class="slot-bar">
									<div
										class="slot-bar-fill"
										[class.slot-bar-fill--yellow]="getSlotOccupancyPercent(slot) >= 50 && getSlotOccupancyPercent(slot) < 85"
										[class.slot-bar-fill--red]="getSlotOccupancyPercent(slot) >= 85"
										[style.width.%]="getSlotOccupancyPercent(slot)"></div>
								</div>
							</div>
							<div class="slot-side">
								<span class="slot-free" [class.no-free]="getSlotFree(slot) === 0">{{ getSlotFree(slot) }}</span>
								<span class="slot-total">/ {{ slot.bks_tk_amount }} {{ 'posti' | translate }}</span>
								@if (selectedSlot?.bks_id === slot.bks_id) {
									<ion-icon class="slot-check" name="checkmark-circle"></ion-icon>
								}
							</div>
						</button>
					}
				</div>
			</div>
		}
	</div>

	<!-- CTA: aggiungi al carrello -->
	@if (tickets > 0 && tabDay == true && checkslot == true) {
		<div class="cta-bar">
			<div class="cta-total">
				<span class="cta-total-label">{{ 'Totale' | translate }}</span>
				<span class="cta-total-value">€ {{ (tickets * (selectedSlot?.bks_tk_price || 0)) | number: '1.2-2' }}</span>
			</div>
			<ion-button class="cta-btn" color="success" (click)="addtoCart()" [disabled]="!canFitInSlot(selectedSlot)">
				<ion-icon slot="start" name="cart-outline"></ion-icon>
				{{ 'Add to the cart' | translate }}
			</ion-button>
		</div>
	}
</ion-content>
