<!-- ::::::  Start  Header Section  ::::::  -->
    <header>
        <!-- ::::::  Start Large Header Section  ::::::  -->
        <div class="header header--1">
            <!-- Start Header Top area -->
            <div class="header__top header__top--style-1">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="header__top-content">
                                <div class="header__top-content--left">
                                    <div class="contact_cms">
                                        <?php

$ret=mysqli_query($con,"select * from tblpage where PageType='contactus' ");
$cnt=1;
while ($row=mysqli_fetch_array($ret)) {

?>
                                        <span class="cms1">Telephone Enquiry: </span>
                                        <span class="cms2"><?php  echo $row['MobileNumber'];?></span>
                                        <span class="cms1">Email: </span>
                                        <span class="cms2"><?php  echo $row['Email'];?></span><?php } ?>
                                    </div>
                                </div>
                                <div class="header__top-content--right">
                                    <?php if (strlen($_SESSION['msmsuid']==0)) {?>
                                    <div class="user-info user-set-role">
                                       
                                       
                                        <a class="user-set-role__button" href="login.php" aria-haspopup="true" style="color:blue;padding-right: 20px;">Sign in</a>
                                         <a class="user-set-role__button" href="login.php" aria-haspopup="true" style="color:blue;padding-right: 20px;">Sign Up</a>
                                    </div>

                                    <a class="user-set-role__button" href="admin/login.php" aria-haspopup="true" style="color:blue;padding-right: 20px;">Admin</a><?php }?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- Start Header Top area -->

            <!-- Start Header Middle area -->
            <div class="header__middle header__top--style-1 p-tb-30">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-3">
                            <div class="header__logo">
                                <a href="index.php" class="header__logo-link">
                                   <h3>Phone Bazaar</h3>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="row align-items-center">
                                <div class="col-lg-10">
                                    <form class="header__search-form" action="search.php" method="post">
                                       
                                        <div class="header__search-input">
                                            <input type="search" name="searchdata" placeholder="Enter your search key">
                                            <button class="btn btn--submit btn--blue btn--uppercase btn--weight " type="submit" name="search">Search</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-lg-2">
                                    <?php if (strlen($_SESSION['msmsuid']>0)) {?>
                                    <div class="header__wishlist-box">
                                        <!-- Start Header Wishlist Box -->
                                        <?php
                            $userid= $_SESSION['msmsuid'];
$ret2=mysqli_query($con,"select * from tblwish where UserId='$userid'");
$num1=mysqli_num_rows($ret2);

?>
                                        <div class="header__wishlist pos-relative">
                                            <a href="wishlist.php" class="header__wishlist-link">
                                                <i class="icon-heart"></i>
                                                <span class="wishlist-item-count pos-absolute"><?php echo $num1;?></span>
                                            </a>
                                        </div> <!-- End Header Wishlist Box -->

                                        <!-- Start Header Add Cart Box -->
                                        <?php
                            $userid= $_SESSION['msmsuid'];
$ret1=mysqli_query($con,"select * from tblorders where IsOrderPlaced is null && UserId='$userid'");
$num=mysqli_num_rows($ret1);

?>
                                        <div class="header-add-cart pos-relative m-l-40">
                                            <a href="cart.php" >
                                                <i class="icon-shopping-cart"></i>
                                                <span class="wishlist-item-count pos-absolute"><?php echo $num;?></span>
                                            </a>
                                        </div> <!-- End Header Add Cart Box -->
                                    </div><?php }?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- End Header Middle area -->

            <!-- Start Header Menu Area -->
            <div class="header-menu">
                <div class="container">
                    <div class="row col-12">
                        <nav>
                            <ul class="header__nav">
                                <!--Start Single Nav link-->
                                <li class="header__nav-item pos-relative">
                                    
                                    <li class="header__nav-item pos-relative">
                                     <a href="index.php" class="header__nav-link">Home</a>
                                </li>
                                </li> <!-- End Single Nav link-->
<li class="header__nav-item pos-relative">
                                    
                                    <li class="header__nav-item pos-relative">
                                     <a href="about.php" class="header__nav-link">About</a>
                                </li>
                                 <li class="header__nav-item pos-relative">
                                     <a href="shop-mobile.php" class="header__nav-link">Shop Mobile</a>
                                </li>
                                <li class="header__nav-item pos-relative">
                                     <a href="track-order.php" class="header__nav-link">Track Order</a>
                                </li>
                                </li>
                                

                                <!--Start Single Nav link--> <?php if (strlen($_SESSION['msmsuid']>0)) {?>
                                <li class="header__nav-item">
                                    <a href="dashboard.php" class="header__nav-link">My Account</a>
                                </li>
                                <li class="header__nav-item pos-relative">
                                     <a href="wishlist.php" class="header__nav-link">Wishlist</a>
                                </li>
<li class="header__nav-item pos-relative">
                                     <a href="cart.php" class="header__nav-link">Cart Page</a>
                                </li>
                                <li class="header__nav-item pos-relative">
                                     <a href="my-order.php" class="header__nav-link">My Order</a>
                                </li>
                                <?php } ?> <!-- End Single Nav link-->

                                <!--Start Single Nav link-->
                                <li class="header__nav-item pos-relative">
                                     <a href="contact.php" class="header__nav-link">Contact Us</a>
                                </li>
                                <li class="header__nav-item pos-relative">
                                     <a href="stores.php" class="header__nav-link">Stores</a>
                                </li>
                                <!-- End Single Nav link-->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div> <!-- End Header Menu Area -->
        </div> <!-- ::::::  Start Large Header Section  ::::::  -->
        
        <!-- ::::::  Start Mobile Header Section  ::::::  -->
        <div class="header__mobile mobile-header--1">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <!-- Start Header Mobile Top area -->
                        <div class="header__mobile-top">
                            <div class="mobile-header__logo">
                                <a href="index.php" class="mobile-header__logo-link">
                                    <h3>Phone Bazaar</h3>
                                </a>
                            </div>
                            <div class="header__wishlist-box">
                                <!-- Start Header Wishlist Box -->
                                <?php if (strlen($_SESSION['msmsuid']>0)) {?>
                                <?php
                            $userid= $_SESSION['msmsuid'];
$ret2=mysqli_query($con,"select * from tblwish where UserId='$userid'");
$num1=mysqli_num_rows($ret2);

?>
                                <div class="header__wishlist pos-relative">
                                    <a href="wishlist.php" class="header__wishlist-link">
                                        <i class="icon-heart"></i>
                                        <span class="wishlist-item-count pos-absolute"><?php echo $num1;?></span>
                                    </a>
                                </div> <!-- End Header Wishlist Box -->

                                <!-- Start Header Add Cart Box -->
                                <?php
                            $userid= $_SESSION['msmsuid'];
$ret1=mysqli_query($con,"select * from tblorders where IsOrderPlaced is null && UserId='$userid'");
$num=mysqli_num_rows($ret1);

?>
                                <div class="header-add-cart pos-relative m-l-20">
                                    <a href="cart.php" class="header__wishlist-link">
                                        <i class="icon-shopping-cart"></i>
                                        <span class="wishlist-item-count pos-absolute"><?php echo $num;?></span>
                                    </a>
                                </div> <!-- End Header Add Cart Box -->
                                <?php }?>

                                <a href="#offcanvas-mobile-menu" class="offcanvas-toggle m-l-20"><i class="icon-menu"></i></a>

                            </div>
                        </div> <!-- End Header Mobile Top area -->

                        <!-- Start Header Mobile Middle area -->
                        <div class="header__mobile-middle header__top--style-1 p-tb-10">
                            <form class="header__search-form" action="search.php" method="post">
                                <div class="header__search-input header__search-input--mobile">
                                    <input type="search" name="searchdata" placeholder="Enter your search key">
                                    <button class="btn btn--submit btn--blue btn--uppercase btn--weight" type="submit" name="search"><i class="fal fa-search"></i></button>
                                </div>
                            </form>
                        </div> <!-- End Header Mobile Middle area -->

                    </div>
                </div>
            </div>
        </div> <!-- ::::::  Start Mobile Header Section  ::::::  -->

        <!-- ::::::  Start Mobile-offcanvas Menu Section  ::::::  -->
        <div id="offcanvas-mobile-menu" class="offcanvas offcanvas-mobile-menu">
            <button class="offcanvas__close offcanvas-close">&times;</button>
            <div class="offcanvas-inner">
                <div class="offcanvas-userpanel m-b-30">
                    <ul>
                        <li class="offcanvas-userpanel__role">
                            <a href="#">Setting</a>
                            <ul class="user-sub-menu">
                                <?php if (strlen($_SESSION['msmsuid']>0)) {?>
                                <li><a href="dashboard.php">My account</a></li>
                                <li><a href="wishlist.php">My wishlist</a></li>
                                <li><a href="cart.php">Cart</a></li>
                                <li><a href="logout.php">Logout</a></li>
                                <?php } else { ?>
                                <li><a href="login.php">Sign in</a></li>
                                <?php } ?>
                            </ul>
                        </li>

                    </ul>
                </div>
                
                <div class="offcanvas-menu m-b-30">
                    <h4>Menu</h4>
                    <ul>
                        <li><a href="index.php"><span>Home</span></a></li>
                        <li><a href="about.php"><span>About</span></a></li>
                        <li><a href="shop-mobile.php"><span>Shop Mobile</span></a></li>
                        <li><a href="track-order.php"><span>Track Order</span></a></li>
                        <li><a href="contact.php"><span>Contact Us</span></a></li>
                        <li><a href="stores.php"><span>Stores</span></a></li>
                    </ul>
                </div>
                <div class="offcanvas-buttons m-b-30">
                    <?php if (strlen($_SESSION['msmsuid']>0)) {?>
                    <a href="dashboard.php" class="user"><i class="icon-user"></i></a>
                    <a href="wishlist.php"><i class="icon-heart"></i></a>
                    <a href="cart.php"><i class="icon-shopping-cart"></i></a>
                    <?php } else { ?>
                    <a href="login.php" class="user"><i class="icon-user"></i></a>
                    <?php } ?>
                </div>
                <div class="offcanvas-social">
                    <span>Stay With Us</span>
                    <ul>
                        <li>
                            <a href="https://wa.me/8001190119" target="_blank"><i class="fab fa-whatsapp"></i></a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/share/1AGMYw2gvv/" target="_blank"><i class="fab fa-facebook-f"></i></a>
                        </li>
                        <li>
                            <a href="https://www.instagram.com/phonebazaar2024?igsh=aDVubDFpdXg2a3Ew" target="_blank"><i class="fab fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="https://youtube.com/@phonebazaar2024?si=e8Vi83I8eRifoFue" target="_blank"><i class="fab fa-youtube"></i></a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div> <!-- ::::::  End Mobile-offcanvas Menu Section  ::::::  -->

        <!-- ::::::  Start Popup Add Cart ::::::  -->
        <div  id="offcanvas-add-cart__box" class="offcanvas offcanvas-cart offcanvas-add-cart">
            <div class="offcanvas-add-cart__top m-b-40">
                <span class="offcanvas-add-cart__top-text"><i class="icon-shopping-cart"></i> Total Items: 4</span>
                <button class=" offcanvas-close">&times;</button>
            </div>
            <!-- Start Add Cart Item Box-->
            <ul class="offcanvas-add-cart__menu">
                <!-- Start Single Add Cart Item-->
                <li class="offcanvas-add-cart__list pos-relative">
                    <div class="offcanvas-add-cart__img-box pos-relative">
                        <a href="single-1.html" class="offcanvas-add-cart__img-link img-responsive"><img src="assets/img/product/size-small/product-home-1-img-1.jpg" alt="" class="add-cart__img"></a>
                        <span class="offcanvas-add-cart__item-count pos-absolute">2x</span>
                    </div>
                    <div class="offcanvas-add-cart__detail">
                        <a href="single-1.html" class="offcanvas-add-cart__link">PlayStation 4 Pro 1TB Star Wars Battlefront II Bundle</a>
                        <span class="offcanvas-add-cart__price">₹29.00</span>
                        <span class="offcanvas-add-cart__info">Dimension: 40x60cm</span>

                    </div>
                    <button class="offcanvas-add-cart__item-dismiss pos-absolute">&times;</button>
                </li> <!-- Start Single Add Cart Item-->
                <!-- Start Single Add Cart Item-->
                <li class="offcanvas-add-cart__list pos-relative">
                    <div class="offcanvas-add-cart__img-box pos-relative">
                        <a href="single-1.html" class="offcanvas-add-cart__img-link img-responsive"><img src="assets/img/product/size-small/product-home-1-img-2.jpg" alt="" class="add-cart__img"></a>
                        <span class="offcanvas-add-cart__item-count pos-absolute">1x</span>
                    </div>
                    <div class="offcanvas-add-cart__detail">
                        <a href="single-1.html" class="offcanvas-add-cart__link">PlayStation 4 Pro 1TB Star Wars Battlefront II Bundle</a>
                        <span class="offcanvas-add-cart__price">₹29.00</span>
                        <span class="offcanvas-add-cart__info">Dimension: 40x60cm</span>

                    </div>
                    <button class="offcanvas-add-cart__item-dismiss pos-absolute">&times;</button>
                </li> <!-- Start Single Add Cart Item-->
            </ul> <!-- Start Add Cart Item Box-->
            <!-- Start Add Cart Checkout Box-->
            <div class="offcanvas-add-cart__checkout-box-bottom">
                <!-- Start offcanvas Add Cart Checkout Info-->
                <ul class="offcanvas-add-cart__checkout-info">
                    <!-- Start Single Add Cart Checkout Info-->
                    <li class="offcanvas-add-cart__checkout-list">
                        <span class="offcanvas-add-cart__checkout-left-info">Subtotal</span>
                        <span class="offcanvas-add-cart__checkout-right-info">₹60.59</span>
                    </li> <!-- End Single Add Cart Checkout Info-->
                    <!-- Start Single Add Cart Checkout Info-->
                    <li class="offcanvas-add-cart__checkout-list">
                        <span class="offcanvas-add-cart__checkout-left-info">Shipping</span>
                        <span class="offcanvas-add-cart__checkout-right-info">₹7.00</span>
                    </li> <!-- End Single Add Cart Checkout Info-->
                    <!-- Start Single Add Cart Checkout Info-->
                    <li class="offcanvas-add-cart__checkout-list">
                        <span class="offcanvas-add-cart__checkout-left-info">Taxes</span>
                        <span class="offcanvas-add-cart__checkout-right-info">₹0.00</span>
                    </li> <!-- End Single Add Cart Checkout Info-->
                    <!-- Start Single Add Cart Checkout Info-->
                    <li class="offcanvas-add-cart__checkout-list">
                        <span class="offcanvas-add-cart__checkout-left-info">Total</span>
                        <span class="offcanvas-add-cart__checkout-right-info">₹67.59</span>
                    </li> <!-- End Single Add Cart Checkout Info-->
                </ul> <!-- End offcanvas Add Cart Checkout Info-->

                <div class="offcanvas-add-cart__btn-checkout">
                    <a href="checkout.html" class="btn btn--block btn--box btn--gray btn--large btn--uppercase btn--weight">Checkout</a>
                </div>
            </div> <!-- End Add Cart Checkout Box-->
        </div> <!-- :::::: End Popup Add Cart :::::: -->

        <div class="offcanvas-overlay"></div>
    </header> <!-- ::::::  End  Header Section  ::::::  -->
    
    <!-- Dropdown Menu Click Handler -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Dropdown script loaded');
        
        // Find all nav items with dropdowns
        var navItems = document.querySelectorAll('.header__nav-item');
        console.log('Found nav items:', navItems.length);
        
        // Function to show dropdown
        function showDropdown(dropdown) {
            dropdown.style.visibility = 'visible';
            dropdown.style.opacity = '1';
            dropdown.style.transform = 'rotateX(0deg)';
            dropdown.style.transition = 'all 0.3s linear';
        }
        
        // Function to hide dropdown
        function hideDropdown(dropdown) {
            dropdown.style.visibility = 'hidden';
            dropdown.style.opacity = '0';
            dropdown.style.transform = 'rotateX(-90deg)';
        }
        
        navItems.forEach(function(item, index) {
            var link = item.querySelector('.header__nav-link');
            var dropdown = item.querySelector('.dropdown__menu');
            
            if (dropdown) {
                console.log('Nav item ' + index + ' has dropdown');
                
                // Set initial dropdown styles
                dropdown.style.position = 'absolute';
                dropdown.style.top = '100%';
                dropdown.style.left = '0';
                dropdown.style.zIndex = '99999';
                dropdown.style.background = '#fff';
                dropdown.style.transformOrigin = '0% 0%';
                hideDropdown(dropdown);
            }
            
            // Only add handlers if this item has a dropdown
            if (dropdown && link) {
                console.log('Adding handlers to nav item ' + index);
                
                // Hover handler
                item.addEventListener('mouseenter', function() {
                    console.log('Mouse enter');
                    showDropdown(dropdown);
                });
                
                item.addEventListener('mouseleave', function() {
                    console.log('Mouse leave');
                    if (!item.classList.contains('dropdown-active')) {
                        hideDropdown(dropdown);
                    }
                });
                
                // Click handler for dropdown toggle
                link.addEventListener('click', function(e) {
                    console.log('Dropdown link clicked');
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Check if dropdown is currently visible
                    var isActive = item.classList.contains('dropdown-active');
                    console.log('Is active:', isActive);
                    
                    // Close all dropdowns first
                    navItems.forEach(function(otherItem) {
                        var otherDropdown = otherItem.querySelector('.dropdown__menu');
                        if (otherDropdown && otherItem !== item) {
                            hideDropdown(otherDropdown);
                            otherItem.classList.remove('dropdown-active');
                        }
                    });
                    
                    // Toggle current dropdown
                    if (!isActive) {
                        item.classList.add('dropdown-active');
                        showDropdown(dropdown);
                        console.log('Dropdown activated');
                    } else {
                        item.classList.remove('dropdown-active');
                        hideDropdown(dropdown);
                        console.log('Dropdown deactivated');
                    }
                });
            }
        });
        
        // Close dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.header__nav-item')) {
                navItems.forEach(function(item) {
                    var dropdown = item.querySelector('.dropdown__menu');
                    if (dropdown) {
                        hideDropdown(dropdown);
                    }
                    item.classList.remove('dropdown-active');
                });
            }
        });
        
        // Close dropdown when pressing Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                navItems.forEach(function(item) {
                    var dropdown = item.querySelector('.dropdown__menu');
                    if (dropdown) {
                        hideDropdown(dropdown);
                    }
                    item.classList.remove('dropdown-active');
                });
            }
        });
    });
    </script>
