<?php
//session_start();
include('db.php');
$status="";
if (isset($_POST['code']) && $_POST['code']!=""){
$code = $_POST['code'];
$result = mysqli_query($con,"SELECT * FROM `products` WHERE `code`='$code'");
$row = mysqli_fetch_assoc($result);
$name = $row['name'];
$code = $row['code'];
$price = $row['price'];
$image = $row['image'];
$size = $row['size'];

$cartArray = array(
  $code=>array(
  'name'=>$name,
  'code'=>$code,
  'price'=>$price,
  'size'=>$size,
  'quantity'=>1,
  'image'=>$image)
);

if(empty($_SESSION["shopping_cart"])) {
  $_SESSION["shopping_cart"] = $cartArray;
  $status = "<div class='status-msg'> $name is added in your cart !</div>";
}else{
  $array_keys = array_keys($_SESSION["shopping_cart"]);
  if(in_array($code,$array_keys)) {
    $status = "<div class='status-msg-a' > Product is already added in your cart !</div>";  
  } else {
  $_SESSION["shopping_cart"] = array_merge($_SESSION["shopping_cart"],$cartArray);
  $status = "<div class='status-msg'> $name is added in your cart !</div>";
  }

  }
}
?>
<html>
<head>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
    <link rel="stylesheet" href="vcss/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="css/bootstrap.min.js"></script>
</head>
<style type="text/css">
.float span {border-radius: 50%;  font-weight: bold; font-size: small; font-size: x-small;  position: relative;  float: right; margin-top: -3%; background: whitesmoke; padding:5px; color: orange; }
.shop { background:;  width: 92%; margin: auto; }

.shop-cart { float: left;  width: 100%; padding: 15px; background: whitesmoke;}
.cart-1{ float: right; font-size:40px; margin-right: -2%; color:skyblue; }
.cart-a { float: left; width: 20%; padding: 15px; }
.cart-b{ float: left; width: 100%; background:white; padding: 10px; }
.cart-c{ float: left; width: 100%; background:white; padding: 10px; text-align: center; font-size: small;  height: 7em; overflow-x: auto; scrollbar-width: thin; }
.cart-d { float: left; width: 100%; background: whitesmoke; text-align: center; padding: 10px; }

.status-msg {  color: #007AA5; font-size: small; width: 90%; text-align: center; padding: 9px; border-radius: 6px; margin: auto; border:  1px solid #007AA5; margin:  auto;}

.status-msg-a {  color: orange; font-size: small; width: 90%; text-align: center; padding: 9px; border-radius: 10px; margin: auto; border:  1px solid orange; margin:  auto;}

.name { color: #007AA5; }
.name-a { color: #007AA5; font-size: x-small;margin-left: 2%;  }

.buy {  padding: 5px 20px ; color: #007AA5; border: 1px solid #5072A7; border-radius: 4px; }
.btn-name { border: none; background: none; }

.btn-image { border:none; background: none; width: 100%; }

.cart-b:hover { box-shadow: 1px 1px 2px 2px #7CB9E8; }
.buy:hover { background: #007AA5; color: white; }
.product-image{ float: left;  height: 5em; width: 100%; }

.float{ position:fixed; top:75%; right: 10px;   text-align:center; margin-bottom: 5%; border-radius: 5px;
      z-index:100; background:#007AA5; padding: 10px; box-shadow: 0px 1px 1px 0px white;   }
.float a {  color:orange; font-size: xx-large; text-decoration: none; }
.whatsapp { margin-top: 2%; font-size: x-large;  }

.pagination-a  { float: left;width: 100%; text-align: right; padding: 15px;} 

.btn-page  {  background: skyblue; padding: 8px 15px; border: none; text-decoration: none;}
.btn-page a  { text-decoration: none; color: white; font-weight: bold;}

.btn-page:hover  {  background:whitesmoke;  border: 1px solid  skyblue; }
.btn-page a:hover  { text-decoration: none; color: skyblue; }
.no-results { color: orange; margin-left: 2%; }

@media screen and (max-width:600px) {
  .cart-a {  width: 50%; float: left; padding: 5px; }
  .shop {  width: 100%; margin: auto; }

 }  
</style>


<body>


<nav class="shop">

<div class="shop-cart">

<?php
if(!empty($_SESSION["shopping_cart"])) {
$cart_count = count(array_keys($_SESSION["shopping_cart"]));
?>


<nav  class="float"><a href="cart.php" > <i class="fa fa-shopping-cart "></i><span><?php echo $cart_count; ?></span> </a><br>

<a href="https://api.whatsapp.com/send?phone=51955081075&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20Varela%202."target="_blank">
<i style="color:#25d366;" class="fa fa-whatsapp whatsapp"></i>
</a>
 </nav>



<div> <?php echo $status; } ?></div>



    <?php   $item = "";

     if (isset($_POST['search'])) {

        $item = mysqli_real_escape_string($conn, $_POST['search-item']);
        
    } 


     if ((isset($_GET['pageno'])) ){
            $pageno = $_GET['pageno'];
                    }  
        else {  $pageno = 1;  }

        $no_of_records_per_page = 15;
        $offset = ($pageno-1) * $no_of_records_per_page;
   //echo $item;
        $total_pages_sql = "SELECT COUNT(*) FROM products WHERE name LIKE '%{$item}%'";
        $result = mysqli_query($conn,$total_pages_sql);
        $total_rows = mysqli_fetch_array($result)[0];
        $total_pages = ceil($total_rows / $no_of_records_per_page);

        $sql = "SELECT * FROM products WHERE name LIKE '%{$item}%' LIMIT $offset, $no_of_records_per_page";
        $res_data = mysqli_query($conn,$sql); $rowcount=mysqli_num_rows($res_data); // echo $rowcount;
            while($row = mysqli_fetch_assoc($res_data)){
    echo "<div class='cart-a'>" ;
    echo "<div class='cart-b'>" ;

    echo "<form method ='post'> 
          <input type='hidden' name='code-info' value=".$row['code']." />
          <button class='btn-image' type='submit' name='info'> <img class='product-image'  src='product-images/".$row['image']."' /> </button>
          </form>";

   // echo"<img class='product-image' onclick='openInfo()' src='product-images/".$row['image']."' />";
    echo "<div class='cart-c'>" ;
    
    echo"<a> 
    <form method ='post'> 
    <input type='hidden' name='code-info' value=".$row['code']." />
    <button class='btn-name' type='submit' name='info'  > <a class='name'>".$row['name']."</a></button>
    </form>
    </a>";

    echo"<form method='post' action=''>";
    echo"<input type='hidden' name='code' value=".$row['code']." />";  ?>

    <?php $p = $row['price_1'];  if ( $p == 0) { 
       echo "<p>Ksh ".$row['price'].".00 </p>";}
       else {echo "<p> <a>Ksh ".$row['price_1'].".00 </a>";
       echo "<a class='name-a'> <s>Ksh ".$row['price'].".00</s></a>";
     } 
     ?>

    <?php
    echo"</div>";
    echo "<div class='cart-d'>" ;
    echo"<button type='submit' class='buy'>Buy Now</button>";
    echo"</div>";
    echo"</div>";
    echo"</form>";
    echo"</div>";

      
       } if ( $rowcount ===  0){  echo "<p class='no-results'> No items for search of [ $item ] </p>"; }

        mysqli_close($conn);
    ?>
    <nav class="pagination-a">

       
         <button class="btn-page">
        <a class="<?php if($pageno <= 1){ echo 'disabled'; } ?>">
            <a href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
        </a> </button>

         <button class="btn-page">
            <a class="<?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
            <a href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a></a>
         </button>
            
     
    </nav>


</div>

</nav>
</body>

</body>
</html>


<script>
function openInfo() {   document.getElementById("product_info").style.display = "block"; }
function closeInfo() {   document.getElementById("product_info").style.display = "none";  }
</script>

<style type="text/css">
* {box-sizing: border-box;}

.info-popup {  display: none;  position:fixed;  top: 0;  z-index: 9; margin-top: 5%;  width: 100%; }

.info-info { float: left; width: 100%; background: white;  box-shadow: 2px 1px 2px 2px gray; color:#36454F; }


.info {  padding: 15px;  width: 50%; margin: auto; }
.infoinfo { padding: 5px; float: left; width: 100%; height:20em;  overflow-x: auto; scrollbar-width: thin;}

.info-a { float: left; width: 40%; padding: 15px;  }
.info-b { float: left; width: 60%; padding: 15px; font-size: small; }

.info-a p {  font-size: small; text-align: left; }
.info-head { float: left; width: 100%; padding: 15px; background: whitesmoke; color: #7CB9E8; font-weight: bold; }

.fa-close { float: right; font-size: xx-large; color: red; margin-top: -2%; }
.image-info { float: left; width: 100%; height: 8em;margin-bottom: 3%; } 

@media screen and (max-width:600px) {
  .info-popup{ width: 100%; margin-bottom: 10%;  bottom: 0;}
  .info {  padding: 15px;  width: 90%; margin: auto; }
  .info-a, .info-b { float: left; width: 100%; }
  .infoinfo { float: left; width: 100%;  height: 90%;  overflow-x: auto; scrollbar-width: thin;}


  }

</style>



<div class="info-popup" id="product_info">
<nav class="info">

<?php   
if (isset($_POST["info"])) {
$code = $_POST['code-info'];
//echo $code;
$res = mysqli_query($con,"SELECT * FROM `products` WHERE `code`='$code'");
$r = mysqli_fetch_object($res);
echo "<script type= 'text/javascript'> openInfo() </script>";

}

 ?>

<nav class="info-info">  
 <nav class="info-head"> <a>Product Info :  <i onclick='closeInfo()' class="fa fa-close"></i></a> </nav>
 <div class="infoinfo">
    <nav class="info-a"> 
     
    <img src="product-images/<?php echo $r->image; ?>" class="image-info">
    <p> <?php echo $r->name; ?> </p>
    <p> <?php echo $r->size; ?></p>
    <p> <?php $p= $r->price; $o_p= $r->price_1; if ($o_p > 0){ echo" <a style='font-weight:bold';>Now </a> Ksh $o_p /=";  echo "<a style='margin-left:5%; font-weight:bold'>  Before </a> <s> Ksh $p /= </s>  ";  } else { echo "Ksh $p.00"; } ?>  </p>

    <p>Items in store - <?php echo $r->quantity; ?> </p>


    </nav>
<nav class="info-b">

<b>Description</b>

<p> <?php echo $r->description; ?></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque 
ultricies, eget elementum magna tristique. Quisque vehicula, risus eget 
aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in 
velit. Praesent scelerisque tortor sed accumsan convallis.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque 
ultricies, eget elementum magna tristique. Quisque vehicula, risus eget 
aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in 
velit. Praesent scelerisque tortor sed accumsan convallis.</p>



</nav>
</div>

</nav>

</nav>
</div>
