<?php
// includes/header.php - Responsive Navigation and layout setup

require_once __DIR__ . '/helper.php';
require_once __DIR__ . '/../classes/Cart.php';

start_secure_session();

$cartCount = 0;
if (isset($_SESSION['user_id'])) {
    $cartObj = new Cart();
    $totals = $cartObj->getTotals($_SESSION['user_id']);
    $cartCount = $totals['total_items'];
}
?>
<!DOCTYPE html>
<html lang="th" class="h-full bg-slate-950 text-slate-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="CMTC SHOP - ร้านค้าออนไลน์เสื้อผ้าแฟชั่นและไลฟ์สไตล์พรีเมียม จัดส่งรวดเร็ว ปลอดภัย ราคาดี">
    <meta name="theme-color" content="#0f172a">
    <title>CMTC SHOP - ร้านค้าเสื้อผ้าแฟชั่นออนไลน์พรีเมียม</title>
    <!-- Tailwind CSS Play CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        darkblue: {
                            900: '#0f172a',
                            950: '#020617'
                        },
                        violet: {
                            50: '#fef2f2',
                            100: '#fee2e2',
                            200: '#fecaca',
                            300: '#fca5a5',
                            400: '#f59e0b', // Gold / Amber accent text highlight
                            500: '#ef4444', 
                            600: '#b91c1c', // CMTC Crimson Red
                            700: '#991b1b', // Dark Red
                            800: '#7f1d1d',
                            900: '#450a0a',
                            950: '#180202'
                        },
                        indigo: {
                            50: '#fffbeb',
                            100: '#fef3c7',
                            200: '#fde68a',
                            300: '#fcd34d',
                            400: '#fbbf24', // Gold / Amber
                            500: '#f59e0b',
                            600: '#b45309', // Dark Gold for gradients
                            700: '#a16207',
                            800: '#854d0e',
                            900: '#713f12',
                            950: '#451a03'
                        }
                    },
                    keyframes: {
                        slideDown: {
                            '0%': { opacity: '0', transform: 'translateY(-8px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' }
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        }
                    },
                    animation: {
                        slideDown: 'slideDown 0.2s ease-out',
                        fadeIn: 'fadeIn 0.3s ease-out'
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=Sarabun:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: 'Outfit', 'Sarabun', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .glass {
            background: rgba(15, 23, 42, 0.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        /* Mobile menu slide animation */
        #mobile-menu {
            transition: max-height 0.3s ease, opacity 0.25s ease;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        #mobile-menu.menu-open {
            max-height: 400px;
            opacity: 1;
        }
        /* Smooth scroll */
        html { scroll-behavior: smooth; }
        /* Touch-friendly tap targets */
        @media (max-width: 768px) {
            a, button { min-height: 44px; }
            .touch-target { min-height: 44px; display: flex; align-items: center; }
        }
        /* Prevent horizontal overflow */
        body { overflow-x: hidden; }
        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #020617; }
        ::-webkit-scrollbar-thumb { background: #b91c1c; border-radius: 3px; }
    </style>
</head>
<body class="flex flex-col min-h-full bg-slate-950">
    <!-- Navbar Header -->
    <header class="glass sticky top-0 z-50 w-full border-b border-slate-800 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex-shrink-0">
                    <a href="index.php" class="flex items-center gap-3 text-xl font-black tracking-wide text-white">
                        <img src="assets/logo.svg" alt="CMTC Logo" class="h-10 w-10 object-contain rounded-xl shadow-md border border-amber-500/20" onerror="if(!this.dataset.tried){ this.dataset.tried='1'; this.src='รูป/logo.svg'; }">
                        <span class="bg-gradient-to-r from-violet-400 to-indigo-400 bg-clip-text text-transparent">CMTC SHOP</span>
                    </a>
                </div>

                <!-- Desktop Navigation Links -->
                <div class="hidden md:flex items-center gap-6">
                    <a href="index.php" class="text-sm font-semibold hover:text-violet-400 transition-colors py-2">ร้านค้า</a>
                    
                    <!-- Cart Indicator -->
                    <a href="cart.php" class="relative group p-2 hover:bg-slate-900 rounded-full transition-all duration-200">
                        <svg class="h-6 w-6 text-slate-300 group-hover:text-violet-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                        <?php if ($cartCount > 0): ?>
                            <span class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-violet-600 text-[10px] font-bold text-white ring-2 ring-slate-950 animate-pulse">
                                <?= $cartCount ?>
                            </span>
                        <?php endif; ?>
                    </a>

                    <!-- User Account / Logged in Info -->
                    <?php if (isset($_SESSION['user_id'])): ?>
                        <div class="flex items-center gap-3">
                            <?php if ($_SESSION['role'] === 'admin'): ?>
                                <a href="admin.php" class="text-xs bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 hover:border-amber-500 text-amber-400 px-3 py-1.5 rounded-lg transition-all duration-200 font-medium">
                                    จัดการร้านค้า 🛠️
                                </a>
                            <?php endif; ?>
                            <span class="text-sm text-slate-400">
                                สวัสดี, <span class="text-slate-200 font-semibold"><?= escape($_SESSION['first_name']) ?></span>
                            </span>
                            <a href="login.php?action=logout" class="text-xs bg-slate-900 hover:bg-red-950 hover:text-red-400 border border-slate-800 hover:border-red-900/40 text-slate-300 px-3 py-1.5 rounded-lg transition-all duration-200 font-medium">
                                ออกระบบ
                            </a>
                        </div>
                    <?php else: ?>
                        <a href="login.php" class="text-sm bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 rounded-xl transition-all duration-200 font-medium shadow-md shadow-violet-600/20">
                            เข้าสู่ระบบ
                        </a>
                    <?php endif; ?>
                </div>

                <!-- Mobile Header controls (Only cart and hamburger toggler) -->
                <div class="flex items-center gap-2 md:hidden">
                    <!-- Mobile Cart Indicator -->
                    <a href="cart.php" class="relative group p-2 hover:bg-slate-900 rounded-full transition-all duration-200">
                        <svg class="h-6 w-6 text-slate-300 group-hover:text-violet-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                        <?php if ($cartCount > 0): ?>
                            <span class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-violet-600 text-[10px] font-bold text-white ring-2 ring-slate-950 animate-pulse">
                                <?= $cartCount ?>
                            </span>
                        <?php endif; ?>
                    </a>

                    <!-- Hamburger Button -->
                    <button id="mobile-menu-btn" type="button" class="p-2 text-slate-400 hover:text-white focus:outline-none rounded-lg transition-colors">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path id="menu-icon-open" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                            <path id="menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Drawer menu -->
        <div id="mobile-menu" class="md:hidden border-t border-slate-800 bg-slate-950/98 backdrop-blur-xl px-4 pb-4 pt-3 space-y-1">
            <a href="index.php" class="flex items-center gap-3 text-sm font-semibold text-slate-200 hover:text-violet-400 hover:bg-slate-900/60 transition-all py-3 px-3 rounded-xl touch-target">
                <span class="text-base">🛍️</span> ร้านค้า
            </a>
            <a href="cart.php" class="flex items-center gap-3 text-sm font-semibold text-slate-200 hover:text-violet-400 hover:bg-slate-900/60 transition-all py-3 px-3 rounded-xl touch-target">
                <span class="text-base">🛒</span> ตะกร้าสินค้า
                <?php if ($cartCount > 0): ?>
                    <span class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-violet-600 text-[10px] font-bold text-white"><?= $cartCount ?></span>
                <?php endif; ?>
            </a>
            <div class="border-t border-slate-800/60 my-2"></div>
            <?php if (isset($_SESSION['user_id'])): ?>
                <div class="px-3 py-2">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="w-8 h-8 rounded-full bg-violet-600/30 border border-violet-500/30 flex items-center justify-center text-sm">👤</div>
                        <div>
                            <p class="text-xs text-slate-400 leading-none">สวัสดี,</p>
                            <p class="text-sm text-slate-200 font-semibold"><?= escape($_SESSION['first_name']) ?></p>
                        </div>
                    </div>
                    <?php if ($_SESSION['role'] === 'admin'): ?>
                        <a href="admin.php" class="flex items-center justify-center gap-2 text-sm bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/30 hover:border-amber-500 text-amber-400 py-3 rounded-xl transition-all duration-200 font-medium w-full touch-target mb-2">
                            <span>🛠️</span> จัดการร้านค้า (Admin Panel)
                        </a>
                    <?php endif; ?>
                    <a href="login.php?action=logout" class="flex items-center justify-center gap-2 text-sm bg-slate-900 hover:bg-red-950 hover:text-red-400 border border-slate-800 hover:border-red-900/40 text-slate-300 py-3 rounded-xl transition-all duration-200 font-medium w-full touch-target">
                        <span>🚪</span> ออกระบบ
                    </a>
                </div>
            <?php else: ?>
                <div class="px-3 py-2 space-y-2">
                    <a href="login.php" class="flex items-center justify-center text-sm bg-violet-600 hover:bg-violet-500 text-white py-3 rounded-xl transition-all duration-200 font-semibold shadow-md shadow-violet-600/20 w-full touch-target">
                        เข้าสู่ระบบ
                    </a>
                    <a href="register.php" class="flex items-center justify-center text-sm bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-300 py-3 rounded-xl transition-all duration-200 font-medium w-full touch-target">
                        สมัครสมาชิก
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </header>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const btn = document.getElementById('mobile-menu-btn');
        const menu = document.getElementById('mobile-menu');
        const openIcon = document.getElementById('menu-icon-open');
        const closeIcon = document.getElementById('menu-icon-close');

        if (btn && menu) {
            btn.addEventListener('click', () => {
                const isOpen = menu.classList.contains('menu-open');
                if (!isOpen) {
                    menu.classList.add('menu-open');
                    openIcon.classList.replace('inline-flex', 'hidden');
                    closeIcon.classList.replace('hidden', 'inline-flex');
                    btn.setAttribute('aria-expanded', 'true');
                } else {
                    menu.classList.remove('menu-open');
                    openIcon.classList.replace('hidden', 'inline-flex');
                    closeIcon.classList.replace('inline-flex', 'hidden');
                    btn.setAttribute('aria-expanded', 'false');
                }
            });

            // Close menu when clicking outside
            document.addEventListener('click', (e) => {
                if (!btn.contains(e.target) && !menu.contains(e.target)) {
                    menu.classList.remove('menu-open');
                    openIcon.classList.remove('hidden');
                    openIcon.classList.add('inline-flex');
                    closeIcon.classList.remove('inline-flex');
                    closeIcon.classList.add('hidden');
                    btn.setAttribute('aria-expanded', 'false');
                }
            });
        }
    });
    </script>

    <main class="flex-grow py-6 sm:py-8 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
