<?php
header('Content-Type: text/html; charset=utf-8');
/**
 * CMTC Tech Solution - Order Gateway & Customer Order Interface (order.php)
 * Theme: Private CMTC Tech Solution Enterprise UI (Pure Vanilla JS Version)
 */
require_once 'db.php';

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// 1. AJAX JSON API for Order Submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (ob_get_length()) ob_clean();
    header('Content-Type: application/json; charset=utf-8');
    
    $raw_input = file_get_contents('php://input');
    $data = json_decode($raw_input, true);
    if (!$data) {
        $data = $_POST;
        if (isset($_POST['cart_items']) && is_string($_POST['cart_items'])) {
            $data['cart_items'] = json_decode($_POST['cart_items'], true);
        }
    }

    $store_id = intval($data['store_id'] ?? ($_SESSION['scanned_store_id'] ?? 1));
    $table_number = trim($data['table_number'] ?? ($_SESSION['scanned_table'] ?? '1'));
    $cart_items = $data['cart_items'] ?? [];

    if ($store_id <= 0) {
        echo json_encode(['success' => false, 'message' => 'ไม่พบรหัสร้านค้าสำหรับการสั่งซื้อ']);
        exit;
    }
    if (empty($table_number)) {
        echo json_encode(['success' => false, 'message' => 'กรุณาระบุหมายเลขโต๊ะเพื่อส่งออเดอร์']);
        exit;
    }
    if (empty($cart_items) || !is_array($cart_items)) {
        echo json_encode(['success' => false, 'message' => 'ไม่มีรายการอาหารในตะกร้าสินค้า']);
        exit;
    }

    // Session-Based Rate Limiting & Cooldown Protection (15-Second Anti-Spam Rule)
    $cooldown_seconds = 15;
    $last_order_ts = (int)($_SESSION['last_order_timestamp'] ?? 0);
    $time_diff = time() - $last_order_ts;

    if ($last_order_ts > 0 && $time_diff < $cooldown_seconds) {
        $remaining = $cooldown_seconds - $time_diff;
        http_response_code(429);
        echo json_encode([
            'success' => false,
            'rate_limited' => true,
            'remaining_seconds' => $remaining,
            'message' => "กรุณารอสักครู่ ({$remaining} วินาที) ก่อนทำการส่งคำสั่งซื้อเพิ่ม (Anti-Spam Cooldown)"
        ]);
        exit;
    }

    try {
        $pdo->beginTransaction();

        $payment_method = isset($_POST['payment_method']) ? trim($_POST['payment_method']) : 'cash';
        $is_paid = ($payment_method === 'transfer') ? 1 : 0;
        $raw_voucher = trim($data['voucher'] ?? ($_POST['voucher'] ?? ''));
        $voucher = !empty($raw_voucher) ? substr($raw_voucher, 0, 50) : null;

        $stmt = $pdo->prepare("INSERT INTO orders (store_id, table_number, status, payment_method, is_paid, voucher) VALUES (:store_id, :table_number, 'pending', :payment_method, :is_paid, :voucher)");
        $stmt->execute([
            ':store_id' => $store_id,
            ':table_number' => $table_number,
            ':payment_method' => $payment_method,
            ':is_paid' => $is_paid,
            ':voucher' => $voucher
        ]);
        $order_id = $pdo->lastInsertId();

        $stmt_item = $pdo->prepare("INSERT INTO order_items (order_id, menu_id, quantity, price, note, spice_level) VALUES (:order_id, :menu_id, :quantity, :price, :note, :spice_level)");
        $stmt_prod = $pdo->prepare("SELECT price FROM menus WHERE menu_id = :id");

        foreach ($cart_items as $ci) {
            $menu_id = intval($ci['id'] ?? ($ci['menu_id'] ?? 0));
            $qty = intval($ci['qty'] ?? ($ci['quantity'] ?? 1));
            $price = floatval($ci['price'] ?? 0);
            $note = trim($ci['note'] ?? '');
            $spice = trim($ci['spice_level'] ?? 'เผ็ดปกติ');

            if ($menu_id <= 0 || $qty <= 0) continue;

            $stmt_prod->execute([':id' => $menu_id]);
            $prod = $stmt_prod->fetch(PDO::FETCH_ASSOC);
            if ($prod) {
                $price = floatval($prod['price']);
            }

            $stmt_item->execute([
                ':order_id' => $order_id,
                ':menu_id' => $menu_id,
                ':quantity' => $qty,
                ':price' => $price,
                ':note' => $note,
                ':spice_level' => $spice
            ]);
        }

        $pdo->commit();
        $_SESSION['last_order_timestamp'] = time();
        echo json_encode([
            'success' => true,
            'message' => 'สั่งอาหารสำเร็จแล้ว! รายการถูกส่งเข้าห้องครัวเรียบร้อย',
            'order_id' => $order_id,
            'table_number' => $table_number
        ]);
        exit;
    } catch (Exception $e) {
        if ($pdo->inTransaction()) $pdo->rollBack();
        echo json_encode(['success' => false, 'message' => 'เกิดข้อผิดพลาดในการบันทึกออเดอร์: ' . $e->getMessage()]);
        exit;
    }
}

// 2. Fetch Store & Menu Items for Page Rendering
$store_id = intval($_GET['store_id'] ?? ($_GET['shop_id'] ?? ($_SESSION['scanned_store_id'] ?? 1)));
$table_number = trim($_GET['table'] ?? ($_SESSION['scanned_table'] ?? '1'));

$_SESSION['scanned_store_id'] = $store_id;
$_SESSION['scanned_table'] = $table_number;

$stmt_store = $pdo->prepare("SELECT * FROM tenants WHERE store_id = :id AND status = 'active'");
$stmt_store->execute([':id' => $store_id]);
$store_info = $stmt_store->fetch(PDO::FETCH_ASSOC);

if (!$store_info) {
    $store_info = [
        'store_id' => $store_id,
        'store_name' => 'ร้านอาหาร CMTC Tech Solution',
        'address' => 'ศูนย์บริการสั่งอาหารออนไลน์',
        'custom_logo_url' => 'logo.png',
        'store_banner_url' => 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1200&auto=format&fit=crop&q=80'
    ];
}

$stmt_menus = $pdo->prepare("SELECT menu_id as id, name as menu_name, price, category, description, image_url, is_available, sort_order FROM menus WHERE store_id = :store_id AND is_available = 1 ORDER BY sort_order ASC, menu_id DESC");
$stmt_menus->execute([':store_id' => $store_id]);
$menus = $stmt_menus->fetchAll(PDO::FETCH_ASSOC);

if (empty($menus)) {
    $stmt_fallback = $pdo->query("SELECT menu_id as id, name as menu_name, price, category, description, image_url, is_available FROM menus WHERE is_available = 1 LIMIT 10");
    $menus = $stmt_fallback->fetchAll(PDO::FETCH_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($store_info['store_name'] ?? 'ระบบสั่งอาหาร'); ?> - Order Gateway</title>
    <!-- SweetAlert2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Navigation Sound & SweetAlert Engine -->
    <script src="js/nav_sound_swal.js"></script>
    <style>
        :root {
            --primary: #ff5722;
            --primary-dark: #e64a19;
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-dark: #0f172a;
            --text-muted: #64748b;
        }
        body {
            background-color: var(--bg-color);
            font-family: 'Sarabun', 'Inter', system-ui, sans-serif;
            margin: 0;
            padding: 0;
            color: var(--text-dark);
            padding-bottom: 90px;
        }
        .header-bar {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #fff;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .store-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .store-logo-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            object-fit: cover;
            border: 2px solid var(--primary);
            background: #fff;
        }
        .cart-trigger-btn {
            position: relative;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: #fff;
            padding: 10px 16px;
            border-radius: 12px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
        }
        .cart-trigger-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
        }
        .cart-badge {
            background: var(--primary);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 12px;
            min-width: 18px;
            text-align: center;
        }
        @media (max-width: 768px) {
            .cart-trigger-btn {
                position: fixed !important;
                bottom: 25px !important;
                right: 20px !important;
                z-index: 9999 !important;
                width: 56px !important;
                height: 56px !important;
                padding: 0 !important;
                border-radius: 50% !important;
                background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%) !important;
                color: #ffffff !important;
                box-shadow: 0 8px 25px rgba(255, 87, 34, 0.5) !important;
                border: none !important;
                justify-content: center !important;
            }
            .cart-trigger-btn .cart-btn-text {
                display: none !important;
            }
            .cart-trigger-btn .cart-icon-symbol {
                font-size: 24px !important;
            }
            .cart-trigger-btn .cart-badge {
                position: absolute !important;
                top: -3px !important;
                right: -3px !important;
                background: #0f172a !important;
                color: #ffffff !important;
                border: 2px solid #ffffff !important;
                font-size: 11px !important;
                font-weight: 800 !important;
                min-width: 22px !important;
                height: 22px !important;
                border-radius: 11px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 4px !important;
                box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
            }
        }
        .container {
            max-width: 1100px;
            margin: 25px auto;
            padding: 0 20px;
        }
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 22px;
        }
        .menu-card {
            background: var(--card-bg);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.05);
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .menu-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .menu-img-wrap {
            width: 100%;
            height: 160px;
            position: relative;
            background: #f1f5f9;
            cursor: pointer;
        }
        .menu-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .menu-body {
            padding: 16px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .menu-title {
            font-size: 16px;
            font-weight: 800;
            margin-bottom: 6px;
            color: #0f172a;
        }
        .menu-desc {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 14px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .menu-price {
            font-size: 20px;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 14px;
        }
        .card-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .btn-view-detail {
            background: #f1f5f9;
            color: #334155;
            border: 1px solid #cbd5e1;
            padding: 10px 6px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 12.5px;
            cursor: pointer;
            text-align: center;
        }
        .btn-add-to-cart {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: #fff;
            border: none;
            padding: 10px 6px;
            border-radius: 10px;
            font-weight: bold;
            font-size: 12.5px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(255,87,34,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        .btn-add-to-cart:hover {
            opacity: 0.92;
        }

        /* Modal Base Styles */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(6px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal-box {
            background: #ffffff;
            width: 92%;
            max-width: 500px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            max-height: 88vh;
        }
        .modal-header {
            background: #0f172a;
            color: #fff;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 800;
            color: var(--primary);
        }
        .btn-close-modal {
            background: rgba(255,255,255,0.15);
            color: #fff;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
        }
        .modal-body {
            padding: 20px;
            overflow-y: auto;
            flex-grow: 1;
        }
        .modal-footer {
            padding: 16px 20px;
            background: #f8fafc;
            border-top: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .cart-item-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            margin-bottom: 10px;
        }
        .cart-item-info {
            flex-grow: 1;
        }
        .cart-item-title {
            font-weight: bold;
            font-size: 14.5px;
            color: #0f172a;
        }
        .cart-item-price {
            color: var(--primary);
            font-weight: 800;
            font-size: 13.5px;
        }
        .qty-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .btn-qty {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: none;
            background: #e2e8f0;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-qty-plus {
            background: var(--primary);
            color: #fff;
        }
        .btn-remove-item {
            background: #ef4444;
            color: #fff;
            border: none;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            margin-left: 6px;
        }
        .total-row {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: 800;
            color: #0f172a;
        }
        .btn-confirm-order {
            width: 100%;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #fff;
            border: none;
            padding: 14px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(16,185,129,0.3);
        }
        .toast-msg {
            position: fixed;
            top: 75px;
            right: 20px;
            background: #0f172a;
            color: #fff;
            padding: 12px 18px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            border-left: 4px solid var(--primary);
            z-index: 10000;
            font-weight: bold;
            font-size: 14px;
            display: none;
        }
    </style>
</head>
<body>

<!-- Header Bar -->
<div class="header-bar">
    <div class="store-brand">
        <img src="<?php echo htmlspecialchars($store_info['custom_logo_url'] ?: 'logo.png'); ?>" class="store-logo-icon" alt="Logo" onerror="this.src='logo.png'">
        <div>
            <div style="font-weight: 800; font-size: 16px;"><?php echo htmlspecialchars($store_info['store_name']); ?></div>
            <div style="font-size: 12px; color: #94a3b8;">โต๊ะที่ <?php echo htmlspecialchars($table_number); ?> • สั่งอาหารออนไลน์</div>
        </div>
    </div>
    <button type="button" class="cart-trigger-btn" id="cart-icon-btn" aria-label="Cart">
        <span class="cart-icon-symbol">🛒</span>
        <span class="cart-btn-text">ตะกร้าสินค้า</span>
        <span class="cart-badge" id="cart-badge">0</span>
    </button>
</div>

<!-- Main Container -->
<div class="container">
    <h2 style="font-size: 22px; font-weight: 800; margin-bottom: 20px; color: #0f172a;">🍽️ เมนูอาหารพร้อมเสิร์ฟ</h2>
    
    <div class="menu-grid">
        <?php foreach ($menus as $m): 
            $img = !empty($m['image_url']) ? $m['image_url'] : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600&auto=format&fit=crop&q=80';
        ?>
            <div class="menu-card">
                <div class="menu-img-wrap btn-view-detail" 
                     data-id="<?php echo $m['id']; ?>" 
                     data-name="<?php echo htmlspecialchars($m['menu_name'], ENT_QUOTES); ?>" 
                     data-price="<?php echo $m['price']; ?>" 
                     data-detail="<?php echo htmlspecialchars($m['description'] ?: 'เมนูคุณภาพ ปรุงสดใหม่ทุกจาน', ENT_QUOTES); ?>" 
                     data-img="<?php echo htmlspecialchars($img, ENT_QUOTES); ?>">
                    <img src="<?php echo htmlspecialchars($img); ?>" alt="<?php echo htmlspecialchars($m['menu_name']); ?>" onerror="this.src='https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600&auto=format&fit=crop&q=80'" loading="lazy" decoding="async">
                </div>
                <div class="menu-body">
                    <div>
                        <div class="menu-title"><?php echo htmlspecialchars($m['menu_name']); ?></div>
                        <div class="menu-desc"><?php echo htmlspecialchars($m['description'] ?: 'เมนูคุณภาพ ปรุงสดใหม่ทุกจาน'); ?></div>
                    </div>
                    <div>
                        <div class="menu-price">฿<?php echo number_format($m['price'], 2); ?></div>
                        <div class="card-actions">
                            <button type="button" 
                                    class="btn-add-to-cart" 
                                    id="add-item" 
                                    data-id="<?php echo $m['id']; ?>" 
                                    data-name="<?php echo htmlspecialchars($m['menu_name'], ENT_QUOTES); ?>" 
                                    data-price="<?php echo $m['price']; ?>"
                                    data-detail="<?php echo htmlspecialchars($m['description'] ?: 'เมนูคุณภาพ ปรุงสดใหม่ทุกจาน', ENT_QUOTES); ?>" 
                                    data-img="<?php echo htmlspecialchars($img, ENT_QUOTES); ?>"
                                    style="width: 100%;">
                                🛒 เพิ่มลงตะกร้า
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- 1. FOOD DETAIL MODAL -->
<div class="modal-overlay" id="detail-modal">
    <div class="modal-box">
        <div class="modal-header">
            <h3 id="detail-modal-title">รายละเอียดอาหาร</h3>
            <button type="button" class="btn-close-modal" id="btn-close-detail">✕</button>
        </div>
        <div class="modal-body">
            <img id="detail-modal-img" src="" style="width: 100%; height: 180px; object-fit: cover; border-radius: 12px; margin-bottom: 15px;" alt="Food Image">
            <div id="detail-modal-desc" style="font-size: 14px; color: #334155; background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 15px; line-height: 1.5;"></div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="font-size: 22px; font-weight: 800; color: var(--primary);" id="detail-modal-price">฿0.00</div>
                <button type="button" class="btn-add-to-cart" id="btn-detail-add" style="width: auto; padding: 10px 20px;">🛒 สั่งรายการนี้</button>
            </div>
        </div>
    </div>
</div>

<!-- 2. CART DRAWER MODAL -->
<div class="modal-overlay" id="cart-modal">
    <div class="modal-box" id="cartDrawer">
        <div class="modal-header">
            <h3>🛒 ตะกร้าสินค้าของคุณ</h3>
            <button type="button" class="btn-close-modal" id="btn-close-cart">✕</button>
        </div>
        <div class="modal-body" id="modal-cart-items">
            <div style="text-align: center; color: #64748b; padding: 40px 0;">ไม่มีรายการอาหารในตะกร้า</div>
        </div>
        <div class="modal-footer">
            <input type="hidden" id="cart_table_number" value="<?php echo htmlspecialchars($table_number); ?>">
            <div class="total-row">
                <span>ยอดรวมสุทธิ:</span>
                <span style="color: var(--primary);">฿<span id="cart-total-price">0.00</span></span>
            </div>
            <button type="button" class="btn-confirm-order" id="btn-confirm-order">
                ✅ ยืนยันการสั่งซื้ออาหาร
            </button>
        </div>
    </div>
</div>

<!-- Toast Notice Box -->
<div class="toast-msg" id="toast-msg"></div>

<script>
// Global Cart Array & Store Variables
let cart = [];
const currentStoreId = <?php echo $store_id; ?>;
let activeDetailItem = null;

// Safe Event Listener Binding Logic (Vanilla JS)
document.addEventListener('DOMContentLoaded', function() {

    // 1. Food Detail Modal Trigger
    document.querySelectorAll('.btn-view-detail').forEach(function(elem) {
        elem.addEventListener('click', function(e) {
            e.preventDefault();
            const id = parseInt(this.getAttribute('data-id') || 0);
            const name = this.getAttribute('data-name') || 'รายละเอียดอาหาร';
            const price = parseFloat(this.getAttribute('data-price') || 0);
            const detail = this.getAttribute('data-detail') || 'เมนูคุณภาพ ปรุงสดใหม่ทุกจาน';
            const img = this.getAttribute('data-img') || 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600&auto=format&fit=crop&q=80';

            activeDetailItem = { id: id, name: name, price: price };

            const titleEl = document.getElementById('detail-modal-title');
            const descEl = document.getElementById('detail-modal-desc');
            const priceEl = document.getElementById('detail-modal-price');
            const imgEl = document.getElementById('detail-modal-img');
            const detailModal = document.getElementById('detail-modal');

            if (titleEl) titleEl.textContent = name;
            if (descEl) descEl.textContent = detail;
            if (priceEl) priceEl.textContent = '฿' + price.toFixed(2);
            if (imgEl) imgEl.src = img;

            if (detailModal) {
                detailModal.style.display = 'flex';
                detailModal.classList.add('active');
            }
        });
    });

    // Close Detail Modal Button
    const btnCloseDetail = document.getElementById('btn-close-detail');
    if (btnCloseDetail) {
        btnCloseDetail.addEventListener('click', function(e) {
            e.preventDefault();
            closeModal('detail-modal');
        });
    }

    // Add to Cart from Detail Modal
    const btnDetailAdd = document.getElementById('btn-detail-add');
    if (btnDetailAdd) {
        btnDetailAdd.addEventListener('click', function(e) {
            e.preventDefault();
            if (activeDetailItem) {
                addToCart(activeDetailItem.id, activeDetailItem.name, activeDetailItem.price, 1);
                closeModal('detail-modal');
            }
        });
    }

    // 2. Add to Cart Buttons (.btn-add-to-cart & #add-item)
    document.querySelectorAll('.btn-add-to-cart, #add-item').forEach(function(button) {
        if (button.id === 'btn-detail-add') return; // Skip detail modal button

        button.addEventListener('click', function(e) {
            e.preventDefault();
            const id = parseInt(this.getAttribute('data-id') || 0);
            const name = this.getAttribute('data-name') || 'รายการอาหาร';
            const price = parseFloat(this.getAttribute('data-price') || 0);
            const detail = this.getAttribute('data-detail') || 'เมนูคุณภาพ ปรุงสดใหม่ทุกจาน';
            const img = this.getAttribute('data-img') || 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600&auto=format&fit=crop&q=80';

            activeDetailItem = { id: id, name: name, price: price };

            const titleEl = document.getElementById('detail-modal-title');
            const descEl = document.getElementById('detail-modal-desc');
            const priceEl = document.getElementById('detail-modal-price');
            const imgEl = document.getElementById('detail-modal-img');
            const detailModal = document.getElementById('detail-modal');

            if (titleEl) titleEl.textContent = name;
            if (descEl) descEl.textContent = detail;
            if (priceEl) priceEl.textContent = '฿' + price.toFixed(2);
            if (imgEl) imgEl.src = img;

            if (detailModal) {
                detailModal.style.display = 'flex';
                detailModal.classList.add('active');
            }
        });
    });

    // Cart Modal Controls
    const cartIconBtn = document.getElementById('cart-icon-btn');
    const btnCloseCart = document.getElementById('btn-close-cart');

    if (cartIconBtn) {
        cartIconBtn.addEventListener('click', function(e) {
            e.preventDefault();
            openCartModal();
        });
    }

    if (btnCloseCart) {
        btnCloseCart.addEventListener('click', function(e) {
            e.preventDefault();
            closeModal('cart-modal');
        });
    }

    // Overlay backdrop click to close
    document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
        overlay.addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal(this.id);
            }
        });
    });

    // 3. Confirm Order Submit Button
    const btnConfirmOrder = document.getElementById('btn-confirm-order');
    if (btnConfirmOrder) {
        btnConfirmOrder.addEventListener('click', function(e) {
            e.preventDefault();
            submitOrderAJAX();
        });
    }
});

// Helper Functions
function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.style.display = 'none';
        modal.classList.remove('active');
    }
}

function openCartModal() {
    updateCartUI();
    const modal = document.getElementById('cart-modal');
    if (modal) {
        modal.style.display = 'flex';
        modal.classList.add('active');
    }
}

// Add Item to Array Logic
function addToCart(id, name, price, qty) {
    const targetId = parseInt(id);
    const targetQty = parseInt(qty) || 1;

    const existing = cart.find(item => item.id === targetId);
    if (existing) {
        existing.qty += targetQty;
    } else {
        cart.push({
            id: targetId,
            name: name,
            price: parseFloat(price),
            qty: targetQty
        });
    }

    updateCartUI();
    showToast(`🎉 เพิ่ม "${name}" (x${targetQty}) ลงตะกร้าแล้ว!`);
}

// Render Cart UI & Badge Counter
function updateCartUI() {
    const cartBadge = document.getElementById('cart-badge');
    const container = document.getElementById('modal-cart-items');
    const totalPriceEl = document.getElementById('cart-total-price');

    let totalQty = 0;
    let totalPrice = 0;

    cart.forEach(item => {
        totalQty += item.qty;
        totalPrice += item.price * item.qty;
    });

    if (cartBadge) {
        cartBadge.textContent = totalQty;
    }

    if (totalPriceEl) {
        totalPriceEl.textContent = totalPrice.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    if (container) {
        if (cart.length === 0) {
            container.innerHTML = '<div style="text-align: center; color: #64748b; padding: 40px 0;">ไม่มีรายการอาหารในตะกร้า</div>';
            return;
        }

        let html = '';
        cart.forEach((item, index) => {
            html += `
                <div class="cart-item-row">
                    <div class="cart-item-info">
                        <div class="cart-item-title">${escapeHTML(item.name)}</div>
                        <div class="cart-item-price">฿${(item.price * item.qty).toFixed(2)} (${item.price.toFixed(2)} x ${item.qty})</div>
                    </div>
                    <div class="qty-controls">
                        <button type="button" class="btn-qty" onclick="changeCartQty(${index}, -1)">-</button>
                        <span style="font-weight: bold; font-size: 14px; width: 18px; text-align: center;">${item.qty}</span>
                        <button type="button" class="btn-qty btn-qty-plus" onclick="changeCartQty(${index}, 1)">+</button>
                        <button type="button" class="btn-remove-item" onclick="removeCartItem(${index})">ลบ</button>
                    </div>
                </div>
            `;
        });
        container.innerHTML = html;
    }
}

function changeCartQty(index, delta) {
    if (cart[index]) {
        cart[index].qty += delta;
        if (cart[index].qty <= 0) {
            cart.splice(index, 1);
        }
        updateCartUI();
    }
}

function removeCartItem(index) {
    if (cart[index]) {
        cart.splice(index, 1);
        updateCartUI();
    }
}

function escapeHTML(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function showToast(message) {
    const toast = document.getElementById('toast-msg');
    if (toast) {
        toast.textContent = message;
        toast.style.display = 'block';
        setTimeout(function() {
            toast.style.display = 'none';
        }, 2000);
    }
}

// 3. AJAX Submit Order to PHP
function submitOrderAJAX() {
    if (cart.length === 0) {
        alert('กรุณาเลือกรายการอาหารอย่างน้อย 1 รายการก่อนส่งสั่งซื้อ');
        return;
    }

    const tableInput = document.getElementById('cart_table_number');
    const table_number = tableInput ? tableInput.value.trim() : '1';

    if (!table_number) {
        alert('กรุณาระบุหมายเลขโต๊ะอาหารก่อนส่งสั่งซื้อ');
        return;
    }

    const payload = {
        action: 'place_order',
        store_id: currentStoreId,
        table_number: table_number,
        cart_items: cart
    };

    const btnConfirm = document.getElementById('btn-confirm-order');
    if (btnConfirm) {
        btnConfirm.disabled = true;
        btnConfirm.textContent = '⏳ กำลังส่งออเดอร์เข้าห้องครัว...';
    }

    fetch('order.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(payload)
    })
    .then(async function(response) {
        const text = await response.text();
        try {
            return JSON.parse(text);
        } catch(e) {
            console.error("Raw response:", text);
            throw new Error("Server JSON Response Error: " + text.substring(0, 100));
        }
    })
    .then(function(data) {
        if (btnConfirm) {
            btnConfirm.disabled = false;
            btnConfirm.textContent = '✅ ยืนยันการสั่งซื้ออาหาร';
        }

        if (data.success) {
            alert('🎉 สั่งอาหารสำเร็จแล้ว!\nหมายเลขออเดอร์: #' + data.order_id + '\nโต๊ะที่: ' + data.table_number + '\nรายการถูกส่งเข้าห้องครัวเรียบร้อย');
            cart = [];
            updateCartUI();
            closeModal('cart-modal');
        } else {
            alert('ไม่สามารถส่งออเดอร์ได้: ' + (data.message || 'เกิดข้อผิดพลาดในการสั่งซื้อ'));
        }
    })
    .catch(function(error) {
        if (btnConfirm) {
            btnConfirm.disabled = false;
            btnConfirm.textContent = '✅ ยืนยันการสั่งซื้ออาหาร';
        }
        console.error("Submit Error:", error);
        alert('เกิดข้อผิดพลาดทางเทคนิค: ' + error.message);
    });
}
</script>

</body>
</html>
