<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="self_order_menu_template" name="Self-Order Menu">
        <t t-call="website.layout">
            <div id="self_order_app" class="bg-light min-vh-100 pb-5">
                <!-- Data injection for JS -->
                <div id="self_order_data" class="d-none"
                     t-att-data-table-id="table.id if table else ''"
                     t-att-data-floor-id="floor.id if floor else ''"
                     t-att-data-table-name="table.display_name if table else ''"/>

                <!-- Header -->
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top shadow-sm py-2">
                    <div class="container px-3 d-flex justify-content-between">
                        <a class="navbar-brand fw-bold d-flex align-items-center" href="/dine360/menu">
                            <i class="fa fa-cutlery me-2 text-danger"/> Dine360
                        </a>
                        <div t-if="table" class="text-white-50 small">
                            <span class="badge bg-danger text-white px-2 py-1 rounded-pill">
                                Table <t t-esc="table.name"/>
                            </span>
                        </div>
                        <div t-else="" class="text-white-50 small">
                            <span class="badge bg-info text-dark px-2 py-1 rounded-pill">
                                Kiosk Mode
                            </span>
                        </div>
                    </div>
                </nav>

                <!-- Loading State -->
                <div id="loading_overlay" class="d-flex justify-content-center align-items-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>

                <!-- Main Content (Populated by JS) -->
                <div id="self_order_content" class="container py-3 d-none">
                    
                    <!-- Search & Filter -->
                    <div class="mb-4 d-flex gap-2 sticky-top bg-light py-2" style="top: 56px; z-index: 100;">
                        <div class="input-group search-bar shadow-sm">
                            <span class="input-group-text bg-white border-0 ps-3">
                                <i class="fa fa-search text-muted"/>
                            </span>
                            <input type="text" id="product_search" class="form-control border-0 py-2" placeholder="Search for food..."/>
                        </div>
                    </div>

                    <!-- Categories Scroll -->
                    <div id="category_filter" class="d-flex overflow-auto gap-2 pb-3 mb-3 no-scrollbar" style="white-space: nowrap;">
                        <!-- JS injects category buttons here -->
                    </div>

                    <!-- Products List -->
                    <div id="product_list" class="row g-3">
                        <!-- JS injects product cards here -->
                    </div>

                </div>

                <!-- Footer Cart Button -->
                <div id="footer_cart" class="fixed-bottom p-3 d-none shadow-lg bg-white border-top transition-all" style="transform: translateY(100%);">
                    <div class="container d-flex justify-content-between align-items-center">
                        <div class="cart-info">
                            <span id="cart_count" class="badge bg-primary rounded-pill me-2">0</span>
                            <span id="cart_total" class="fw-bold fs-5 text-dark">$0.00</span>
                        </div>
                        <button id="view_cart_btn" class="btn btn-warning btn-lg px-4 fw-bold rounded-pill shadow-sm">
                            View Order <i class="fa fa-arrow-right ms-2"/>
                        </button>
                    </div>
                </div>

                <!-- Cart Modal -->
                <div class="modal fade" id="cart_modal" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
                        <div class="modal-content border-0 overflow-hidden" style="border-radius: 20px;">
                            <div class="modal-header border-0 bg-dark text-white p-4">
                                <h5 class="modal-title fw-bold">My Order</h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"/>
                            </div>
                            <div class="modal-body p-0">
                                <div id="cart_items_list" class="p-4" style="max-height: 400px; overflow-y: auto;">
                                    <!-- JS injects checkout lines here -->
                                </div>
                                <div t-if="not table" class="p-4 bg-light border-top">
                                    <h6 class="fw-bold mb-3">Service Type</h6>
                                    <div class="d-flex gap-2">
                                        <label t-attf-class="flex-fill border p-3 rounded-3 text-center cursor-pointer service-select active {{'w-100' if not website.enable_delivery_option else ''}}" data-mode="pickup">
                                            <input type="radio" name="fulfilment" value="pickup" checked="checked" class="d-none"/>
                                            <i class="fa fa-shopping-basket mb-2 d-block"/> Pickup
                                        </label>
                                        <label class="flex-fill border p-3 rounded-3 text-center cursor-pointer service-select" data-mode="delivery" t-if="website.enable_delivery_option">
                                            <input type="radio" name="fulfilment" value="delivery" class="d-none"/>
                                            <i class="fa fa-truck mb-2 d-block"/> Delivery
                                        </label>
                                    </div>
                                </div>
                                <div class="px-4 py-3 bg-white border-top">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span class="text-muted">Subtotal</span>
                                        <span id="checkout_subtotal">$0.00</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold fs-4">Total</span>
                                        <span id="checkout_total" class="fw-bold fs-4 text-danger">$0.00</span>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer border-0 p-4 pt-0">
                                <button id="submit_order_btn" class="btn btn-warning w-100 btn-lg fw-bold rounded-pill shadow">
                                    Send to Kitchen <i class="fa fa-paper-plane ms-2"/>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </t>
    </template>
</odoo>
