<?php
// includes/header.php
// Add this at the top of the file after session check
require_once __DIR__ . '/facebook-pixel.php';

// Initialize Facebook Pixel
if (FACEBOOK_PIXEL_ID) {
    $pixel_id = FACEBOOK_PIXEL_ID;
    ?>
    <!-- Meta Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '<?php echo $pixel_id; ?>');
    fbq('track', 'PageView');
    </script>
    <noscript>
    <img height="1" width="1" style="display:none" 
    src="https://www.facebook.com/tr?id=<?php echo $pixel_id; ?>&ev=PageView&noscript=1"/>
    </noscript>
    <!-- End Meta Pixel Code -->
    <?php
    
    // Store page view event for CAPI
    trackFacebookEvent('PageView', [], [
        'url' => (isset($_SERVER['HTTPS']) ? 'https://' : 'http://') . $_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 getSetting($pdo, 'site_name') ?: 'SellBazar'; ?></title>
    <meta name="description" content="<?php echo getSetting($pdo, 'meta_description') ?: 'Your Online Shopping Store'; ?>">
    <link rel="shortcut icon" href="<?php echo ASSETS_URL; ?>images/favicon.ico">
    
    <?php if (!empty($pixel_id)): ?>
    <!-- Meta Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '<?php echo $pixel_id; ?>');
    fbq('track', 'PageView');
    </script>
    <noscript>
    <img height="1" width="1" style="display:none" 
    src="https://www.facebook.com/tr?id=<?php echo $pixel_id; ?>&ev=PageView&noscript=1"/>
    </noscript>
    <!-- End Meta Pixel Code -->
    
    <!-- Track PageView with CAPI -->
    <?php 
    if (FACEBOOK_CAPI_ENABLED && !empty(FACEBOOK_ACCESS_TOKEN)) {
        sendFacebookCAPI('PageView', [], [
            'url' => (isset($_SERVER['HTTPS']) ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']
        ]);
    }
    ?>
    <?php endif; ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    
    <?php echo getMetaPixelScript(); ?>
</head>
<body>

<!-- Header Top -->
<div class="header-top">
    <div class="container">
        <ul>
            <?php if (isLoggedIn()): ?>
            <li><a href="profile.php"><i class="fa-regular fa-user"></i> <?php echo $_SESSION['user_name'] ?? 'Account'; ?></a></li>
            <li><a href="logout.php"><i class="fa-solid fa-sign-out-alt"></i> Logout</a></li>
            <?php else: ?>
            <li><a href="login.php"><i class="fa-regular fa-user"></i> Login</a></li>
            <li><a href="register.php"><i class="fa-regular fa-user"></i> Register</a></li>
            <?php endif; ?>
            <li><a href="order-tracking.php"><i class="fa-solid fa-truck"></i> Track Order</a></li>
        </ul>
    </div>
</div>

<!-- Header Middle -->
<div class="header-middle">
    <div class="container">
        <div class="row align-items-center">
            <!-- Logo - Left -->
            <div class="col-6 col-md-3 col-lg-2">
                <a href="index.php" class="logo">
                    <img src="assets/images/logo1.png" alt="SellBazar">
                </a>
            </div>
            
            <!-- Mobile Right Icons - Visible only on mobile -->
            <div class="col-6 d-md-none text-end">
                <div class="mobile-header-icons">
                    <a href="search.php" class="mobile-icon">
                        <i class="fa-solid fa-search"></i>
                    </a>
                    <a href="cart.php" class="mobile-icon mobile-cart">
                        <i class="fa-solid fa-cart-shopping"></i>
                        <span class="badge"><?php echo getCartCount(); ?></span>
                    </a>
                    <a href="profile.php" class="mobile-icon">
                        <i class="fa-regular fa-user"></i>
                    </a>
                </div>
            </div>
            
            <!-- Search Box - Desktop only -->
            <div class="col-md-6 col-lg-7 d-none d-md-block">
                <div class="search-box">
                    <form action="search.php" method="GET">
                        <input type="text" name="q" placeholder="Search for products...">
                        <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
                    </form>
                </div>
            </div>
            
            <!-- Header Right - Desktop only -->
            <div class="col-md-3 col-lg-3 d-none d-md-block">
                <div class="header-right">
                  
                    <a href="cart.php" class="nav-item cart">
                        <i class="fa-solid fa-cart-shopping"></i>
                        <span class="badge"><?php echo getCartCount(); ?></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Navigation -->
<div class="main-nav d-none d-md-block">
    <div class="container">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="shop.php">All Products</a></li>
            <?php 
            $categories = getCategories($pdo);
            foreach ($categories as $category): 
            ?>
            <li>
                <a href="shop.php?category=<?php echo $category['slug']; ?>">
                    <?php echo $category['name']; ?>
                    <?php 
                    $subs = getSubcategories($pdo, $category['id']);
                    if (!empty($subs)): 
                    ?>
                    <i class="fa-solid fa-chevron-down"></i>
                    <?php endif; ?>
                </a>
                <?php if (!empty($subs)): ?>
                <ul class="dropdown">
                    <?php foreach ($subs as $sub): ?>
                    <li><a href="shop.php?subcategory=<?php echo $sub['slug']; ?>"><?php echo $sub['name']; ?></a></li>
                    <?php endforeach; ?>
                </ul>
                <?php endif; ?>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>

<!-- Page Content Starts Here -->

<style>
/* ===== MOBILE HEADER STYLES ===== */
.mobile-header-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.mobile-icon {
    position: relative;
    color: #1e293b;
    font-size: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.mobile-icon:hover {
    color: #047dc3;
}

.mobile-cart .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #047dc3;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    min-width: 18px;
    text-align: center;
}

/* ===== RESPONSIVE FIXES ===== */
@media (max-width: 576px) {
    .header-middle {
        padding: 8px 0;
    }
    
    .header-middle .logo img {
        height: 32px;
        max-width: 120px;
    }
    
    .mobile-header-icons {
        gap: 10px;
    }
    
    .mobile-icon {
        font-size: 18px;
    }
    
    .mobile-cart .badge {
        top: -6px;
        right: -6px;
        font-size: 9px;
        min-width: 16px;
        padding: 1px 5px;
    }
}

@media (min-width: 577px) and (max-width: 767px) {
    .header-middle .logo img {
        height: 38px;
    }
    
    .mobile-header-icons {
        gap: 14px;
    }
}

/* ===== HEADER TOP RESPONSIVE ===== */
@media (max-width: 767px) {
    .header-top ul {
        justify-content: center;
        gap: 10px;
        font-size: 12px;
        flex-wrap: wrap;
    }
    
    .header-top ul li a i {
        font-size: 12px;
    }
}
</style>
