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

{% block page_title %}Floor Order Administration{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/floor-order/assets/css/floor-order.ui.css">
{% endblock %}

{% block admin_content %}
<div id="floor-order-admin-config" hidden></div>

<div class="blocks-workspace mx-auto w-full max-w-7xl px-4 py-6 sm:px-6">
<div class="blocks-workspace-notice" data-floor-order-notice data-workspace-notice role="status" aria-live="polite" hidden></div>
<div class="blocks-section-tabs" id="floor-order-admin-tabs" role="tablist" aria-label="Floor order administration">
    <button type="button" class="blocks-section-tab active" role="tab" aria-selected="true" data-tab-target="tab-sessions">Active Sessions</button>
    <button type="button" class="blocks-section-tab" role="tab" aria-selected="false" data-tab-target="tab-points" tabindex="-1">Service Points</button>
    <button type="button" class="blocks-section-tab" role="tab" aria-selected="false" data-tab-target="tab-staff" tabindex="-1">Staff Enrollment</button>
</div>

<div id="tab-sessions" role="tabpanel" data-tab-panel>
    {{ crud::shell_open(config_url="/plugins/floor-order/assets/admin/sessions_list.json", mount_id="floor-order-sessions-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="6" class="crud-empty-state">Loading sessions…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}
</div>

<div id="tab-points" role="tabpanel" data-tab-panel hidden>
        <div class="blocks-workspace-panel">
        <div class="blocks-workspace-toolbar">
        <div class="min-w-0 flex-1">
            <h2 class="mb-2 text-xl font-semibold">Service Points</h2>
            <p class="blocks-workspace-help">Areas group service points (tables, booths, stations, rooms). Click a point to edit; use area actions to manage zones.</p>
        </div>
        <div class="flex flex-wrap gap-3">
            <button type="button" class="btn" id="fo-btn-add-area"><i class="fas fa-plus"></i> Add Area</button>
            <button type="button" class="btn btn-primary" id="fo-btn-add-point"><i class="fas fa-plus"></i> Add Service Point</button>
        </div>
    </div>
    </div>
    <div class="fo-points-tree-legend mb-2" aria-label="Status legend">
        <span class="tree-status-badge tree-status-badge--active">Active</span>
        <span class="tree-status-badge tree-status-badge--inactive">Inactive</span>
        <span class="text-muted fo-points-tree-legend-note">Use <strong>Sort → Custom order</strong> and drag areas to reorder (saved automatically).</span>
    </div>
    <div id="floor-order-points-tree" class="fo-points-tree-mount"></div>
</div>

<div id="tab-staff" role="tabpanel" data-tab-panel hidden>
    {{ crud::shell_open(config_url="/plugins/floor-order/assets/admin/staff_enrollment_list.json", mount_id="floor-order-staff-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="5" class="crud-empty-state">Loading staff…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}
</div>

<script type="application/json" id="floor-order-areas-json">[]</script>

<div id="areaModal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="areaModalTitle" aria-hidden="true">
    <div class="modal-content max-w-xl">
        <div class="modal-header">
            <h3 id="areaModalTitle">Add Area</h3>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="area-form-fields"></div>
        </div>
    </div>
</div>

<div id="pointModal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="pointModalTitle" aria-hidden="true">
    <div class="modal-content max-w-xl">
        <div class="modal-header">
            <h3 id="pointModalTitle">Add Service Point</h3>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="point-form-fields"></div>
            <div id="fo-point-qr-section" class="fo-point-qr-section" hidden>
            <h4 class="mb-2 text-base font-semibold">Table ordering QR</h4>
            <p class="mb-2 text-sm text-muted">Diners scan this link to browse the menu and place orders at this table.</p>
                <div class="fo-point-qr-url">
                    <input type="text" id="fo-point-qr-url" readonly>
                    <button type="button" class="btn" id="fo-point-qr-copy">Copy</button>
                </div>
                <div class="fo-point-qr-preview" id="fo-point-qr-preview" aria-hidden="true"></div>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/tree-selection.js?v=6" defer></script>
<script src="/static/js/blocks-workspace-tabs.js" defer></script>
<script src="/plugins/floor-order/assets/js/sessions_list.js?v=1" defer></script>
<script src="/plugins/floor-order/assets/js/staff_enrollment_list.js?v=1" defer></script>
<script src="/plugins/floor-order/assets/js/admin.js?v=fetch-admin-v3" defer></script>
{% endblock %}