<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#0c0a09" id="meta-theme">
    <title><?php echo htmlspecialchars($table['restaurant_name']); ?> - Digital Menu</title>
    
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* ============================================================
           DESIGN SYSTEM — Luxe Light & Dark
        ============================================================ */
        :root {
            --bg:            #fafaf9;
            --bg-elevated:   #ffffff;
            --bg-hover:      #f5f5f4;
            --bg-header:     rgba(250,250,249,0.78);
            --bg-overlay:    rgba(28,25,23,0.45);
            --bg-sheet:      #ffffff;
            --border:        rgba(0,0,0,0.06);
            --border-hover:  rgba(0,0,0,0.12);
            --accent:        #15803d;
            --accent-soft:   rgba(21,128,61,0.08);
            --accent-text:   #ffffff;
            --gold:          #b8860b;
            --gold-soft:     rgba(184,134,11,0.08);
            --text-1:        #1c1917;
            --text-2:        #57534e;
            --text-3:        #a8a29e;
            --text-price:    #15803d;
            --shadow-xs:     0 1px 2px rgba(0,0,0,0.04);
            --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
            --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.05);
            --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.06);
            --r-xs:          6px;
            --r-sm:          10px;
            --r-md:          14px;
            --r-lg:          18px;
            --r-xl:          26px;
            --r-full:        9999px;
            --serif:         'Playfair Display', serif;
            --spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease:          cubic-bezier(0.16, 1, 0.3, 1);
            --duration:      0.35s;
        }

        :root.dark {
            --bg:            #0c0a09;
            --bg-elevated:   #1c1917;
            --bg-hover:      #292524;
            --bg-header:     rgba(12,10,9,0.78);
            --bg-overlay:    rgba(0,0,0,0.65);
            --bg-sheet:      #1c1917;
            --border:        rgba(255,255,255,0.05);
            --border-hover:  rgba(255,255,255,0.1);
            --accent:        #22c55e;
            --accent-soft:   rgba(34,197,94,0.1);
            --accent-text:   #022c22;
            --gold:          #d4a54a;
            --gold-soft:     rgba(212,165,74,0.12);
            --text-1:        #f5f5f4;
            --text-2:        #a8a29e;
            --text-3:        #78716c;
            --text-price:    #22c55e;
            --shadow-xs:     0 1px 2px rgba(0,0,0,0.2);
            --shadow-sm:     0 2px 4px rgba(0,0,0,0.3);
            --shadow-md:     0 8px 16px rgba(0,0,0,0.4);
            --shadow-lg:     0 16px 24px rgba(0,0,0,0.5);
        }

        * {
            margin: 0; padding: 0; box-sizing: border-box;
            font-family: 'Inter', sans-serif;
            transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg);
            color: var(--text-1);
            min-height: 100vh;
            padding-bottom: 120px;
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 3px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 3px; }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 0 16px;
        }

        [x-cloak] { display: none !important; }

        /* ============================================================
           HEADER
        ============================================================ */
        header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--bg-header);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            max-width: 600px;
            margin: 0 auto;
        }

        .restaurant-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .restaurant-logo {
            width: 44px;
            height: 44px;
            border-radius: var(--r-md);
            object-cover: cover;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-xs);
        }

        .restaurant-meta h1 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-1);
            line-height: 1.2;
        }

        .restaurant-meta p {
            font-size: 11px;
            color: var(--gold);
            font-weight: 600;
            margin-top: 2px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .h-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .h-btn {
            width: 38px;
            height: 38px;
            border-radius: var(--r-full);
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            color: var(--text-2);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            box-shadow: var(--shadow-xs);
            transition: all var(--duration) var(--ease);
        }
        .h-btn:hover {
            color: var(--text-1);
            border-color: var(--border-hover);
            transform: scale(1.04);
        }
        .h-btn:active {
            transform: scale(0.96);
        }
        
        .h-btn.active-hub-btn {
            background: var(--gold-soft);
            border-color: var(--gold);
            color: var(--gold);
        }

        .cart-btn-wrapper {
            position: relative;
        }
        .cart-badge {
            position: absolute;
            top: -2px; right: -2px;
            background: var(--gold);
            color: #1a1200;
            font-size: 10px;
            font-weight: 800;
            min-width: 18px;
            height: 18px;
            border-radius: var(--r-full);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--bg-elevated);
            animation: bounce 0.4s var(--ease);
        }

        /* ============================================================
           CATEGORIES (PREMIUM PILLS)
        ============================================================ */
        .cat-scroll-wrapper {
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        .cat-scroll {
            padding: 12px 16px;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            max-width: 600px;
            margin: 0 auto;
        }
        .cat-scroll::-webkit-scrollbar { display: none; }

        .cat-pill {
            flex-shrink: 0;
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-2);
            background: var(--bg-elevated);
            border: 1.5px solid var(--border);
            border-radius: var(--r-full);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-xs);
            transition: all 0.3s var(--spring);
        }
        .cat-pill::before {
            content: '';
            position: absolute;
            top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: none;
            pointer-events: none;
        }
        .cat-pill:hover::before {
            left: 150%;
            transition: all 0.6s ease;
        }
        .cat-pill:hover {
            color: var(--text-1);
            border-color: var(--border-hover);
            transform: translateY(-1px);
        }
        .cat-pill.active {
            background: linear-gradient(135deg, var(--gold), #c9952a);
            color: #1a1200;
            border-color: transparent;
            font-weight: 700;
            box-shadow: 0 4px 12px var(--gold-glow), 0 0 0 1px rgba(212, 165, 74, 0.2);
        }

        /* ============================================================
           SEARCH BAR
        ============================================================ */
        .search-container {
            margin: 16px 0;
        }
        .search-wrapper {
            position: relative;
            width: 100%;
        }
        .search-wrapper i {
            position: absolute;
            left: 14px; top: 50%;
            transform: translateY(-50%);
            color: var(--text-3);
            font-size: 14px;
        }
        .search-input {
            width: 100%;
            padding: 12px 14px 12px 40px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            color: var(--text-1);
            font-size: 14px;
            outline: none;
            box-shadow: var(--shadow-xs);
            transition: all var(--duration) var(--ease);
        }
        .search-input:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px var(--gold-soft);
        }

        /* ============================================================
           PRODUCTS GRID
        ============================================================ */
        .products-grid {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .product-card {
            display: flex;
            background: var(--bg-elevated);
            border: 1.5px solid var(--border);
            border-radius: var(--r-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all var(--duration) var(--spring);
        }
        .product-card:hover {
            transform: translateY(-2px);
            border-color: var(--border-hover);
            box-shadow: var(--shadow-md);
        }

        .product-image-wrapper {
            width: 110px;
            height: 110px;
            background: var(--bg-hover);
            position: relative;
            flex-shrink: 0;
        }
        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .product-image-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--text-3);
            background: linear-gradient(135deg, var(--bg-hover), var(--border));
        }

        .product-details {
            flex-grow: 1;
            padding: 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .product-header h3 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-1);
            line-height: 1.3;
        }
        .product-desc {
            font-size: 12px;
            color: var(--text-2);
            margin-top: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
        }
        .product-price {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-price);
        }

        .qty-controller {
            display: flex;
            align-items: center;
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-radius: var(--r-full);
            overflow: hidden;
            height: 32px;
        }
        .qty-btn {
            width: 32px;
            height: 100%;
            border: none;
            background: transparent;
            color: var(--text-1);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            transition: background-color 0.2s;
        }
        .qty-btn:hover { background-color: var(--border); }
        .qty-val {
            font-size: 13px;
            font-weight: 700;
            min-width: 24px;
            text-align: center;
            color: var(--text-1);
        }

        .btn-add {
            background: var(--bg-elevated);
            border: 1.5px solid var(--gold);
            color: var(--gold);
            padding: 6px 14px;
            border-radius: var(--r-full);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: var(--shadow-xs);
            transition: all 0.2s var(--ease);
        }
        .btn-add:hover {
            background: linear-gradient(135deg, var(--gold), #c9952a);
            color: #1a1200;
            border-color: transparent;
            transform: scale(1.02);
        }
        .btn-add:active {
            transform: scale(0.98);
        }

        /* ============================================================
           ACTIVE HUB & FEEDBACK STYLES
        ============================================================ */
        .hub-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding-top: 16px;
        }
        .hub-card {
            background: var(--bg-elevated);
            border: 1.5px solid var(--border);
            border-radius: var(--r-lg);
            padding: 20px;
            box-shadow: var(--shadow-md);
        }
        .hub-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .hub-title h2 {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-1);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .hub-title h2 i { color: var(--gold); }
        .hub-ordernum {
            font-size: 11px;
            font-weight: 700;
            color: var(--gold);
            background: var(--gold-soft);
            padding: 4px 10px;
            border-radius: var(--r-full);
        }

        .hub-status-header {
            margin-bottom: 18px;
        }
        .hub-status-label {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-1);
        }
        .hub-status-desc {
            font-size: 12px;
            color: var(--text-2);
            margin-top: 4px;
        }

        /* Timeline progress bar */
        .timeline-wrapper {
            position: relative;
            margin-top: 24px;
            padding-bottom: 8px;
        }
        .timeline-labels {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-3);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
        }
        .timeline-label.active { color: var(--gold); }
        .timeline-bar {
            height: 6px;
            background: var(--bg-hover);
            border-radius: var(--r-full);
            overflow: hidden;
            position: relative;
        }
        .timeline-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--gold), #c9952a);
            border-radius: var(--r-full);
            box-shadow: 0 0 10px var(--gold-glow);
            transition: width 0.8s var(--ease);
        }

        /* Feedback styling */
        .fb-toggle {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }
        .fb-toggle-btn {
            padding: 10px;
            border-radius: var(--r-md);
            border: 1.5px solid var(--border);
            background: var(--bg);
            color: var(--text-2);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all var(--duration) var(--ease);
        }
        .fb-toggle-btn.active-compliment {
            background: rgba(34, 197, 94, 0.08);
            border-color: #22c55e;
            color: #22c55e;
        }
        .fb-toggle-btn.active-complaint {
            background: rgba(239, 68, 68, 0.08);
            border-color: #ef4444;
            color: #ef4444;
        }

        .fb-inputs-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 10px;
        }
        .fb-input {
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--r-md);
            border: 1.5px solid var(--border);
            background: var(--bg);
            color: var(--text-1);
            font-size: 13px;
            outline: none;
        }
        .fb-input:focus { border-color: var(--gold); }
        .fb-textarea {
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--r-md);
            border: 1.5px solid var(--border);
            background: var(--bg);
            color: var(--text-1);
            font-size: 13px;
            outline: none;
            resize: none;
            margin-bottom: 12px;
        }
        .fb-textarea:focus { border-color: var(--gold); }
        
        .fb-submit {
            width: 100%;
            padding: 12px;
            border-radius: var(--r-md);
            background: linear-gradient(135deg, var(--gold), #c9952a);
            border: none;
            color: #1a1200;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: var(--shadow-sm);
        }
        .fb-submit:disabled {
            background: var(--text-3);
            color: var(--bg);
            cursor: not-allowed;
            box-shadow: none;
        }

        /* ============================================================
           CART PANEL
        ============================================================ */
        .cart-overlay {
            position: fixed;
            inset: 0;
            z-index: 100;
            display: flex;
            flex-direction: column;
            justify-content: end;
        }
        .cart-backdrop {
            position: absolute;
            inset: 0;
            background: var(--bg-overlay);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .cart-sheet {
            position: relative;
            background: var(--bg-sheet);
            border-top: 1px solid var(--border);
            border-radius: var(--r-xl) var(--r-xl) 0 0;
            max-height: 85vh;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-lg);
            z-index: 10;
        }
        .cart-handle-bar {
            display: flex;
            justify-content: center;
            padding: 12px 0 6px;
        }
        .cart-handle {
            width: 36px;
            height: 4px;
            background: var(--border-hover);
            border-radius: var(--r-full);
        }

        .cart-header {
            padding: 0 20px 14px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cart-header h2 { font-size: 18px; font-weight: 700; color: var(--text-1); }
        .cart-close {
            width: 32px; height: 32px;
            border-radius: var(--r-full);
            background: var(--bg-hover);
            border: none;
            color: var(--text-2);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .cart-items {
            flex-grow: 1;
            overflow-y: auto;
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .cart-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: var(--bg-hover);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
        }
        .cart-item-name { font-size: 13px; font-weight: 700; color: var(--text-1); }
        .cart-item-price { font-size: 12px; color: var(--gold); font-weight: 700; margin-top: 2px; }

        .cart-notes-wrapper {
            padding: 10px 20px;
            border-top: 1px solid var(--border);
        }
        .cart-textarea {
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--r-md);
            border: 1px solid var(--border);
            background: var(--bg-hover);
            color: var(--text-1);
            font-size: 13px;
            outline: none;
            resize: none;
        }
        .cart-textarea:focus { border-color: var(--gold); }

        .coupon-section {
            padding: 10px 20px;
            background: var(--bg-hover);
            border-top: 1px solid var(--border);
        }
        .coupon-section label {
            display: block;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-3);
            margin-bottom: 4px;
        }
        .coupon-select {
            width: 100%;
            padding: 10px;
            border-radius: var(--r-md);
            border: 1px solid var(--border);
            background: var(--bg-elevated);
            color: var(--text-1);
            font-size: 13px;
            outline: none;
        }
        .coupon-select:focus { border-color: var(--gold); }

        .cart-summary {
            padding: 16px 20px 24px;
            border-top: 1px solid var(--border);
        }
        .sum-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            color: var(--text-2);
            margin-bottom: 6px;
        }
        .sum-row.discount-row { color: #22c55e; font-weight: 600; }
        .sum-total {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 850;
            color: var(--text-1);
            border-top: 1px solid var(--border);
            padding-top: 10px;
            margin-top: 4px;
        }
        .sum-total .tv { color: var(--gold); }

        .btn-order-submit {
            width: 100%;
            padding: 16px;
            border-radius: var(--r-lg);
            background: linear-gradient(135deg, var(--gold), #c9952a);
            border: none;
            color: #1a1200;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(212, 165, 74, 0.2);
            transition: all 0.2s ease;
        }
        .btn-order-submit:hover { transform: translateY(-1px); }
        .btn-order-submit:active { transform: translateY(0); }
        .btn-order-submit:disabled {
            background: var(--text-3);
            color: var(--bg);
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }

        /* ============================================================
           FLOATING ORDER FOOTER
        ============================================================ */
        .float-footer {
            position: fixed;
            bottom: 24px;
            left: 0; right: 0;
            padding: 0 16px;
            z-index: 40;
            display: flex;
            justify-content: center;
        }
        .float-cart-btn {
            background: linear-gradient(135deg, var(--gold), #c9952a);
            color: #1a1200;
            padding: 14px 20px;
            border-radius: var(--r-lg);
            border: none;
            width: 100%;
            max-width: 440px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(212, 165, 74, 0.3);
            transition: all 0.3s var(--ease);
        }
        .float-cart-btn:hover { transform: translateY(-2px); }
        .float-cart-btn:active { transform: translateY(0); }
        .float-item-count {
            background: rgba(26, 18, 0, 0.15);
            font-size: 12px;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: var(--r-sm);
        }
        .float-view-cart { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
        .float-price { font-size: 15px; font-weight: 800; }

        /* ============================================================
           SUCCESS OVERLAY
        ============================================================ */
        .success-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 120;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px;
            text-align: center;
        }

        .success-check-wrapper {
            width: 90px;
            height: 90px;
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: var(--r-full);
            color: #22c55e;
            font-size: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
            animation: bounce 0.6s var(--spring);
        }

        .success-overlay h2 {
            font-family: var(--serif);
            font-size: 26px;
            font-weight: 700;
            color: var(--text-1);
            margin-bottom: 6px;
        }
        .success-overlay p {
            font-size: 13px;
            color: var(--text-2);
            margin-bottom: 24px;
        }
        .success-details {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            padding: 12px 24px;
            border-radius: var(--r-md);
            font-size: 13px;
            color: var(--gold);
            font-weight: 700;
            margin-bottom: 32px;
        }

        .success-btn {
            background: var(--bg-elevated);
            border: 1.5px solid var(--gold);
            color: var(--gold);
            padding: 12px 30px;
            border-radius: var(--r-full);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            transition: all 0.2s;
        }
        .success-btn:hover {
            background: linear-gradient(135deg, var(--gold), #c9952a);
            color: #1a1200;
            border-color: transparent;
        }

        /* Ambient Glow variables and elements */
        .menu-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(140px);
            pointer-events: none;
            opacity: 0.3;
            z-index: -1;
        }
        .m-glow-1 {
            width: 350px; height: 350px;
            top: 100px; left: -100px;
            background: radial-gradient(circle, rgba(212, 165, 74, 0.15) 0%, transparent 70%);
        }
        
        /* Toast style notifications */
        .toast-notify {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            background: var(--bg-sheet);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: 10px 16px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-1);
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .toast-notify.success { border-color: #22c55e; color: #22c55e; }
        .toast-notify.error { border-color: #ef4444; color: #ef4444; }

        /* Animations */
        @keyframes bounce {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); opacity: 0.8; }
            70% { transform: scale(0.9); opacity: 0.9; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .fade-in { animation: fadeIn 0.3s var(--ease); }
        .slide-up { animation: slideUp 0.35s var(--spring); }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
    </style>
</head>
<body x-data="menuApp()" x-init="initTheme()">

    <div class="menu-glow m-glow-1"></div>

    <!-- Toast Notifications -->
    <template x-if="feedbackToast">
        <div class="toast-notify" :class="feedbackToastType" x-transition>
            <i class="fas" :class="feedbackToastType === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
            <span x-text="feedbackToast"></span>
        </div>
    </template>

    <!-- Top Header -->
    <header>
        <div class="header-content">
            <div class="restaurant-info">
                <?php if (!empty($table['restaurant_logo'])): ?>
                    <img src="/<?php echo htmlspecialchars($table['restaurant_logo']); ?>" class="restaurant-logo" alt="logo">
                <?php endif; ?>
                <div class="restaurant-meta">
                    <h1><?php echo htmlspecialchars($table['restaurant_name']); ?></h1>
                    <p>
                        <i class="fas fa-chair"></i>
                        <span><?php echo htmlspecialchars($table['floor_name']); ?> · Table <?php echo htmlspecialchars($table['name']); ?></span>
                    </p>
                </div>
            </div>
            <div class="h-actions">
                <button @click="toggleTheme()" class="h-btn" :title="dark ? 'Light Mode' : 'Dark Mode'">
                    <i class="fas" :class="dark ? 'fa-sun' : 'fa-moon'"></i>
                </button>
                <?php if ($activeOrder): ?>
                    <button @click="showActiveHub = !showActiveHub" class="h-btn" :class="showActiveHub ? 'active-hub-btn' : ''" :title="showActiveHub ? 'Browse Menu' : 'Track Order'">
                        <i class="fas" :class="showActiveHub ? 'fa-hamburger' : 'fa-receipt'"></i>
                    </button>
                <?php endif; ?>
                <div class="cart-btn-wrapper" x-show="!showActiveHub">
                    <button @click="showCart = true" class="h-btn">
                        <i class="fas fa-shopping-bag"></i>
                    </button>
                    <span class="cart-badge" x-show="totalItems > 0" x-text="totalItems"></span>
                </div>
            </div>
        </div>

        <!-- Category Nav (Shimmer pills) -->
        <div class="cat-scroll-wrapper" x-show="!showActiveHub" x-transition>
            <nav class="cat-scroll">
                <button @click="activeCategory = null" :class="!activeCategory ? 'cat-pill active' : 'cat-pill'">All</button>
                <?php foreach ($categories as $cat): ?>
                <button @click="activeCategory = '<?php echo $cat['id']; ?>'" :class="activeCategory === '<?php echo $cat['id']; ?>' ? 'cat-pill active' : 'cat-pill'"><?php echo htmlspecialchars($cat['name']); ?></button>
                <?php endforeach; ?>
            </nav>
        </div>
    </header>

    <main class="container">
        
        <!-- Search bar -->
        <div class="search-container" x-show="!showActiveHub" x-transition>
            <div class="search-wrapper">
                <i class="fas fa-search"></i>
                <input type="text" x-model="searchQuery" placeholder="Search dishes..." class="search-input">
            </div>
        </div>

        <!-- Menu view -->
        <div x-show="!showActiveHub" class="products-grid" x-transition>
            <template x-for="product in filteredProducts" :key="product.id">
                <div class="product-card">
                    <!-- Product Image -->
                    <div class="product-image-wrapper">
                        <template x-if="product.image">
                            <img :src="'/public/' + product.image" :alt="product.name" class="product-image" loading="lazy">
                        </template>
                        <template x-if="!product.image">
                            <div class="product-image-fallback">
                                <i class="fas fa-utensils"></i>
                            </div>
                        </template>
                    </div>

                    <!-- Details -->
                    <div class="product-details">
                        <div class="product-header">
                            <h3 x-text="product.name"></h3>
                            <p class="product-desc" x-text="product.description || 'Prepared fresh daily with premium ingredients.'"></p>
                        </div>
                        <div class="product-footer">
                            <span class="product-price">
                                <span x-text="currency"></span>
                                <span x-text="parseFloat(product.price).toFixed(2)"></span>
                            </span>
                            
                            <div>
                                <div x-show="getQty(product.id) === 0">
                                    <button @click="addToCart(product)" class="btn-add">+ Add</button>
                                </div>
                                <div x-show="getQty(product.id) > 0" class="qty-controller">
                                    <button @click="decreaseQty(product.id)" class="qty-btn">−</button>
                                    <span class="qty-val" x-text="getQty(product.id)"></span>
                                    <button @click="addToCart(product)" class="qty-btn">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <!-- Empty State -->
            <div x-show="filteredProducts.length === 0" class="text-center py-20 text-gray-400" style="padding: 60px 0; text-align: center; color: var(--text-3)">
                <i class="fas fa-search mb-3" style="font-size: 36px; opacity: 0.3; margin-bottom: 12px;"></i>
                <p class="font-medium" style="font-size: 14px; font-weight: 500;">No dishes match your search.</p>
            </div>
        </div>

        <!-- Placed Order Status Hub -->
        <?php if ($activeOrder): ?>
            <?php
            $kStatus = $activeOrder['kitchen_status'] ?? 'queued';
            $oStatus = $activeOrder['status'] ?? 'pending';

            $step = 1;
            $statusLabel = 'Order Received';
            $statusDesc = 'We have received your order. Staff will process it shortly.';

            if ($kStatus === 'served' || $oStatus === 'completed') {
                $step = 4;
                $statusLabel = 'Served';
                $statusDesc = 'Your meal has been served. Enjoy your food!';
            } elseif ($kStatus === 'ready') {
                $step = 3;
                $statusLabel = 'Ready to Serve';
                $statusDesc = 'Your order is hot and ready! It will be served at your table in a moment.';
            } elseif ($kStatus === 'preparing' || $oStatus === 'accepted') {
                $step = 2;
                $statusLabel = 'Preparing';
                $statusDesc = 'Our chefs are currently preparing your delicious meal!';
            }

            $fillWidth = '0%';
            if ($step === 2) {
                $fillWidth = '33%';
            } elseif ($step === 3) {
                $fillWidth = '66%';
            } elseif ($step === 4) {
                $fillWidth = '100%';
            }
            ?>

            <div x-show="showActiveHub" class="hub-container" x-transition x-cloak>
                <!-- Progress status card -->
                <div class="hub-card">
                    <div class="hub-title">
                        <h2>
                            <i class="fas fa-clock"></i>
                            <span>Order Progress</span>
                        </h2>
                        <span class="hub-ordernum">Order #<?php echo htmlspecialchars($activeOrder['order_number']); ?></span>
                    </div>

                    <div class="hub-status-header">
                        <div class="hub-status-label"><?php echo $statusLabel; ?></div>
                        <div class="hub-status-desc"><?php echo $statusDesc; ?></div>
                    </div>

                    <!-- Progress bar line -->
                    <div class="timeline-wrapper">
                        <div class="timeline-labels">
                            <span class="timeline-label <?php echo $step >= 1 ? 'active' : ''; ?>">Received</span>
                            <span class="timeline-label <?php echo $step >= 2 ? 'active' : ''; ?>">Preparing</span>
                            <span class="timeline-label <?php echo $step >= 3 ? 'active' : ''; ?>">Ready</span>
                            <span class="timeline-label <?php echo $step >= 4 ? 'active' : ''; ?>">Served</span>
                        </div>
                        <div class="timeline-bar">
                            <div class="timeline-fill" style="width: <?php echo $fillWidth; ?>;"></div>
                        </div>
                    </div>
                </div>

                <!-- Order items card -->
                <div class="hub-card">
                    <div class="hub-title" style="margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px;">
                        <h2 style="font-size: 14px;"><i class="fas fa-list-ul"></i><span>Order Details</span></h2>
                    </div>

                    <div class="hub-items-list" style="max-height: 240px; overflow-y: auto;">
                        <?php foreach ($activeOrderItems as $item): ?>
                            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--border);">
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <span style="font-weight: 700; color: var(--text-1);"><?php echo htmlspecialchars($item['product_name']); ?></span>
                                    <span style="font-size: 11px; color: var(--text-3);">x<?php echo $item['quantity']; ?></span>
                                </div>
                                <span style="font-weight: 700; color: var(--text-2);"><?php echo $currency . number_format($item['price'] * $item['quantity'], 2); ?></span>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <!-- Hub breakdown totals -->
                    <div style="margin-top: 14px; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px;">
                        <div style="display: flex; justify-content: space-between;">
                            <span>Subtotal</span>
                            <span><?php echo $currency . number_format($activeOrder['subtotal'], 2); ?></span>
                        </div>
                        <?php if (floatval($activeOrder['coupon_discount']) > 0): ?>
                            <div style="display: flex; justify-content: space-between; color: #22c55e; font-weight: 600;">
                                <span>Discount (<?php echo htmlspecialchars($activeOrder['coupon_code']); ?>)</span>
                                <span>-<?php echo $currency . number_format($activeOrder['coupon_discount'], 2); ?></span>
                            </div>
                        <?php endif; ?>
                        <div style="display: flex; justify-content: space-between;">
                            <span>Tax</span>
                            <span><?php echo $currency . number_format($activeOrder['tax'], 2); ?></span>
                        </div>
                        <div style="display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--text-1); border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px;">
                            <span>Grand Total</span>
                            <span style="color: var(--gold);"><?php echo $currency . number_format($activeOrder['total'], 2); ?></span>
                        </div>
                    </div>
                </div>

                <!-- Guest Feedback card -->
                <div class="hub-card">
                    <div class="hub-title" style="margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px;">
                        <h2 style="font-size: 14px;"><i class="fas fa-comment-dots"></i><span>Share Your Experience</span></h2>
                    </div>

                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <div class="fb-toggle">
                            <button @click="feedbackType = 'compliment'" :class="feedbackType === 'compliment' ? 'fb-toggle-btn active-compliment' : 'fb-toggle-btn'">
                                <i class="fas fa-thumbs-up"></i> Compliment
                            </button>
                            <button @click="feedbackType = 'complaint'" :class="feedbackType === 'complaint' ? 'fb-toggle-btn active-complaint' : 'fb-toggle-btn'">
                                <i class="fas fa-thumbs-down"></i> Complaint
                            </button>
                        </div>

                        <div class="fb-inputs-row">
                            <input type="text" x-model="feedbackCustomerName" placeholder="Name (Optional)" class="fb-input">
                            <input type="text" x-model="feedbackPhone" placeholder="Phone (Optional)" class="fb-input">
                        </div>

                        <textarea x-model="feedbackMessage" rows="3" placeholder="Tell us how we can make your visit perfect..." class="fb-textarea"></textarea>

                        <button @click="submitFeedback()" :disabled="feedbackSubmitting || feedbackMessage.trim().length < 5" class="fb-submit">
                            <span x-text="feedbackSubmitting ? 'Submitting...' : 'Submit Feedback'"></span>
                            <i class="fas fa-paper-plane" x-show="!feedbackSubmitting"></i>
                            <i class="fas fa-circle-notch fa-spin" x-show="feedbackSubmitting" style="display:none"></i>
                        </button>
                    </div>
                </div>
            </div>
        <?php endif; ?>

        <!-- Restipo Credential Footer -->
        <div style="text-align: center; padding: 24px 16px 40px; color: var(--text-3); font-size: 11px;">
            <div style="font-weight: 500; opacity: 0.8; margin-bottom: 2px;">Contact to make yours</div>
            <div style="font-weight: 700; color: var(--gold);"><i class="fas fa-magic"></i> Restipo &bull; phone-01850211813</div>
        </div>
    </main>

    <!-- Floating bottom Cart trigger button -->
    <div class="float-footer" x-show="totalItems > 0 && !showCart && !showActiveHub && canOrder" x-transition>
        <button @click="showCart = true" class="float-cart-btn">
            <span class="float-item-count" x-text="totalItems + ' items'"></span>
            <span class="float-view-cart">View Cart <i class="fas fa-arrow-right" style="font-size: 12px; margin-left: 2px;"></i></span>
            <span class="float-price" x-text="currency + total.toFixed(2)"></span>
        </button>
    </div>

    <!-- Slide-Up Cart Sheet Drawer -->
    <div class="cart-overlay" x-show="showCart" x-cloak>
        <div class="cart-backdrop" @click="showCart = false"></div>
        <div class="cart-sheet" x-show="showCart" x-transition:enter="slide-up">
            <div class="cart-handle-bar">
                <div class="cart-handle"></div>
            </div>
            <div class="cart-header">
                <h2>Your Order</h2>
                <button @click="showCart = false" class="cart-close"><i class="fas fa-times"></i></button>
            </div>

            <!-- List items -->
            <div class="cart-items">
                <template x-for="item in cart" :key="item.id">
                    <div class="cart-item">
                        <div>
                            <div class="cart-item-name" x-text="item.name"></div>
                            <div class="cart-item-price" x-text="currency + (item.price * item.qty).toFixed(2)"></div>
                        </div>
                        <div class="qty-controller">
                            <button @click="decreaseQty(item.id)" class="qty-btn">−</button>
                            <span class="qty-val" x-text="item.qty"></span>
                            <button @click="addToCartById(item)" class="qty-btn">+</button>
                        </div>
                    </div>
                </template>
                <div x-show="cart.length === 0" style="text-align: center; color: var(--text-3); padding: 40px 0;">
                    <i class="fas fa-shopping-basket" style="font-size: 32px; opacity: 0.3; margin-bottom: 8px;"></i>
                    <p style="font-size: 13px;">Your basket is empty.</p>
                </div>
            </div>

            <!-- Notes -->
            <div class="cart-notes-wrapper" x-show="cart.length > 0">
                <textarea x-model="notes" placeholder="Note for the kitchen (e.g. no onions, extra spicy)..." rows="2" class="cart-textarea"></textarea>
            </div>

            <!-- Coupons selector -->
            <div class="coupon-section" x-show="cart.length > 0">
                <label>Discount Coupon</label>
                <select x-model="selectedCouponCode" @change="applyCouponByCode()" class="coupon-select">
                    <option value="">- Select Coupon -</option>
                    <template x-for="c in coupons" :key="c.id">
                        <option :value="c.code" x-text="c.code + ' (' + (c.type === 'percentage' ? c.value + '%' : currency + parseFloat(c.value).toFixed(2)) + ' OFF)'"></option>
                    </template>
                </select>
                <p x-show="couponMessage" style="font-size: 11px; margin-top: 6px; font-weight: 700;" :class="couponSuccess ? 'text-green-600' : 'text-red-500'" x-text="couponMessage"></p>
            </div>

            <!-- Summary -->
            <div class="cart-summary" x-show="cart.length > 0">
                <div class="sum-row">
                    <span>Subtotal</span>
                    <span x-text="currency + subtotal.toFixed(2)"></span>
                </div>
                <div class="sum-row discount-row" x-show="couponDiscountAmount > 0">
                    <span>Discount</span>
                    <span x-text="'-' + currency + couponDiscountAmount.toFixed(2)"></span>
                </div>
                <div class="sum-row">
                    <span>Tax (5%)</span>
                    <span x-text="currency + tax.toFixed(2)"></span>
                </div>
                <div class="sum-total">
                    <span>Total</span>
                    <span class="tv" x-text="currency + total.toFixed(2)"></span>
                </div>

                <button @click="placeOrder()" :disabled="isProcessing" class="btn-order-submit">
                    <span x-text="isProcessing ? 'Placing Order...' : 'Place Order'"></span>
                    <i class="fas fa-circle-notch fa-spin" x-show="isProcessing" style="display:none"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Success Screen overlay -->
    <div class="success-overlay fade-in" x-show="orderPlaced" x-cloak>
        <div class="success-check-wrapper">
            <i class="fas fa-check"></i>
        </div>
        <h2>Order Placed!</h2>
        <p>Your dining code has been sent directly to the kitchen display system.</p>
        
        <div class="success-details" x-show="orderNumber">
            Order Number #<span x-text="orderNumber"></span>
        </div>
        
        <button @click="resetOrder()" class="success-btn">
            Order More Items
        </button>
        
        <!-- Restipo Credential -->
        <div style="margin-top: 30px; text-align: center; color: var(--text-3); font-size: 11px; opacity: 0.85;">
            <div style="font-weight: 500; margin-bottom: 2px;">Contact to make yours</div>
            <div style="font-weight: 700; color: var(--gold);"><i class="fas fa-magic"></i> Restipo &bull; phone-01850211813</div>
        </div>
    </div>

    <script>
        function menuApp() {
            return {
                currency: '<?php echo $currency; ?>',
                activeCategory: null,
                searchQuery: '',
                cart: [],
                notes: '',
                showCart: false,
                isProcessing: false,
                orderPlaced: false,
                orderNumber: null,
                dark: true,

                // Active Hub & Feedbacks state
                showActiveHub: <?php echo $activeOrder ? 'true' : 'false'; ?>,
                canOrder: <?php echo $activeOrder ? 'false' : 'true'; ?>,
                feedbackType: 'compliment',
                feedbackCustomerName: '',
                feedbackPhone: '',
                feedbackMessage: '',
                feedbackSubmitting: false,
                feedbackToast: '',
                feedbackToastType: 'success',

                // Coupons state
                coupons: <?php echo json_encode($coupons); ?>,
                selectedCouponCode: '',
                selectedCoupon: null,
                couponMessage: '',
                couponSuccess: false,

                products: <?php echo json_encode(array_values($products)); ?>,
                tableId: <?php echo $table['id']; ?>,
                qrToken: '<?php echo htmlspecialchars($table['qr_code']); ?>',
                baseUrl: '<?= BASE_URL ?>',

                initTheme() {
                    const saved = localStorage.getItem('restpo_theme');
                    if (saved) {
                        this.dark = (saved === 'dark');
                    } else {
                        this.dark = true; // Default dark
                    }
                    this.updateThemeClass();
                },

                toggleTheme() {
                    this.dark = !this.dark;
                    localStorage.setItem('restpo_theme', this.dark ? 'dark' : 'light');
                    this.updateThemeClass();
                },

                updateThemeClass() {
                    const meta = document.getElementById('meta-theme');
                    if (this.dark) {
                        document.documentElement.classList.add('dark');
                        if (meta) meta.content = '#0c0a09';
                    } else {
                        document.documentElement.classList.remove('dark');
                        if (meta) meta.content = '#fafaf9';
                    }
                },

                get filteredProducts() {
                    let p = this.products;
                    if (this.activeCategory) p = p.filter(x => x.category_id == this.activeCategory);
                    if (this.searchQuery) {
                        const q = this.searchQuery.toLowerCase();
                        p = p.filter(x => x.name.toLowerCase().includes(q) || (x.description && x.description.toLowerCase().includes(q)));
                    }
                    return p;
                },

                get totalItems() { return this.cart.reduce((s, i) => s + i.qty, 0); },
                get subtotal() { return this.cart.reduce((s, i) => s + (i.price * i.qty), 0); },
                
                get couponDiscountAmount() {
                    if (!this.selectedCoupon) return 0;
                    let eligibleSubtotal = 0;
                    let hasRestriction = false;

                    if (this.selectedCoupon.product_id) {
                        hasRestriction = true;
                        this.cart.forEach(item => {
                            if (item.id == this.selectedCoupon.product_id) {
                                eligibleSubtotal += (item.price * item.qty);
                            }
                        });
                    } else if (this.selectedCoupon.category_id) {
                        hasRestriction = true;
                        this.cart.forEach(item => {
                            if (item.category_id == this.selectedCoupon.category_id) {
                                eligibleSubtotal += (item.price * item.qty);
                            }
                        });
                    }

                    if (!hasRestriction) {
                        eligibleSubtotal = this.subtotal;
                    }

                    if (this.selectedCoupon.type === 'percentage') {
                        return eligibleSubtotal * (parseFloat(this.selectedCoupon.value) / 100);
                    } else {
                        return Math.min(eligibleSubtotal, parseFloat(this.selectedCoupon.value));
                    }
                },

                get tax() { return Math.max(0, this.subtotal - this.couponDiscountAmount) * 0.05; },
                get total() { return Math.max(0, this.subtotal - this.couponDiscountAmount) + this.tax; },

                getQty(id) {
                    const item = this.cart.find(x => x.id == id);
                    return item ? item.qty : 0;
                },

                addToCart(product) {
                    if (!this.canOrder) return;
                    const existing = this.cart.find(x => x.id == product.id);
                    if (existing) { existing.qty++; }
                    else { this.cart.push({ id: product.id, name: product.name, price: parseFloat(product.price), qty: 1, category_id: product.category_id }); }
                    this.applyCouponByCode();
                },

                addToCartById(item) {
                    if (!this.canOrder) return;
                    const existing = this.cart.find(x => x.id == item.id);
                    if (existing) existing.qty++;
                    this.applyCouponByCode();
                },

                decreaseQty(id) {
                    const idx = this.cart.findIndex(x => x.id == id);
                    if (idx >= 0) {
                        this.cart[idx].qty--;
                        if (this.cart[idx].qty <= 0) this.cart.splice(idx, 1);
                    }
                    this.applyCouponByCode();
                },

                applyCouponByCode() {
                    if (!this.selectedCouponCode) {
                        this.selectedCoupon = null;
                        this.couponMessage = '';
                        this.couponSuccess = false;
                        return;
                    }
                    const coupon = this.coupons.find(c => c.code === this.selectedCouponCode);
                    if (!coupon) {
                        this.selectedCoupon = null;
                        this.couponMessage = 'Coupon not found';
                        this.couponSuccess = false;
                        return;
                    }

                    let isEligible = false;
                    if (coupon.product_id) {
                        isEligible = this.cart.some(item => item.id == coupon.product_id);
                    } else if (coupon.category_id) {
                        isEligible = this.cart.some(item => item.category_id == coupon.category_id);
                    } else {
                        isEligible = true;
                    }

                    if (!isEligible) {
                        this.selectedCoupon = null;
                        this.couponMessage = 'Coupon not applicable to items in cart';
                        this.couponSuccess = false;
                        return;
                    }

                    this.selectedCoupon = coupon;
                    this.couponMessage = 'Coupon applied successfully!';
                    this.couponSuccess = true;
                },

                placeOrder() {
                    if (!this.canOrder) {
                        alert('Active order exists. Further ordering is blocked.');
                        return;
                    }
                    this.isProcessing = true;
                    fetch(this.baseUrl + '/qr/order', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            table_id: this.tableId,
                            qr_token: this.qrToken,
                            notes: this.notes,
                            coupon_code: this.selectedCouponCode || null,
                            items: this.cart.map(i => ({ id: i.id, price: i.price, quantity: i.qty }))
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        this.isProcessing = false;
                        if (data.success) {
                            this.showCart = false;
                            this.orderNumber = data.order_number;
                            this.orderPlaced = true;
                        } else {
                            alert(data.message || 'Error placing order. Please try again.');
                        }
                    })
                    .catch(() => {
                        this.isProcessing = false;
                        alert('Network error. Please try again.');
                    });
                },

                submitFeedback() {
                    if (this.feedbackMessage.trim().length < 5) return;
                    this.feedbackSubmitting = true;
                    fetch(this.baseUrl + '/menu/feedback', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            table_id: this.tableId,
                            type: this.feedbackType,
                            message: this.feedbackMessage,
                            customer_name: this.feedbackCustomerName,
                            phone: this.feedbackPhone
                        })
                    })
                    .then(r => r.json())
                    .then(d => {
                        this.feedbackSubmitting = false;
                        if (d.success) {
                            this.feedbackMessage = '';
                            this.feedbackCustomerName = '';
                            this.feedbackPhone = '';
                            this.feedbackToast = d.message || 'Feedback submitted successfully!';
                            this.feedbackToastType = 'success';
                        } else {
                            this.feedbackToast = d.message || 'Error submitting feedback.';
                            this.feedbackToastType = 'error';
                        }
                        setTimeout(() => { this.feedbackToast = ''; }, 4000);
                    })
                    .catch(() => {
                        this.feedbackSubmitting = false;
                        this.feedbackToast = 'Network error. Please try again.';
                        this.feedbackToastType = 'error';
                        setTimeout(() => { this.feedbackToast = ''; }, 4000);
                    });
                },

                resetOrder() {
                    this.cart = [];
                    this.notes = '';
                    this.orderPlaced = false;
                    this.orderNumber = null;
                    this.selectedCouponCode = '';
                    this.selectedCoupon = null;
                    this.couponMessage = '';
                    this.couponSuccess = false;
                    window.location.reload();
                }
            }
        }
    </script>
</body>
</html>
