<?php
// product-detail.php - Product Detail and Options Selector (Cyberpunk Theme)
session_start();
require_once 'db.php';

// Enforce login access control: redirect to login if session not set
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

// Initialize session cart if not exists
if (!isset($_SESSION['cart'])) {
    $_SESSION['cart'] = [];
}

// Validate ID
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
if ($id <= 0) {
    header("Location: index.php");
    exit();
}

// Fetch Product securely using Prepared Statement
$stmt = $pdo->prepare("SELECT * FROM products WHERE id = :id");
$stmt->execute([':id' => $id]);
$product = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$product) {
    header("Location: index.php");
    exit();
}

$sizes = array_map('trim', explode(',', $product['sizes']));
$colors = array_map('trim', explode(',', $product['colors']));

// Calculate total cart items count
$cart_count = 0;
foreach ($_SESSION['cart'] as $item) {
    $cart_count += $item['quantity'];
}
?>
<!DOCTYPE html>
<html lang="th" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($product['name']); ?> // NON LUXURY</title>
    <!-- Google Fonts -->
    <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=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=Sarabun:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        cyber: {
                            bg: '#0A0A0B',        // Matte Deep Black
                            card: '#121215',      // Warm charcoal card
                            accent: '#D4AF37',    // Elegant Satin Gold
                            accentGlow: '#E5C158',// Brighter Champagne Gold
                            success: '#94A89A',   // Premium Muted Sage Green
                            danger: '#A94444',    // Luxury Wine Red
                            border: '#22211E'     // Subtle gold-tinted grey border
                        }
                    },
                    fontFamily: {
                        sans: ['Sarabun', 'Montserrat', 'sans-serif'],
                        cyber: ['Cinzel', 'Cormorant Garamond', 'Sarabun', 'serif']
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #0A0A0B;
            color: #EAE6DF;
            font-family: 'Sarabun', sans-serif;
            background-image: radial-gradient(circle at 50% 0%, #171512 0%, #0A0A0B 70%);
        }
        .neon-text-purple {
            text-shadow: 0 0 5px #D4AF37, 0 0 10px rgba(212, 175, 55, 0.4);
        }
        .neon-text-success {
            text-shadow: 0 0 5px #94A89A, 0 0 10px rgba(148, 168, 154, 0.4);
        }
        .neon-border-purple {
            border-color: #D4AF37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
        }
        .cyber-grid {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(212, 175, 55, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(212, 175, 55, 0.02) 1px, transparent 1px);
        }
        .cyber-btn-glow:hover {
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
        }
        .attr-active {
            border-color: #D4AF37 !important;
            background-color: #1A1815 !important;
            color: #E5C158 !important;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
        }
    <!-- Multi-language Support -->
    <script src="lang.js"></script>
</head>
<body class="flex flex-col min-h-screen cyber-grid text-stone-200">

    <!-- Header Navigation -->
    <header class="sticky top-0 z-50 bg-[#0E0E10]/90 backdrop-blur-md border-b border-cyber-border">
        
        <!-- Top bar with user session metadata -->
        <div class="bg-[#050506] text-[10px] py-1.5 px-6 md:px-12 flex justify-between w-full text-stone-400 font-sans tracking-wide">
            <div class="flex gap-4">
                <span data-lang-key="vip_guest">VIP GUEST: </span><?php echo htmlspecialchars($_SESSION['username']); ?>
                <span>|</span>
                <span data-lang-key="status_label">STATUS: </span><span class="text-cyber-accent font-bold uppercase" data-lang-key="<?php echo $_SESSION['role'] === 'admin' ? 'admin_member' : 'vip_member'; ?>"><?php echo htmlspecialchars($_SESSION['role']); ?> MEMBER</span>
            </div>
            <div class="flex gap-4">
                <?php if ($_SESSION['role'] === 'admin'): ?>
                    <a href="admin.php" class="text-cyber-accent hover:text-white transition font-bold tracking-widest" data-lang-key="admin_portal">⚡ ADMIN PORTAL</a>
                <?php endif; ?>
                <a href="logout.php" class="text-cyber-danger hover:text-white transition font-bold tracking-widest" data-lang-key="leave_salon">✕ LEAVE SALON</a>
            </div>
        </div>

        <!-- Main Header -->
        <div class="w-full px-6 md:px-12 py-4 flex items-center justify-between">
            <a href="index.php" class="flex items-center gap-3 text-2xl font-bold font-cyber tracking-wider hover:opacity-90 transition">
                <div class="w-9 h-9 rounded-full bg-gradient-to-br from-cyber-accent to-cyber-border flex items-center justify-center shadow-lg border border-cyber-accent/40">
                    <span class="text-cyber-accent text-sm">N</span>
                </div>
                <span class="font-cyber font-medium text-lg tracking-[0.35em] text-white">NON LUXURY</span>
            </a>

            <div class="flex items-center gap-4">
                <!-- Language Selector -->
                <div class="flex items-center gap-1.5 bg-cyber-card border border-cyber-border px-3 py-1.5 rounded-lg shadow-sm">
                    <span class="text-xs text-stone-500">🌐</span>
                    <select id="lang-selector" class="bg-transparent text-xs text-stone-300 outline-none cursor-pointer focus:text-cyber-accent">
                        <option value="th">TH / ไทย</option>
                        <option value="en">EN / English</option>
                        <option value="zh">ZH / 中文</option>
                        <option value="ja">JA / 日本語</option>
                        <option value="ko">KO / 한국어</option>
                    </select>
                </div>

                <a href="cart.php" class="relative p-2 px-4 bg-cyber-card border border-cyber-border hover:border-cyber-accent rounded-lg transition flex items-center gap-3">
                    <div class="relative">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                        </svg>
                        <?php if ($cart_count > 0): ?>
                            <span class="absolute -top-2.5 -right-2.5 bg-cyber-accent text-black text-[9px] font-black w-4.5 h-4.5 rounded-full flex items-center justify-center shadow-lg">
                                <?php echo $cart_count; ?>
                            </span>
                        <?php endif; ?>
                    </div>
                    <span class="text-[11px] font-cyber tracking-[0.15em] text-stone-300 hidden lg:inline" data-lang-key="shopping_bag">SHOPPING BAG</span>
                </a>
            </div>
        </div>
    </header>

    <!-- Main Container -->
    <main class="flex-grow w-full px-6 md:px-12 py-8">
        
        <!-- Breadcrumb -->
        <nav class="text-[10px] font-sans text-stone-500 mb-6 flex items-center gap-2 tracking-wider">
            <a href="index.php" class="hover:text-cyber-accent transition" data-lang-key="return_to_salon">← RETURN TO SALON // ย้อนกลับหน้าร้าน</a>
        </nav>

        <!-- Product Presentation -->
        <div class="bg-cyber-card rounded-2xl border border-cyber-border shadow-2xl overflow-hidden p-6 md:p-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
                
                <!-- Left: Product Image -->
                <div class="space-y-4">
                    <div class="border border-cyber-border rounded-xl overflow-hidden bg-black aspect-square flex items-center justify-center relative group">
                        <img src="<?php echo htmlspecialchars($product['image']); ?>" 
                             alt="<?php echo htmlspecialchars($product['name']); ?>" 
                             class="w-full h-full object-cover group-hover:scale-105 transition duration-500"
                             id="main-product-image"
                             onerror="this.src='https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=800&auto=format&fit=crop';">
                        <span class="absolute bottom-4 left-4 bg-black/80 backdrop-blur-sm text-[#94A89A] border border-[#94A89A]/30 text-[9px] font-sans px-3 py-1.5 rounded-full flex items-center gap-1.5 tracking-wider">
                            <span class="w-2 h-2 rounded-full bg-[#94A89A] animate-ping"></span>
                            ✓ COLLECTIBLE IN STOCK
                        </span>
                    </div>

                    <!-- Trust factors -->
                    <div class="grid grid-cols-3 gap-2.5 text-center text-[9px] font-sans text-stone-400 pt-2">
                        <div class="p-3 bg-[#0A0A0B] rounded-lg border border-cyber-border flex flex-col items-center gap-1">
                            <span>⚜️</span> <span class="font-semibold text-stone-200">GENUINE CERTIFICATE</span>
                        </div>
                        <div class="p-3 bg-[#0A0A0B] rounded-lg border border-cyber-border flex flex-col items-center gap-1">
                            <span>💼</span> <span class="font-semibold text-stone-200">SECURED COURIER</span>
                        </div>
                        <div class="p-3 bg-[#0A0A0B] rounded-lg border border-cyber-border flex flex-col items-center gap-1">
                            <span>🛡️</span> <span class="font-semibold text-stone-200">PRIVATE GUARANTEE</span>
                        </div>
                    </div>
                </div>

                <!-- Right: Options & checkout form -->
                <div class="flex flex-col justify-between">
                    <div>
                        <!-- Category & Title -->
                        <span class="text-[9px] font-sans font-semibold text-cyber-accent tracking-[0.15em] uppercase bg-amber-950/40 border border-cyber-accent/30 px-3 py-1 rounded inline-block">
                            <?php echo htmlspecialchars($product['category']); ?>
                        </span>
                        
                        <h1 class="text-xl md:text-2xl font-serif font-medium text-white mt-4 leading-snug">
                            <?php echo htmlspecialchars($product['name']); ?>
                        </h1>

                        <!-- Ratings / Stats -->
                        <div class="flex items-center gap-4 mt-3.5 text-xs font-sans text-stone-400 divide-x divide-cyber-border">
                            <div class="flex items-center gap-1 text-amber-500">
                                <span>4.9</span>
                                <div class="flex text-[10px]">★★★★★</div>
                            </div>
                            <span class="pl-4">REVIEWS (18)</span>
                            <span class="pl-4">DISPATCHED: <strong class="text-white">142</strong> items</span>
                        </div>

                        <!-- Price box -->
                        <div class="bg-[#0A0A0B] border border-cyber-border rounded-xl p-5 mt-6 flex items-center gap-4">
                            <span class="text-stone-500 text-[9px] uppercase tracking-wider font-sans">EXCLUSIVE PRICE</span>
                            <span class="text-3xl font-cyber font-medium text-cyber-accent neon-text-purple">
                                ฿<?php echo number_format($product['price'], 2); ?>
                            </span>
                            <span class="text-xs text-stone-500 line-through">
                                ฿<?php echo number_format($product['price'] * 1.15, 2); ?>
                            </span>
                            <span class="bg-[#2A2318] text-cyber-accent text-[8px] font-semibold tracking-wider px-2 py-1 rounded uppercase font-sans border border-cyber-accent/30">
                                VIP ADVANTAGE
                            </span>
                        </div>

                        <!-- Shipping info simulator -->
                        <div class="mt-6 space-y-2 text-xs font-sans text-stone-400">
                            <div class="flex items-start gap-4">
                                <span class="text-stone-500 font-semibold w-24 shrink-0">SHIPPING:</span>
                                <div>
                                    <p class="flex items-center gap-1.5 font-semibold text-cyber-accent">
                                        ⚜️ COMPLIMENTARY INSURED SHIPPING
                                    </p>
                                    <p class="text-[10px] text-stone-500 mt-0.5">บริการจัดส่งพร้อมประกันภัยเต็มมูลค่าโดยไม่เสียค่าใช้จ่ายสำหรับสมาชิกระดับ VIP</p>
                                </div>
                            </div>
                        </div>

                        <!-- Selection parameters form -->
                        <form action="cart.php" method="POST" id="order-form" class="mt-6 border-t border-cyber-border/40 pt-6 space-y-6">
                            <input type="hidden" name="action" value="add">
                            <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
                            
                            <!-- Size Selector -->
                            <div class="flex flex-col gap-2 sm:flex-row sm:items-center text-xs">
                                <span class="text-stone-400 font-sans font-semibold w-28 shrink-0" data-lang-key="select_size">ขนาด / SIZE:</span>
                                <div class="flex flex-wrap gap-2">
                                    <input type="hidden" name="size" id="selected-size" value="">
                                    <?php foreach ($sizes as $sz): ?>
                                        <button type="button" 
                                                onclick="selectSize('<?php echo htmlspecialchars($sz); ?>', this)"
                                                class="size-btn px-4 py-2 bg-[#0A0A0B] border border-cyber-border rounded font-semibold text-stone-300 hover:border-cyber-accent hover:text-white transition focus:outline-none text-[11px] font-mono">
                                            <?php echo htmlspecialchars($sz); ?>
                                        </button>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <!-- Color Selector -->
                            <div class="flex flex-col gap-2 sm:flex-row sm:items-center text-xs">
                                <span class="text-stone-400 font-sans font-semibold w-28 shrink-0" data-lang-key="select_color">เฉดสี / SHADE:</span>
                                <div class="flex flex-wrap gap-2">
                                    <input type="hidden" name="color" id="selected-color" value="">
                                    <?php foreach ($colors as $col): ?>
                                        <button type="button" 
                                                onclick="selectColor('<?php echo htmlspecialchars($col); ?>', this)"
                                                class="color-btn px-4 py-2 bg-[#0A0A0B] border border-cyber-border rounded font-semibold text-stone-300 hover:border-cyber-accent hover:text-white transition focus:outline-none text-[11px] font-mono">
                                            <?php echo htmlspecialchars($col); ?>
                                        </button>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            <!-- Quantity Selector -->
                            <div class="flex flex-col gap-2 sm:flex-row sm:items-center text-xs">
                                <span class="text-stone-400 font-sans font-semibold w-28 shrink-0" data-lang-key="quantity_label">QUANTITY:</span>
                                <div class="flex items-center gap-4">
                                    <div class="flex border border-cyber-border rounded overflow-hidden bg-[#0A0A0B]">
                                        <button type="button" onclick="changeQty(-1)" class="px-3.5 py-1.5 hover:bg-stone-900 text-stone-300 font-bold outline-none transition">-</button>
                                        <input type="number" name="quantity" id="qty-input" value="1" min="1" max="<?php echo $product['stock']; ?>" class="w-12 text-center py-1.5 font-cyber font-medium outline-none border-x border-cyber-border bg-transparent text-white [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                                        <button type="button" onclick="changeQty(1)" class="px-3.5 py-1.5 hover:bg-stone-900 text-stone-300 font-bold outline-none transition">+</button>
                                    </div>
                                    <span class="text-[10px] font-sans text-stone-500">
                                        VAULT STOCK:                              <!-- Actions submit button -->
                            <div class="pt-4 flex flex-col sm:flex-row gap-4 text-xs">
                                <?php if ($product['stock'] > 0): ?>
                                    <!-- Add to Cart -->
                                    <button type="submit" 
                                             class="flex-1 bg-transparent hover:bg-stone-900 text-cyber-accent border border-cyber-accent/60 font-cyber font-medium tracking-[0.15em] py-3.5 px-6 rounded transition flex items-center justify-center gap-2.5 focus:outline-none">
                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                                            <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                                        </svg>
                                        <span data-lang-key="add_to_bag">ADD TO BAG</span>
                                    </button>
                                    
                                    <!-- Buy Now -->
                                    <button type="button" 
                                            onclick="buyNow()"
                                            class="flex-1 bg-cyber-accent hover:bg-cyber-accentGlow text-black font-cyber font-semibold tracking-[0.15em] py-3.5 px-6 rounded transition flex items-center justify-center gap-2.5 focus:outline-none shadow-md">
                                        <span data-lang-key="acquire_now">ACQUIRE NOW</span>
                                    </button>
                                <?php else: ?>
                                    <button type="button" disabled class="w-full bg-stone-900 text-stone-600 border border-cyber-border font-cyber font-bold tracking-widest py-4 px-6 rounded cursor-not-allowed text-center" data-lang-key="out_of_stock">
                                        TEMPORARILY RESERVED
                                    </button>
                                <?php endif; ?>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

            <!-- Description -->
            <div class="mt-12 border-t border-cyber-border/40 pt-8">
                <h3 class="font-cyber font-medium text-xs tracking-[0.15em] text-white border-b border-cyber-border pb-3 mb-4 flex items-center gap-2" data-lang-key="product_description">
                    <span>⚜️</span> ARCHIVAL DETAILS // รายละเอียดสินค้า
                </h3>
                <div class="text-xs text-stone-400 leading-relaxed max-w-3xl space-y-4 font-sans">
                    <p class="font-medium text-stone-200 text-sm leading-relaxed">
                        <?php echo nl2br(htmlspecialchars($product['description'])); ?>
                    </p>
                    <div class="bg-[#0A0A0B] border border-cyber-border rounded-xl p-5 mt-4 space-y-2.5 font-sans text-[11px] text-stone-400">
                        <p class="font-cyber font-medium text-cyber-accent tracking-wider">// เอกสารรับรองสินค้า (AUTHENTICITY & FIT):</p>
                        <p>สินค้าทั้งหมดได้รับการตรวจสอบความแท้ 100% พร้อมกล่องและเอกสารใบรับประกันศูนย์ของแบรนด์โดยตรง ท่านสามารถระบุรายละเอียดขนาดหรือขนาดพิเศษเพิ่มเติมได้ผ่านบริการห้องแชทส่วนตัวของลูกค้า VIP</p>
                    </div>
                </div>
            </div>
        </div>

    </main>

    <!-- Footer -->
    <footer class="bg-[#050506] border-t border-cyber-border text-stone-500 py-8 mt-12 text-xs">
        <div class="w-full px-6 md:px-12 flex flex-col md:flex-row items-center justify-between gap-4">
            <div>
                <p data-lang-key="footer_rights">⚜️ <span class="font-cyber tracking-[0.25em] text-white">NON LUXURY</span> // CONCIERGE SERVICES. สงวนลิขสิทธิ์</p>
                <p class="text-[10px] text-stone-600 mt-1" data-lang-key="footer_port">ระบบฐานข้อมูล PDO MySQL // รหัสพอร์ต 014</p>
            </div>
            <div class="text-right">
                <p data-lang-key="footer_developer">VIP CLIENT SERVICES: <span class="text-white font-bold">Nontawat 014</span></p>
                <p class="text-[10px] text-stone-600 mt-1">© 2026 Simulation Server. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
        const maxStock = <?php echo $product['stock']; ?>;

        function selectSize(size, element) {
            document.getElementById('selected-size').value = size;
            const buttons = document.querySelectorAll('.size-btn');
            buttons.forEach(btn => btn.classList.remove('attr-active'));
            element.classList.add('attr-active');
        }

        function selectColor(color, element) {
            document.getElementById('selected-color').value = color;
            const buttons = document.querySelectorAll('.color-btn');
            buttons.forEach(btn => btn.classList.remove('attr-active'));
            element.classList.add('attr-active');
        }

        function changeQty(amount) {
            const input = document.getElementById('qty-input');
            let current = parseInt(input.value);
            if (isNaN(current)) current = 1;
            let newValue = current + amount;
            if (newValue < 1) newValue = 1;
            if (newValue > maxStock) newValue = maxStock;
            input.value = newValue;
        }

        // Form Validation on Submit
        document.getElementById('order-form').addEventListener('submit', function(e) {
            const size = document.getElementById('selected-size').value;
            const color = document.getElementById('selected-color').value;
            
            const currentLang = localStorage.getItem("selected_lang") || "th";
            const alerts = {
                th: {
                    select_size_alert: 'กรุณาเลือก ขนาด (Size) ของสินค้าก่อนเพิ่มลงในถุงช้อปปิ้ง',
                    select_color_alert: 'กรุณาเลือก สี/เฉดสี (Color) ของสินค้าก่อนเพิ่มลงในถุงช้อปปิ้ง'
                },
                en: {
                    select_size_alert: 'Please select a Size before adding to shopping bag.',
                    select_color_alert: 'Please select a Shade before adding to shopping bag.'
                },
                zh: {
                    select_size_alert: '请在加入购物袋前选择尺寸。',
                    select_color_alert: '请在加入购物袋前选择颜色。'
                },
                ja: {
                    select_size_alert: 'バッグに追加する前にサイズを選択してください。',
                    select_color_alert: 'バッグに追加する前にカラーを選択してください。'
                },
                ko: {
                    select_size_alert: '쇼핑백에 추가하기 전에 크기를 선택하십시오.',
                    select_color_alert: '쇼핑백에 추가하기 전에 색상을 선택하십시오.'
                }
            };
            const msg = alerts[currentLang] || alerts['th'];

            if (!size) {
                e.preventDefault();
                alert(msg.select_size_alert);
                return false;
            }
            
            if (!color) {
                e.preventDefault();
                alert(msg.select_color_alert);
                return false;
            }
        });

        // "Buy Now" Direct Order Flow
        function buyNow() {
            const size = document.getElementById('selected-size').value;
            const color = document.getElementById('selected-color').value;
            
            const currentLang = localStorage.getItem("selected_lang") || "th";
            const alerts = {
                th: {
                    select_size_buy: 'กรุณาเลือก ขนาด (Size) ของสินค้าก่อนทำรายการชำระเงิน',
                    select_color_buy: 'กรุณาเลือก สี/เฉดสี (Color) ของสินค้าก่อนทำรายการชำระเงิน'
                },
                en: {
                    select_size_buy: 'Please select a Size before purchasing.',
                    select_color_buy: 'Please select a Shade before purchasing.'
                },
                zh: {
                    select_size_buy: '请在购买前选择尺寸。',
                    select_color_buy: '请在购买前选择颜色。'
                },
                ja: {
                    select_size_buy: '購入する前にサイズを選択してください。',
                    select_color_buy: '購入する前にカラーを選択してください。'
                },
                ko: {
                    select_size_buy: '구매하기 전에 크기를 선택하십시오.',
                    select_color_buy: '구매하기 전에 색상을 선택하십시오.'
                }
            };
            const msg = alerts[currentLang] || alerts['th'];

            if (!size) {
                alert(msg.select_size_buy);
                return;
            }
            
            if (!color) {
                alert(msg.select_color_buy);
                return;
            }
            
            const form = document.getElementById('order-form');
            const redirectInput = document.createElement('input');
            redirectInput.type = 'hidden';
            redirectInput.name = 'redirect_checkout';
            redirectInput.value = '1';
            form.appendChild(redirectInput);
            form.submit();
        }
    </script>
</body>
</html>
