<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <!-- Online Orders Screen -->
    <t t-name="dine360_online_orders.OnlineOrdersScreen" owl="1">
        <div class="online-orders-screen screen d-flex flex-column h-100">
            <!-- Header -->
            <div class="online-orders-header d-flex align-items-center justify-content-between px-4 py-3">
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-light btn-back" t-on-click="back">
                        <i class="fa fa-arrow-left me-2"/>Back
                    </button>
                    <h2 class="mb-0 fw-bold online-orders-title">
                        <i class="fa fa-shopping-cart me-2"/>
                        Online Orders
                        <span class="badge bg-danger ms-2 order-count-badge" t-if="orderCount > 0">
                            <t t-esc="orderCount"/>
                        </span>
                    </h2>
                </div>
                <button class="btn btn-outline-light btn-refresh" t-on-click="loadOnlineOrders">
                    <i class="fa fa-refresh me-1"/>Refresh
                </button>
            </div>

            <!-- Content -->
            <div class="online-orders-body flex-grow-1 d-flex overflow-hidden position-relative">
                
                <!-- Error Alert -->
                <div t-if="state.error" class="position-absolute w-100 p-3" style="z-index: 1050; top: 0;">
                    <div class="alert alert-danger d-flex justify-content-between align-items-center m-0 shadow">
                        <div>
                            <i class="fa fa-exclamation-triangle me-2"/>
                            <span t-esc="state.error"/>
                        </div>
                        <button class="btn btn-sm btn-outline-danger border-0" t-on-click="() => this.state.error = null">
                            <i class="fa fa-times"/>
                        </button>
                    </div>
                </div>

                <!-- Loading State -->
                <div t-if="state.loading" class="d-flex align-items-center justify-content-center w-100">
                    <div class="text-center">
                        <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;"/>
                        <p class="text-muted">Loading online orders...</p>
                    </div>
                </div>

                <!-- Empty State -->
                <div t-elif="state.orders.length === 0" class="d-flex align-items-center justify-content-center w-100">
                    <div class="text-center empty-state">
                        <i class="fa fa-inbox empty-icon mb-3"/>
                        <h3 class="text-muted">No Pending Orders</h3>
                        <p class="text-muted">New website orders will appear here automatically</p>
                    </div>
                </div>

                <!-- Orders List -->
                <t t-else="">
                    <!-- Left Panel: Order Cards -->
                    <div class="online-orders-list p-3">
                        <t t-foreach="state.orders" t-as="order" t-key="order.id">
                            <div t-attf-class="order-card mb-3 p-3 #{state.selectedOrder and state.selectedOrder.id === order.id ? 'selected' : ''}"
                                 t-on-click="() => this.selectOrder(order)">
                                <!-- Order Header -->
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <span class="order-ref fw-bold">
                                            <i class="fa fa-receipt me-1"/>
                                            <t t-esc="order.name"/>
                                        </span>
                                        <span class="badge bg-info ms-2">ONLINE</span>
                                    </div>
                                    <span class="order-total fw-bold">
                                        <t t-esc="formatCurrency(order.amount_total)"/>
                                    </span>
                                </div>

                                <!-- Customer Info -->
                                <div class="order-customer mb-2">
                                    <i class="fa fa-user me-1 text-muted"/>
                                    <span t-esc="order.partner_name"/>
                                    <t t-if="order.partner_phone">
                                        <span class="ms-2 text-muted">
                                            <i class="fa fa-phone me-1"/>
                                            <t t-esc="order.partner_phone"/>
                                        </span>
                                    </t>
                                </div>

                                <!-- Items Summary -->
                                <div class="order-items-summary text-muted small">
                                    <t t-esc="order.lines.length"/> items
                                    <t t-if="order.sale_order_name">
                                        <span class="ms-2">
                                            <i class="fa fa-link me-1"/>
                                            <t t-esc="order.sale_order_name"/>
                                        </span>
                                    </t>
                                </div>

                                <!-- Date -->
                                <div class="order-date text-muted small mt-1">
                                    <i class="fa fa-clock-o me-1"/>
                                    <t t-esc="formatDate(order.date_order)"/>
                                </div>

                                <!-- Quick Actions -->
                                <div class="order-actions d-flex gap-2 mt-3">
                                    <button class="btn btn-success btn-sm flex-grow-1 btn-confirm-order"
                                            t-on-click.stop="() => this.confirmOrder(order.id)"
                                            t-att-disabled="state.confirmingId === order.id">
                                        <t t-if="state.confirmingId === order.id">
                                            <span class="spinner-border spinner-border-sm me-1"/>
                                        </t>
                                        <t t-else="">
                                            <i class="fa fa-check me-1"/>
                                        </t>
                                        Confirm
                                    </button>
                                    <button class="btn btn-danger btn-sm flex-grow-1 btn-reject-order"
                                            t-on-click.stop="() => this.rejectOrder(order.id)">
                                        <i class="fa fa-times me-1"/>Reject
                                    </button>
                                </div>
                            </div>
                        </t>
                    </div>

                    <!-- Right Panel: Order Detail -->
                    <div class="online-order-detail flex-grow-1 p-3">
                        <t t-if="state.selectedOrder">
                            <div class="detail-card p-4">
                                <h4 class="mb-3 fw-bold">
                                    <i class="fa fa-file-text me-2"/>
                                    Order Details: <t t-esc="state.selectedOrder.name"/>
                                </h4>

                                <!-- Customer Detail -->
                                <div class="detail-section mb-4">
                                    <h6 class="text-muted text-uppercase mb-2">Customer</h6>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="customer-avatar">
                                            <i class="fa fa-user"/>
                                        </div>
                                        <div>
                                            <div class="fw-bold" t-esc="state.selectedOrder.partner_name"/>
                                            <div class="text-muted small" t-if="state.selectedOrder.partner_phone">
                                                <i class="fa fa-phone me-1"/>
                                                <t t-esc="state.selectedOrder.partner_phone"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Note -->
                                <div class="detail-section mb-4" t-if="state.selectedOrder.note">
                                    <h6 class="text-muted text-uppercase mb-2">Note</h6>
                                    <div class="note-box p-2 rounded">
                                        <t t-esc="state.selectedOrder.note"/>
                                    </div>
                                </div>

                                <!-- Order Lines -->
                                <div class="detail-section mb-4">
                                    <h6 class="text-muted text-uppercase mb-2">Items</h6>
                                    <table class="table order-lines-table">
                                        <thead>
                                            <tr>
                                                <th>Item</th>
                                                <th class="text-center">Qty</th>
                                                <th class="text-end">Price</th>
                                                <th class="text-end">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <t t-foreach="state.selectedOrder.lines" t-as="line" t-key="line.id">
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center gap-2">
                                                            <span t-attf-class="kitchen-badge #{line.is_kitchen_item ? 'active' : ''}">
                                                                <i t-attf-class="fa #{line.is_kitchen_item ? 'fa-fire' : 'fa-circle-o'}"/>
                                                            </span>
                                                            <span t-esc="line.product_name"/>
                                                        </div>
                                                        <div class="text-muted small mt-1" t-if="line.customer_note">
                                                            <i class="fa fa-comment-o me-1"/>
                                                            <t t-esc="line.customer_note"/>
                                                        </div>
                                                    </td>
                                                    <td class="text-center fw-bold">
                                                        <t t-esc="line.qty"/>
                                                    </td>
                                                    <td class="text-end">
                                                        <t t-esc="formatCurrency(line.price_unit)"/>
                                                    </td>
                                                    <td class="text-end fw-bold">
                                                        <t t-esc="formatCurrency(line.price_subtotal_incl)"/>
                                                    </td>
                                                </tr>
                                            </t>
                                        </tbody>
                                        <tfoot>
                                            <tr class="total-row">
                                                <td colspan="3" class="text-end fw-bold">Total</td>
                                                <td class="text-end fw-bold order-total-amount">
                                                    <t t-esc="formatCurrency(state.selectedOrder.amount_total)"/>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>

                                <!-- Detail Actions -->
                                <div class="detail-actions d-flex gap-3">
                                    <button class="btn btn-success btn-lg flex-grow-1 btn-confirm-detail"
                                            t-on-click="() => this.confirmOrder(state.selectedOrder.id)"
                                            t-att-disabled="state.confirmingId === state.selectedOrder.id">
                                        <t t-if="state.confirmingId === state.selectedOrder.id">
                                            <span class="spinner-border spinner-border-sm me-2"/>
                                            Confirming...
                                        </t>
                                        <t t-else="">
                                            <i class="fa fa-check-circle me-2"/>
                                            Confirm &amp; Send to Kitchen
                                        </t>
                                    </button>
                                    <button class="btn btn-outline-danger btn-lg btn-reject-detail"
                                            t-on-click="() => this.rejectOrder(state.selectedOrder.id)">
                                        <i class="fa fa-times-circle me-1"/>Reject
                                    </button>
                                </div>
                            </div>
                        </t>
                        <t t-else="">
                            <div class="d-flex align-items-center justify-content-center h-100 text-center">
                                <div>
                                    <i class="fa fa-hand-pointer-o" style="font-size: 4rem; color: #ccc;"/>
                                    <p class="mt-3 text-muted">Select an order to view details</p>
                                </div>
                            </div>
                        </t>
                    </div>
                </t>
            </div>
        </div>
    </t>

    <!-- Navbar button for Online Orders -->
    <t t-name="dine360_online_orders.NavbarButton" t-inherit="point_of_sale.Navbar" t-inherit-mode="extension" owl="1">
        <xpath expr="//div[hasclass('status-buttons')]" position="before">
            <button class="online-orders-nav-btn btn d-flex align-items-center gap-2 h-100 px-3 border-0"
                    t-on-click="onClickOnlineOrders">
                <i class="fa fa-shopping-cart"/>
                <span t-if="!ui.isSmall">Online Orders</span>
            </button>
        </xpath>
    </t>

</templates>
