<?php
/**
 * หน้าแรกของระบบจองสินค้าออนไลน์ (Online Pre-order System)
 * ออกแบบด้วย Bootstrap 5 ในธีมสีแดงสดใส (Bright Red) ผสมผสานกับความมินิมอล
 */
session_start();

// สร้าง CSRF Token สำหรับความปลอดภัยของฟอร์ม
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

require_once 'db.php';

// ดึงข้อมูลสินค้าทั้งหมดและตัวเลือกสินค้า
try {
    $stmt = $pdo->query("SELECT * FROM products ORDER BY id ASC");
    $products = $stmt->fetchAll();
    
    $stmt_v = $pdo->query("SELECT * FROM product_variants ORDER BY product_id, id ASC");
    $all_variants = $stmt_v->fetchAll();
    
    $variants_by_product = [];
    foreach ($all_variants as $v) {
        $variants_by_product[$v['product_id']][] = $v;
    }

    // ดึงหมวดหมู่ทั้งหมดสำหรับแท็บกรอง
    $categories_in_store = [];
    foreach ($products as $p) {
        $cat = !empty($p['category']) ? trim($p['category']) : 'ทั่วไป';
        if (!in_array($cat, $categories_in_store)) {
            $categories_in_store[] = $cat;
        }
    }
} catch (PDOException $e) {
    $products = [];
    $variants_by_product = [];
    $categories_in_store = [];
    $error_msg = "ไม่สามารถเชื่อมต่อฐานข้อมูลได้: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pre-order System - ระบบจองสินค้าออนไลน์</title>
    <!-- Google Fonts: Noto Sans Thai & Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+Thai:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-red: #e61e2b; /* แดงสดใส */
            --hover-red: #c1101b;
            --light-red: #ffebeb;
            --dark-gray: #2d3748;
            --light-gray: #f7fafc;
            --border-color: #edf2f7;
            --font-family: 'Noto Sans Thai', 'Inter', sans-serif;
        }

        body {
            font-family: var(--font-family);
            background-color: #fcfcfc;
            color: var(--dark-gray);
        }

        /* Navigation Style */
        .navbar {
            border-bottom: 3px solid var(--primary-red);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            background-color: #fff !important;
        }
        .navbar-brand {
            font-weight: 700;
            color: var(--primary-red) !important;
            font-size: 1.5rem;
            letter-spacing: -0.5px;
        }
        .navbar-brand i {
            margin-right: 8px;
        }

        /* Hero Banner */
        .hero-section {
            background: linear-gradient(135deg, var(--primary-red) 0%, #ff5252 100%);
            color: white;
            padding: 4rem 1rem;
            text-align: center;
            border-radius: 0 0 2rem 2rem;
            margin-bottom: 3rem;
            box-shadow: 0 10px 20px rgba(230, 30, 43, 0.15);
        }
        .hero-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .hero-subtitle {
            font-weight: 300;
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Product Card Styles */
        .product-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
            border-color: rgba(230, 30, 43, 0.2);
        }
        .image-container {
            position: relative;
            background-color: var(--light-gray);
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .product-image {
            max-height: 100%;
            max-width: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .product-card:hover .product-image {
            transform: scale(1.05);
        }
        .price-badge {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background-color: var(--primary-red);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-weight: 700;
            box-shadow: 0 4px 6px rgba(230, 30, 43, 0.25);
            z-index: 2;
        }
        .product-body {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .product-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--dark-gray);
        }
        .product-desc {
            font-size: 0.9rem;
            color: #718096;
            margin-bottom: 1.25rem;
            line-height: 1.6;
            flex-grow: 1;
        }

        /* Video Section Inside Card */
        .video-box {
            border-radius: 12px;
            overflow: hidden;
            background-color: #000;
            margin-bottom: 1.25rem;
            border: 1px solid var(--border-color);
        }

        /* Buttons & Forms */
        .btn-red {
            background-color: var(--primary-red);
            color: #fff;
            font-weight: 600;
            border: none;
            padding: 10px 24px;
            border-radius: 10px;
            transition: all 0.2s;
        }
        .btn-red:hover, .btn-red:focus {
            background-color: var(--hover-red);
            color: #fff;
            box-shadow: 0 4px 12px rgba(230, 30, 43, 0.3);
        }
        .btn-outline-red {
            border: 2px solid var(--primary-red);
            color: var(--primary-red);
            font-weight: 600;
            background: transparent;
            padding: 8px 20px;
            border-radius: 10px;
            transition: all 0.2s;
        }
        .btn-outline-red:hover {
            background-color: var(--primary-red);
            color: white;
        }
        
        /* Modern Variant Chips */
        .variant-chip {
            display: inline-block;
            border: 1px solid var(--border-color);
            background-color: #fff;
            color: var(--dark-gray);
            font-size: 0.8rem !important;
            font-weight: 500;
            border-radius: 8px;
            padding: 6px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
        }
        .variant-chip:hover:not(.disabled) {
            border-color: var(--primary-red) !important;
            color: var(--primary-red) !important;
            background-color: var(--light-red) !important;
        }
        .variant-chip.active {
            border-color: var(--primary-red) !important;
            background-color: var(--primary-red) !important;
            color: #fff !important;
            box-shadow: 0 4px 10px rgba(230, 30, 43, 0.2);
        }
        .variant-chip.disabled {
            background-color: #f3f4f6 !important;
            border-color: #e5e7eb !important;
            color: #9ca3af !important;
            cursor: not-allowed;
            text-decoration: line-through;
        }

        /* Category Filter Buttons */
        .category-filter-btn {
            border-radius: 20px;
            padding: 8px 18px;
            font-size: 0.9rem;
            font-weight: 600;
            color: #4a5568;
            background-color: #fff;
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            cursor: pointer;
        }
        .category-filter-btn:hover {
            border-color: var(--primary-red);
            color: var(--primary-red);
            background-color: var(--light-red);
        }
        .category-filter-btn.active {
            background-color: var(--primary-red);
            color: #fff;
            border-color: var(--primary-red);
            box-shadow: 0 4px 10px rgba(230, 30, 43, 0.25);
        }
        .product-category-tag {
            display: inline-flex;
            align-items: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--primary-red);
            background-color: var(--light-red);
            padding: 3px 10px;
            border-radius: 12px;
            margin-bottom: 0.5rem;
        }

        /* Modern Quantity Selector */
        .quantity-ctrl {
            display: flex;
            align-items: center;
            max-width: 130px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
        }
        .quantity-ctrl button {
            background: none;
            border: none;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--dark-gray);
            font-weight: bold;
            transition: background 0.2s;
        }
        .quantity-ctrl button:hover:not(:disabled) {
            background-color: var(--light-gray);
        }
        .quantity-ctrl button:disabled {
            color: #cbd5e0;
            cursor: not-allowed;
        }
        .quantity-ctrl input {
            width: 42px;
            height: 32px;
            text-align: center;
            border: none;
            border-left: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--dark-gray);
        }
        .quantity-ctrl input:focus {
            outline: none;
        }

        /* Floating Cart Button */
        .floating-cart {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-red) 0%, #ff5252 100%);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(230, 30, 43, 0.35);
            z-index: 1040;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
        }
        .floating-cart:hover {
            transform: scale(1.1) translateY(-3px);
            box-shadow: 0 12px 30px rgba(230, 30, 43, 0.45);
            color: #fff;
        }
        .floating-cart i {
            font-size: 1.4rem;
        }
        .floating-cart .badge {
            position: absolute;
            top: -3px;
            right: -3px;
            background-color: #fff;
            color: var(--primary-red);
            font-size: 0.75rem;
            min-width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            padding: 2px;
            border: 2px solid var(--primary-red);
        }

        /* Cart Drawer Style */
        .cart-item-card {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 12px;
            background: #fff;
            transition: all 0.2s ease;
        }
        .cart-item-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            border-color: rgba(230, 30, 43, 0.15);
        }
        .cart-item-img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 8px;
            background-color: var(--light-gray);
        }

        /* Modal Custom Style */
        .modal-content {
            border-radius: 20px;
            border: none;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .modal-header {
            background-color: var(--light-red);
            border-bottom: 1px solid #fed7d7;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            color: var(--primary-red);
        }
        .modal-title {
            font-weight: 700;
        }
        .form-label {
            font-weight: 600;
            color: var(--dark-gray);
            font-size: 0.95rem;
        }
        .form-control, .form-select {
            border-radius: 8px;
            padding: 10px 14px;
            border: 1px solid #cbd5e0;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-red);
            box-shadow: 0 0 0 3px rgba(230, 30, 43, 0.15);
        }
        
        .stock-badge {
            font-size: 0.85rem;
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: 500;
        }

        /* Toast & Alert Styling */
        .alert-preorder {
            border-radius: 12px;
            font-weight: 500;
        }
    </style>
</head>
<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                <i class="fa-solid fa-cart-shopping-fast"></i>
                <span class="text-dark">RED</span>SHOP <span class="badge bg-danger fs-6">Pre-order</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNavbar">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active fw-bold text-danger" href="index.php"><i class="fa-solid fa-store me-1"></i> สินค้าเปิดจอง</a>
                    </li>
                    <?php if (isset($_SESSION['user_id'])): ?>
                    <li class="nav-item">
                        <a class="nav-link text-dark" href="my_orders.php"><i class="fa-solid fa-receipt me-1"></i> ประวัติการสั่งจองของฉัน</a>
                    </li>
                    <?php endif; ?>
                </ul>

                <div class="d-flex align-items-center gap-2">
                    <?php if (isset($_SESSION['user_id'])): ?>
                        <div class="dropdown">
                            <button class="btn btn-outline-danger dropdown-toggle btn-sm d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown">
                                <i class="fa-solid fa-circle-user"></i>
                                <span><?php echo htmlspecialchars($_SESSION['user_name']); ?></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                <li><h6 class="dropdown-header"><i class="fa-solid fa-phone me-1"></i> <?php echo htmlspecialchars($_SESSION['user_phone']); ?></h6></li>
                                <li><a class="dropdown-item" href="my_orders.php"><i class="fa-solid fa-receipt me-2"></i> ประวัติการสั่งจอง</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="logout.php"><i class="fa-solid fa-right-from-bracket me-2"></i> ออกจากระบบ</a></li>
                            </ul>
                        </div>
                    <?php else: ?>
                        <a href="login.php" class="btn btn-outline-danger btn-sm"><i class="fa-solid fa-right-to-bracket me-1"></i> เข้าสู่ระบบ</a>
                        <a href="register.php" class="btn btn-red btn-sm"><i class="fa-solid fa-user-plus me-1"></i> สมัครสมาชิก</a>
                    <?php endif; ?>
                    <a href="admin.php" class="btn btn-outline-secondary btn-sm ms-2"><i class="fa-solid fa-user-gear me-1"></i> Admin</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Banner -->
    <div class="container">
        <div class="hero-section">
            <h1 class="hero-title">ระบบสั่งจองสินค้าล่วงหน้าออนไลน์</h1>
            <p class="hero-subtitle">จองสินค้าคุณภาพเยี่ยมก่อนใคร มั่นใจในสินค้าลิขสิทธิ์แท้ 100%</p>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mb-5">
        <?php if (isset($_SESSION['success_msg'])): ?>
            <div class="alert alert-success alert-dismissible fade show alert-preorder mb-4" role="alert">
                <i class="fa-solid fa-circle-check me-2"></i> <?php echo $_SESSION['success_msg']; unset($_SESSION['success_msg']); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <script>
                localStorage.removeItem('redshop_cart');
            </script>
        <?php endif; ?>

        <?php if (isset($_SESSION['error_msg'])): ?>
            <div class="alert alert-danger alert-dismissible fade show alert-preorder mb-4" role="alert">
                <i class="fa-solid fa-circle-exclamation me-2"></i> <?php echo $_SESSION['error_msg']; unset($_SESSION['error_msg']); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        <?php endif; ?>

        <?php if (empty($products)): ?>
            <div class="text-center py-5">
                <i class="fa-regular fa-folder-open fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">ไม่พบข้อมูลสินค้าชั่วคราว</h4>
                <p class="text-muted">โปรดกลับมาตรวจสอบใหม่อีกครั้งในภายหลัง</p>
            </div>
        <?php else: ?>
            <!-- Category Filter Tabs (หน้าบ้าน) -->
            <?php
                // รวมหมวดหมู่ที่มีสินค้า + หมวดหมู่แนะนำ
                $default_categories = ['เสื้อผ้าและเครื่องแต่งกาย', 'กระเป๋าและอุปกรณ์', 'ของสะสมและของที่ระลึก', 'เครื่องเขียนและอุปกรณ์การเรียน', 'ทั่วไป'];
                $all_display_categories = array_unique(array_merge($categories_in_store, $default_categories));
            ?>
            <div class="category-filter-wrapper mb-4">
                <div class="d-flex flex-wrap gap-2 justify-content-center">
                    <button type="button" class="category-filter-btn active" onclick="filterCategory('all', this)">
                        <i class="fa-solid fa-border-all me-1"></i> สินค้าทั้งหมด (<?php echo count($products); ?>)
                    </button>
                    <?php foreach ($all_display_categories as $cat_name): ?>
                        <?php 
                            $count_in_cat = 0;
                            foreach ($products as $p) {
                                if (($p['category'] ?? 'ทั่วไป') === $cat_name) {
                                    $count_in_cat++;
                                }
                            }
                        ?>
                        <button type="button" class="category-filter-btn" onclick="filterCategory('<?php echo htmlspecialchars($cat_name); ?>', this)">
                            <i class="fa-solid fa-tag me-1"></i> <?php echo htmlspecialchars($cat_name); ?>
                            <?php if ($count_in_cat > 0): ?>
                                <span class="badge rounded-pill bg-light text-dark ms-1"><?php echo $count_in_cat; ?></span>
                            <?php endif; ?>
                        </button>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="row g-4" id="products-grid">
                <?php foreach ($products as $product): ?>
                    <?php
                    $prod_category = !empty($product['category']) ? $product['category'] : 'ทั่วไป';
                    // ตรวจสอบช่วงเวลาจอง
                    $now = new DateTime();
                    $start = !empty($product['start_time']) ? new DateTime($product['start_time']) : null;
                    $end = !empty($product['end_time']) ? new DateTime($product['end_time']) : null;

                    $is_active = true;
                    $status_badge = '';
                    $button_text = 'จองสินค้าล่วงหน้า';
                    $button_disabled = '';

                    if ($start && $now < $start) {
                        $is_active = false;
                        $status_badge = '<span class="badge bg-warning text-dark position-absolute top-0 start-0 m-3 z-3 shadow-sm"><i class="fa-solid fa-clock me-1"></i> เริ่มเปิดจอง ' . $start->format('d/m H:i') . '</span>';
                        $button_text = 'ยังไม่เปิดรับจอง';
                        $button_disabled = 'disabled';
                    } elseif ($end && $now > $end) {
                        $is_active = false;
                        $status_badge = '<span class="badge bg-secondary position-absolute top-0 start-0 m-3 z-3 shadow-sm"><i class="fa-solid fa-ban me-1"></i> ปิดรับจองแล้ว</span>';
                        $button_text = 'ปิดรับจองแล้ว';
                        $button_disabled = 'disabled';
                    } else {
                        $status_badge = '<span class="badge bg-success position-absolute top-0 start-0 m-3 z-3 shadow-sm"><i class="fa-solid fa-fire me-1"></i> กำลังเปิดจอง</span>';
                    }
                    ?>
                    <div class="col-12 col-md-6 col-lg-4 product-item-col" data-category="<?php echo htmlspecialchars($prod_category); ?>">
                        <div class="product-card">
                            <!-- Image Container -->
                            <div class="image-container">
                                <?php echo $status_badge; ?>
                                <?php 
                                    $img_src = !empty($product['image_url']) ? $product['image_url'] : 'assets/images/default.png';
                                    $is_valid_img = !empty($product['image_url']) && (filter_var($product['image_url'], FILTER_VALIDATE_URL) || file_exists($product['image_url']));
                                ?>
                                <?php if ($is_valid_img): ?>
                                    <img src="<?php echo htmlspecialchars($img_src); ?>" 
                                         onerror="this.onerror=null; this.src='assets/images/default.png';" 
                                         alt="<?php echo htmlspecialchars($product['name']); ?>" 
                                         class="product-image">
                                <?php else: ?>
                                    <img src="assets/images/default.png" alt="<?php echo htmlspecialchars($product['name']); ?>" class="product-image" style="object-fit: contain; padding: 15px; background-color: #f8f9fa;">
                                <?php endif; ?>
                                <div class="price-badge">฿<?php echo number_format($product['price'], 2); ?></div>
                            </div>
                            
                            <!-- Card Body -->
                            <div class="product-body">
                                <div>
                                    <span class="product-category-tag">
                                        <i class="fa-solid fa-layer-group me-1"></i><?php echo htmlspecialchars($prod_category); ?>
                                    </span>
                                </div>
                                <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
                                <p class="product-desc"><?php echo htmlspecialchars($product['description']); ?></p>
                                
                                <!-- Video Review Section (แสดงเฉพาะเมื่อมีการระบุลิงก์วิดีโอจริง) -->
                                <?php 
                                    $has_video = !empty($product['video_url']) && trim($product['video_url']) !== '' && strpos($product['video_url'], 'dQw4w9WgXcQ') === false;
                                ?>
                                <?php if ($has_video): ?>
                                    <div class="video-box">
                                        <?php if (strpos($product['video_url'], 'youtube.com') !== false || strpos($product['video_url'], 'youtu.be') !== false): ?>
                                            <!-- YouTube Embed -->
                                            <div class="ratio ratio-16x9">
                                                <iframe src="<?php echo htmlspecialchars($product['video_url']); ?>" title="Video Review" allowfullscreen></iframe>
                                            </div>
                                        <?php else: ?>
                                            <!-- HTML5 Video -->
                                            <video src="<?php echo htmlspecialchars($product['video_url']); ?>" controls class="w-100"></video>
                                        <?php endif; ?>
                                    </div>
                                <?php endif; ?>

                                <!-- Booking Chips & Cart Actions -->
                                <?php $product_variants = isset($variants_by_product[$product['id']]) ? $variants_by_product[$product['id']] : []; ?>
                                <div class="mb-3">
                                    <label class="form-label d-block mb-1" style="font-size: 0.9rem;">เลือกไซส์ / ตัวเลือก:</label>
                                    <div class="d-flex flex-wrap gap-2" id="variant-selector-<?php echo $product['id']; ?>">
                                        <?php if (empty($product_variants)): ?>
                                            <span class="text-muted small">ไม่มีตัวเลือกสินค้า</span>
                                        <?php else: ?>
                                            <?php foreach ($product_variants as $v): ?>
                                                <?php
                                                    $disabled_class = '';
                                                    $stock_desc = '';
                                                    $is_unlimited = (int)$v['is_unlimited'] === 1;
                                                    $stock_qty = (int)$v['stock'];
                                                    
                                                    if (!$is_unlimited && $stock_qty <= 0) {
                                                        $disabled_class = 'disabled';
                                                        $stock_desc = ' (หมด)';
                                                    } else if ($is_unlimited) {
                                                        $stock_desc = ' (Made-to-Order)';
                                                    } else {
                                                        $stock_desc = " ({$stock_qty})";
                                                    }
                                                ?>
                                                <button type="button" 
                                                        class="variant-chip <?php echo $disabled_class; ?>"
                                                        data-variant-id="<?php echo $v['id']; ?>"
                                                        data-variant-name="<?php echo htmlspecialchars($v['variant_name']); ?>"
                                                        data-stock="<?php echo $stock_qty; ?>"
                                                        data-unlimited="<?php echo $v['is_unlimited']; ?>"
                                                        onclick="selectCardVariant(this, <?php echo $product['id']; ?>)"
                                                        <?php echo ($disabled_class ? 'disabled' : ''); ?>>
                                                    <?php echo htmlspecialchars($v['variant_name']) . $stock_desc; ?>
                                                </button>
                                            <?php endforeach; ?>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="form-label mb-0" style="font-size: 0.9rem;">จำนวน:</span>
                                    <div class="quantity-ctrl" id="qty-ctrl-<?php echo $product['id']; ?>">
                                        <button type="button" onclick="adjustCardQty(<?php echo $product['id']; ?>, -1)" disabled>-</button>
                                        <input type="number" id="qty-input-<?php echo $product['id']; ?>" value="1" min="1" disabled readonly>
                                        <button type="button" onclick="adjustCardQty(<?php echo $product['id']; ?>, 1)" disabled>+</button>
                                    </div>
                                </div>
                                <div class="text-muted small mb-3 text-end" id="stock-info-<?php echo $product['id']; ?>" style="font-size: 0.8rem;">
                                    กรุณาเลือกตัวเลือกสินค้า
                                </div>

                                <div class="row g-2 mt-auto">
                                    <div class="col-6">
                                        <button type="button" 
                                                class="btn btn-outline-red w-100 btn-add-cart d-flex align-items-center justify-content-center gap-1 py-2" 
                                                id="btn-cart-<?php echo $product['id']; ?>"
                                                data-active="<?php echo $is_active ? '1' : '0'; ?>"
                                                onclick="addCardToCart(<?php echo $product['id']; ?>, '<?php echo htmlspecialchars($product['name']); ?>', <?php echo $product['price']; ?>, '<?php echo htmlspecialchars($product['image_url']); ?>')"
                                                disabled>
                                            <i class="fa-solid fa-cart-plus"></i> <span style="font-size: 0.9rem;">ใส่ตะกร้า</span>
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button type="button" 
                                                class="btn btn-red w-100 btn-buy-now d-flex align-items-center justify-content-center gap-1 py-2" 
                                                id="btn-buy-<?php echo $product['id']; ?>"
                                                data-active="<?php echo $is_active ? '1' : '0'; ?>"
                                                onclick="buyCardNow(<?php echo $product['id']; ?>, '<?php echo htmlspecialchars($product['name']); ?>', <?php echo $product['price']; ?>, '<?php echo htmlspecialchars($product['image_url']); ?>')"
                                                disabled>
                                            <i class="fa-solid fa-bolt"></i> <span style="font-size: 0.9rem;">ซื้อทันที</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>

    <!-- Booking Modal -->
    <div class="modal fade" id="preorderModal" tabindex="-1" aria-labelledby="preorderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="preorderModalLabel"><i class="fa-solid fa-cart-plus me-2"></i>รายละเอียดการจองสินค้า</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- เปลี่ยนเป็น enctype="multipart/form-data" เพื่อรองรับการอัปโหลดสลิป -->
                <form action="process_booking.php" method="POST" id="bookingForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <!-- CSRF Token -->
                        <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
                        <!-- Hidden input for JSON Cart Items -->
                        <input type="hidden" name="cart_items" id="modal_cart_items">
                        
                        <!-- 1. Single Item Checkout Fields -->
                        <div id="single_item_checkout_fields">
                            <input type="hidden" name="product_id" id="modal_product_id">
                            
                            <div class="mb-3">
                                <label class="form-label">สินค้าที่เลือก</label>
                                <input type="text" class="form-control bg-light" id="modal_product_name" readonly>
                            </div>

                            <!-- Dynamic Variants (Sizes/Colors) -->
                            <div class="mb-3">
                                <label for="variant_select" class="form-label">เลือกไซส์ / ตัวเลือกสินค้า <span class="text-danger">*</span></label>
                                <select class="form-select" id="variant_select" name="variant_id">
                                    <option value="">-- โปรดเลือกตัวเลือก --</option>
                                </select>
                                <div class="form-text text-danger d-none" id="stock_alert">
                                    <i class="fa-solid fa-exclamation-triangle"></i> ตัวเลือกนี้สินค้าหมด
                                </div>
                            </div>
                        </div>

                        <!-- 2. Multi-Item Cart Checkout Fields -->
                        <div id="cart_checkout_fields" class="d-none">
                            <label class="form-label">รายการสินค้าในรถเข็น</label>
                            <div class="list-group mb-3 border rounded overflow-hidden" id="checkout_cart_items_list" style="max-height: 250px; overflow-y: auto;">
                                <!-- Cart items list will be populated here -->
                            </div>
                        </div>

                        <!-- 3. Customer Details -->
                        <div class="mb-3">
                            <label for="customer_name" class="form-label">ชื่อ-นามสกุล <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="customer_name" name="customer_name" value="<?php echo isset($_SESSION['user_name']) ? htmlspecialchars($_SESSION['user_name']) : ''; ?>" required placeholder="ระบุชื่อเพื่อการติดต่อและรับสินค้า">
                        </div>

                        <div class="mb-3">
                            <label for="customer_phone" class="form-label">เบอร์โทรศัพท์ <span class="text-danger">*</span></label>
                            <input type="tel" class="form-control" id="customer_phone" name="customer_phone" value="<?php echo isset($_SESSION['user_phone']) ? htmlspecialchars($_SESSION['user_phone']) : ''; ?>" pattern="[0-9]{9,10}" required placeholder="เช่น 0891234567">
                            <div class="form-text">กรอกเฉพาะตัวเลข 9-10 หลัก</div>
                        </div>

                        <!-- ช่องทางการชำระเงิน & อัปโหลดสลิป -->
                        <div class="mb-3">
                            <label for="payment_method" class="form-label">ช่องทางการชำระเงิน <span class="text-danger">*</span></label>
                            <select class="form-select" id="payment_method" name="payment_method" required onchange="handlePaymentMethodChange()">
                                <option value="Bank Transfer">🏦 โอนเงินผ่านบัญชีธนาคาร (SCB)</option>
                                <option value="PromptPay">📱 PromptPay / พร้อมเพย์</option>
                            </select>
                        </div>

                        <!-- แสดงข้อมูลธนาคาร (SCB) -->
                        <div class="alert alert-info py-2 shadow-sm" style="font-size: 0.85rem;" id="bank_details">
                            <strong>บัญชีธนาคารสำหรับโอนเงิน:</strong><br>
                            <i class="fa-solid fa-building-columns"></i> ธนาคารไทยพาณิชย์ (SCB) <br>
                            <i class="fa-solid fa-money-check"></i> เลขที่บัญชี: <strong>123-4-56789-0</strong> <br>
                            <i class="fa-solid fa-user"></i> ชื่อบัญชี: <strong>บจก. เรดช็อป ออนไลน์ (REDSHOP Co., Ltd.)</strong>
                        </div>

                        <!-- PromptPay QR Code section -->
                        <div id="promptpay_section" class="d-none">
                            <!-- Countdown Timer -->
                            <div id="qr_countdown_wrapper" class="text-center mb-3" style="display:none !important;">
                                <div class="alert alert-warning py-2 px-3 d-flex align-items-center justify-content-between" style="border-radius:12px;">
                                    <div>
                                        <i class="fa-solid fa-clock me-1 text-warning"></i>
                                        <strong>QR Code หมดอายุใน</strong>
                                    </div>
                                    <div class="ms-2">
                                        <span id="countdown_display" class="fs-5 fw-bold text-danger">10:00</span>
                                    </div>
                                </div>
                            </div>

                            <!-- QR Code Display -->
                            <div class="text-center mb-3">
                                <div class="card border-0 shadow-sm mx-auto" style="max-width: 320px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);">
                                    <div class="card-body p-3">
                                        <div class="bg-white rounded p-3">
                                            <div style="font-size: 0.7rem; text-align: center; color: #1a1a2e; font-weight: 700; margin-bottom: 8px;">THAI QR PAYMENT</div>
                                            <div class="d-flex justify-content-center align-items-center mb-2" style="gap: 6px;">
                                                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/PromptPay_logo.svg/200px-PromptPay_logo.svg.png" alt="PromptPay" style="height:24px; object-fit:contain;" onerror="this.style.display='none'">
                                            </div>
                                            <div id="qr_code_img_wrapper" class="d-flex justify-content-center">
                                                <div class="d-flex align-items-center justify-content-center" style="width:200px;height:200px;">
                                                    <div class="spinner-border text-danger" role="status"><span class="visually-hidden">Loading...</span></div>
                                                </div>
                                            </div>
                                            <div class="mt-2 text-center">
                                                <small class="text-muted" style="font-size:0.72rem;">สแกนด้วยแอปธนาคาร หรือ TrueMoney Wallet</small>
                                            </div>
                                            <div class="mt-1 text-center">
                                                <span class="badge bg-danger" style="font-size:0.7rem;" id="qr_amount_badge">กรุณายืนยันยอดเงิน</span>
                                            </div>
                                        </div>
                                        <div class="text-white text-center mt-2" style="font-size:0.72rem; opacity:0.9;">
                                            <i class="fa-solid fa-shield-halved me-1"></i>ปลอดภัย · มั่นใจทุกการจ่าย
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Countdown Timer (visible below QR) -->
                            <div id="qr_timer_box" class="text-center mb-2 d-none">
                                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill" style="background: #fff3cd; border: 1px solid #ffc107;">
                                    <i class="fa-solid fa-hourglass-half text-warning"></i>
                                    <span class="fw-bold text-dark">QR หมดอายุใน: </span>
                                    <span id="countdown_display2" class="fw-bold text-danger fs-6">10:00</span>
                                </div>
                            </div>
                            <div class="alert alert-success py-2 mb-2" style="font-size:0.82rem;">
                                <i class="fa-solid fa-circle-info me-1"></i>
                                <strong>วิธีชำระเงิน:</strong> สแกน QR ด้วยแอปธนาคาร → โอนเงิน → ถ่ายรูปสลิป → แนบสลิปด้านล่าง
                            </div>
                        </div>

                        <!-- แนบสลิป -->
                        <div class="mb-3">
                            <label for="slip_image" class="form-label">แนบรูปภาพสลิปโอนเงิน <span class="text-danger">*</span></label>
                            <input type="file" class="form-control" id="slip_image" name="slip_image" accept="image/png, image/jpeg" required>
                            <div class="form-text">เฉพาะไฟล์รูปภาพ PNG, JPG, JPEG ขนาดไม่เกิน 5MB</div>
                        </div>

                        <div class="row">
                            <div class="col-6 mb-3" id="single_item_qty_block">
                                <label for="quantity" class="form-label">จำนวน <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="quantity" name="quantity" min="1" value="1">
                                <div class="form-text text-muted" id="max_stock_text">สต็อกคงเหลือ: -</div>
                            </div>
                            <div class="col mb-3 text-end d-flex flex-column justify-content-end">
                                <span class="text-muted small" id="total_price_label">ราคารวมทั้งสิ้น</span>
                                <h3 class="text-danger font-weight-bold mb-0">฿<span id="total_price_display">0.00</span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top-0">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                        <button type="submit" class="btn btn-red" id="submit_booking_btn">
                            <i class="fa-solid fa-circle-check me-2"></i> ยืนยันการสั่งจอง
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Floating Cart Button -->
    <button class="floating-cart" type="button" data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas" aria-controls="cartOffcanvas">
        <i class="fa-solid fa-cart-shopping"></i>
        <span class="badge" id="cart-badge-count">0</span>
    </button>

    <!-- Shopping Cart Drawer (Offcanvas) -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="cartOffcanvas" aria-labelledby="cartOffcanvasLabel" style="width: 400px; max-width: 100vw;">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="cartOffcanvasLabel"><i class="fa-solid fa-cart-shopping me-2"></i>ตะกร้าสินค้าของคุณ</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body d-flex flex-column">
            <div id="cart-items-container" class="flex-grow-1 overflow-auto">
                <!-- Cart items will be loaded dynamically using JS -->
                <div class="text-center py-5 text-muted">
                    <i class="fa-solid fa-cart-flatbed fa-3x mb-3"></i>
                    <p>ไม่มีสินค้าในตะกร้า</p>
                </div>
            </div>
            
            <div class="border-top pt-3 mt-3">
                <div class="d-flex justify-content-between mb-3">
                    <span class="fw-bold">ราคารวมทั้งหมด:</span>
                    <span class="fw-bold text-danger fs-4">฿<span id="cart-grand-total">0.00</span></span>
                </div>
                <button type="button" class="btn btn-red w-100 py-2 fs-6 fw-bold" id="btn-checkout-cart" onclick="openCartCheckout()" disabled>
                    <i class="fa-solid fa-credit-card me-2"></i>ดำเนินการชำระเงิน
                </button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-white border-top py-4 text-center mt-5">
        <div class="container">
            <p class="text-muted mb-0">&copy; 2026 REDSHOP Online Pre-order System. All rights reserved.</p>
        </div>
    </footer>

    <!-- Bootstrap 5 Bundle JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // State management for each product card
        const cardStates = {};

        function getCardState(productId) {
            if (!cardStates[productId]) {
                cardStates[productId] = {
                    variantId: null,
                    variantName: '',
                    stock: 0,
                    isUnlimited: false,
                    quantity: 1
                };
            }
            return cardStates[productId];
        }

        // Handle variant selection on a product card
        function selectCardVariant(button, productId) {
            const selector = document.getElementById(`variant-selector-${productId}`);
            
            // Remove active class from all sibling chips
            selector.querySelectorAll('.variant-chip').forEach(chip => {
                chip.classList.remove('active');
            });
            
            // Add active class to clicked chip
            button.classList.add('active');
            
            // Get variant info
            const vId = button.getAttribute('data-variant-id');
            const vName = button.getAttribute('data-variant-name');
            const stock = parseInt(button.getAttribute('data-stock')) || 0;
            const isUnlimited = parseInt(button.getAttribute('data-unlimited')) === 1;
            
            // Update state
            const state = getCardState(productId);
            state.variantId = vId;
            state.variantName = vName;
            state.stock = stock;
            state.isUnlimited = isUnlimited;
            state.quantity = 1; // reset quantity to 1
            
            // Update quantity input and controls
            const qtyInput = document.getElementById(`qty-input-${productId}`);
            qtyInput.value = 1;
            qtyInput.disabled = false;
            
            const qtyCtrl = document.getElementById(`qty-ctrl-${productId}`);
            qtyCtrl.querySelectorAll('button').forEach(btn => btn.disabled = false);
            
            // Update stock info text
            const stockInfo = document.getElementById(`stock-info-${productId}`);
            if (isUnlimited) {
                stockInfo.innerHTML = '<span class="text-success"><i class="fa-solid fa-infinity"></i> สต็อกคงเหลือ: ไม่จำกัด (Made-to-Order)</span>';
            } else {
                stockInfo.innerHTML = `<span class="text-dark"><i class="fa-solid fa-box"></i> สต็อกคงเหลือ: <strong>${stock}</strong> ชิ้น</span>`;
            }
            
            // Enable action buttons (เฉพาะสินค้าที่อยู่ในช่วงเปิดรับจอง)
            const btnCart = document.getElementById(`btn-cart-${productId}`);
            const btnBuy = document.getElementById(`btn-buy-${productId}`);
            if (btnCart && btnCart.getAttribute('data-active') === '1') {
                btnCart.disabled = false;
            }
            if (btnBuy && btnBuy.getAttribute('data-active') === '1') {
                btnBuy.disabled = false;
            }
        }

        // Adjust quantity on product card
        function adjustCardQty(productId, amount) {
            const state = getCardState(productId);
            if (!state.variantId) return;
            
            let newQty = state.quantity + amount;
            
            if (newQty < 1) newQty = 1;
            if (!state.isUnlimited && newQty > state.stock) {
                newQty = state.stock;
            }
            
            state.quantity = newQty;
            document.getElementById(`qty-input-${productId}`).value = newQty;
        }

        // Cart logic
        let cart = [];

        // Load cart from localStorage
        function loadCart() {
            const savedCart = localStorage.getItem('redshop_cart');
            if (savedCart) {
                try {
                    cart = JSON.parse(savedCart);
                } catch(e) {
                    cart = [];
                }
            }
            updateCartUI();
        }

        // Save cart to localStorage
        function saveCart() {
            localStorage.setItem('redshop_cart', JSON.stringify(cart));
            updateCartUI();
        }

        // Add item to cart
        function addCardToCart(productId, name, price, imageUrl) {
            const state = getCardState(productId);
            if (!state.variantId) {
                alert('โปรดเลือกไซส์ / ตัวเลือกสินค้าก่อน');
                return;
            }
            
            // Check if item with same variant already in cart
            const existingIndex = cart.findIndex(item => item.variant_id == state.variantId);
            
            if (existingIndex > -1) {
                let newQty = cart[existingIndex].quantity + state.quantity;
                if (!state.isUnlimited && newQty > state.stock) {
                    newQty = state.stock;
                }
                cart[existingIndex].quantity = newQty;
            } else {
                cart.push({
                    product_id: productId,
                    product_name: name,
                    price: price,
                    image_url: imageUrl,
                    variant_id: state.variantId,
                    variant_name: state.variantName,
                    quantity: state.quantity,
                    stock: state.stock,
                    is_unlimited: state.isUnlimited
                });
            }
            
            saveCart();
            
            // Micro-animation / visual cue on floating cart
            const floatCartBtn = document.querySelector('.floating-cart');
            floatCartBtn.classList.add('animate__animated', 'animate__pulse');
            setTimeout(() => {
                floatCartBtn.classList.remove('animate__animated', 'animate__pulse');
            }, 1000);
            
            // Show offcanvas drawer
            const cartOffcanvasEl = document.getElementById('cartOffcanvas');
            const bsOffcanvas = bootstrap.Offcanvas.getOrCreateInstance(cartOffcanvasEl);
            bsOffcanvas.show();
        }

        function removeCartItem(index) {
            cart.splice(index, 1);
            saveCart();
        }

        function adjustCartItemQty(index, amount) {
            const item = cart[index];
            let newQty = item.quantity + amount;
            if (newQty < 1) newQty = 1;
            if (!item.is_unlimited && newQty > item.stock) {
                newQty = item.stock;
            }
            item.quantity = newQty;
            saveCart();
        }

        function updateCartUI() {
            const badgeCount = document.getElementById('cart-badge-count');
            const itemsContainer = document.getElementById('cart-items-container');
            const grandTotalDisplay = document.getElementById('cart-grand-total');
            const checkoutBtn = document.getElementById('btn-checkout-cart');
            
            let totalItems = 0;
            let grandTotal = 0;
            
            itemsContainer.innerHTML = '';
            
            if (cart.length === 0) {
                badgeCount.textContent = '0';
                grandTotalDisplay.textContent = '0.00';
                checkoutBtn.disabled = true;
                itemsContainer.innerHTML = `
                    <div class="text-center py-5 text-muted">
                        <i class="fa-solid fa-cart-flatbed fa-3x mb-3 text-secondary" style="opacity: 0.5;"></i>
                        <p>ไม่มีสินค้าในตะกร้า</p>
                    </div>
                `;
                return;
            }
            
            cart.forEach((item, index) => {
                totalItems += item.quantity;
                const subtotal = item.price * item.quantity;
                grandTotal += subtotal;
                
                const itemCard = document.createElement('div');
                itemCard.className = 'cart-item-card d-flex gap-3 align-items-center';
                
                const imgTag = item.image_url 
                    ? `<img src="${item.image_url}" class="cart-item-img" alt="${item.product_name}">`
                    : `<div class="cart-item-img d-flex align-items-center justify-content-center text-muted"><i class="fa-regular fa-image"></i></div>`;
                
                itemCard.innerHTML = `
                    ${imgTag}
                    <div class="flex-grow-1 min-w-0">
                        <h6 class="mb-0 text-truncate text-dark fw-bold">${item.product_name}</h6>
                        <small class="text-muted d-block mb-1">ตัวเลือก: ${item.variant_name}</small>
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="text-danger fw-bold">฿${(item.price * item.quantity).toLocaleString('th-TH', {minimumFractionDigits: 2})}</span>
                            
                            <div class="quantity-ctrl">
                                <button type="button" onclick="adjustCartItemQty(${index}, -1)">-</button>
                                <input type="number" value="${item.quantity}" readonly>
                                <button type="button" onclick="adjustCartItemQty(${index}, 1)">+</button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="removeCartItem(${index})" style="font-size: 1.1rem;">
                        <i class="fa-solid fa-trash-can"></i>
                    </button>
                `;
                itemsContainer.appendChild(itemCard);
            });
            
            badgeCount.textContent = totalItems;
            grandTotalDisplay.textContent = grandTotal.toLocaleString('th-TH', {minimumFractionDigits: 2});
            checkoutBtn.disabled = false;
        }

        // Checkout Cart (Multi-item)
        function openCartCheckout() {
            if (cart.length === 0) return;
            
            // Configure modal for Cart mode
            document.getElementById('single_item_checkout_fields').classList.add('d-none');
            document.getElementById('single_item_qty_block').classList.add('d-none');
            document.getElementById('cart_checkout_fields').classList.remove('d-none');
            
            // Set variant dropdown as not required
            document.getElementById('variant_select').required = false;
            document.getElementById('quantity').required = false;
            
            // Put cart data into hidden input
            document.getElementById('modal_cart_items').value = JSON.stringify(cart);
            
            // Populate list of checkout items
            const checkoutList = document.getElementById('checkout_cart_items_list');
            checkoutList.innerHTML = '';
            
            let total = 0;
            cart.forEach(item => {
                total += item.price * item.quantity;
                const li = document.createElement('div');
                li.className = 'list-group-item d-flex justify-content-between align-items-center py-2';
                li.innerHTML = `
                    <div>
                        <div class="fw-bold" style="font-size: 0.9rem;">${item.product_name}</div>
                        <small class="text-muted">ตัวเลือก: ${item.variant_name} x ${item.quantity}</small>
                    </div>
                    <span class="text-danger fw-bold" style="font-size: 0.9rem;">฿${(item.price * item.quantity).toLocaleString('th-TH', {minimumFractionDigits: 2})}</span>
                `;
                checkoutList.appendChild(li);
            });
            
            document.getElementById('total_price_label').textContent = 'ราคารวมทั้งหมด';
            document.getElementById('total_price_display').textContent = total.toLocaleString('th-TH', {minimumFractionDigits: 2});
            
            // ปลดล็อคปุ่มยืนยันการสั่งจอง
            const submitBookingBtn = document.getElementById('submit_booking_btn');
            if (submitBookingBtn) submitBookingBtn.disabled = false;

            // ปรับยอด PromptPay QR Code ถ้าเลือก PromptPay อยู่
            if (typeof updatePromptPayQR === 'function') {
                updatePromptPayQR(total);
            }

            // ซ่อน Offcanvas ตะกร้าสินค้า และเปิด Modal ชำระเงิน
            const cartOffcanvasEl = document.getElementById('cartOffcanvas');
            const bsOffcanvas = bootstrap.Offcanvas.getInstance(cartOffcanvasEl) || new bootstrap.Offcanvas(cartOffcanvasEl);
            
            // รอให้ offcanvas ซ่อนเสร็จเรียบร้อยก่อนเปิด Modal ป้องกัน backdrop ทับกัน
            cartOffcanvasEl.addEventListener('hidden.bs.offcanvas', function onHidden() {
                cartOffcanvasEl.removeEventListener('hidden.bs.offcanvas', onHidden);
                const preorderModalEl = document.getElementById('preorderModal');
                const bsModal = bootstrap.Modal.getInstance(preorderModalEl) || new bootstrap.Modal(preorderModalEl);
                bsModal.show();
            });

            bsOffcanvas.hide();
        }

        // Buy Now (Single item)
        function buyCardNow(productId, name, price, imageUrl) {
            const state = getCardState(productId);
            if (!state.variantId) {
                alert('โปรดเลือกไซส์ / ตัวเลือกสินค้าก่อน');
                return;
            }
            
            // Configure modal for Single Item Buy Now
            document.getElementById('single_item_checkout_fields').classList.remove('d-none');
            document.getElementById('single_item_qty_block').classList.remove('d-none');
            document.getElementById('cart_checkout_fields').classList.add('d-none');
            
            // Set variant dropdown as required
            const variantSelect = document.getElementById('variant_select');
            variantSelect.required = true;
            document.getElementById('quantity').required = true;
            
            // Clear cart JSON hidden input
            document.getElementById('modal_cart_items').value = '';
            
            // Populate single product fields
            document.getElementById('modal_product_id').value = productId;
            document.getElementById('modal_product_name').value = name;
            
            // Synchronously construct variant dropdown options based on the card chips
            variantSelect.innerHTML = '<option value="">-- โปรดเลือกไซส์ / ตัวเลือก --</option>';
            const chips = document.querySelectorAll(`#variant-selector-${productId} .variant-chip`);
            chips.forEach(chip => {
                const opt = document.createElement('option');
                opt.value = chip.getAttribute('data-variant-id');
                opt.setAttribute('data-stock', chip.getAttribute('data-stock'));
                opt.setAttribute('data-unlimited', chip.getAttribute('data-unlimited'));
                
                const vName = chip.getAttribute('data-variant-name');
                const isUnl = parseInt(chip.getAttribute('data-unlimited')) === 1;
                const stock = parseInt(chip.getAttribute('data-stock')) || 0;
                
                if (isUnl) {
                    opt.textContent = `${vName} (Made-to-Order: ไม่จำกัดสต็อก)`;
                } else if (stock <= 0) {
                    opt.textContent = `${vName} (สินค้าหมด)`;
                    opt.disabled = true;
                } else {
                    opt.textContent = `${vName} (คงเหลือ: ${stock} ชิ้น)`;
                }
                variantSelect.appendChild(opt);
            });
            
            // Set selected variant
            variantSelect.value = state.variantId;
            
            // Set quantity
            const qtyInput = document.getElementById('quantity');
            qtyInput.value = state.quantity;
            qtyInput.disabled = false;
            
            // Update stock limits in modal
            const maxStockText = document.getElementById('max_stock_text');
            const stockAlert = document.getElementById('stock_alert');
            const submitBookingBtn = document.getElementById('submit_booking_btn');
            
            currentProductPrice = price;
            selectedVariantStock = state.stock;
            isUnlimitedVariant = state.isUnlimited;
            
            if (state.isUnlimited) {
                maxStockText.textContent = 'สต็อกคงเหลือ: ไม่จำกัด (Made-to-Order)';
                qtyInput.removeAttribute('max');
                stockAlert.classList.add('d-none');
                submitBookingBtn.disabled = false;
            } else {
                maxStockText.textContent = `สต็อกคงเหลือ: ${state.stock} ชิ้น`;
                qtyInput.max = state.stock;
                if (state.stock <= 0) {
                    stockAlert.classList.remove('d-none');
                    submitBookingBtn.disabled = true;
                } else {
                    stockAlert.classList.add('d-none');
                    submitBookingBtn.disabled = false;
                }
            }
            
            // Update total price display
            document.getElementById('total_price_label').textContent = 'ราคารวมทั้งสิ้น';
            const total = price * state.quantity;
            document.getElementById('total_price_display').textContent = total.toLocaleString('th-TH', {minimumFractionDigits: 2});
            
            // Show preorder modal
            const preorderModalEl = document.getElementById('preorderModal');
            const bsModal = new bootstrap.Modal(preorderModalEl);
            bsModal.show();
        }

        let currentProductPrice = 0;
        let selectedVariantStock = 0;
        let isUnlimitedVariant = false;

        const preorderModal = document.getElementById('preorderModal');
        const variantSelect = document.getElementById('variant_select');
        const quantityInput = document.getElementById('quantity');
        const totalPriceDisplay = document.getElementById('total_price_display');
        const maxStockText = document.getElementById('max_stock_text');
        const stockAlert = document.getElementById('stock_alert');
        const submitBookingBtn = document.getElementById('submit_booking_btn');

        // เมื่อ Modal เปิดขึ้นมาแบบ Manual (ถ้ามี)
        preorderModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            if (!button) return; // ข้ามถ้าเปิดจากโค้ด (เช่น ปุ่ม Buy Now หรือ ตะกร้าสินค้า)
            
            const productId = button.getAttribute('data-id');
            const productName = button.getAttribute('data-name');
            const productPrice = parseFloat(button.getAttribute('data-price'));

            document.getElementById('modal_product_id').value = productId;
            document.getElementById('modal_product_name').value = productName;
            currentProductPrice = productPrice;

            // รีเซ็ตค่าฟิลด์
            variantSelect.innerHTML = '<option value="">-- กำลังโหลดตัวเลือกสินค้า... --</option>';
            variantSelect.disabled = true;
            quantityInput.value = 1;
            quantityInput.disabled = true;
            totalPriceDisplay.textContent = '0.00';
            maxStockText.textContent = 'สต็อกคงเหลือ: -';
            submitBookingBtn.disabled = true;
            stockAlert.classList.add('d-none');
            isUnlimitedVariant = false;

            // เรียก API ดึงข้อมูล Variants
            fetch('get_variants.php?product_id=' + productId)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        variantSelect.innerHTML = '<option value="">-- โปรดเลือกไซส์ / ตัวเลือก --</option>';
                        
                        data.variants.forEach(variant => {
                            const option = document.createElement('option');
                            option.value = variant.id;
                            option.setAttribute('data-stock', variant.stock);
                            option.setAttribute('data-unlimited', variant.is_unlimited);
                            
                            if (parseInt(variant.is_unlimited) === 1) {
                                option.textContent = `${variant.variant_name} (Made-to-Order: ไม่จำกัดสต็อก)`;
                            } else if (parseInt(variant.stock) <= 0) {
                                option.textContent = `${variant.variant_name} (สินค้าหมด)`;
                                option.disabled = true;
                            } else {
                                option.textContent = `${variant.variant_name} (คงเหลือ: ${variant.stock} ชิ้น)`;
                            }
                            variantSelect.appendChild(option);
                        });
                        variantSelect.disabled = false;
                    } else {
                        variantSelect.innerHTML = `<option value="">เกิดข้อผิดพลาดในการโหลดตัวเลือก</option>`;
                    }
                })
                .catch(err => {
                    console.error('Error fetching variants:', err);
                    variantSelect.innerHTML = `<option value="">ไม่สามารถติดต่อเซิร์ฟเวอร์ได้</option>`;
                });
        });

        // เมื่อเปลี่ยนตัวเลือก Variant ใน Modal
        variantSelect.addEventListener('change', function() {
            const selectedOption = variantSelect.options[variantSelect.selectedIndex];
            
            if (selectedOption && selectedOption.value !== "") {
                selectedVariantStock = parseInt(selectedOption.getAttribute('data-stock')) || 0;
                isUnlimitedVariant = parseInt(selectedOption.getAttribute('data-unlimited')) === 1;
                
                quantityInput.disabled = false;
                
                if (isUnlimitedVariant) {
                    maxStockText.textContent = `สต็อกคงเหลือ: ไม่จำกัด (Made-to-Order)`;
                    quantityInput.removeAttribute('max');
                    stockAlert.classList.add('d-none');
                    submitBookingBtn.disabled = false;
                } else {
                    maxStockText.textContent = `สต็อกคงเหลือ: ${selectedVariantStock} ชิ้น`;
                    quantityInput.max = selectedVariantStock;
                    
                    if (selectedVariantStock <= 0) {
                        stockAlert.classList.remove('d-none');
                        submitBookingBtn.disabled = true;
                    } else {
                        stockAlert.classList.add('d-none');
                        submitBookingBtn.disabled = false;
                    }
                    
                    if (parseInt(quantityInput.value) > selectedVariantStock) {
                        quantityInput.value = selectedVariantStock;
                    }
                }
                
                calculateTotalPrice();
            } else {
                quantityInput.disabled = true;
                maxStockText.textContent = 'สต็อกคงเหลือ: -';
                submitBookingBtn.disabled = true;
                totalPriceDisplay.textContent = '0.00';
            }
        });

        // เมื่อเปลี่ยนจำนวนสินค้า ใน Modal
        quantityInput.addEventListener('input', function() {
            const val = parseInt(quantityInput.value);
            
            if (!isUnlimitedVariant && val > selectedVariantStock) {
                quantityInput.value = selectedVariantStock;
            } else if (val < 1 || isNaN(val)) {
                quantityInput.value = 1;
            }
            
            calculateTotalPrice();
        });

        function calculateTotalPrice() {
            const quantity = parseInt(quantityInput.value) || 0;
            const total = currentProductPrice * quantity;
            totalPriceDisplay.textContent = total.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            // อัปเดต QR Code ถ้า PromptPay ถูกเลือก
            if (document.getElementById('payment_method').value === 'PromptPay') {
                updatePromptPayQR(total);
            }
        }

        // กรองแสดงสินค้าตามหมวดหมู่
        function filterCategory(category, btnElement) {
            // สลับสถานะ active ของปุ่ม
            document.querySelectorAll('.category-filter-btn').forEach(btn => btn.classList.remove('active'));
            if (btnElement) {
                btnElement.classList.add('active');
            }

            // ซ่อน/แสดงการ์ดสินค้าตามหมวดหมู่
            const productCols = document.querySelectorAll('.product-item-col');
            productCols.forEach(col => {
                const itemCat = col.getAttribute('data-category');
                if (category === 'all' || itemCat === category) {
                    col.style.display = '';
                } else {
                    col.style.display = 'none';
                }
            });
        }

        // ==========================================
        // PromptPay QR Code & Countdown Logic
        // ==========================================

        const PROMPTPAY_PHONE = '0970566414'; // เบอร์ PromptPay
        let countdownInterval = null;
        let countdownSeconds = 600; // 10 นาที

        /**
         * สร้าง PromptPay QR Payload ตามมาตรฐาน EMVCo / BOT Thailand
         */
        function generatePromptPayPayload(phone, amount) {
            // ทำความสะอาดเบอร์
            let id = phone.replace(/[^0-9]/g, '');
            if (id.length === 10 && id[0] === '0') {
                id = '0066' + id.substring(1);
            } else {
                id = '0066' + id;
            }

            const f = (tag, val) => tag + String(val.length).padStart(2, '0') + val;
            const guid = 'A000000677010111';
            const accountInfo = f('00', guid) + f('01', id);

            let payload = '';
            payload += f('00', '01');           // Payload Format Indicator
            if (amount && amount > 0) {
                payload += f('01', '12');       // Dynamic QR
            } else {
                payload += f('01', '11');       // Static QR
            }
            payload += f('29', accountInfo);    // Merchant Account Info
            payload += f('52', '0000');         // Merchant Category Code
            payload += f('53', '764');          // THB Currency

            if (amount && amount > 0) {
                const amtStr = parseFloat(amount).toFixed(2);
                payload += f('54', amtStr);     // Transaction Amount
            }

            payload += f('58', 'TH');           // Country Code
            payload += f('59', 'PromptPay');    // Merchant Name
            payload += f('60', 'Bangkok');      // City

            payload += '6304';                  // CRC Header

            // CRC-16 CCITT
            let crc = 0xFFFF;
            for (let i = 0; i < payload.length; i++) {
                crc ^= payload.charCodeAt(i) << 8;
                for (let j = 0; j < 8; j++) {
                    crc = (crc & 0x8000) ? (crc << 1) ^ 0x1021 : crc << 1;
                    crc &= 0xFFFF;
                }
            }
            payload += crc.toString(16).toUpperCase().padStart(4, '0');
            return payload;
        }

        /**
         * อัปเดต QR Code รูปภาพ
         */
        function updatePromptPayQR(amount) {
            const wrapper = document.getElementById('qr_code_img_wrapper');
            const amountBadge = document.getElementById('qr_amount_badge');

            // แสดง spinner ขณะโหลด
            wrapper.innerHTML = `<div class="d-flex align-items-center justify-content-center" style="width:200px;height:200px;">
                <div class="spinner-border text-danger" role="status"><span class="visually-hidden">Loading...</span></div>
            </div>`;

            const payload = generatePromptPayPayload(PROMPTPAY_PHONE, amount > 0 ? amount : null);
            const qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(payload) + '&margin=10&ecc=M';

            const img = new Image();
            img.onload = function() {
                wrapper.innerHTML = `<img src="${qrUrl}" alt="PromptPay QR Code" style="width:200px;height:200px;border-radius:8px;">`;
            };
            img.onerror = function() {
                wrapper.innerHTML = `<div class="text-center text-muted py-3"><i class="fa-solid fa-qrcode fa-3x mb-2"></i><br><small>ไม่สามารถโหลด QR Code ได้<br>กรุณาตรวจสอบการเชื่อมต่ออินเทอร์เน็ต</small></div>`;
            };
            img.src = qrUrl;

            // อัปเดต badge จำนวนเงิน
            if (amount > 0) {
                amountBadge.textContent = '฿' + amount.toLocaleString('th-TH', {minimumFractionDigits: 2}) + ' บาท';
                amountBadge.classList.remove('bg-secondary');
                amountBadge.classList.add('bg-danger');
            } else {
                amountBadge.textContent = 'กรุณายืนยันยอดเงิน';
                amountBadge.classList.remove('bg-danger');
                amountBadge.classList.add('bg-secondary');
            }
        }

        /**
         * เริ่มนับถอยหลัง 10 นาที
         */
        function startQRCountdown() {
            clearQRCountdown();
            countdownSeconds = 600;
            const timerBox = document.getElementById('qr_timer_box');
            timerBox.classList.remove('d-none');
            updateCountdownDisplay();
            countdownInterval = setInterval(() => {
                countdownSeconds--;
                updateCountdownDisplay();
                if (countdownSeconds <= 0) {
                    clearQRCountdown();
                    // QR หมดอายุ - แจ้งเตือนและ refresh QR
                    const amount = parseFloat(totalPriceDisplay.textContent.replace(/,/g, '')) || 0;
                    updatePromptPayQR(amount);
                    startQRCountdown();
                }
            }, 1000);
        }

        function clearQRCountdown() {
            if (countdownInterval) {
                clearInterval(countdownInterval);
                countdownInterval = null;
            }
        }

        function updateCountdownDisplay() {
            const mins = Math.floor(countdownSeconds / 60);
            const secs = countdownSeconds % 60;
            const display = String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
            const d1 = document.getElementById('countdown_display');
            const d2 = document.getElementById('countdown_display2');
            if (d1) d1.textContent = display;
            if (d2) d2.textContent = display;

            // เปลี่ยนสีเมื่อเหลือน้อย
            const isUrgent = countdownSeconds <= 60;
            [d1, d2].forEach(el => {
                if (el) {
                    el.style.color = isUrgent ? '#dc3545' : '#856404';
                    if (isUrgent && countdownSeconds % 2 === 0) {
                        el.style.opacity = '0.5';
                    } else {
                        el.style.opacity = '1';
                    }
                }
            });
        }

        /**
         * จัดการการเปลี่ยน payment method
         */
        function handlePaymentMethodChange() {
            const method = document.getElementById('payment_method').value;
            const bankDetails = document.getElementById('bank_details');
            const promptpaySection = document.getElementById('promptpay_section');

            if (method === 'PromptPay') {
                bankDetails.classList.add('d-none');
                promptpaySection.classList.remove('d-none');

                // คำนวณยอดเงินปัจจุบัน
                const currentTotal = currentProductPrice * (parseInt(document.getElementById('quantity').value) || 1);
                updatePromptPayQR(currentTotal);
                startQRCountdown();
            } else {
                bankDetails.classList.remove('d-none');
                promptpaySection.classList.add('d-none');
                clearQRCountdown();
                document.getElementById('qr_timer_box').classList.add('d-none');
            }
        }

        // เมื่อ Modal ปิด ให้หยุด countdown
        document.getElementById('preorderModal').addEventListener('hidden.bs.modal', function() {
            clearQRCountdown();
            // reset payment method back to Bank Transfer
            const pmSelect = document.getElementById('payment_method');
            pmSelect.value = 'Bank Transfer';
            handlePaymentMethodChange();
        });

        // Initialize cart on page load
        window.addEventListener('DOMContentLoaded', () => {
            loadCart();
        });
    </script>
</body>
</html>
