{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/plugins/floor-order/assets/css/floor-order.ui.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-take"
     data-currency="{{ currency_symbol | default(value='₹') }}"
     data-api-products="/plugins/floor-order/api/products"
     data-api-session-open="/plugins/floor-order/api/session/open"
     data-api-session-get="/plugins/floor-order/api/session/get"
     data-api-cart-add="/plugins/floor-order/api/cart/add"
     data-api-cart="/plugins/floor-order/api/cart"
     data-api-dispatch="/plugins/floor-order/api/dispatch"
     data-api-billing-request="/plugins/floor-order/api/billing/request">
<div class="blocks-workspace-notice" data-floor-order-notice data-workspace-notice role="status" aria-live="polite" hidden></div>

{% if is_not_enrolled %}
<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-user-shield fa-3x"></i></div>
    <h1 class="mb-0 text-2xl font-bold">Access Restricted</h1>
    <p class="m-0 text-muted">You are not enrolled as an <strong>Order Taker</strong>. Ask an administrator to grant the role under Floor Order Admin.</p>
    <a href="/" class="btn"><i class="fas fa-home"></i> Home</a>
</div>

{% else %}

<div id="fo-point-picker">
    <div class="fo-page-header">
        <h1 class="fo-title">Take Orders</h1>
        <p class="text-muted m-0">Select a service point to open or resume a session.</p>
    </div>
    <div id="fo-points-grid" class="fo-points-grid">
        {% for pt in points %}
        <button type="button" class="fo-point-card fo-point-{{ pt.status }}"
                id="point-{{ pt.id }}"
                data-point-ref="point-{{ pt.id }}"
                data-point-id="{{ pt.id }}"
                data-label="{{ pt.label }}"
                data-session-id="{{ pt.active_session_id | default(value='') }}">
            <span class="fo-point-label">{{ pt.label }}</span>
            {% if pt.area_name %}<span class="fo-point-area">{{ pt.area_name }}</span>{% endif %}
            <span class="fo-badge fo-badge-{{ pt.status }}">{{ pt.status }}</span>
        </button>
        {% else %}
        <p class="text-muted">No service points configured. Add them in Floor Order Admin.</p>
        {% endfor %}
    </div>
</div>

<div id="fo-order-panel" hidden>
    <div class="fo-page-header fo-order-header">
        <div>
            <button type="button" id="fo-back-points" class="btn mb-2"><i class="fas fa-arrow-left"></i> Points</button>
            <h1 class="fo-title m-0" id="fo-session-point-label">—</h1>
            <p class="text-muted m-0" id="fo-session-meta"></p>
        </div>
        <div class="fo-header-actions">
            <button type="button" id="fo-request-bill-btn" class="btn" disabled>Request Bill</button>
            <button type="button" id="fo-dispatch-btn" class="btn btn-primary" disabled><i class="fas fa-paper-plane"></i> Send to Production</button>
        </div>
    </div>

    <div class="fo-order-main-row">
        <div class="fo-catalog-column">
            <div class="fo-search-sticky">
                <input type="search" id="fo-product-search" placeholder="Search items…">
                <div class="fo-category-filters" id="fo-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-product-grid" class="fo-product-grid">
                <div class="text-center text-muted p-4"><i class="fas fa-circle-notch fa-spin"></i> Loading…</div>
            </div>
        </div>

        <div class="fo-order-bottom-stack" id="fo-order-bottom-stack">
            <div class="fo-cart-column" id="fo-take-cart-panel">
                <h2 class="mb-3 text-base font-semibold">Session Cart</h2>
                <div id="fo-cart-items" class="fo-cart-items"></div>
                <div class="fo-cart-summary" id="fo-cart-summary">
                    <div class="fo-summary-row"><span>Subtotal</span><span id="fo-subtotal">—</span></div>
                    <div class="fo-summary-row fo-summary-total"><span>Total</span><span id="fo-total">—</span></div>
                </div>
                <div id="fo-dispatches-list" class="fo-dispatches-list mt-3"></div>
            </div>
            <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 cart" aria-controls="fo-take-cart-panel" aria-expanded="false"></button>
                    <button type="button" class="btn-cart-bar fo-sticky-cart-action" data-fo-sticky-action>Send to Production</button>
                </div>
            </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/floor-order/assets/js/take-order.js" defer></script>
{% endblock %}