<?php 
    $count = 0;
    if(isset($_SESSION['cart'])){
       $count = count($_SESSION['cart']);
    }
?>
<style>
      .shopping-card::before {
          content: "<?php echo $count; ?>" !important;
      }
      .btn-user{
        background:white;
        color:black!important;
        padding:0px!important;
    }
    .header .container .shopping-card::before {
    position: absolute;
    margin: 0 15px;
    content: "0";
    width: 24px;
    height: 24px;
    background: #3e5775;
    color: #fff;
    line-height: 24px;
    text-align: center;
    border-radius: 30px;
    font-size: 12px;
    /*top: -8px;*/
    /*right: -8px;*/
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
 </style>
<section class="header py-3 sticky-top">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <button   class="btn"><i  id="openModelBtn" style="color:#2d3752"  class="fa-solid fa-bars py-1"></i></button>
            </div>
            <div class="col-md-4 col-sm-6">
               <a href="<?php echo $wspath?>"> <img class="img-fluid" src="<?php echo $wspath?>admin/images/<?php echo $data1["logo"];?>" alt="logo"></a>
            </div>
            <div style="display: flex;" class="col-md-4 col-sm-12">
                <form style="display: flex;" class="form-inline my-2 my-lg-0" method="POST" action="<?php echo $wspath?>search.php">
                  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="type_name">
                  <button name="search" class="btn  my-2 my-sm-0" type="submit">Search</button>
                </form>
            <!--<form style="display: flex;" class="form-inline my-2 my-lg-0">-->
            <!--<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">-->
            <!--<button class="btn  my-2 my-sm-0" type="submit"><i class="fa fa-magnifying-glass"></i></button>-->
            <!--</form>-->
      <li class="shopping-card">
         <a href="<?php echo $wspath?>cart.html">
             <i style="color:#caa264" class="fa-solid fa-cart-shopping pt-2"></i>
             <!--<img src="assets/img/icon/cart.svg" alt="">-->
             </a>
      </li>
      
      <!--<a class="shopping-card" href="<?php echo $wspath?>cart.html"><i style="color:#caa264" class="fa-solid fa-cart-shopping pt-2"></i></a>-->
    
    
            </div>
        </div>
    </div>
</section>

<div id="modelOverlay" class="hidden">
        <div id="modelContent">
            <!-- Add your model content here -->
            <h2 class="text-center">MENU</h2>
                <ul>
                    <li><a href="<?php echo $wspath?>">HOME</a></li>
                    <li><a href="<?php echo $wspath?>about.html">ABOUT</a></li>
                    <li class=" dropdown">
          <a class=" dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          PRODUCTS
          </a>
          <ul  class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="<?php echo $wspath?>kids-jeans.html">KIdS JEANS</a></li>
            <li><a class="dropdown-item" href="<?php echo $wspath?>men-jeans.html">MEN JEANS</a></li>
            <li><a class="dropdown-item" href="<?php echo $wspath?>coat-pants.html">COAT PANTS</a></li>
          </ul>
        </li>
                    <li><a href="<?php echo $wspath?>contact.html">CONTACT</a></li>
                  
                </ul>
            <button class="btn btn-danger" id="closeModelBtn">Close</button>
        </div>
    </div>
    <script>
    const openModelBtn = document.getElementById("openModelBtn");
    const closeModelBtn = document.getElementById("closeModelBtn");
    const modelOverlay = document.getElementById("modelOverlay");

    openModelBtn.addEventListener("click", () => {
        modelOverlay.classList.remove("hidden");
    });

    closeModelBtn.addEventListener("click", () => {
        modelOverlay.classList.add("hidden");
    });

    // Close the model when clicking outside the model content
    modelOverlay.addEventListener("click", (event) => {
        if (event.target === modelOverlay) {
            modelOverlay.classList.add("hidden");
        }
    });
</script>