
<?php 
   
     $id_user=$_SESSION['id'];
$sql = "SELECT * FROM users WHERE id='$id_user' ";
$result=mysqli_query($conn,$sql);
    $row=mysqli_fetch_array($result);
    $by=$row['fname'];
?>
<div class="col-sm-10 "> 
                    <!---Tittle bar-->
      
                     
                     
                     <?php 
if (!empty($_SESSION['cart'])) {

      $arr=count($_SESSION['cart']);
}
else {
    $arr="0" ;
}

?>                
       <style>
      .icon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #333333;
  background: #dddddd;
  border: none;
  outline: none;
  border-radius: 50%;
}

.icon-button:hover {
  cursor: pointer;
}

.icon-button:active {
  background: #cccccc;
}

.icon-button__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 25px;
  height: 25px;
  background: red;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
/*** Button ***/

.not{
    background-color: light;
  
  padding: 10px 5px;
  margin:10px;
  border-inline-start-width: 10px;
  border-inline-start-style: solid;
  border-inline-start-color:lightgreen;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
       </style>      
        
              

                  <!--end tittle bar-->


                  <div class="cat-display">
    <div class="k bg-white ">
  <div class="container-fluid  p-1">
    <div class="row no-gutters" id="mynavbar">
        <div class="order col-6">
            <div class="input-group flex-nowrap">
                
                <input type="text" id="quicksearch" class="form-control" placeholder="Search product" >
                <span class="input-group-text" id="addon-wrapping"><i class="bi bi-search"></i></span>
              </div>
          </div>
        <div style="font-size: 15px;" class="col-6  d-flex justify-content-end">
           <div class="user d-flex  p-1">
              <a href="user_settings"  class="text-dark text-uppercase mx-1  " ><i class="bi bi-person-check"></i>Hi, <?php echo $row['fname']?></a>
            <span class="text-dark mx-3  refreeshme"><a class="text-dark" href="carts"><i class="bi bi-cart"></i> <?php echo $arr ?></a></span>
           </div>
        </div>
      
    </div>
  </div>
</div>

<script>

   $(document).ready(function(){
setInterval(function(){
      $(".refreeshme").load(window.location.href + " .refreeshme" );
}, 3000);
});
 
</script>