<?php

require_once('connection_font.php');


$page = basename($_SERVER['SCRIPT_NAME'],".php");


//logo header

      $sql_logo="SELECT * FROM `tbl_web_logo` LIMIT 1";
      $run_logo = mysqli_query($link,$sql_logo);
      $result_logo = mysqli_fetch_assoc($run_logo);

//logo footer

      $sql_logo_f="SELECT * FROM `tbl_footer_logo` LIMIT 1";
      $run_logo_f = mysqli_query($link,$sql_logo_f);
      $result_logo_f = mysqli_fetch_assoc($run_logo_f);

//Contact
      $sql_Contact = "SELECT * FROM `tbl_admin` LIMIT 1";
      $run_Contact = mysqli_query($link,$sql_Contact);
      $result_Contact = mysqli_fetch_assoc($run_Contact);

//
      $sql_social = "SELECT * FROM `tbl_social_media` LIMIT 1";
      $run_social = mysqli_query($link,$sql_social);
      $result_social = mysqli_fetch_assoc($run_social);

      

?>
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
    <title>Creative Bazaar</title>
    <link rel="icon" type="image/png" href="assets/images/favicon.png">
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/mobile_menu.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/scroll_button.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/venobox.min.css">
    <link rel="stylesheet" href="assets/css/select2.min.css">
    <link rel="stylesheet" href="assets/css/jquery.pwstabs.css">
    <link rel="stylesheet" href="assets/css/range_slider.css">
    <link rel="stylesheet" href="assets/css/multiple-image-video.css">
    <link rel="stylesheet" href="assets/css/custom_spacing.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
</head>

<body class="default_home">

    <!--=========================
        HEADER START
    ==========================-->
    <header class="header_2">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-2">
                    <div class="header_logo_area">
                        <a href="#" class="header_logo">
                            <img src="assets/images/logo_2.png" alt="Zenis" class="img-fluid w-100">
                        </a>
                        <div class="mobile_menu_icon d-block d-lg-none" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">
                            <span class="mobile_menu_icon"><i class="far fa-stream menu_icon_bar"></i></span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 d-none d-lg-block">
                    <form action="#" onsubmit="return false;">
    <select class="select_2" id="categorySelect">
        <option value="">All Categories</option>
        <?php
        $sql_cat = "SELECT * FROM `tbl_category`";
        $run_cat = mysqli_query($link, $sql_cat);
        while ($result_cat = mysqli_fetch_assoc($run_cat)) {
            $cat_name = htmlspecialchars($result_cat['cate_name']);
            echo "<option value=\"$cat_name\">$cat_name</option>";
        }
        ?>
    </select>
    <div class="input" style="position:relative;">
        <input type="text" id="searchInput" placeholder="Search your product...">
        <button type="submit"><i class="far fa-search"></i></button>
        <div id="suggestionsBox"></div>
    </div>
</form>

<style>
#suggestionsBox ul {
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
    padding: 0;
    margin-top: 5px;
}
#suggestionsBox ul li {
    padding: 8px;
    cursor: pointer;
}
#suggestionsBox ul li:hover {
    background: #f0f0f0;
}
</style>

<script>
document.getElementById("searchInput").addEventListener("input", function () {
    const searchQuery = this.value.trim();
    const category = document.getElementById("categorySelect").value;

    if (searchQuery.length >= 2) {
        const params = new URLSearchParams({
            q: searchQuery,
            cat: category
        });

        fetch("ajax-search.php?" + params.toString())
            .then(res => res.text())
            .then(data => {
                document.getElementById("suggestionsBox").innerHTML = data;
            });
    } else {
        document.getElementById("suggestionsBox").innerHTML = "";
    }
});

function goToProduct(proId) {
    window.location.href = "shop_details.php?pro_code=" + proId;
}
</script>

                </div>
                <div class="col-lg-3 d-none d-lg-flex">
                    <div class="header_support_user d-flex flex-wrap">
                        <div class="header_support">
                            <span class="icon">
                                <i class="far fa-phone-alt"></i>
                            </span>
                            <h3>
                                Call Us:
                                <a href="callto:1234567890">
                                    <span>+91 9560108794</span>
                                </a>
                            </h3>
                        </div>
                    </div>
                    
                </div>
                <div class="col-lg-2">
  <div id="google_translate_element" class="translate-wrapper"></div>
</div>

<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'en,hi,fr,de,es,zh-CN',
      layout: google.translate.TranslateElement.InlineLayout.VERTICAL
    }, 'google_translate_element');
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<style>
    /* Hide Google branding */
.goog-logo-link,
.goog-te-gadget span,
.goog-te-banner-frame,
.goog-te-gadget img {
  display: none !important;
}



/* Keep only the dropdown */
.translate-wrapper .goog-te-gadget-simple {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  width: 100%;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  display: inline-block;
  cursor: pointer;
}

/* On hover */
.translate-wrapper .goog-te-gadget-simple:hover {
  background-color: #f9f9f9;
  border-color: #999;
}
.goog-te-gadget {
    font-family: arial;
    font-size: 11px;
    color: #666;
    height: 84px;
    position: relative;
}
</style>
            </div>
        </div>
    </header>
    <!--=========================
        HEADER END
    ==========================-->


    <!--=========================
        MENU 2 START
    ==========================-->
    <nav class="main_menu_2 main_menu d-none d-lg-block">
        <div class="container">
            <div class="row">
                <div class="col-12 d-flex flex-wrap">
                    <div class="main_menu_area">
                        <div class="menu_category_area">
                            <a href="#" class="menu_logo d-none">
                                <img src="assets/images/logo_2.png" alt="Zenis" class="img-fluid w-100">
                            </a>
                            <div class="menu_category_bar">
                                <p>
                                    <span>
                                        <img src="assets/images/bar_icon_white.svg" alt="category icon">
                                    </span>
                                    Browse Categories
                                </p>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <ul class="menu_cat_item">
                                <?php
                   $sql_cat = "SELECT * FROM `tbl_category`";
                   $run_cat = mysqli_query($link,$sql_cat);
                   while($result_cat = mysqli_fetch_assoc($run_cat))
                   {
                     ?> 
                                <li>
                                    <a href="shop.php?code=<?=$result_cat['cat_id']?>">
                                        <span><img src="category-image/<?=$result_cat['category_image']?>" alt="category">
                                        </span>
                                       <?=$result_cat['cate_name']?> 
                                    </a>
                                    
                                </li>
                               <?php } ?>
                            </ul>
                        </div>
                        <ul class="menu_item">
                            <li>
                                <a class="active" href="index.php">home </a>
                               
                            </li>
                            <li>
                                <a href="shop.php?code=440">shop </a>
                                
                            </li>
                            <li>
                                <a href="about-us.php">About Us </a>
                                
                            </li>
                            <?php
                   $sql_cat = "SELECT * FROM `tbl_services_category`";
                   $run_cat = mysqli_query($link,$sql_cat);
                   while($result_cat = mysqli_fetch_assoc($run_cat))
                   {
                     ?> 
                            <li><a href="blogs.php?code=<?=$result_cat['cat_id']?>"><?=$result_cat['cate_name']?></a></li>
                            <?php } ?>
                            
                            <li><a href="contact.php">contact</a></li>
                        </ul>
                        <ul class="menu_icon">
                            
                           
                            <li>
                                <a href="add-to-cart.php">
                                    <b>
                                        <img src="assets/images/cart_black.svg" alt="cart" class="img-fluid">
                                    </b>
                                   
                                </a>
                            </li>
                            <li>
                                <a class="user" href="#">
                                    <b>
                                        <img src="assets/images/user_icon_black.svg" alt="cart" class="img-fluid">
                                    </b>
                                    <h5></h5>
                                </a>
                                <ul class="user_dropdown">
                                    <li>
                                        <a href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
                                            </svg>
                                            Dashboard
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                                            </svg>
                                            my account
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                                            </svg>
                                            my order
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
                                            </svg>
                                            wishlist
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="size-6">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
                                            </svg>
                                            logout
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

  


    <!--============================
        MOBILE MENU START
    ==============================-->
    <div class="mobile_menu_area">
        <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions">
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"><i
                    class="fal fa-times"></i></button>
            <div class="offcanvas-body">

               
                <ul class="mobile_menu_header d-flex flex-wrap">
                   
                    
                    <li>
                        <a href="add-to-cart.php">
                            <b><img src="assets/images/user_icon_black.svg" alt="cart" class="img-fluid"></b>
                        </a>
                    </li>
                </ul>

               <form class="mobile_menu_search" onsubmit="return false;">
    <input type="text" id="searchBox" placeholder="Search">
    <button type="submit"><i class="far fa-search"></i></button>
    <div id="suggestions" style="position:relative;"></div>
</form>

<style>
#suggestions ul {
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
    padding: 0;
    margin-top: 5px;
}
#suggestions ul li {
    padding: 8px;
    cursor: pointer;
}
#suggestions ul li:hover {
    background: #f0f0f0;
}
</style>

<script>
document.getElementById("searchBox").addEventListener("input", function () {
    const query = this.value;
    if (query.length >= 2) {
        fetch("ajax_search.php?q=" + encodeURIComponent(query))
            .then((response) => response.text())
            .then((data) => {
                document.getElementById("suggestions").innerHTML = data;
            });
    } else {
        document.getElementById("suggestions").innerHTML = "";
    }
});

function goToProduct(proId) {
    window.location.href = "shop_details.php?pro_code=" + proId;
}
</script>


                <div class="mobile_menu_item_area">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                aria-selected="true">Categories</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                                aria-selected="false">menu</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab" tabindex="0">
                            <ul class="main_mobile_menu">
                                <?php
                   $sql_cat = "SELECT * FROM `tbl_category`";
                   $run_cat = mysqli_query($link,$sql_cat);
                   while($result_cat = mysqli_fetch_assoc($run_cat))
                   {
                     ?> 
                                <li class="mobile_dropdown">
                                    <a href="shop.php?code=<?=$result_cat['cat_id']?>"><?=$result_cat['cate_name']?></a>
                                    <?php } ?>
                                   
                                </li>
                               
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                            aria-labelledby="pills-profile-tab" tabindex="0">
                            <ul class="main_mobile_menu">
                                <li>
                                    <a href="index.php">home</a>
                                    
                                </li>
                                <li>
                                    <a href="shop.php">shop</a>
                                  
                                </li>
                                <li>
                                    <a href="about.php">About Us</a>
                                    
                                </li>
                                <li><a href="blog.php">Blog</a></li>
                                
                                <li><a href="contact.php">contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--============================
        MOBILE MENU END
    ==============================-->
