{% extends "base.html" %}
{% block title %}Verify booking{% endblock %}
{% block page_title %}Verify booking{% endblock %}
{% block extra_head %}<link rel="stylesheet" href="/plugins/booking/assets/css/booking.css">{% endblock %}
{% block content %}
<main data-plugin="booking" class="mx-auto my-4 w-full max-w-3xl space-y-4 p-3 text-foreground sm:p-6">
    <p><a class="font-medium text-brand underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2" href="/plugins/booking/admin-reservations">← Reservations</a></p>
    {% if reservation and reservation.id %}
    <article class="space-y-5 rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-6">
        <header class="flex flex-wrap items-center justify-between gap-3"><div><p class="booking-ticket-kicker">Booking #{{ reservation.id }}</p><h1 class="mt-1 text-xl font-semibold sm:text-2xl">{{ venue_name }}</h1></div><span class="badge booking-status-{{ reservation.status }}">{{ reservation.status }}</span></header>
        <p class="rounded-lg bg-canvas p-4 leading-relaxed"><strong>Valid booking time</strong><br>{{ reservation.start_at | date_in_tz(timezone=settings.timezone) }}<br>to {{ reservation.end_at | date_in_tz(timezone=settings.timezone) }}</p>
        {% if reservation.within_window %}<p class="rounded-lg bg-success/10 p-3 font-semibold text-success">This booking is within its scheduled time.</p>{% else %}<p class="rounded-lg bg-danger/10 p-3 font-semibold text-danger">This booking is outside its scheduled time.</p>{% endif %}
        <p><strong>Customer:</strong> {{ customer_name }}{% if customer_email %} · {{ customer_email }}{% endif %}</p>
        <section aria-labelledby="booking-checked-items"><h2 id="booking-checked-items" class="mb-2 text-base font-semibold">Booked items</h2>
        <ul class="space-y-2">{% for item in reservation.details %}<li class="flex flex-wrap items-center justify-between gap-3 border-b border-divider py-2 last:border-0">{% if item.is_seat %}<div class="booking-detail-copy"><span class="booking-kind-pill"><i class="fas fa-chair" aria-hidden="true"></i> {{ item.booking_kind_label }}</span><strong>{% if item.parent_title %}{{ item.parent_title }} · {% endif %}Seat {{ item.seat_label }}</strong></div>{% if item.layout_position_available %}<div class="booking-seat-location"><span>Seat location</span><div class="booking-layout-indicator" role="img" aria-label="Seat {{ item.seat_label }} location in the venue layout" data-seat-layout="{{ item.layout_grid | json_encode }}" data-seat-label="{{ item.seat_label }}"></div></div>{% endif %}{% else %}<div class="booking-detail-copy"><span class="booking-kind-pill"><i class="fas fa-cube" aria-hidden="true"></i> {{ item.booking_kind_label }}</span><strong>{{ item.title }}</strong></div>{% endif %}{% if item.code %}<span class="booking-muted"> · {{ item.code }}</span>{% endif %}</li>{% endfor %}</ul></section>
        <p class="border-t border-divider pt-4"><strong>Paid:</strong> {{ currency_symbol | default(value='') }}{{ reservation.amount_paid | default(value=0) }}{% if reservation.balance_due and reservation.balance_due > 0 %} · <strong>Due:</strong> {{ currency_symbol | default(value='') }}{{ reservation.balance_due }}{% endif %}</p>
        <div class="flex flex-wrap gap-2">
            {% if reservation.status == 'confirmed' and reservation.within_window %}<button type="button" class="blocks-button blocks-button-primary" data-staff-action="occupy" data-reservation-id="{{ reservation.id }}">Check in</button>{% endif %}
            {% if reservation.status == 'occupied' %}<button type="button" class="blocks-button blocks-button-primary" data-staff-action="vacate" data-reservation-id="{{ reservation.id }}">Check out</button>{% endif %}
        </div>
    </article>
    {% else %}
    <article class="space-y-4 rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-6">
        <header><div><p class="booking-ticket-kicker">Verify booking</p><h1 class="mt-1 text-xl font-semibold">Booking unavailable</h1></div></header>
        <p class="rounded-lg bg-danger/10 p-3 font-semibold text-danger">{{ error | default(value='This booking could not be loaded.') }}</p>
        <p class="text-muted">Staff: please <a class="font-medium text-brand underline" href="/auth/login">sign in with a staff account</a> on this device, then scan the customer QR code again. If the problem persists, the booking may have been cancelled or belong to a different venue.</p>
        <p><a class="font-medium text-brand underline" href="/plugins/booking/admin-reservations">← Reservations</a></p>
    </article>
    {% endif %}
</main>
{% endblock %}
{% block scripts %}<script src="/plugins/booking/assets/js/layout_indicator.js"></script><script src="/plugins/booking/assets/js/booking_check.js"></script>{% endblock %}