{% extends "base.html" %}
{% block title %}My bookings{% endblock %}
{% block page_title %}My bookings{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/booking/assets/css/booking.css?r=6">
{% endblock %}

{% block content %}
<div data-plugin="booking" class="booking-my-page mx-auto max-w-7xl px-3 py-5 sm:px-6 lg:px-8">
    <header class="booking-book-header mb-5 flex flex-wrap items-center justify-between gap-4">
        <h1>My bookings</h1>
        <p><a href="/plugins/booking/book" class="blocks-button blocks-button-secondary">Book again</a></p>
    </header>

    {% if items and items | length > 0 %}
    <div class="booking-table-wrap max-w-full overflow-x-auto rounded-xl border border-divider bg-surface">
        <table class="booking-my-table">
            <thead><tr><th>Booking</th><th>Venue</th><th>When</th><th>Total</th><th>Paid</th><th>Balance</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody>
            {% for r in items %}
                <tr>
                    <td>BK-{{ r.id }}</td><td>{{ r.venue_name }}</td><td><time class="booking-date-range" data-start="{{ r.start_at }}" data-end="{{ r.end_at }}">{{ r.start_at | date_in_tz(timezone=settings.timezone) }} → {{ r.end_at | date_in_tz(timezone=settings.timezone) }}</time></td>
                    <td>{{ currency_symbol | default(value='') }}{{ r.total }}</td><td>{{ currency_symbol | default(value='') }}{{ r.amount_paid | default(value=0) }}</td>
                    <td>{% if r.balance_due and r.balance_due > 0 %}{{ currency_symbol | default(value='') }}{{ r.balance_due }}{% else %}—{% endif %}</td>
                    <td><span class="booking-status-pill booking-status-{{ r.status }}">{{ r.status }}</span></td>
                    <td class="booking-my-actions">
                        <button type="button" class="booking-icon-action" data-toggle-booking-details="{{ r.id }}" aria-expanded="false" aria-label="Show booking details" title="Show details"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg></button>
                        {% if r.status == 'confirmed' or r.status == 'occupied' %}<button type="button" class="booking-icon-action" data-print-booking="{{ r.id }}" aria-label="Print or save booking PDF" title="Print / Save PDF"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h8l5 5v15H6zM14 2v6h5"/><path d="M8 13h8M8 16h8"/><text x="8" y="21" font-size="4">PDF</text></svg></button>{% endif %}
                        {% if r.status == 'held' %}<button type="button" class="booking-icon-action" data-pay-booking="{{ r.id }}" data-method="wallet" aria-label="Pay with wallet" title="Pay with wallet"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h15a2 2 0 0 1 2 2v11H4a2 2 0 0 1-2-2V5a3 3 0 0 1 3-3h13v4H4"/><path d="M16 12h5v4h-5a2 2 0 0 1 0-4Z"/></svg></button><button type="button" class="booking-icon-action" data-pay-booking="{{ r.id }}" data-method="online" aria-label="Pay online" title="Pay online"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 9h20M6 15h5"/></svg></button>{% endif %}
                        {% if r.status == 'confirmed' and r.hours_left and r.hours_left > 0 %}<button type="button" class="booking-icon-action is-danger" data-cancel-booking="{{ r.id }}" data-total="{{ r.total }}" data-paid="{{ r.amount_paid | default(value=0) }}" data-hours-left="{{ r.hours_left }}" data-free-hours="{{ r.c_free_hours | default(value=48) }}" data-fee-type="{{ r.c_fee_type | default(value='none') }}" data-fee-value="{{ r.c_fee_value | default(value=0) }}" aria-label="Cancel booking" title="Cancel booking"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button>{% endif %}
                    </td>
                </tr>
                <tr class="booking-detail-row" id="booking-details-{{ r.id }}" hidden><td colspan="8">
                    <article class="booking-ticket" data-booking-ticket="{{ r.id }}">
                        <div class="booking-ticket-main">
                            <header class="booking-ticket-header"><div><p class="booking-ticket-kicker">Booking BK-{{ r.id }}</p><h2>{{ r.venue_name }}</h2></div><span class="booking-status-pill booking-status-{{ r.status }}">{{ r.status }}</span></header>
                            <p class="booking-ticket-user"><strong>Booked by</strong><br>{{ customer_name }}{% if customer_email %} · {{ customer_email }}{% endif %}</p>
                            <p class="booking-ticket-time"><strong>Booking time</strong><br><time class="booking-date-range" data-start="{{ r.start_at }}" data-end="{{ r.end_at }}">{{ r.start_at | date_in_tz(timezone=settings.timezone) }} → {{ r.end_at | date_in_tz(timezone=settings.timezone) }}</time></p>
                            <h3>Booked items</h3>
                            {% if r.details and r.details | length > 0 %}<ul class="booking-ticket-items">{% for item in r.details %}<li class="booking-detail-item">{% if item.is_seat %}<div class="booking-detail-copy"><span class="booking-kind-pill">{{ item.booking_kind_label }}</span><strong>{% if item.parent_title %}{{ item.parent_title }} · {% endif %}Seat {{ item.seat_label }}</strong>{% if item.code %}<span class="booking-muted">{{ item.code }}</span>{% endif %}</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">{{ item.booking_kind_label }}</span><strong>{{ item.title }}</strong>{% if item.code %}<span class="booking-muted">{{ item.code }}</span>{% endif %}</div>{% endif %}</li>{% endfor %}</ul>{% else %}<p class="booking-muted">No resource details were saved for this booking.</p>{% endif %}
                            <div class="booking-ticket-payment"><span>Total <strong>{{ currency_symbol | default(value='') }}{{ r.total }}</strong></span><span>Paid <strong>{{ currency_symbol | default(value='') }}{{ r.amount_paid | default(value=0) }}</strong></span>{% if r.balance_due and r.balance_due > 0 %}<span>Due <strong>{{ currency_symbol | default(value='') }}{{ r.balance_due }}</strong></span>{% endif %}</div>
                            {% if r.order_number %}<p class="booking-muted">Order {{ r.order_number }}</p>{% endif %}
                        </div>
                        {% if r.status == 'confirmed' or r.status == 'occupied' %}<aside class="booking-ticket-qr"><div class="booking-qr" data-booking-qr="{{ r.id }}"></div><strong>Show this code to staff</strong><small>Staff can verify the time and check-in status.</small></aside>{% endif %}
                        {% if r.terms %}<div class="booking-ticket-terms"><h4>Terms & Conditions</h4><div class="booking-ticket-terms-body is-raw">{{ r.terms }}</div></div>{% endif %}
                    </article>
                </td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="booking-muted">You have no bookings yet.</p>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/qrcode.min.js"></script>
<script src="/static/vendor/marked/marked.min.js"></script>
<script src="/plugins/booking/assets/js/layout_indicator.js"></script>
<script src="/plugins/booking/assets/js/my_bookings.js?r=3"></script>
{% endblock %}