<?php include "./header.php"; ?>
<?php include "./db.php"?>

<div class="offcanvas offcanvas-end " tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header poppins">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Your Cart</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body ">
    <div id="cart-container">

    </div>
    
  </div>
</div>






<div class="offcanvas offcanvas-start poppins " data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <div class="offcanvas-title fs-5 fw-semibold" id="offcanvasWithBothOptionsLabel">
      <img src="./Media/burger-menu-left-svgrepo-com.svg" width="30" alt="hamburger" /> Categories
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body">
    <div class="menu">
      <?php
      $getCategoryName="SELECT Name from category";
      $result=$connection->query($getCategoryName);
      if(!$result){
        die("Invalid Query".$connection->connect_error);
      }
      while($row=mysqli_fetch_array($result)){
        ?>

<a href="#<?php echo $row["Name"] ?>"><?php echo $row["Name"]?></a>
      
      
      <?php
      }
      ?>
    </div>
  </div>
</div>
<div>
  <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="./Media/sample-slide-img.jpg" class="d-block w-100" alt="Slide 1">
      </div>
      <div class="carousel-item">
        <img src="./Media/sample-slide-img.jpg" class="d-block w-100" alt="Slide 2">
      </div>
      <div class="carousel-item">
        <img src="./Media/sample-slide-img.jpg" class="d-block w-100" alt="Slide 3">
      </div>
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
<div class="container-fluid bg-white shadow-lg py-2 nav-menu">
  <div class="container">
    <div class="row align-items-center">
      
      <div class="col-2 position-relative">
        <button class="btn-menu  me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">
          <img src="./Media/burger-menu-left-svgrepo-com.svg" alt="menu" width="40">
        </button>
      </div>

     <div class="col-10 cat-menu-layout position-relative">
    <button id="scroll-left" class="scroll-btn shadow position-absolute start-0 me-5 top-50 translate-middle-y">&#8592;</button>
    <ul class="nav nav-pills nav-cat poppins d-flex" id="cat-menu">
        <?php
        $getCategoryName = "SELECT Name FROM category";
        $result = $connection->query($getCategoryName);
        if(!$result){
            die("Invalid Query".$connection->connect_error);
        }
        while($row = mysqli_fetch_array($result)){
        ?>
            <li class="nav-item cat-menu">
                <a class="nav-link" href="#<?php echo $row["Name"] ?>"><?php echo $row["Name"] ?></a>
            </li>
        <?php } ?>
    </ul>
    <button id="scroll-right" class="scroll-btn shadow position-absolute end-0 top-50 ms-5 translate-middle-y">&#8594;</button>
</div>


    </div>
  </div>
</div>
<div class="main" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">

  <?php
  $getCategories="SELECT * FROM category";
  $categories = $connection->query($getCategories);
  if(!$categories){
die("Invalid query:".$connection->connect_error);
  }
  while($cat=$categories->fetch_array(MYSQLI_ASSOC)){
  ?>
  <div class="container" id="<?php echo $cat["Name"]?>">
  <div class="img-cat mb-3 bg-danger poppins" >
   <h1 class=" text-light text-center display-3 fw-bold"> <?php echo $cat["Name"] ;?></h1>
  </div>
  <div class="row">
    <?php
    $catId=$cat["ID"];
    $getProduct="SELECT * FROM product WHERE Category='$catId'";
    $products=$connection->query($getProduct);
    if(!$result){
      die("Invalid query:".$connection->connect_error);
    }
    while($row=$products->fetch_array(MYSQLI_ASSOC)){
      ?>
      
    <div class="col-lg-4 col-md-6 my-2">
      <div class="bg-light h-card position-relative rounded-3 shadow-lg p-3 d-flex poppins">
        <img src="./Media/sample-product.jpg" width="130" alt="Product 1" />
        <div class="card-body px-2">
          <p class="fw-semibold"><?php echo $row["Name"];?></p>
          <p class="text-secondary" style="font-size:12px;">Short description of the first product goes here.</p>
          <div class="d-flex pt-2 align-items-center position-absolute bottom-0 my-2 w-50 justify-content-between">
            <p class="fw-semibold mb-0">Rs. <span><?php echo $row["Price"];?></span></p>
            <button class="btn btn-danger rounded-circle text-center add-to-cart-btn"
            data-id="<?php echo $row["ID"] ?>"
            data-name="<?php echo $row["Name"] ?>"
            data-price="<?php echo $row["Price"] ?>"
            aria-controls="offcanvasRight"
            data-bs-target="#offcanvasRight"
            data-bs-toggle="offcanvas"
            >
              <i class="fa-solid fa-plus"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

   <?php
    }
    ?>

</div>
   

  </div>
  <?php
  }
  ?>

</div>

    


<?php include "./footer.php";?>