{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}{{ venue_label | default(value="Venues") }}{% endblock %}

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

{% block admin_content %}
<div data-plugin="booking" data-venue-label="{{ venue_label | default(value='Venues') }}" data-venue-singular-label="{{ venue_singular_label | default(value='Venue') }}">
    <div id="booking-crud-config"
         data-form-url="/plugins/booking/assets/admin/venue_form.json"
         data-save-url="/plugins/booking/api-venue-save"
         data-get-url="/plugins/booking/api-venue-get"
         data-create-title="New venue"
         data-edit-title="Edit venue"
         data-entity="venue"></div>

    <script type="application/json" id="booking-child-config">
    [
        {
            "key": "resources",
            "entity": "resource",
            "formUrl": "/plugins/booking/assets/admin/resource_form.json",
            "saveUrl": "/plugins/booking/api-resource-save",
            "getUrl": "/plugins/booking/api-resource-get",
            "listMount": "booking-modal-resources-list",
            "modal": "#booking-resource-modal",
            "title": "#booking-resource-modal-title",
            "fields": "booking-resource-form-fields",
            "createTitle": "Add bookable item",
            "editTitle": "Edit bookable item"
        },
        {
            "key": "price-rules",
            "entity": "price-rule",
            "formUrl": "/plugins/booking/assets/admin/price_rule_form.json",
            "saveUrl": "/plugins/booking/api-price-rule-save",
            "getUrl": "/plugins/booking/api-price-rule-get",
            "listMount": "booking-modal-price-rules-list",
            "modal": "#booking-price-rule-modal",
            "title": "#booking-price-rule-modal-title",
            "fields": "booking-price-rule-form-fields",
            "createTitle": "Add price rule",
            "editTitle": "Edit price rule"
        },
        {
            "key": "special-days",
            "entity": "special-day",
            "formUrl": "/plugins/booking/assets/admin/special_day_form.json",
            "saveUrl": "/plugins/booking/api-special-day-save",
            "getUrl": "/plugins/booking/api-special-day-get",
            "listMount": "booking-modal-special-days-list",
            "modal": "#booking-special-day-modal",
            "title": "#booking-special-day-modal-title",
            "fields": "booking-special-day-form-fields",
            "createTitle": "Add special day",
            "editTitle": "Edit special day"
        },
        {
            "key": "events",
            "entity": "event",
            "formUrl": "/plugins/booking/assets/admin/event_form.json",
            "saveUrl": "/plugins/booking/api-event-save",
            "getUrl": "/plugins/booking/api-event-get",
            "listMount": "booking-modal-events-list",
            "modal": "#booking-event-modal",
            "title": "#booking-event-modal-title",
            "fields": "booking-event-form-fields",
            "createTitle": "New event",
            "editTitle": "Edit event"
        }
    ]
    </script>

    {{ crud::shell_open(config_url="/plugins/booking/assets/admin/venues_list.json", mount_id="booking-venues-list", custom_mount=true) }}
    <table class="blocks-admin-table responsive-table">
        <thead></thead>
        <tbody>
            <tr><td colspan="5" class="crud-empty-state text-center">Loading venues…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}

    <div id="booking-form-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="booking-form-modal-title" aria-hidden="true">
        <div class="modal-content w-[calc(100%-2rem)] max-w-5xl">
            <div class="modal-header">
                <h3 id="booking-form-modal-title">Venue</h3>
                <button type="button" class="close-btn booking-modal-close blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="booking-modal-tabs blocks-filter-tabs flex flex-wrap gap-2 border-b border-divider" role="tablist" aria-label="Venue configuration" data-blocks-admin-tabs>
                    <button type="button" id="booking-tab-venue-tab" class="booking-modal-tab blocks-filter-tab active" role="tab" aria-controls="booking-tab-venue" data-target="#booking-tab-venue" aria-selected="true">Venue</button>
                    <button type="button" id="booking-tab-resources-tab" class="booking-modal-tab blocks-filter-tab" role="tab" aria-controls="booking-tab-resources" data-target="#booking-tab-resources" aria-selected="false">Bookable items</button>
                    <button type="button" id="booking-tab-price-rules-tab" class="booking-modal-tab blocks-filter-tab" role="tab" aria-controls="booking-tab-price-rules" data-target="#booking-tab-price-rules" aria-selected="false">Price rules</button>
                    <button type="button" id="booking-tab-special-days-tab" class="booking-modal-tab blocks-filter-tab" role="tab" aria-controls="booking-tab-special-days" data-target="#booking-tab-special-days" aria-selected="false">Special days</button>
                    <button type="button" id="booking-tab-events-tab" class="booking-modal-tab blocks-filter-tab" role="tab" aria-controls="booking-tab-events" data-target="#booking-tab-events" aria-selected="false">Events</button>
                </div>

                <div class="booking-tab-pane active" id="booking-tab-venue" role="tabpanel" aria-labelledby="booking-tab-venue-tab">
                    <div id="booking-form-fields"></div>
                </div>

                <div class="booking-tab-pane" id="booking-tab-resources" role="tabpanel" aria-labelledby="booking-tab-resources-tab" hidden>
                    <p class="booking-muted booking-tab-hint" data-needs-venue>Save the venue first, then add its rooms, seats, or other bookable items.</p>
                    <div data-child-pane="resources" hidden>
                        {{ crud::shell_open(config_url="/plugins/booking/assets/admin/resources_list.json", mount_id="booking-modal-resources-list", custom_mount=true) }}
                        <table class="blocks-admin-table responsive-table">
                            <thead></thead>
                            <tbody>
                                <tr><td colspan="7" class="crud-empty-state text-center">Loading bookable items…</td></tr>
                            </tbody>
                        </table>
                        {{ crud::shell_close() }}
                    </div>
                </div>

                <div class="booking-tab-pane" id="booking-tab-price-rules" role="tabpanel" aria-labelledby="booking-tab-price-rules-tab" hidden>
                    <p class="booking-muted booking-tab-hint" data-needs-venue>Save the venue first, then manage its price rules here.</p>
                    <div data-child-pane="price-rules" hidden>
                        {{ crud::shell_open(config_url="/plugins/booking/assets/admin/price_rules_list.json", mount_id="booking-modal-price-rules-list", custom_mount=true) }}
                        <table class="blocks-admin-table responsive-table">
                            <thead></thead>
                            <tbody>
                                <tr><td colspan="7" class="crud-empty-state text-center">Loading…</td></tr>
                            </tbody>
                        </table>
                        {{ crud::shell_close() }}
                    </div>
                </div>

                <div class="booking-tab-pane" id="booking-tab-special-days" role="tabpanel" aria-labelledby="booking-tab-special-days-tab" hidden>
                    <p class="booking-muted booking-tab-hint" data-needs-venue>Save the venue first, then manage its special days here.</p>
                    <div data-child-pane="special-days" hidden>
                        {{ crud::shell_open(config_url="/plugins/booking/assets/admin/special_days_list.json", mount_id="booking-modal-special-days-list", custom_mount=true) }}
                        <table class="blocks-admin-table responsive-table">
                            <thead></thead>
                            <tbody>
                                <tr><td colspan="9" class="crud-empty-state text-center">Loading…</td></tr>
                            </tbody>
                        </table>
                        {{ crud::shell_close() }}
                    </div>
                </div>

                <div class="booking-tab-pane" id="booking-tab-events" role="tabpanel" aria-labelledby="booking-tab-events-tab" hidden>
                    <p class="booking-muted booking-tab-hint" data-needs-venue>Save the venue first, then manage its events here.</p>
                    <div data-child-pane="events" hidden>
                        {{ crud::shell_open(config_url="/plugins/booking/assets/admin/events_list.json", mount_id="booking-modal-events-list", custom_mount=true) }}
                        <table class="blocks-admin-table responsive-table">
                            <thead></thead>
                            <tbody>
                                <tr><td colspan="7" class="crud-empty-state text-center">Loading events…</td></tr>
                            </tbody>
                        </table>
                        {{ crud::shell_close() }}
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="booking-resource-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="booking-resource-modal-title" aria-hidden="true">
        <div class="modal-content w-[calc(100%-2rem)] max-w-xl">
            <div class="modal-header">
                <h3 id="booking-resource-modal-title">Bookable item</h3>
                <button type="button" class="close-btn booking-modal-close blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="booking-resource-form-fields"></div>
            </div>
        </div>
    </div>

    <div id="booking-price-rule-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="booking-price-rule-modal-title" aria-hidden="true">
        <div class="modal-content w-[calc(100%-2rem)] max-w-xl">
            <div class="modal-header">
                <h3 id="booking-price-rule-modal-title">Price rule</h3>
                <button type="button" class="close-btn booking-modal-close blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="booking-price-rule-form-fields"></div>
            </div>
        </div>
    </div>

    <div id="booking-special-day-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="booking-special-day-modal-title" aria-hidden="true">
        <div class="modal-content w-[calc(100%-2rem)] max-w-xl">
            <div class="modal-header">
                <h3 id="booking-special-day-modal-title">Special day</h3>
                <button type="button" class="close-btn booking-modal-close blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="booking-special-day-form-fields"></div>
            </div>
        </div>
    </div>

    <div id="booking-event-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="booking-event-modal-title" aria-hidden="true">
        <div class="modal-content w-[calc(100%-2rem)] max-w-xl">
            <div class="modal-header">
                <h3 id="booking-event-modal-title">Event</h3>
                <button type="button" class="close-btn booking-modal-close blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="booking-event-form-fields"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/booking/assets/js/icon_picker.js"></script>
<script src="/plugins/booking/assets/js/resource_form.js"></script>
<script src="/plugins/booking/assets/js/admin_venue.js"></script>
{% endblock %}