{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/plugins/floor-order/assets/css/floor-order.ui.css">
<link rel="stylesheet" href="/plugins/catalog/assets/css/catalog-cards.css">
<link rel="stylesheet" href="/plugins/catalog/assets/css/storefront-premium.css">
<link rel="stylesheet" href="/plugins/catalog/assets/css/product-detail.css">
{% endblock %}

{% block content %}
<div class="blocks-workspace fo-container mx-auto w-full max-w-7xl px-4 py-6 sm:px-6" id="floor-order-table"
     data-point-id="{{ point_id | default(value='') }}"
     data-currency="{{ currency_symbol | default(value='₹') }}"
     data-api-join="/plugins/floor-order/api/table/join"
     data-api-session="/plugins/floor-order/api/table/session"
     data-api-cart-add="/plugins/floor-order/api/table/cart/add"
     data-api-cart="/plugins/floor-order/api/table/cart"
     data-api-dispatch="/plugins/floor-order/api/table/dispatch"
     data-api-billing-request="/plugins/floor-order/api/table/billing/request"
     data-catalog-public="/plugins/catalog/public">
<div class="blocks-workspace-notice" data-floor-order-notice data-workspace-notice role="status" aria-live="polite" hidden></div>

{% if login_required %}
<div class="fo-access-denied grid justify-items-center gap-4 py-12 text-center">
    <div class="fo-access-icon text-muted mb-4"><i class="fas fa-sign-in-alt fa-3x"></i></div>
    <h1 class="mb-0 text-2xl font-bold">Sign in to order</h1>
    <p class="m-0 text-muted">Please log in to place orders at this table.</p>
    <a href="{{ redirect | default(value='/auth/login') }}" class="btn btn-primary">Log in</a>
</div>

{% elif error %}
<div class="fo-access-denied grid justify-items-center gap-4 py-12 text-center">
    <div class="fo-access-icon text-danger mb-4"><i class="fas fa-qrcode fa-3x"></i></div>
    <h1 class="mb-0 text-2xl font-bold">Table not found</h1>
    <p class="m-0 text-muted">{{ message | default(value='Scan a valid table QR code to start ordering.') }}</p>
    <a href="/" class="btn"><i class="fas fa-home"></i> Home</a>
</div>

{% else %}

<div class="fo-table-header">
    <div>
        <h1 class="fo-title m-0" id="fo-table-label">{{ point_label | default(value='Table') }}</h1>
        <p class="text-muted m-0" id="fo-table-meta">
            {% if area_name %}{{ area_name }} · {% endif %}
            <span id="fo-table-status">Loading…</span>
        </p>
    </div>
    <div class="fo-header-actions">
        <button type="button" id="fo-table-bill-btn" class="btn" disabled>Request Bill</button>
        <button type="button" id="fo-table-place-btn" class="btn btn-primary" disabled>
            <i class="fas fa-paper-plane"></i> Place Order
        </button>
    </div>
</div>

<div class="fo-table-main-row">
    <div class="fo-table-catalog">
        <div class="fo-search-sticky">
            <input type="search" id="fo-table-search" placeholder="Search menu…">
            <div class="fo-category-filters" id="fo-table-category-filters">
                <button type="button" class="fo-filter-btn active" id="all" data-category="all">All</button>
                {% for cat in categories %}
                <button type="button" class="fo-filter-btn" data-category="{{ cat.id }}" data-category-ref="{% if cat.slug %}{{ cat.slug }}{% else %}category-{{ cat.id }}{% endif %}" id="{% if cat.slug %}{{ cat.slug }}{% else %}category-{{ cat.id }}{% endif %}">{{ cat.title }}</button>
                {% endfor %}
            </div>
        </div>
        <div id="fo-table-product-grid" class="fo-table-product-grid sf-root">
            <div class="text-center text-muted p-4"><i class="fas fa-circle-notch fa-spin"></i> Loading menu…</div>
        </div>
    </div>

    <div class="fo-order-bottom-stack" id="fo-order-bottom-stack">
        <aside class="fo-table-cart-panel" id="fo-table-cart-panel">
            <h2 class="mb-3 text-base font-semibold">My order</h2>
            <div id="fo-table-cart-items" class="fo-cart-items"></div>
            <div class="fo-cart-summary">
                <div class="fo-summary-row"><span>Subtotal</span><span id="fo-table-subtotal">—</span></div>
                <div class="fo-summary-row fo-summary-total"><span>Total</span><span id="fo-table-total">—</span></div>
            </div>
            <div id="fo-table-dispatches" class="fo-dispatches-list mt-3"></div>
        </aside>
        <div id="fo-sticky-cart-cta" class="sticky-cart-bar fo-sticky-cart-cta" hidden aria-hidden="true">
            <div class="fo-sticky-cart-inner">
                <button type="button" class="fo-sticky-cart-summary" data-fo-sticky-summary aria-label="View order" aria-controls="fo-table-cart-panel" aria-expanded="false"></button>
                <button type="button" class="btn-cart-bar fo-sticky-cart-action" data-fo-sticky-action>Place Order</button>
            </div>
        </div>
    </div>
</div>

<div id="fo-product-drawer" class="fo-product-drawer" hidden aria-hidden="true">
    <div class="fo-product-drawer-backdrop" id="fo-product-drawer-backdrop"></div>
    <div class="fo-product-drawer-panel" role="dialog" aria-labelledby="fo-drawer-title">
        <button type="button" class="fo-product-drawer-close" id="fo-product-drawer-close" aria-label="Close">
            <i class="fas fa-times"></i>
        </button>
        <div id="fo-product-drawer-body" class="fo-product-drawer-body">
            <div class="text-center text-muted p-4"><i class="fas fa-circle-notch fa-spin"></i></div>
        </div>
    </div>
</div>

{% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/floor-order/assets/js/category-filter-hash.js" defer></script>
<script src="/plugins/floor-order/assets/js/sticky-cart-cta.js" defer></script>
<script src="/plugins/catalog/assets/js/catalog-cart-actions.js" defer></script>
<script src="/plugins/catalog/assets/js/catalog-components.js" defer></script>
<script src="/plugins/catalog/assets/js/catalog-renderer.js" defer></script>
<script src="/plugins/floor-order/assets/js/table-catalog-bridge.js" defer></script>
<script src="/plugins/floor-order/assets/js/table-order.js" defer></script>
{% endblock %}