<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

if (!isset($pdo)) {
    if (file_exists('../includes/db.php')) {
        require_once '../includes/db.php';
    }
}

$current_page = basename($_SERVER['PHP_SELF']);

$active_notice = '';
$popup_notice = null;

if (isset($pdo)) {
    $stmt_notice = $pdo->query("SELECT notice_text FROM notices WHERE status = 'active' ORDER BY id DESC LIMIT 1");
    if ($stmt_notice) {
        $active_notice = $stmt_notice->fetchColumn();
    }
    
    try {
        $stmt_popup = $pdo->query("SELECT * FROM popup_notice WHERE status = 'active' ORDER BY id DESC LIMIT 1");
        if ($stmt_popup) {
            $popup_notice = $stmt_popup->fetch(PDO::FETCH_ASSOC);
        }
    } catch (PDOException $e) {}
}

$site_name_text = $site_settings['site_name'] ?? 'eCommerce';
$page_title_text = isset($page_title) ? $page_title . ' - ' . $site_name_text : $site_name_text;
$theme_color = '#00059E';
$meta_desc = !empty($site_settings['meta_description']) ? htmlspecialchars($site_settings['meta_description'], ENT_QUOTES, 'UTF-8') : 'Welcome to our premium store for digital assets.';
$meta_keywords = !empty($site_settings['meta_keywords']) ? htmlspecialchars($site_settings['meta_keywords'], ENT_QUOTES, 'UTF-8') : 'ecommerce, shop, digital store, online market';
$favicon_url = !empty($site_settings['favicon']) ? get_image_url('logo', $site_settings['favicon']) : '';
$og_image_url = !empty($site_settings['og_image']) ? get_image_url('logo', $site_settings['og_image']) : (!empty($site_settings['site_logo']) ? get_image_url('logo', $site_settings['site_logo']) : '');
$current_url = "http" . (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "s" : "") . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($page_title_text, ENT_QUOTES, 'UTF-8'); ?></title>
    
    <meta name="theme-color" content="<?php echo htmlspecialchars($theme_color, ENT_QUOTES, 'UTF-8'); ?>">
    
    <meta name="description" content="<?php echo $meta_desc; ?>">
    <meta name="keywords" content="<?php echo $meta_keywords; ?>">
    
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo htmlspecialchars($current_url, ENT_QUOTES, 'UTF-8'); ?>">
    <meta property="og:title" content="<?php echo htmlspecialchars($page_title_text, ENT_QUOTES, 'UTF-8'); ?>">
    <meta property="og:description" content="<?php echo $meta_desc; ?>">
    <?php if($og_image_url): ?>
    <meta property="og:image" content="<?php echo htmlspecialchars($og_image_url, ENT_QUOTES, 'UTF-8'); ?>">
    <?php endif; ?>

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="<?php echo htmlspecialchars($current_url, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="twitter:title" content="<?php echo htmlspecialchars($page_title_text, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="twitter:description" content="<?php echo $meta_desc; ?>">
    <?php if($og_image_url): ?>
    <meta name="twitter:image" content="<?php echo htmlspecialchars($og_image_url, ENT_QUOTES, 'UTF-8'); ?>">
    <?php endif; ?>

    <?php if($favicon_url): ?>
    <link rel="icon" type="image/png" href="<?php echo htmlspecialchars($favicon_url, ENT_QUOTES, 'UTF-8'); ?>">
    <link rel="apple-touch-icon" href="<?php echo htmlspecialchars($favicon_url, ENT_QUOTES, 'UTF-8'); ?>">
    <?php endif; ?>

    <link rel="stylesheet" href="assets/css/style.css?v=<?php echo time(); ?>">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Serif+Bengali:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #00059E;
            --primary-hover: #00037a; 
        }

        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0;
        }

        .main-header,
        .mobile-search-bar {
            font-family: 'Roboto', 'Noto Serif Bengali', sans-serif;
        }

        .main-header {
            background-color: var(--primary) !important;
            padding: 12px 15px;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .action-icon {
            color: #ffffff;
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 5px;
            margin-left: 15px;
        }

        .header-left-group {
            display: flex;
            align-items: center;
        }

        .site-brand-name {
            font-size: 1.6rem; 
            font-weight: 800; 
            color: #ffffff; 
            letter-spacing: 0.5px;
        }

        .header-right {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .cart-icon-wrapper {
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            text-decoration: none;
            color: #ffffff;
            transition: background 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .cart-icon-wrapper:hover {
            background: rgba(255,255,255,0.2);
        }

        .cart-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #f59e0b; 
            color: white;
            font-size: 0.75rem;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
            border: 2px solid var(--primary); 
            line-height: 1;
        }

        .btn-login {
            background: #ffffff; 
            color: var(--primary); 
            padding: 8px 18px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
            transition: 0.3s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .btn-login:hover {
            background: #f8fafc;
            transform: translateY(-1px);
        }

        .mobile-search-bar {
            background: #ffffff; 
            padding: 15px 15px 10px; 
            border-bottom: 1px solid #e2e8f0;
        }

        .mobile-search-form {
            display: flex; 
            width: 100%; 
            background: #f8fafc; 
            border: 1px solid #e2e8f0; 
            border-radius: 8px; 
            overflow: hidden; 
            transition: border-color 0.3s;
        }

        .mobile-search-input {
            flex: 1; 
            padding: 12px 15px; 
            border: none; 
            outline: none; 
            background: transparent; 
            font-size: 0.95rem; 
            color: #334155;
            font-family: inherit;
        }

        .mobile-search-btn {
            background: var(--primary); 
            color: white; 
            border: none; 
            padding: 0 18px; 
            cursor: pointer; 
            transition: background 0.3s;
        }

        .mobile-search-btn:hover {
            background: var(--primary-hover);
        }

        .help-fab-container {
            position: fixed;
            bottom: 100px;
            right: 20px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .help-text-bubble {
            background: #ef4444; 
            color: #ffffff;
            padding: 8px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            border: none;
            font-family: 'Roboto', sans-serif;
            position: relative;
        }

        .help-text-bubble::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            border-width: 6px 0 6px 6px;
            border-style: solid;
            border-color: transparent transparent transparent #ef4444;
        }

        .help-fab {
            width: 50px;
            height: 50px;
            background: #ef4444; 
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s;
            text-decoration: none;
            color: white;
        }

        .help-fab:hover {
            transform: scale(1.05);
        }

        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.65);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .popup-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .popup-card {
            background: #ffffff;
            border-radius: 8px;
            width: 90%;
            max-width: 380px;
            overflow: hidden;
            position: relative;
            font-family: 'Roboto', 'Noto Serif Bengali', sans-serif;
        }

        .popup-close {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #f1f5f9;
            color: #334155;
            border: none;
            border-radius: 4px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }

        .popup-close:hover {
            background: #e2e8f0;
        }

        .popup-image {
            width: 100%;
            height: auto;
            max-height: 220px;
            object-fit: cover;
            display: block;
        }

        .popup-content {
            padding: 25px 20px;
            text-align: center;
        }

        .popup-text {
            color: #000000;
            font-weight: 600;
            font-size: 1rem;
            line-height: 1.5;
            margin-bottom: 20px;
            white-space: pre-wrap;
        }

        .popup-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: #ffffff;
            padding: 12px 24px;
            border-radius: 6px; 
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            width: 100%;
            box-sizing: border-box;
        }

        .popup-btn:hover {
            background: var(--primary-hover);
        }

    </style>
</head>
<body>

<?php if ($popup_notice): ?>
<div class="popup-overlay" id="mainNoticePopup">
    <div class="popup-card">
        <button class="popup-close" id="closeNoticePopup">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
        
        <?php if (!empty($popup_notice['image'])): ?>
            <img src="<?php echo (defined('SITE_URL') ? rtrim(SITE_URL, '/') : '') . '/uploads/notices/' . htmlspecialchars($popup_notice['image'], ENT_QUOTES, 'UTF-8'); ?>" class="popup-image" alt="Notice Image">
        <?php endif; ?>
        
        <div class="popup-content">
            <?php if (!empty($popup_notice['content'])): ?>
                <div class="popup-text"><?php echo htmlspecialchars($popup_notice['content'], ENT_QUOTES, 'UTF-8'); ?></div>
            <?php endif; ?>
            
            <?php if (!empty($popup_notice['btn_text']) && !empty($popup_notice['btn_url'])): ?>
                <a href="<?php echo htmlspecialchars($popup_notice['btn_url'], ENT_QUOTES, 'UTF-8'); ?>" class="popup-btn">
                    <?php echo htmlspecialchars($popup_notice['btn_text'], ENT_QUOTES, 'UTF-8'); ?>
                </a>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const popup = document.getElementById('mainNoticePopup');
        const closeBtn = document.getElementById('closeNoticePopup');
        
        if (popup && !sessionStorage.getItem('noticePopupDismissed_<?php echo $popup_notice['id']; ?>')) {
            popup.style.display = 'flex';
            popup.classList.add('show');

            closeBtn.addEventListener('click', () => {
                popup.style.display = 'none';
                popup.classList.remove('show');
                sessionStorage.setItem('noticePopupDismissed_<?php echo $popup_notice['id']; ?>', 'true');
            });
        }
    });
</script>
<?php endif; ?>

<header class="main-header">
    <div class="header-inner">
        
        <div class="header-left-group">
            <a href="/" class="logo" style="display: flex; align-items: center; text-decoration: none;">
                <?php if(!empty($site_settings['site_logo'])): ?>
                    <img src="<?php echo get_image_url('logo', $site_settings['site_logo']); ?>" alt="Logo" style="max-height: 50px; display: block; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2));"> 
                <?php else: ?>
                    <span class="site-brand-name"><?php echo htmlspecialchars($site_settings['site_name'] ?? 'eCommerce', ENT_QUOTES, 'UTF-8'); ?></span>
                <?php endif; ?>
            </a>
        </div>

        <div class="header-right">
            <?php if(isset($_SESSION['user_id'])): ?>
                <a href="cart" class="cart-icon-wrapper">
                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><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" /></svg>
                    <?php 
                    $cart_count = isset($_SESSION['cart']) ? count($_SESSION['cart']) : 0;
                    if($cart_count > 0) { 
                        echo "<span class='cart-badge'>$cart_count</span>"; 
                    } 
                    ?>
                </a>
            <?php else: ?>
                <a href="login" class="btn-login">Login</a>
            <?php endif; ?>
            
            <div class="action-icon" onclick="document.getElementById('mobile-menu') ? document.getElementById('mobile-menu').classList.toggle('active') : document.body.classList.toggle('menu-open')">
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
            </div>
        </div>

    </div>
</header>

<div id="menu-wrapper">
    <?php include 'includes/menu.php'; ?>
</div>

<?php if ($current_page == 'index.php' || $current_page == 'products.php' || $current_page == 'index' || $current_page == 'products' || $current_page == ''): ?>
<div class="mobile-search-bar">
    <div style="max-width: 1200px; margin: 0 auto;">
        <form action="products" method="GET" class="mobile-search-form">
            <input type="text" name="search" placeholder="Search items..." class="mobile-search-input" value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search'], ENT_QUOTES, 'UTF-8') : ''; ?>" required>
            <button type="submit" class="mobile-search-btn">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
            </button>
        </form>
    </div>
</div>
<?php endif; ?>

<div class="help-fab-container">
    <div class="help-text-bubble">Need Help?</div>
    <a href="<?php echo !empty($site_settings['help_link']) ? htmlspecialchars($site_settings['help_link'], ENT_QUOTES, 'UTF-8') : '#'; ?>" target="_blank" class="help-fab" aria-label="Support Agent">
        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
    </a>
</div>
