<?php
header('Content-Type: text/html; charset=utf-8');
/**
 * CMTC Tech Solution - Customer Menu & Ordering (Self-Service Enterprise UI)
 * Theme: Private CMTC Tech Solution Theme
 */
require_once 'db.php';

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

// 1. Extract Store & Table Parameters
$raw_store_id = $_REQUEST['store_id'] ?? ($_REQUEST['shop_id'] ?? '');

$is_demo_mode = (
    $raw_store_id === 'DEMO_STORE' ||
    (!empty($_REQUEST['is_demo']) && $_REQUEST['is_demo'] == 1) ||
    (!empty($_GET['demo']) && $_GET['demo'] == 1)
);

// If scanning a Demo QR code, isolate session exclusively to DEMO_STORE sandbox
if ($is_demo_mode) {
    $_SESSION['scanned_store_id'] = 'DEMO_STORE';
    $_SESSION['is_demo_mode'] = true;
} elseif (!empty($raw_store_id) && is_numeric($raw_store_id)) {
    // If scanning a real shop QR code, bind session strictly to the scanned store_id and clear demo flag
    $_SESSION['scanned_store_id'] = (int)$raw_store_id;
    unset($_SESSION['is_demo_mode']);
}

// Resolve active store context from session lock
$session_store = $_SESSION['scanned_store_id'] ?? '';
if (!empty($_SESSION['is_demo_mode']) || $session_store === 'DEMO_STORE') {
    $is_demo_mode = true;
    $store_id = 0;
} elseif (!empty($session_store) && is_numeric($session_store)) {
    $store_id = (int)$session_store;
} else {
    $store_id = 0;
}

if (!empty($_GET['table'])) {
    $_SESSION['scanned_table'] = trim($_GET['table']);
} elseif (!empty($_POST['table_number'])) {
    $_SESSION['scanned_table'] = trim($_POST['table_number']);
}
if (!empty($_GET['token'])) {
    $_SESSION['scanned_token'] = trim($_GET['token']);
}
if (!empty($_GET['shop_name'])) {
    $_SESSION['scanned_shop_name'] = trim($_GET['shop_name']);
}

$table_param = $_GET['table'] ?? ($_POST['table_number'] ?? ($_SESSION['scanned_table'] ?? ''));
$token_param = $_GET['token'] ?? ($_SESSION['scanned_token'] ?? '');
$curr_shop_name = $_GET['shop_name'] ?? ($_SESSION['scanned_shop_name'] ?? '');

// 3. Customer Navigation Scope (Strictly bound to scanned store & table context)
if ($is_demo_mode) {
    $user_role_home = "menu.php?store_id=DEMO_STORE&is_demo=1&table=" . urlencode($table_param ?: '1');
} elseif ($store_id > 0) {
    $user_role_home = "menu.php?store_id=" . $store_id
        . (!empty($curr_shop_name) ? "&shop_name=" . urlencode($curr_shop_name) : "")
        . (!empty($token_param) ? "&token=" . urlencode($token_param) : "")
        . (!empty($table_param) ? "&table=" . urlencode($table_param) : "");
} elseif (!empty($_SESSION['super_admin_logged_in'])) {
    $user_role_home = 'platform-admin.php';
} elseif (!empty($_SESSION['store_id']) || !empty($_SESSION['shop_admin_id'])) {
    $user_role_home = 'store-admin.php';
} else {
    $user_role_home = 'javascript:void(0)';
}

$success_msg = '';
$error_msg = '';

// 4. JSON API for order status check
if (isset($_GET['check_order_status'])) {
    if (ob_get_length()) ob_clean();
    header('Content-Type: application/json; charset=utf-8');
    $order_id = $_GET['check_order_status'];
    if (strpos($order_id, 'DEMO-') === 0) {
        echo json_encode([
            'success' => true,
            'status' => 'preparing',
            'table_number' => $table_param ?: '1'
        ]);
        exit;
    }
    try {
        $stmt = $pdo->prepare("SELECT id, table_number, status FROM orders WHERE id = :id");
        $stmt->execute([':id' => (int)$order_id]);
        $order = $stmt->fetch();
        if ($order) {
            echo json_encode([
                'success' => true,
                'status' => $order['status'],
                'table_number' => $order['table_number']
            ]);
        } else {
            echo json_encode(['success' => false, 'message' => 'ไม่พบข้อมูลออเดอร์']);
        }
    } catch (Exception $e) {
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
    }
    exit;
}

$is_expired_session = false;

if ($store_id > 0 && !empty($table_param)) {
    try {
        $num_only = preg_replace('/[^0-9]/', '', $table_param);
        if (empty($num_only)) $num_only = $table_param;
        $t1 = "Table " . $num_only;
        $t2 = $num_only;
        $t3 = $table_param;

        $stmt_t = $pdo->prepare("SELECT qr_token FROM tables_qr WHERE store_id = :store_id AND (table_number = :t1 OR table_number = :t2 OR table_number = :t3)");
        $stmt_t->execute([':store_id' => $store_id, ':t1' => $t1, ':t2' => $t2, ':t3' => $t3]);
        $table_row = $stmt_t->fetch();

        if ($table_row && !empty($table_row['qr_token'])) {
            if (!empty($token_param) && $token_param !== $table_row['qr_token']) {
                $is_expired_session = true;
            }
        }
    } catch (Exception $e) {}
}

// Fetch active order for the table (only status in 'pending', 'preparing', 'ready')
$active_table_order_id = null;
if ($store_id > 0 && !empty($table_param) && !$is_expired_session) {
    try {
        $num_only = preg_replace('/[^0-9]/', '', $table_param);
        if (empty($num_only)) $num_only = $table_param;
        $t1 = "Table " . $num_only;
        $t2 = $num_only;
        $t3 = $table_param;

        $stmt_active_ord = $pdo->prepare("SELECT id FROM orders WHERE store_id = :store_id AND (table_number = :t1 OR table_number = :t2 OR table_number = :t3) AND status IN ('pending', 'preparing', 'ready') ORDER BY id DESC LIMIT 1");
        $stmt_active_ord->execute([':store_id' => $store_id, ':t1' => $t1, ':t2' => $t2, ':t3' => $t3]);
        $active_ord = $stmt_active_ord->fetch();
        if ($active_ord) {
            $active_table_order_id = (int)$active_ord['id'];
        }
    } catch (Exception $e) {}
}

// 1.5 Handle Customer Payment Verification & Slip Upload (via AJAX POST)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['verify_payment'])) {
    if (ob_get_length()) ob_clean();
    header('Content-Type: application/json; charset=utf-8');

    $target_order_id = intval($_POST['order_id'] ?? 0);
    $pay_store_id = intval($_POST['store_id'] ?? ($store_id ?: ($_SESSION['scanned_store_id'] ?? 0)));

    if ($target_order_id <= 0) {
        echo json_encode(['success' => false, 'message' => 'ไม่พบหมายเลขออเดอร์']);
        exit;
    }

    try {
        $stmt_chk = $pdo->prepare("SELECT id, store_id, status FROM orders WHERE id = :id AND store_id = :store_id");
        $stmt_chk->execute([':id' => $target_order_id, ':store_id' => $pay_store_id]);
        $ord_data = $stmt_chk->fetch(PDO::FETCH_ASSOC);

        if (!$ord_data) {
            echo json_encode(['success' => false, 'message' => 'ไม่พบข้อมูลคำสั่งซื้อในระบบ']);
            exit;
        }

        // Handle Payment Slip File Upload if attached
        $slip_url = '';
        if (isset($_FILES['slip_file']) && $_FILES['slip_file']['error'] === UPLOAD_ERR_OK) {
            $upload_dir = __DIR__ . '/uploads/slips/';
            if (!is_dir($upload_dir)) @mkdir($upload_dir, 0777, true);
            $ext = strtolower(pathinfo($_FILES['slip_file']['name'], PATHINFO_EXTENSION));
            if (in_array($ext, ['jpg', 'jpeg', 'png', 'webp', 'gif', 'jfif', 'avif', 'svg', 'bmp', 'heic'])) {
                $slip_filename = 'slip_' . $target_order_id . '_' . time() . '.' . $ext;
                $target_dest = $upload_dir . $slip_filename;
                if (function_exists('processAndCompressImage') && processAndCompressImage($_FILES['slip_file']['tmp_name'], $target_dest, 1200, 80)) {
                    $slip_url = 'uploads/slips/' . $slip_filename;
                } elseif (@move_uploaded_file($_FILES['slip_file']['tmp_name'], $target_dest)) {
                    $slip_url = 'uploads/slips/' . $slip_filename;
                }
            }
        }

        // Transition order status to 'pending', payment_method = 'transfer', is_paid = 1
        if (!empty($slip_url)) {
            $stmt_up = $pdo->prepare("UPDATE orders SET status = 'pending', payment_method = 'transfer', is_paid = 1, slip_url = :slip_url WHERE id = :id AND store_id = :store_id");
            $stmt_up->execute([':slip_url' => $slip_url, ':id' => $target_order_id, ':store_id' => $pay_store_id]);
        } else {
            $stmt_up = $pdo->prepare("UPDATE orders SET status = 'pending', payment_method = 'transfer', is_paid = 1 WHERE id = :id AND store_id = :store_id");
            $stmt_up->execute([':id' => $target_order_id, ':store_id' => $pay_store_id]);
        }

        echo json_encode([
            'success' => true,
            'message' => 'ยืนยันการชำระเงินเรียบร้อยแล้ว! ออเดอร์ของคุณส่งเข้าห้องครัวแล้ว',
            'order_id' => $target_order_id,
            'status' => 'pending'
        ]);
        exit;
    } catch (Exception $e) {
        echo json_encode(['success' => false, 'message' => 'เกิดข้อผิดพลาดในการยืนยันชำระเงิน: ' . $e->getMessage()]);
        exit;
    }
}

// 1.5 Handle Cash Payment Confirmation
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['confirm_cash_payment'])) {
    if (ob_get_length()) ob_clean();
    header('Content-Type: application/json; charset=utf-8');
    $target_order_id = intval($_POST['order_id'] ?? 0);
    $pay_store_id = intval($_POST['store_id'] ?? 0);
    if ($target_order_id > 0) {
        $stmt_up = $pdo->prepare("UPDATE orders SET status = 'pending', payment_method = 'cash', is_paid = 0 WHERE id = :id AND store_id = :store_id");
        $stmt_up->execute([':id' => $target_order_id, ':store_id' => $pay_store_id]);
        echo json_encode(['success' => true, 'message' => 'ยืนยันสั่งชำระเงินสด ออเดอร์ส่งเข้าครัวเรียบร้อยแล้ว', 'order_id' => $target_order_id, 'status' => 'pending']);
        exit;
    }
}

// 2. Handle Customer Order Submission (via AJAX POST)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['place_order'])) {
    if (ob_get_length()) ob_clean();
    header('Content-Type: application/json; charset=utf-8');
    if ($store_id <= 0) {
        $store_id = !empty($_POST['store_id']) ? (int)$_POST['store_id'] : (!empty($_SESSION['scanned_store_id']) ? (int)$_SESSION['scanned_store_id'] : 0);
    }
    $table_number = trim($_POST['table_number'] ?? '');
    $cart_json = $_POST['cart_data'] ?? '[]';
    $cart_items = json_decode($cart_json, true);

    // Session-Based Rate Limiting & Cooldown Protection (Anti-Spam)
    $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} วินาที) ก่อนทำการสั่งอาหารเพิ่ม"
        ]);
        exit;
    }

    // Fallback store_id to Store 1 if not specified so orders are always recorded in database
    if ($store_id <= 0) {
        $store_id = 1;
    }
    if (empty($table_number)) {
        $table_number = !empty($_SESSION['scanned_table']) ? $_SESSION['scanned_table'] : '1';
    }

    if ($is_expired_session) {
        echo json_encode(['success' => false, 'message' => 'โต๊ะนี้ทำการเช็กบิลเรียบร้อยแล้ว หรือรหัสสแกนไม่ถูกต้อง กรุณาสแกน QR Code ประจำโต๊ะอาหารอีกครั้งเพื่อสั่งซื้อ']);
        exit;
    } elseif (empty($cart_items)) {
        echo json_encode(['success' => false, 'message' => 'กรุณาเลือกอาหารอย่างน้อย 1 รายการก่อนสั่งซื้อ']);
        exit;
    } else {
        try {
            // Begin Transaction for Data Integrity
            $pdo->beginTransaction();

            // 1. Insert order record (PromptPay QR food payment orders set payment_method='transfer' and is_paid=1)
            $payment_method = trim($_POST['payment_method'] ?? 'transfer');
            $is_paid = ($payment_method === 'transfer') ? 1 : 0;
            $raw_voucher = trim($_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, 'unpaid', :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();

            // 2. Prepare statements for items insert and menu validation
            $stmt_insert_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_check_prod = $pdo->prepare("SELECT price, is_available FROM menus WHERE menu_id = :id AND store_id = :store_id");

            $grand_total = 0.0;
            foreach ($cart_items as $item) {
                $menu_id = (int)$item['id'];
                $qty = (int)$item['qty'];
                $note = trim($item['note'] ?? '');
                $spice_level = trim($item['spice_level'] ?? '');

                if ($qty <= 0) continue;

                $stmt_check_prod->execute([':id' => $menu_id, ':store_id' => $store_id]);
                $product = $stmt_check_prod->fetch(PDO::FETCH_ASSOC);

                $price = $product ? (float)$product['price'] : (float)($item['price'] ?? 0);
                $grand_total += ($price * $qty);

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

            $pdo->commit();
            $_SESSION['last_order_timestamp'] = time();

            echo json_encode([
                'success' => true,
                'message' => "สร้างรายการสั่งซื้อเรียบร้อยแล้ว กรุณายืนยันชำระเงินเพื่อส่งเข้าห้องครัว",
                'order_id' => $order_id,
                'table_number' => $table_number,
                'status' => 'unpaid',
                'total_amount' => $grand_total,
                'store_id' => $store_id,
                'remaining_seconds' => $cooldown_seconds
            ]);
            exit;
        } catch (Exception $e) {
            $pdo->rollBack();
            echo json_encode(['success' => false, 'message' => "เกิดข้อผิดพลาดในการบันทึกข้อมูล: " . $e->getMessage()]);
            exit;
        }
    }
}
$shop_info = null;
$active_shops = [];

if ($is_demo_mode || $raw_store_id === 'DEMO_STORE') {
    $shop_info = [
        'id' => 'DEMO_STORE',
        'name' => 'ร้านค้า CMTC Smart Dining',
        'address' => 'ศูนย์ทดลองระบบ CMTC Tech Solution',
        'category' => 'ทดลองระบบสั่งอาหาร',
        'promo_banner' => '',
        'policy_text' => '⚠️ นี่คือโหมดทดลองใช้งาน ออเดอร์ของคุณจะไม่ถูกบันทึกเข้าร้านค้าจริง',
        'custom_logo_url' => ''
    ];
    try {
        $stmt = $pdo->query("SELECT menu_id as id, name, price, category, image_url, is_available, unit FROM menus WHERE is_available = 1 LIMIT 12");
        $products = $stmt ? $stmt->fetchAll() : [];
    } catch (PDOException $e) {
        $products = [];
    }
    if (empty($products)) {
        $products = [
            ['id' => 901, 'name' => 'ผัดกะเพราหมูกรอบ (Demo)', 'price' => 60, 'category' => 'อาหารจานเดียว', 'image_url' => '', 'is_available' => 1],
            ['id' => 902, 'name' => 'ข้าวผัดต้มยำกุ้ง (Demo)', 'price' => 70, 'category' => 'อาหารจานเดียว', 'image_url' => '', 'is_available' => 1],
            ['id' => 903, 'name' => 'ชาไทยเย็น (Demo)', 'price' => 35, 'category' => 'เครื่องดื่ม', 'image_url' => '', 'is_available' => 1]
        ];
    }
} elseif ($store_id > 0) {
    try {
        $stmt_shop = $pdo->prepare("SELECT store_id as id, store_name as name, address, category, phone, line_id, promo_banner, policy_text, custom_logo_url, store_banner_url FROM tenants WHERE store_id = :id AND status = 'active'");
        $stmt_shop->execute([':id' => $store_id]);
        $shop_info = $stmt_shop->fetch(PDO::FETCH_ASSOC);
        
        if ($shop_info) {
            // Fetch categories in custom sort order
            $sorted_cat_order = [];
            try {
                $stmt_c = $pdo->prepare("SELECT name FROM categories WHERE store_id = :store_id AND is_active = 1 ORDER BY sort_order ASC, id ASC");
                $stmt_c->execute([':store_id' => $store_id]);
                $sorted_cat_names = $stmt_c->fetchAll(PDO::FETCH_COLUMN);
                foreach ($sorted_cat_names as $idx => $cname) {
                    $sorted_cat_order[$cname] = $idx;
                }
            } catch (Exception $e) {}

            $stmt = $pdo->prepare("SELECT menu_id as id, name, price, category, description, image_url, is_available, spice_options, sort_order, unit FROM menus WHERE store_id = :store_id AND is_available = 1 ORDER BY sort_order ASC, menu_id DESC");
            $stmt->execute([':store_id' => $store_id]);
            $raw_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
            $products = [];
            foreach ($raw_products as $rp) {
                $products[] = [
                    'id' => (int)$rp['id'],
                    'name' => (string)$rp['name'],
                    'price' => (float)$rp['price'],
                    'category' => (string)($rp['category'] ?? 'ทั่วไป'),
                    'description' => (string)($rp['description'] ?? ''),
                    'image_url' => (string)($rp['image_url'] ?? ''),
                    'is_available' => (int)$rp['is_available'],
                    'spice_options' => (string)($rp['spice_options'] ?? 'เผ็ดปกติ,ไม่เผ็ด,เผ็ดน้อย,เผ็ดมาก'),
                    'sort_order' => (int)($rp['sort_order'] ?? 0),
                    'unit' => (string)($rp['unit'] ?? '')
                ];
            }

            // Sort products by category sort order if custom categories exist
            if (!empty($sorted_cat_order)) {
                usort($products, function($a, $b) use ($sorted_cat_order) {
                    $catOrderA = $sorted_cat_order[$a['category']] ?? 9999;
                    $catOrderB = $sorted_cat_order[$b['category']] ?? 9999;
                    if ($catOrderA !== $catOrderB) {
                        return $catOrderA <=> $catOrderB;
                    }
                    if ($a['sort_order'] !== $b['sort_order']) {
                        return $a['sort_order'] <=> $b['sort_order'];
                    }
                    return $b['id'] <=> $a['id'];
                });
            }
        } else {
            $products = [];
        }
    } catch (PDOException $e) {
        $products = [];
        $error_msg = "ไม่สามารถเชื่อมต่อฐานข้อมูลได้: " . $e->getMessage();
    }
} else {
    // Fetch all active shops to display a shop directory
    try {
        $stmt_active = $pdo->query("SELECT store_id as id, store_name as name, category, address, custom_logo_url FROM tenants WHERE status = 'active' ORDER BY store_id DESC");
        $active_shops = $stmt_active->fetchAll();
        $products = [];
    } catch (PDOException $e) {
        $products = [];
        $error_msg = "ไม่สามารถดึงข้อมูลร้านค้าได้: " . $e->getMessage();
    }
}

// ============================================================
// GUEST AUTHENTICATOR GATE (Static QR + Table Session Logic)
// ============================================================

$guest_session_key = 'guest_tbl_' . $store_id . '_' . $table_param;
$needs_auth = false;
$auth_table_info = null;
$auth_error = '';

if (!$is_demo_mode && $store_id > 0 && !empty($table_param) && $shop_info) {

    // --- POST: Guest submits their name ---
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['guest_auth_submit'])) {
        $guest_name = trim($_POST['guest_name'] ?? '');
        $submitted_store  = (int)($_POST['store_id'] ?? 0);
        $submitted_table  = trim($_POST['table_number'] ?? '');

        if (empty($guest_name) || mb_strlen($guest_name) < 1) {
            $auth_error = 'กรุณากรอกชื่อของคุณ';
            $needs_auth = true;
        } elseif ($submitted_store !== $store_id || $submitted_table !== $table_param) {
            $auth_error = 'ข้อมูลโต๊ะไม่ถูกต้อง กรุณาสแกน QR ใหม่';
            $needs_auth = true;
        } else {
            // Truncate name for safety
            $guest_name = mb_substr($guest_name, 0, 60);
            $new_sess_token = bin2hex(random_bytes(16));

            try {
                $num_only = preg_replace('/[^0-9]/', '', $table_param);
                if (empty($num_only)) $num_only = $table_param;
                $stmt_occ = $pdo->prepare(
                    "UPDATE tables_qr SET table_status = 'occupied', table_guest_name = :gname, session_token = :stoken "
                    . "WHERE store_id = :sid AND (table_number = :t1 OR table_number = :t2 OR table_number = :t3)"
                );
                $stmt_occ->execute([
                    ':gname'  => $guest_name,
                    ':stoken' => $new_sess_token,
                    ':sid'    => $store_id,
                    ':t1'     => 'Table ' . $num_only,
                    ':t2'     => $num_only,
                    ':t3'     => $table_param,
                ]);
                // Bind this device/browser to the table via session
                $_SESSION[$guest_session_key] = $new_sess_token;
                $_SESSION['guest_name_' . $store_id . '_' . $table_param] = $guest_name;

                // Redirect to clean GET URL to avoid form resubmission on refresh
                $redirect_url = 'menu.php?store_id=' . $store_id . '&table=' . urlencode($table_param);
                if (!empty($_SESSION['scanned_shop_name'])) {
                    $redirect_url .= '&shop_name=' . urlencode($_SESSION['scanned_shop_name']);
                }
                header('Location: ' . $redirect_url);
                exit;
            } catch (Exception $e) {
                $auth_error = 'เกิดข้อผิดพลาด กรุณาลองใหม่';
                $needs_auth = true;
            }
        }
    }

    if (!$needs_auth) {
        // --- GET: Check if this device already has a bound session ---
        $device_token = $_SESSION[$guest_session_key] ?? '';

        // Fetch current table status from DB
        try {
            $num_only = preg_replace('/[^0-9]/', '', $table_param);
            if (empty($num_only)) $num_only = $table_param;
            $stmt_tbl_chk = $pdo->prepare(
                "SELECT table_status, session_token, table_guest_name FROM tables_qr "
                . "WHERE store_id = :sid AND (table_number = :t1 OR table_number = :t2 OR table_number = :t3) LIMIT 1"
            );
            $stmt_tbl_chk->execute([
                ':sid' => $store_id,
                ':t1'  => 'Table ' . $num_only,
                ':t2'  => $num_only,
                ':t3'  => $table_param,
            ]);
            $auth_table_info = $stmt_tbl_chk->fetch(PDO::FETCH_ASSOC);
        } catch (Exception $e) {
            $auth_table_info = null;
        }

        $tbl_status    = $auth_table_info['table_status']    ?? 'available';
        $db_sess_token = $auth_table_info['session_token']   ?? '';

        if ($tbl_status === 'available') {
            // Table is free — show authenticator
            $needs_auth = true;
        } elseif ($tbl_status === 'occupied') {
            if (!empty($device_token) && !empty($db_sess_token) && hash_equals($db_sess_token, $device_token)) {
                // Same device that checked in — allow through
                $needs_auth = false;
            } else {
                // Different device or session expired — show authenticator
                // (They will re-bind this device to the same table session)
                if (!empty($db_sess_token)) {
                    // Table already has a guest; allow secondary devices to join by entering same name
                    $needs_auth = true;
                } else {
                    $needs_auth = true;
                }
            }
        }
    }
}

// ============================================================
// RENDER AUTHENTICATOR SCREEN (if gate is needed)
// ============================================================
if ($needs_auth) {
    $auth_table_display = !empty($table_param) ? 'โต๊ะ ' . htmlspecialchars($table_param) : 'โต๊ะอาหาร';
    $auth_store_name    = htmlspecialchars($shop_info['name'] ?? 'ร้านอาหาร');
    $auth_store_logo    = htmlspecialchars($shop_info['custom_logo_url'] ?? 'logo.png');
    $auth_bg_banner     = !empty($shop_info['store_banner_url']) ? htmlspecialchars($shop_info['store_banner_url']) : 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1200&auto=format&fit=crop&q=80';
    $existing_guest     = htmlspecialchars($auth_table_info['table_guest_name'] ?? '');
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $auth_store_name; ?> — ยืนยันตัวตน | CMTC Smart Dining</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Sarabun', 'Inter', sans-serif;
            min-height: 100vh;
            background: #0f172a;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .auth-bg {
            position: fixed; inset: 0;
            background: linear-gradient(160deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.85) 100%),
                        url('<?php echo $auth_bg_banner; ?>') center/cover no-repeat;
            z-index: 0;
        }
        .auth-bg::after {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at 30% 60%, rgba(0,229,255,0.07) 0%, transparent 60%),
                        radial-gradient(ellipse at 80% 20%, rgba(168,85,247,0.06) 0%, transparent 50%);
        }
        .auth-card {
            position: relative; z-index: 10;
            background: rgba(15,23,42,0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(0,229,255,0.18);
            border-radius: 28px;
            padding: 44px 40px 40px;
            width: 100%;
            max-width: 440px;
            margin: 20px;
            box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
            animation: slideUp 0.45s cubic-bezier(.22,.68,0,1.2) both;
        }
        @keyframes slideUp {
            from { opacity:0; transform: translateY(32px) scale(0.97); }
            to   { opacity:1; transform: translateY(0) scale(1); }
        }
        .auth-logo-wrap {
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 24px;
        }
        .auth-logo {
            width: 80px; height: 80px;
            border-radius: 22px;
            background: rgba(255,255,255,0.96);
            padding: 8px;
            box-shadow: 0 10px 32px rgba(0,229,255,0.25), 0 0 0 2px rgba(0,229,255,0.35);
            object-fit: contain;
        }
        .auth-welcome {
            text-align: center;
            margin-bottom: 28px;
        }
        .auth-welcome .table-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(168,85,247,0.12));
            border: 1px solid rgba(0,229,255,0.3);
            color: #00E5FF;
            font-size: 13px; font-weight: 700;
            padding: 6px 18px;
            border-radius: 50px;
            letter-spacing: 0.5px;
            margin-bottom: 14px;
        }
        .auth-welcome h1 {
            font-size: 24px; font-weight: 800;
            color: #f1f5f9;
            line-height: 1.3;
            margin-bottom: 8px;
        }
        .auth-welcome h1 span { color: #00E5FF; }
        .auth-welcome p {
            font-size: 14px; color: #94a3b8;
            line-height: 1.6;
        }
        <?php if ($existing_guest): ?>
        .auth-occupied-notice {
            background: rgba(16,185,129,0.1);
            border: 1px solid rgba(16,185,129,0.3);
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 13px;
            color: #6ee7b7;
            margin-bottom: 18px;
            text-align: center;
        }
        <?php endif; ?>
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            display: block;
            font-size: 13px; font-weight: 600;
            color: #cbd5e1;
            margin-bottom: 8px;
            letter-spacing: 0.3px;
        }
        .form-input {
            width: 100%;
            padding: 14px 18px;
            background: rgba(30,41,59,0.8);
            border: 1.5px solid rgba(0,229,255,0.2);
            border-radius: 14px;
            color: #f1f5f9;
            font-size: 16px; font-family: inherit;
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }
        .form-input::placeholder { color: #475569; }
        .form-input:focus {
            border-color: #00E5FF;
            box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
        }
        .btn-auth {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #00E5FF, #0ea5e9);
            color: #0f172a;
            font-size: 16px; font-weight: 800;
            font-family: inherit;
            border: none; border-radius: 14px;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
            box-shadow: 0 8px 24px rgba(0,229,255,0.3);
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-auth:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,229,255,0.4); }
        .btn-auth:active { transform: translateY(0); opacity: 0.9; }
        .auth-footer {
            text-align: center;
            margin-top: 20px;
            font-size: 12px; color: #475569;
            line-height: 1.6;
        }
        .auth-error {
            background: rgba(239,68,68,0.1);
            border: 1px solid rgba(239,68,68,0.3);
            border-radius: 10px;
            padding: 10px 14px;
            color: #fca5a5;
            font-size: 13px;
            margin-bottom: 16px;
            text-align: center;
            animation: shake 0.35s ease;
        }
        @keyframes shake {
            0%,100% { transform: translateX(0); }
            20%,60%  { transform: translateX(-6px); }
            40%,80%  { transform: translateX(6px); }
        }
        .floating-orb {
            position: fixed; border-radius: 50%;
            filter: blur(80px); pointer-events: none; z-index: 1;
            animation: orbFloat 8s ease-in-out infinite alternate;
        }
        @keyframes orbFloat {
            from { transform: translate(0, 0); }
            to   { transform: translate(20px, -30px); }
        }
    </style>
</head>
<body>
<div class="auth-bg"></div>
<!-- Ambient floating orbs -->
<div class="floating-orb" style="width:350px;height:350px;background:rgba(0,229,255,0.05);top:-80px;right:-80px;"></div>
<div class="floating-orb" style="width:280px;height:280px;background:rgba(168,85,247,0.05);bottom:-60px;left:-60px;animation-delay:-4s;"></div>

<div class="auth-card">
    <div class="auth-logo-wrap">
        <img src="<?php echo $auth_store_logo; ?>" alt="Logo" class="auth-logo" onerror="this.src='logo.png'">
    </div>

    <div class="auth-welcome">
        <div class="table-badge">🪑 <?php echo $auth_table_display; ?></div>
        <h1>ยินดีต้อนรับสู่<br><span><?php echo $auth_store_name; ?></span></h1>
        <p>กรุณากรอกชื่อของคุณเพื่อเริ่มสั่งอาหาร</p>
    </div>

    <?php if (!empty($auth_error)): ?>
    <div class="auth-error">⚠️ <?php echo htmlspecialchars($auth_error); ?></div>
    <?php endif; ?>

    <?php if ($existing_guest): ?>
    <div class="auth-occupied-notice">
        🟢 โต๊ะนี้มีผู้ใช้งานอยู่แล้ว (<?php echo $existing_guest; ?>)<br>
        <small>กรอกชื่อของคุณเพื่อเชื่อมต่ออุปกรณ์นี้กับโต๊ะเดิม</small>
    </div>
    <?php endif; ?>

    <form method="POST" action="menu.php?store_id=<?php echo $store_id; ?>&table=<?php echo urlencode($table_param); ?>" id="guestAuthForm">
        <input type="hidden" name="guest_auth_submit" value="1">
        <input type="hidden" name="store_id" value="<?php echo $store_id; ?>">
        <input type="hidden" name="table_number" value="<?php echo htmlspecialchars($table_param); ?>">
        <div class="form-group">
            <label class="form-label" for="guest_name">ชื่อของคุณ *</label>
            <input
                type="text"
                id="guest_name"
                name="guest_name"
                class="form-input"
                placeholder="เช่น สมชาย, นิดา, คุณแม่..."
                maxlength="60"
                required
                autocomplete="given-name"
                autofocus
                value="<?php echo htmlspecialchars($_POST['guest_name'] ?? ''); ?>"
            >
        </div>
        <button type="submit" class="btn-auth" id="authSubmitBtn">
            <span>🍽️</span> เริ่มสั่งอาหาร
        </button>
    </form>

    <div class="auth-footer">
        🔒 ข้อมูลของคุณถูกเก็บไว้เพื่อประสบการณ์การสั่งอาหารเท่านั้น<br>
        CMTC Tech Solution — Smart Dining System
    </div>
</div>

<script>
    // Auto-focus on name input
    document.getElementById('guest_name')?.focus();

    // Unlock Web Audio API context on first user interaction on authenticator screen
    document.addEventListener('click', function unlockAudioOnGuestAuth() {
        try {
            const AudioCtx = window.AudioContext || window.webkitAudioContext;
            if (AudioCtx) {
                const tempCtx = new AudioCtx();
                if (tempCtx.state === 'suspended') {
                    tempCtx.resume();
                }
            }
        } catch(e) {}
        document.removeEventListener('click', unlockAudioOnGuestAuth);
    }, { once: true });

    // Loading state on submit
    document.getElementById('guestAuthForm')?.addEventListener('submit', function() {
        const btn = document.getElementById('authSubmitBtn');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<span style="animation:spin 0.8s linear infinite;display:inline-block">⟳</span> กำลังเข้าสู่ระบบ...';
        }
    });
</script>
<style>@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}</style>
</body>
</html>
<?php
    exit;
}

// Store guest name in a convenient variable for use in menu UI
$current_guest_name = $_SESSION['guest_name_' . $store_id . '_' . $table_param] ?? '';
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CMTC Tech Solution - เมนูสั่งอาหาร</title>
    <link rel="stylesheet" href="style.css">
    <!-- SweetAlert2 Library for Rich Commercial Popups -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Navigation Sound & SweetAlert Engine -->
    <script src="js/nav_sound_swal.js"></script>
</head>
<body>

<!-- Global Fixed Navigation Bar -->
<nav class="global-navbar">
    <a href="<?php echo htmlspecialchars($user_role_home); ?>" class="navbar-brand">
        <img src="logo.png" class="navbar-logo" alt="Logo" style="width: 35px; height: 35px; object-fit: contain; border-radius: 50%;">
        <span class="navbar-title">ระบบสั่งอาหาร • CMTC Tech Solution</span>
    </a>
    <div class="navbar-nav" style="display:flex; align-items:center; gap:8px;">
        <button type="button" onclick="toggleNavSound()" class="nav-sound-toggle-btn" style="background: rgba(255,255,255,0.1); color: #94a3b8; border: 1px solid rgba(255,255,255,0.2); padding: 5px 10px; border-radius: 20px; font-weight: 800; font-size: 11px; cursor: pointer; white-space: nowrap;">
            🔊 เสียงนำทาง: ปิด
        </button>
        <a href="javascript:void(0)" onclick="handleGoBack(); return false;" class="btn btn-navbar-ghost">← ย้อนกลับ</a>
        <a href="<?php echo htmlspecialchars($user_role_home); ?>" class="btn btn-navbar-ghost">🏠 หน้าแรก</a>
    </div>
</nav>

<div class="wrapper" style="flex-direction: column;">
    <!-- Institutional Header Hero with Cover Banner & Logo -->
    <?php
    $bg_banner = !empty($shop_info['store_banner_url']) ? $shop_info['store_banner_url'] : 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1200&auto=format&fit=crop&q=80';
    $store_logo = !empty($shop_info['custom_logo_url']) ? $shop_info['custom_logo_url'] : 'logo.png';
    ?>
    <header class="gov-banner" style="background: linear-gradient(to bottom, rgba(15,23,42,0.65), rgba(15,23,42,0.95)), url('<?php echo htmlspecialchars($bg_banner); ?>') center/cover no-repeat; padding: 35px 25px; border-bottom: 2px solid var(--accent); position: relative; overflow: hidden;">
        <div style="max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%;">
            <div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
                <div style="width: 80px; height: 80px; border-radius: 20px; background: rgba(255,255,255,0.95); padding: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); border: 2px solid var(--accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center;">
                    <img src="<?php echo htmlspecialchars($store_logo); ?>" alt="Store Logo" style="width: 100%; height: 100%; object-fit: contain; border-radius: 14px;" onerror="this.src='logo.png'">
                </div>
                <div class="gov-title-text">
                    <?php if ($shop_info): ?>
                        <h1 style="font-size: 26px; font-weight: 800; color: #ffffff; text-shadow: 0 2px 10px rgba(0,0,0,0.7); margin: 0 0 6px 0;">
                            <?php echo htmlspecialchars($shop_info['name']); ?>
                            <?php if (!empty($shop_info['category'])): ?>
                                <span style="background: var(--accent); color: #0f172a; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 20px; vertical-align: middle; margin-left: 8px; font-family: sans-serif;"><?php echo htmlspecialchars($shop_info['category']); ?></span>
                            <?php endif; ?>
                        </h1>
                        <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap; font-size: 13.5px; color: #cbd5e1;">
                            <span>📍 <?php echo htmlspecialchars($shop_info['address'] ?? 'ร้านค้าสมาชิก CMTC Solution'); ?></span>
                            <?php if (!empty($shop_info['phone'])): ?>
                                <span>📞 <a href="tel:<?php echo htmlspecialchars($shop_info['phone']); ?>" style="color: var(--accent); text-decoration: none; font-weight: bold;"><?php echo htmlspecialchars($shop_info['phone']); ?></a></span>
                            <?php endif; ?>
                            <?php if (!empty($shop_info['line_id'])): ?>
                                <span style="background: rgba(16,185,129,0.2); color: #10B981; padding: 2px 8px; border-radius: 6px; font-weight: bold;">💬 LINE: <?php echo htmlspecialchars($shop_info['line_id']); ?></span>
                            <?php endif; ?>
                        </div>
                    <?php else: ?>
                        <h1 style="font-size: 24px; font-weight: 800; color: #ffffff;">ศูนย์อาหาร CMTC Food Center</h1>
                        <p style="margin: 0; color: #94a3b8; font-size: 13.5px;">ระบบบริการจัดการสั่งอาหารและบริการลูกค้าส่วนกลาง CMTC Enterprise Cloud System</p>
                    <?php endif; ?>
                </div>
            </div>
            <div>
                <span class="system-badge" style="background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%); color: #fff; border: none; padding: 8px 16px; border-radius: 20px; font-weight: 800; font-size: 12px; box-shadow: 0 4px 15px rgba(255,87,34,0.4);">
                    ⚡ ONLINE SELF-SERVICE MENU
                </span>
            </div>
        </div>

        <?php if ($shop_info && !empty($shop_info['promo_banner'])): ?>
            <div style="width: 100%; background: linear-gradient(90deg, rgba(255,87,34,0.9), rgba(230,74,25,0.9)); color: #fff; padding: 8px 20px; margin-top: 20px; border-radius: 8px; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
                <span style="font-size: 16px;">📢</span>
                <marquee scrollamount="6" behavior="scroll"><?php echo htmlspecialchars($shop_info['promo_banner']); ?></marquee>
            </div>
        <?php endif; ?>
    </header>

    <div class="page-container">
        
        <!-- Breadcrumbs Navigation -->
        <div class="breadcrumbs">
            <a href="<?php echo htmlspecialchars($user_role_home); ?>">หน้าแรก</a>
            <span>&gt;</span>
            <a href="menu.php">เมนูอาหาร</a>
            <?php if ($shop_info): ?>
                <span>&gt;</span>
                <span><?php echo htmlspecialchars($shop_info['name']); ?></span>
            <?php endif; ?>
        </div>

        <?php if ($success_msg): ?>
            <div class="alert alert-success"><?php echo htmlspecialchars($success_msg); ?></div>
        <?php endif; ?>
        <?php if ($error_msg): ?>
            <div class="alert alert-danger"><?php echo htmlspecialchars($error_msg); ?></div>
        <?php endif; ?>

        <?php if (!$shop_info): ?>
            <!-- Strict QR Scan Lock Notice -->
            <div style="max-width: 650px; margin: 60px auto; text-align: center; background: #ffffff; border: 2px dashed #ff5722; padding: 45px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.06);">
                <div style="font-size: 64px; margin-bottom: 15px;">🔒</div>
                <h2 style="font-size: 24px; font-weight: 800; color: #0f172a; margin-bottom: 12px;">กรุณาสแกน QR Code ประจำโต๊ะอาหาร</h2>
                <p style="color: #64748b; font-size: 15px; line-height: 1.6; margin-bottom: 25px;">
                    เพื่อความปลอดภัยและป้องกันการสั่งอาหารสลับร้านค้า ระบบกำหนดให้สแกนป้าย QR Code บนโต๊ะอาหารของทางร้านเพื่อเข้าสู่เมนูสั่งซื้อประจำโต๊ะอาหารของท่านเท่านั้นครับ
                </p>
                <div style="background: #f8fafc; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; font-size: 13.5px; color: #334155; font-weight: 600;">
                    📱 โปรดใช้กล้องมือถือสแกนป้าย QR Code บนโต๊ะอาหารของท่านอีกครั้งเพื่อเริ่มสั่งอาหาร
                </div>
            </div>
        <?php else: ?>

        <?php if ($is_expired_session): ?>
            <div style="background: rgba(239, 68, 68, 0.1); border: 2px solid #ef4444; padding: 25px; border-radius: 12px; margin-bottom: 25px; text-align: center; color: #ef4444;">
                <div style="font-size: 42px; margin-bottom: 8px;">🔒</div>
                <h3 style="margin: 0 0 6px; font-weight: 800; font-size: 20px;">รอบการสั่งซื้อของโต๊ะนี้เช็กบิลเรียบร้อยแล้ว</h3>
                <p style="margin: 0; font-size: 14.5px; opacity: 0.9;">ลูกค้าก่อนหน้าได้ทำการเช็กบิลเรียบร้อยแล้ว หากท่านเป็นลูกค้าท่านใหม่ กรุณาสแกนป้าย QR Code ประจำโต๊ะอาหารอีกครั้งเพื่อเปิดรอบการสั่งซื้อใหม่ครับ</p>
            </div>
        <?php elseif (!empty($_GET['table'])): ?>
            <div class="table-info-banner" style="background: linear-gradient(135deg, #00C9FF 0%, #92FE9D 100%); padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; color: #0f172a; font-weight: 800; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 15px rgba(0,201,255,0.2); gap: 10px; flex-wrap: wrap;">
                <div style="display: flex; align-items: center; gap: 10px; font-size: 16px;">
                    <span style="font-size: 24px;">📱</span>
                    <div>
                        <div>คุณกำลังสั่งอาหารสำหรับ <u>โต๊ะ <?php echo htmlspecialchars($_GET['table']); ?></u></div>
                        <div style="font-size: 12px; font-weight: 400; opacity: 0.85;">สแกนผ่าน QR Code ประจำโต๊ะอาหารเรียบร้อยแล้ว</div>
                    </div>
                </div>
                <span style="background: rgba(15, 23, 42, 0.15); padding: 4px 12px; border-radius: 20px; font-size: 13px;">โต๊ะ <?php echo htmlspecialchars($_GET['table']); ?></span>
            </div>
        <?php endif; ?>

        <!-- Live Order Tracker Container -->
        <div id="liveTrackerBox" class="client-tracking-container" style="display: none;">
            <div class="tracking-header">
                <div class="tracking-title">🔔 ติดตามสถานะคำสั่งซื้อของคุณ</div>
                <div id="trackingBadge" class="tracking-badge pending">กำลังส่งคำสั่งซื้อ...</div>
            </div>
            <div style="font-size: 13px; color: var(--lp-text-primary); margin-bottom: 5px;">
                ออเดอร์ของคุณ: <strong id="trackingOrderIdText">#--</strong> (โต๊ะ <span id="trackingTableText">--</span>)
            </div>
            
            <div id="trackingStepsLine" class="tracking-steps step-pending">
                <div class="step-dot active" id="dot-pending" title="ส่งออเดอร์แล้ว">1</div>
                <div class="step-dot" id="dot-preparing" title="กำลังเตรียมปรุง">2</div>
                <div class="step-dot ready-dot" id="dot-ready" title="พร้อมรับประทาน">🛎️</div>
            </div>
            <div style="display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-top: 5px;">
                <span>ส่งรายการแล้ว</span>
                <span>กำลังปรุงอาหาร</span>
                <span>พร้อมรับอาหาร</span>
            </div>
        </div>

        <div style="display: flex; gap: 20px; flex-wrap: wrap;">
            
            <!-- Food items list -->
            <div style="flex: 2; min-width: 320px;">
                <div class="page-header">
                    <h2>รายการอาหารและเครื่องดื่มประจำวัน</h2>
                    <a href="status.php" class="btn btn-ghost btn-sm">ดูบอร์ดแสดงสถานะคิว (Live Queue)</a>
                </div>

                <div class="menu-grid">
                    <?php if (empty($products)): ?>
                        <div style="grid-column: 1/-1; text-align: center; padding: 40px; border: 1px dashed var(--border-color); background: #fff;">
                            ไม่พบรายการอาหารพร้อมให้บริการในคลังระบบขณะนี้
                        </div>
                    <?php else: ?>
                        <?php foreach ($products as $prod): 
                            $img_src = !empty($prod['image_url']) ? $prod['image_url'] : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600&auto=format&fit=crop&q=80';
                        ?>
                            <div class="menu-card" style="overflow: hidden; border-radius: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: transform 0.2s; background: #fff; display: flex; flex-direction: column; justify-content: space-between;">
                                <div>
                                    <div class="menu-card-image" style="width: 100%; height: 160px; overflow: hidden; background: #f8fafc; position: relative; cursor: pointer;" onclick="openFoodDetailModal(<?php echo $prod['id']; ?>)">
                                        <img src="<?php echo htmlspecialchars($img_src); ?>" alt="<?php echo htmlspecialchars($prod['name']); ?>" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.src='https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600&auto=format&fit=crop&q=80'" loading="lazy" decoding="async">
                                        <span class="badge badge-available" style="position: absolute; top: 10px; right: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">พร้อมเสิร์ฟ</span>
                                    </div>
                                    <div class="menu-card-header" style="padding: 12px 14px 4px 14px;">
                                        <div style="font-weight: 800; font-size: 15px; color: var(--text-color); margin-bottom: 4px;"><?php echo htmlspecialchars($prod['name']); ?></div>
                                        <?php if (!empty($prod['description'])): ?>
                                            <div style="font-size: 12.5px; color: #64748b; margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                                                <?php echo htmlspecialchars($prod['description']); ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <div class="menu-card-body" style="padding: 0 14px 14px 14px;">
                                    <div class="menu-card-price" style="font-size: 19px; font-weight: 800; color: #ff5722; margin-bottom: 10px;">฿<?php echo number_format($prod['price'], 2); ?></div>
                                    <button type="button" class="btn btn-primary" style="width: 100%; border-radius: 8px; font-weight: bold; background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%); color: #fff; border: none; padding: 10px 4px; cursor: pointer; font-size: 13.5px; box-shadow: 0 4px 12px rgba(255,87,34,0.3);" onclick="quickAddToCart(<?php echo $prod['id']; ?>)">
                                        🛒 เพิ่มลงตะกร้า
                                    </button>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Cart Sidebar (Sleek Dark Navy Widget matching screenshot) -->
            <div style="flex: 1; min-width: 300px; position: sticky; top: 90px; align-self: start; z-index: 90;">
                <div class="cart-card-modern" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #ffffff; border-radius: 18px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); border: 1.5px solid #ff5722;">
                    
                    <!-- Cart Header Widget -->
                    <div style="display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 16px;">
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div style="position: relative; display: flex; align-items: center;">
                                <span style="font-size: 30px;">🛒</span>
                                <span id="item-count" style="position: absolute; top: -6px; right: -8px; background: #ff5722; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 10px; border: 2px solid #0f172a;">0</span>
                            </div>
                            <div>
                                <div style="font-size: 13.5px; color: #94a3b8; font-weight: 600;">ตะกร้าอาหารของคุณ</div>
                                <div style="font-size: 22px; font-weight: 800; color: #ff5722; line-height: 1.1;">฿<span id="cart-total-value">0.00</span></div>
                            </div>
                        </div>
                        <span id="cart-badge-counter" style="display: none;">0</span>
                    </div>

                    <form id="order-form" method="POST" action="">
                        <input type="hidden" name="cart_data" id="cart_data_input" value="[]">
                        <input type="hidden" name="store_id" value="<?php echo $store_id; ?>">
                        <input type="hidden" name="shop_id" value="<?php echo $store_id; ?>">
                        <input type="hidden" name="table_number" id="table_number" value="<?php echo htmlspecialchars($table_param); ?>">

                        <div class="cart-items" id="cart-items-container" style="max-height: 380px; overflow-y: auto; margin-bottom: 16px; padding-right: 2px;">
                            <div style="color: #94a3b8; text-align: center; padding: 35px 10px; font-size: 14px; background: rgba(0,0,0,0.2); border-radius: 12px; border: 1px dashed rgba(255,255,255,0.1);" id="empty-cart-msg">
                                🛒 ไม่มีอาหารในตะกร้าของคุณ
                            </div>
                        </div>

                        <button type="submit" name="place_order" id="btn-submit-order" class="btn" style="width: 100%; background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%); color: #fff; border: none; padding: 14px; border-radius: 12px; font-weight: 800; font-size: 15.5px; cursor: pointer; box-shadow: 0 4px 15px rgba(255,87,34,0.4); display: flex; align-items: center; justify-content: center; gap: 8px;">
                            📋 ยืนยันและส่งใบสั่งอาหาร
                        </button>
                    </form>
                </div>
            </div>

        </div>
        <?php endif; ?>
    </div>
</div>


<!-- Order Submission Loading Overlay -->
<div class="order-loading-overlay" id="orderLoadingOverlay">
    <div class="order-spinner"></div>
    <h3 style="color: #ffffff; font-weight: 800; margin: 0;">กำลังส่งออเดอร์ของคุณไปยังห้องครัว... 🍳</h3>
    <p style="color: #94a3b8; font-size: 13.5px; margin-top: 8px;">กรุณารอสักครู่ ระบบกำลังจัดเตรียมคิวรับออเดอร์</p>
</div>

<!-- Global Footer -->
<footer class="global-footer">
    <div class="footer-brand">CMTC Tech Solution • ระบบแอดมินร้านค้า</div>
    <div class="footer-contact">
        ติดต่อทีมงานบำรุงรักษา: CMTC Support • โทรศัพท์: 02-123-4567 • อีเมล: support@CMTC Tech Solution.cloud
    </div>
</footer>

<script>
let cart = [];
const serverProducts = <?php echo json_encode($products, JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP); ?>;

function isDrinkItem(item) {
    if (!item) return false;
    const cat = (item.category || '').toLowerCase();
    const name = (item.name || item.menu_name || '').toLowerCase();
    const drinkKeywords = [
        'เครื่องดื่ม', 'น้ำ', 'drink', 'beverage', 'ชา', 'กาแฟ', 'นม', 'โซดา',
        'ชานม', 'ชาไทย', 'เอสเพรสโซ', 'คาปูชิโน', 'ลาเต้', 'อเมริกาโน', 'โกโก้',
        'สมูทตี้', 'น้ำส้ม', 'น้ำมะนาว', 'โค้ก', 'เป๊ปซี่', 'แฟนต้า', 'สไปรท์',
        'มัทฉะ', 'ชาเขียว', 'ชามะนาว', 'อิตาเลียนโซดา', 'juice', 'tea', 'coffee', 'boba'
    ];
    return drinkKeywords.some(kw => cat.includes(kw) || name.includes(kw));
}

function getItemUnit(item) {
    if (item && item.unit && String(item.unit).trim()) {
        return String(item.unit).trim();
    }
    return isDrinkItem(item) ? 'แก้ว' : 'จาน';
}

function getItemIcon(item) {
    return '';
}

function openFoodDetailModal(itemOrId) {
    let item = itemOrId;
    if (typeof itemOrId === 'number' || typeof itemOrId === 'string') {
        item = serverProducts.find(p => p.id == itemOrId);
    }
    if (!item) {
        console.error("Food item not found for ID:", itemOrId);
        return;
    }
    const imgUrl = item.image_url || 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=600&auto=format&fit=crop&q=80';
    const descText = item.description || (isDrinkItem(item) ? 'เครื่องดื่มชงสดใหม่รสชาติเข้มข้น' : 'เมนูอาหารคุณภาพ ปรุงสดใหม่ทุกจาน');
    const unitText = getItemUnit(item);

    const rawOptions = item.spice_options || 'เผ็ดปกติ,ไม่เผ็ด,เผ็ดน้อย,เผ็ดมาก';
    const optionsList = rawOptions.split(',').map(o => o.trim()).filter(o => o.length > 0);
    let spiceSelectOptionsHtml = '';
    optionsList.forEach(opt => {
        spiceSelectOptionsHtml += `<option value="${opt}">${opt}</option>`;
    });
    
    Swal.fire({
        title: `<div style="font-size:20px; font-weight:800; color:#ff5722; font-family:'Sarabun',sans-serif;">${item.name}</div>`,
        html: `
            <div style="text-align:left; font-family:'Sarabun',sans-serif; color:#334155;">
                <img src="${imgUrl}" style="width:100%; height:180px; object-fit:cover; border-radius:12px; margin-bottom:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1);" alt="${item.name}">
                <div style="font-size:13px; color:#64748b; margin-bottom:8px;">หมวดหมู่: <strong>${item.category || 'ทั่วไป'}</strong></div>
                <div style="font-size:13.5px; color:#334155; margin-bottom:15px; background:#f8fafc; padding:10px 12px; border-radius:8px; border:1px solid #e2e8f0; line-height:1.5;">${descText}</div>
                
                <div style="font-size:24px; font-weight:800; color:#ff5722; margin-bottom:15px; text-align:right;">฿${parseFloat(item.price).toFixed(2)} / ${unitText}</div>
                
                <div style="margin-bottom:15px;">
                    <label style="font-size:13px; font-weight:700; display:block; margin-bottom:6px; color:#1e293b;">ตัวเลือกรสชาติเพิ่มเติม:</label>
                    <select id="swal_spice_level" style="width:100%; padding:10px; border-radius:8px; border:1px solid #cbd5e1; font-size:13.5px; font-family:inherit;">
                        ${spiceSelectOptionsHtml}
                    </select>
                </div>

                <div style="margin-bottom:15px;">
                    <label style="font-size:13px; font-weight:700; display:block; margin-bottom:6px; color:#1e293b;">รายละเอียดเพิ่มเติม / คำขอพิเศษ:</label>
                    <input type="text" id="swal_note" placeholder="เช่น หวานน้อย 50% / แยกน้ำแข็ง / ขอแก้วใหญ่" style="width:100%; padding:10px; border-radius:8px; border:1px solid #cbd5e1; font-size:13.5px; font-family:inherit; box-sizing:border-box;">
                </div>

                <div style="display:flex; justify-content:space-between; align-items:center; background:#f1f5f9; padding:12px 15px; border-radius:10px;">
                    <label style="font-size:14px; font-weight:700; color:#0f172a;">จำนวน (${unitText}):</label>
                    <div style="display:flex; align-items:center; gap:12px;">
                        <button type="button" onclick="changeSwalQty(-1)" style="width:34px; height:34px; border-radius:50%; border:1px solid #cbd5e1; background:#fff; font-weight:800; font-size:18px; cursor:pointer;">-</button>
                        <span id="swal_qty" style="font-size:18px; font-weight:800; width:24px; text-align:center; color:#0f172a;">1</span>
                        <button type="button" onclick="changeSwalQty(1)" style="width:34px; height:34px; border-radius:50%; border:none; background:#ff5722; color:#fff; font-weight:800; font-size:18px; cursor:pointer;">+</button>
                    </div>
                </div>
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: `🛒 เพิ่มลงตะกร้า`,
        cancelButtonText: 'ยกเลิก',
        confirmButtonColor: '#ff5722',
        cancelButtonColor: '#64748b',
        focusConfirm: false,
        preConfirm: () => {
            const spice = document.getElementById('swal_spice_level').value;
            const note = document.getElementById('swal_note').value;
            const qty = parseInt(document.getElementById('swal_qty').innerText) || 1;
            return { spice, note, qty };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            addToCartCustom(item, result.value.qty, result.value.spice, result.value.note);
        }
    });
}

function changeSwalQty(delta) {
    const el = document.getElementById('swal_qty');
    if (el) {
        let val = parseInt(el.innerText) || 1;
        val += delta;
        if (val < 1) val = 1;
        el.innerText = val;
    }
}

function quickAddToCart(id) {
    openFoodDetailModal(id);
}

function addToCartCustom(item, qty, spice, note) {
    if (!item) return;
    const itemId = parseInt(item.id);
    const itemQty = parseInt(qty) || 1;
    const itemSpice = spice || 'เผ็ดปกติ';
    const itemNote = note || '';

    const existing = cart.find(c => c.id == itemId && c.spice_level === itemSpice && c.note === itemNote);
    if (existing) {
        existing.qty += itemQty;
    } else {
        cart.push({
            id: itemId,
            name: item.name,
            price: parseFloat(item.price),
            qty: itemQty,
            spice_level: itemSpice,
            note: itemNote,
            unit: item.unit || ''
        });
    }
    
    updateCartUI();
    
    // Auto toast notification
    if (typeof Swal !== 'undefined') {
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true
        });
        const unitText = getItemUnit(item);
        const iconText = getItemIcon(item);
        Toast.fire({
            icon: 'success',
            title: `🎉 เพิ่ม "${item.name}" (x${itemQty} ${unitText}) ลงตะกร้าแล้ว!`
        });
    }
}

function addToCart(id, name, price) {
    const item = serverProducts.find(p => p.id == id);
    if (item) {
        addToCartCustom(item, 1, 'เผ็ดปกติ', '');
    } else {
        addToCartCustom({ id: id, name: name, price: price }, 1, 'เผ็ดปกติ', '');
    }
}

function removeFromCart(index) {
    cart.splice(index, 1);
    updateCartUI();
}

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

function scrollToCartContainer() {
    const cartEl = document.getElementById('cart-items-container') || document.getElementById('order-form');
    if (cartEl) {
        cartEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}

function updateCartUI() {
    const container = document.getElementById('cart-items-container');
    const itemCountBadge = document.getElementById('item-count');
    const totalSpan = document.getElementById('cart-total-value');
    const cartInput = document.getElementById('cart_data_input');
    const topBadge = document.getElementById('cart-badge-counter');
    const floatBadge = document.getElementById('floating-cart-count');
    
    if (!container) return;
    
    if (cart.length === 0) {
        container.innerHTML = '<div style="color: #94a3b8; text-align: center; padding: 30px 10px; font-size: 13.5px; background: rgba(0,0,0,0.2); border-radius: 12px; border: 1px dashed rgba(255,255,255,0.1);" id="empty-cart-msg">🛒 ไม่มีรายการในตะกร้าของคุณ</div>';
        if (itemCountBadge) itemCountBadge.textContent = '0';
        if (totalSpan) totalSpan.textContent = '0.00';
        if (cartInput) cartInput.value = '[]';
        if (topBadge) topBadge.textContent = '0';
        if (floatBadge) floatBadge.textContent = '0';
        return;
    }
    
    container.innerHTML = '';
    let total = 0;
    let itemCount = 0;
    
    cart.forEach((item, index) => {
        total += item.price * item.qty;
        itemCount += item.qty;
        
        const div = document.createElement('div');
        div.className = 'cart-item';
        div.style.background = 'rgba(255, 255, 255, 0.05)';
        div.style.border = '1px solid rgba(255, 255, 255, 0.1)';
        div.style.borderRadius = '12px';
        div.style.padding = '12px';
        div.style.marginBottom = '10px';
        div.style.display = 'flex';
        div.style.justifyContent = 'space-between';
        div.style.alignItems = 'center';
        
        const unitText = getItemUnit(item);
        const iconText = getItemIcon(item);

        let extraInfo = '';
        if (item.spice_level) extraInfo += `<div style="margin-top:4px;"><span style="background:rgba(0,229,255,0.15); color:#00e5ff; border:1px solid rgba(0,229,255,0.3); padding:2px 7px; border-radius:4px; font-size:11px; font-weight:bold; display:inline-block;">${item.spice_level}</span></div>`;
        if (item.note) extraInfo += `<div style="margin-top:3px;"><span style="color:#ffd166; font-size:12px; font-weight:bold; display:inline-block;">คำขอพิเศษ: ${item.note}</span></div>`;
        
        div.innerHTML = `
            <div style="flex-grow: 1; padding-right: 6px;">
                <strong style="color:#ffffff; font-size:14.5px;">${item.name}</strong><br>
                ${extraInfo}
                <span style="color: #ff5722; font-weight:800; font-size:13.5px; margin-top:2px; display:inline-block;">฿${item.price.toFixed(2)} x ${item.qty} ${unitText}</span>
            </div>
            <div style="display: flex; align-items: center; gap: 6px;">
                <button type="button" class="btn btn-secondary btn-sm" style="padding: 3px 8px; border-radius:6px; background:rgba(255,255,255,0.15); color:#fff; border:none; font-weight:bold; cursor:pointer;" onclick="changeQtyByIndex(${index}, -1)">-</button>
                <span style="font-weight:bold; font-size:14px; width:16px; text-align:center; color:#fff;">${item.qty}</span>
                <button type="button" class="btn btn-secondary btn-sm" style="padding: 3px 8px; border-radius:6px; background:#ff5722; color:#fff; border:none; font-weight:bold; cursor:pointer;" onclick="changeQtyByIndex(${index}, 1)">+</button>
                <button type="button" class="btn btn-danger btn-sm" style="padding: 3px 8px; background-color: #ef4444; color:#fff; border:none; border-radius:6px; font-size:11px; font-weight:bold; cursor:pointer;" onclick="removeFromCart(${index})">ลบ</button>
            </div>
        `;
        container.appendChild(div);
    });
    
    const formattedTotal = total.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    if (itemCountBadge) itemCountBadge.textContent = `${itemCount}`;
    if (topBadge) topBadge.textContent = `${itemCount}`;
    if (floatBadge) floatBadge.textContent = `${itemCount}`;
    if (totalSpan) totalSpan.textContent = formattedTotal;
    if (cartInput) cartInput.value = JSON.stringify(cart);
}

// 15-Second Front-end Rate Limiting & Cooldown Protection (Anti-Spam)
let orderCooldownInterval = null;

function startOrderCooldownTimer(seconds) {
    const btn = document.getElementById('btn-submit-order');
    if (!btn) return;
    
    const secs = parseInt(seconds) || 15;
    const unlockTime = Date.now() + (secs * 1000);
    localStorage.setItem('order_cooldown_until', unlockTime);
    
    if (orderCooldownInterval) clearInterval(orderCooldownInterval);
    
    btn.disabled = true;
    btn.style.opacity = '0.75';
    btn.style.cursor = 'not-allowed';

    const updateTimerText = () => {
        const remaining = Math.ceil((unlockTime - Date.now()) / 1000);
        if (remaining > 0) {
            btn.innerHTML = `⏳ กรุณารอสักครู่ (${remaining} วินาที)...`;
        } else {
            clearInterval(orderCooldownInterval);
            orderCooldownInterval = null;
            localStorage.removeItem('order_cooldown_until');
            btn.disabled = false;
            btn.style.opacity = '1';
            btn.style.cursor = 'pointer';
            btn.innerHTML = `📋 ยืนยันและส่งใบสั่งอาหาร`;
        }
    };

    updateTimerText();
    orderCooldownInterval = setInterval(updateTimerText, 1000);
}

// Restore active cooldown timer on page load
window.addEventListener('DOMContentLoaded', () => {
    const cooldownUntil = parseInt(localStorage.getItem('order_cooldown_until') || '0');
    if (cooldownUntil > Date.now()) {
        const remainingSecs = Math.ceil((cooldownUntil - Date.now()) / 1000);
        startOrderCooldownTimer(remainingSecs);
    }
});

function openPaymentVerificationModal(data) {
    const orderId = data.order_id;
    const tableNum = data.table_number;
    const totalAmt = parseFloat(data.total_amount || 0).toFixed(2);
    const storeId = data.store_id || "<?php echo $store_id; ?>";

    const qrPromptPayUrl = `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=PromptPay_Store_${storeId}_Order_${orderId}_Amount_${totalAmt}`;

    Swal.fire({
        title: `<div style="font-size:20px; font-weight:800; color:#0f172a; font-family:'Sarabun',sans-serif;">💳 ยืนยันการชำระเงิน (ออเดอร์ #${orderId})</div>`,
        html: `
            <div style="text-align:left; font-family:'Sarabun',sans-serif; color:#334155; font-size:14px; line-height:1.5;">
                <div style="background:#f8fafc; padding:12px; border-radius:10px; border:1px solid #e2e8f0; margin-bottom:12px; text-align:center;">
                    <div style="font-size:13px; color:#64748b; margin-bottom:2px;">ยอดชำระเงินทั้งสิ้น (โต๊ะ ${tableNum})</div>
                    <div style="font-size:26px; font-weight:800; color:#ff5722;">฿${totalAmt}</div>
                </div>

                <div style="text-align:center; margin-bottom:15px; background:#fff; padding:10px; border-radius:10px; border:1px dashed #cbd5e1;">
                    <img src="${qrPromptPayUrl}" style="width:170px; height:170px; border-radius:8px;" alt="PromptPay QR Code">
                    <div style="font-size:12px; color:#64748b; margin-top:4px;">📱 สแกน QR Code พร้อมเพย์ หรืออัปโหลดสลิปโอนเงิน</div>
                </div>

                <div style="margin-bottom:12px;">
                    <label style="font-size:13px; font-weight:700; display:block; margin-bottom:4px; color:#1e293b;">แนบหลักฐานสลิปการโอนเงิน (ถ้ามี):</label>
                    <input type="file" id="swal_slip_file" accept="image/*,.pdf" style="width:100%; padding:8px; border-radius:6px; border:1px solid #cbd5e1; font-size:12.5px;">
                </div>
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: '✅ ยืนยันชำระเงิน & ส่งเข้าครัว',
        cancelButtonText: '💵 ชำระเงินสดกับพนักงาน',
        confirmButtonColor: '#10b981',
        cancelButtonColor: '#ff5722',
        allowOutsideClick: false,
        preConfirm: () => {
            const fileInput = document.getElementById('swal_slip_file');
            const file = (fileInput && fileInput.files && fileInput.files.length > 0) ? fileInput.files[0] : null;
            return { slipFile: file };
        }
    }).then((result) => {
        const overlay = document.getElementById('orderLoadingOverlay');

        if (result.isConfirmed) {
            const slipFile = (result.value && result.value.slipFile) ? result.value.slipFile : null;

            const verifyFormData = new FormData();
            verifyFormData.append('verify_payment', '1');
            verifyFormData.append('order_id', orderId);
            verifyFormData.append('store_id', storeId);
            if (slipFile) {
                verifyFormData.append('slip_file', slipFile);
            }

            if (overlay) overlay.classList.add('active');

            fetch(window.location.href, {
                method: 'POST',
                body: verifyFormData
            })
            .then(res => res.json())
            .then(resData => {
                if (overlay) overlay.classList.remove('active');
                if (resData.success) {
                    try {
                        const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
                        audio.play().catch(e => {});
                    } catch(e) {}

                    localStorage.setItem('active_order_id', orderId);
                    localStorage.setItem('active_order_table', tableNum);
                    cart = [];
                    updateCartUI();
                    startOrderCooldownTimer(15);

                    Swal.fire({
                        icon: 'success',
                        title: '🎉 ยืนยันชำระเงินโอน/ส่งสลิปเรียบร้อยแล้ว!',
                        html: `
                            <div style="text-align:left; font-size:14px; line-height:1.6; font-family:'Sarabun',sans-serif; color:#334155;">
                                <div style="background:#f8fafc; padding:15px; border-radius:12px; border:1px solid #e2e8f0; margin-bottom:12px;">
                                    <p style="margin:0 0 6px 0;"><strong>หมายเลขออเดอร์:</strong> <span style="color:#ff5722; font-weight:800; font-size:16px;">#${orderId}</span></p>
                                    <p style="margin:0 0 6px 0;"><strong>โต๊ะอาหาร:</strong> <span style="font-weight:800; font-size:15px;">โต๊ะที่ ${tableNum}</span></p>
                                    <p style="margin:0; color:#10b981; font-weight:700;">🟢 แนบหลักฐานสลิปเรียบร้อย ส่งออเดอร์เข้าห้องครัวแล้ว!</p>
                                </div>
                            </div>
                        `,
                        confirmButtonText: '🔔 ติดตามสถานะอาหาร (Live Tracking)',
                        showCancelButton: true,
                        cancelButtonText: 'สั่งอาหารเพิ่ม',
                        confirmButtonColor: '#ff5722'
                    }).then((r) => {
                        if (r.isConfirmed) {
                            window.location.href = 'status.php?order_id=' + orderId + (storeId ? '&store_id=' + storeId : '');
                        }
                    });

                    initOrderTracker(orderId, tableNum);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'ไม่สามารถยืนยันชำระเงินได้',
                        text: resData.message || 'เกิดข้อผิดพลาดในการยืนยันชำระเงิน',
                        confirmButtonColor: '#ff5722'
                    });
                }
            })
            .catch(err => {
                if (overlay) overlay.classList.remove('active');
                Swal.fire({
                    icon: 'error',
                    title: 'เกิดข้อผิดพลาดทางเทคนิค',
                    text: err.message,
                    confirmButtonColor: '#ff5722'
                });
            });
        } else {
            // Customer selected Cash Payment
            const cashFormData = new FormData();
            cashFormData.append('confirm_cash_payment', '1');
            cashFormData.append('order_id', orderId);
            cashFormData.append('store_id', storeId);

            if (overlay) overlay.classList.add('active');

            fetch(window.location.href, {
                method: 'POST',
                body: cashFormData
            })
            .then(res => res.json())
            .then(resData => {
                if (overlay) overlay.classList.remove('active');
                localStorage.setItem('active_order_id', orderId);
                localStorage.setItem('active_order_table', tableNum);
                cart = [];
                updateCartUI();
                startOrderCooldownTimer(15);

                Swal.fire({
                    icon: 'success',
                    title: '🎉 ส่งออเดอร์เรียบร้อย (เลือกชำระเงินสด)',
                    html: `
                        <div style="text-align:left; font-size:14px; line-height:1.6; font-family:'Sarabun',sans-serif; color:#334155;">
                            <div style="background:#f8fafc; padding:15px; border-radius:12px; border:1px solid #e2e8f0; margin-bottom:12px;">
                                <p style="margin:0 0 6px 0;"><strong>หมายเลขออเดอร์:</strong> <span style="color:#ff5722; font-weight:800; font-size:16px;">#${orderId}</span></p>
                                <p style="margin:0 0 6px 0;"><strong>โต๊ะอาหาร:</strong> <span style="font-weight:800; font-size:15px;">โต๊ะที่ ${tableNum}</span></p>
                                <p style="margin:0; color:#3b82f6; font-weight:700;">💵 เลือกชำระเงินสดกับพนักงานเมื่อรับประทานเสร็จสิ้น</p>
                            </div>
                        </div>
                    `,
                    confirmButtonText: '🔔 ติดตามสถานะอาหาร (Live Tracking)',
                    showCancelButton: true,
                    cancelButtonText: 'สั่งอาหารเพิ่ม',
                    confirmButtonColor: '#ff5722'
                }).then((r) => {
                    if (r.isConfirmed) {
                        window.location.href = 'status.php?order_id=' + orderId + (storeId ? '&store_id=' + storeId : '');
                    }
                });

                initOrderTracker(orderId, tableNum);
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });
        }
    });
}

// Bind form submission to AJAX handler with SweetAlert2 Celebration Popup!
var orderForm = document.getElementById('order-form');
if (orderForm) {
orderForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const tableInput = document.getElementById('table_number');
    if (!tableInput || !tableInput.value.trim()) {
        Swal.fire({
            icon: 'warning',
            title: 'กรุณาระบุหมายเลขโต๊ะ',
            text: 'โปรดกรอกหมายเลขโต๊ะอาหารก่อนยืนยันส่งใบสั่งซื้อ',
            confirmButtonColor: '#ff5722'
        });
        return;
    }
    if (cart.length === 0) {
        Swal.fire({
            icon: 'info',
            title: 'ตะกร้าสินค้าว่างเปล่า',
            text: 'กรุณาเลือกรายการอาหารอย่างน้อย 1 รายการก่อนส่งออเดอร์',
            confirmButtonColor: '#ff5722'
        });
        return;
    }
    
    // Show loading overlay
    const overlay = document.getElementById('orderLoadingOverlay');
    if (overlay) overlay.classList.add('active');
    
    // Ensure cart_data is up to date before submitting
    const cartInput = document.getElementById('cart_data_input');
    if (cartInput) cartInput.value = JSON.stringify(cart);
    
    const formData = new FormData(this);
    formData.append('place_order', '1');
    
    const currentUrl = window.location.href;
    const storeId = "<?php echo $store_id; ?>";
    
    fetch(currentUrl, {
        method: 'POST',
        body: formData
    })
    .then(async res => {
        const text = await res.text();
        try {
            return JSON.parse(text);
        } catch(e) {
            console.error("Server raw response:", text);
            throw new Error("Server Response Error: " + text.substring(0, 150));
        }
    })
    .then(data => {
        if (overlay) overlay.classList.remove('active');
        
        if (data.success) {
            if (data.status === 'unpaid') {
                openPaymentVerificationModal(data);
            } else {
                // Play Audio Success Chime
                try {
                    const audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
                    audio.play().catch(e => {});
                } catch(e) {}

                localStorage.setItem('active_order_id', data.order_id);
                localStorage.setItem('active_order_table', data.table_number);
                
                cart = [];
                updateCartUI();
                
                // Trigger 15-second front-end cooldown timer
                startOrderCooldownTimer(data.remaining_seconds || 15);

                // SweetAlert2 Stunning Celebration Modal
                Swal.fire({
                    icon: 'success',
                    title: '🎉 ส่งออเดอร์เข้าห้องครัวเรียบร้อยแล้ว!',
                    html: `
                        <div style="text-align:left; font-size:14px; line-height:1.6; font-family:'Sarabun',sans-serif; color:#334155;">
                            <div style="background:#f8fafc; padding:15px; border-radius:12px; border:1px solid #e2e8f0; margin-bottom:12px;">
                                <p style="margin:0 0 6px 0;"><strong>หมายเลขออเดอร์:</strong> <span style="color:#ff5722; font-weight:800; font-size:16px;">#${data.order_id}</span></p>
                                <p style="margin:0 0 6px 0;"><strong>โต๊ะอาหาร:</strong> <span style="font-weight:800; font-size:15px;">โต๊ะที่ ${data.table_number}</span></p>
                                <p style="margin:0; color:#10b981; font-weight:700;">🟢 รายการสั่งอาหารส่งตรงเข้าหน้าจอพ่อครัว (Kitchen Display) แล้ว!</p>
                            </div>
                            <p style="font-size:13px; color:#64748b; margin:0;">ท่านสามารถติดตามสถานะการปรุงอาหารแบบเรียลไทม์ได้ทันที</p>
                        </div>
                    `,
                    confirmButtonText: '🔔 ติดตามสถานะอาหาร (Live Tracking)',
                    showCancelButton: true,
                    cancelButtonText: 'สั่งอาหารเพิ่ม',
                    confirmButtonColor: '#ff5722',
                    cancelButtonColor: '#64748b'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = 'status.php?order_id=' + data.order_id + (storeId ? '&store_id=' + storeId : '');
                    }
                });
                
                initOrderTracker(data.order_id, data.table_number);
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        } else {
            // Trigger cooldown timer if rate limited
            if (data.rate_limited || data.remaining_seconds) {
                startOrderCooldownTimer(data.remaining_seconds || 15);
            }
            Swal.fire({
                icon: 'warning',
                title: 'กรุณารอสักครู่',
                text: data.message || 'เกิดข้อผิดพลาดในการส่งรายการสั่งซื้อ',
                confirmButtonColor: '#ff5722'
            });
        }
    })
    .catch(err => {
        if (overlay) overlay.classList.remove('active');
        Swal.fire({
            icon: 'error',
            title: 'เกิดข้อผิดพลาดทางเทคนิค',
            text: err.message,
            confirmButtonColor: '#ff5722'
        });
    });
});
} // end if (orderForm)

let trackerInterval = null;

function initOrderTracker(orderId, tableNumber) {
    const box = document.getElementById('liveTrackerBox');
    const orderIdText = document.getElementById('trackingOrderIdText');
    const tableText = document.getElementById('trackingTableText');
    const badge = document.getElementById('trackingBadge');
    const stepsLine = document.getElementById('trackingStepsLine');
    const dotPending = document.getElementById('dot-pending');
    const dotPreparing = document.getElementById('dot-preparing');
    const dotReady = document.getElementById('dot-ready');
    
    if (!box) return;
    
    box.style.display = 'block';
    orderIdText.textContent = `#${orderId}`;
    tableText.textContent = tableNumber;
    
    // Audio Chime Generator for Customer Sound Notification when Food is Ready
    function playCustomerFoodReadySound() {
        try {
            const AudioCtx = window.AudioContext || window.webkitAudioContext;
            if (!AudioCtx) return;
            const ctx = new AudioCtx();
            if (ctx.state === 'suspended') {
                ctx.resume();
            }
            
            // 2-tone melodic chime (C5 -> G5)
            const osc1 = ctx.createOscillator();
            const gain1 = ctx.createGain();
            osc1.type = 'sine';
            osc1.frequency.setValueAtTime(523.25, ctx.currentTime); // C5
            gain1.gain.setValueAtTime(0.3, ctx.currentTime);
            gain1.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
            osc1.connect(gain1);
            gain1.connect(ctx.destination);
            osc1.start();
            osc1.stop(ctx.currentTime + 0.3);

            setTimeout(() => {
                const osc2 = ctx.createOscillator();
                const gain2 = ctx.createGain();
                osc2.type = 'sine';
                osc2.frequency.setValueAtTime(783.99, ctx.currentTime); // G5
                gain2.gain.setValueAtTime(0.4, ctx.currentTime);
                gain2.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5);
                osc2.connect(gain2);
                gain2.connect(ctx.destination);
                osc2.start();
                osc2.stop(ctx.currentTime + 0.5);
            }, 180);
        } catch (e) {
            console.error("Audio play failed:", e);
        }
    }

    let lastKnownStatus = null;
    
    // Clear any existing polling
    if (trackerInterval) clearInterval(trackerInterval);
    
    // Function to check status
    function checkStatus() {
        if (document.hidden) return;
        fetch(`menu.php?check_order_status=${orderId}`)
            .then(res => res.json())
            .then(data => {
                if (!data.success) return;
                
                const status = data.status; // pending, preparing, ready, completed, cancelled
                
                // Reset dots
                dotPending.classList.remove('active');
                dotPreparing.classList.remove('active');
                dotReady.classList.remove('active');
                
                if (status === 'ready' && lastKnownStatus !== 'ready') {
                    // Trigger Audio Chime and Toast Notification when status transitions to 'ready'
                    playCustomerFoodReadySound();
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'success',
                            title: '🛎️ อาหารของคุณเสร็จเรียบร้อยแล้ว!',
                            text: 'อาหารของคุณปรุงเสร็จเรียบร้อยแล้ว พร้อมเสิร์ฟมารับอาหารได้เลย!',
                            confirmButtonText: 'รับทราบ',
                            confirmButtonColor: '#10B981',
                            timer: 10000
                        });
                    }
                }
                lastKnownStatus = status;

                if (status === 'pending') {
                    badge.className = 'tracking-badge pending';
                    badge.textContent = 'ส่งออเดอร์แล้ว (รอดำเนินการ)';
                    stepsLine.className = 'tracking-steps step-pending';
                    dotPending.classList.add('active');
                } else if (status === 'preparing') {
                    badge.className = 'tracking-badge preparing';
                    badge.textContent = 'กำลังเตรียมปรุงอาหาร... (กำลังทำ)';
                    stepsLine.className = 'tracking-steps step-preparing';
                    dotPending.classList.add('active');
                    dotPreparing.classList.add('active');
                } else if (status === 'ready') {
                    badge.className = 'tracking-badge ready';
                    badge.textContent = 'อาหารปรุงเสร็จแล้ว! 🛎️ มารับอาหารได้เลย';
                    stepsLine.className = 'tracking-steps step-ready';
                    dotPending.classList.add('active');
                    dotPreparing.classList.add('active');
                    dotReady.classList.add('active');
                } else if (status === 'served' || status === 'completed') {
                    // Order completed or served -> clear storage and hide tracker box
                    if (trackerInterval) clearInterval(trackerInterval);
                    localStorage.removeItem('active_order_id');
                    localStorage.removeItem('active_order_table');
                    box.style.display = 'none';
                } else if (status === 'cancelled') {
                    badge.className = 'tracking-badge cancelled';
                    badge.textContent = 'ออเดอร์นี้ถูกยกเลิกแล้ว';
                    if (trackerInterval) clearInterval(trackerInterval);
                    localStorage.removeItem('active_order_id');
                    localStorage.removeItem('active_order_table');
                }
            })
            .catch(err => console.error("Tracker status check failed:", err));
    }
    
    // Check immediately and poll every 3 seconds
    checkStatus();
    trackerInterval = setInterval(checkStatus, 3000);
}

// On page load, check active order for this table from server or localStorage
window.addEventListener('DOMContentLoaded', () => {
    const serverActiveOrderId = <?php echo json_encode($active_table_order_id); ?>;
    const currentTable = <?php echo json_encode($table_param); ?>;
    
    if (serverActiveOrderId) {
        localStorage.setItem('active_order_id', serverActiveOrderId);
        localStorage.setItem('active_order_table', currentTable);
        initOrderTracker(serverActiveOrderId, currentTable);
    } else {
        localStorage.removeItem('active_order_id');
        localStorage.removeItem('active_order_table');
        const box = document.getElementById('liveTrackerBox');
        if (box) box.style.display = 'none';
    }
});

// Toggle Bottom Sheet Menu
function toggleBottomSheet() {
    const sheet = document.getElementById('lpBottomSheet');
    if (sheet) {
        sheet.classList.toggle('open');
    }
}

// Handle browser go back safely
function handleGoBack() {
    if (window.history.length > 1 && document.referrer && document.referrer !== window.location.href) {
        window.history.back();
    } else {
        window.location.href = '<?php echo htmlspecialchars($user_role_home); ?>';
    }
}
</script>


<!-- Quick Menu Bottom Sheet -->
<div class="lp-bottom-sheet" id="lpBottomSheet">
    <div class="lp-bottom-sheet-backdrop" onclick="toggleBottomSheet()"></div>
    <div class="lp-bottom-sheet-content">
        <div class="lp-bottom-sheet-header">
            <span class="lp-bottom-sheet-title">📂 ทางลัดด่วน CMTC Tech Solution</span>
            <button class="lp-bottom-sheet-close" onclick="toggleBottomSheet()">&times;</button>
        </div>
        <div class="lp-bottom-sheet-grid">
            <a href="<?php echo htmlspecialchars($user_role_home); ?>" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">🏠</span>
                <span class="lp-bottom-sheet-label">หน้าแรก</span>
            </a>
            <a href="menu.php" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">🛒</span>
                <span class="lp-bottom-sheet-label">สั่งอาหาร</span>
            </a>
            <a href="status.php" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">📊</span>
                <span class="lp-bottom-sheet-label">สถานะคิว</span>
            </a>
            <a href="store-admin.php" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">👨‍🍳</span>
                <span class="lp-bottom-sheet-label">คุมห้องครัว</span>
            </a>
        </div>
    </div>
</div>

<!-- Floating Sticky Cart Button (Bottom Right Icon Only) -->
<button type="button" onclick="scrollToCartContainer()" id="floatingCartBtn" aria-label="Cart" style="position: fixed; bottom: 25px; right: 20px; z-index: 9999; background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%); color: #ffffff; border: none; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(255,87,34,0.5); cursor: pointer; transition: transform 0.2s;">
    <span>🛒</span>
    <span id="floating-cart-count" style="position: absolute; top: -3px; right: -3px; background: #0f172a; color: #ffffff; border: 2px solid #ffffff; font-size: 11px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.3);">0</span>
</button>

</body>
</html>