<?php include '_header.php'; ?>
<style>
.card-body {
    /* -ms-flex: 1 1 auto;
    flex: 1 1 auto; */
    min-height: 1px;
    display: grid;
    padding: 0.25rem;
}
.stars{
  color: #ffa500;
}
.container {
  background: black;
}
.nav-active{
  background-color: #d5d5d5;
    color: black;
}
body{
  background-color: #0e0e0e !important;
}
</style>
  <div class="container p-0 position-relative " >
<div class="product-h1 p-3" style="min-height: 1154px;">
  <h1 class="text-left mt-2 mb-0 ml-5" style="color: #dc960f;"></h1>
  <header class="header-line position-relative d-flex mb-4">
        <h3 class="pr-3" style="background: black; z-index: 10;">
          <span class="text-responsive" style="color:#dc960f;">THAISOHO HILIGHT</span>
          <div class="text-right" style="color: #dc960f; font-size: 16px;">Recommaned product</div>
        </h3>
  </header>
  <div class="row justify-content-center m-0" style="">
    <div class="col-12 text-right mb-3">
      <div class="form-inline">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0 " style="background-color: #fff0!important;">
            <li class="breadcrumb-item "><a style="color: #dc960c;" href="index.php">REFERENCE SITE</a></li>
            <li class="breadcrumb-item "><a style="color: #dc960c;" href="hilight.php">HILIGHT PROJECT</a></li>
          </ol>
        </nav>
        <a href="index.php" class="btn ml-auto btn-warning"> <i class="fa  fa-chevron-double-left"></i> BACK</a>
      </div>
    </div>
    <?php
    $i = 0;
    $perpage = 12;
    if (isset($_GET['page'])) {
     $page = $_GET['page'];
     } else {
     $page = 1;
     }
    $start = ($page - 1) * $perpage;
    $query_product = mysqli_query($dbc , "SELECT * FROM product ORDER BY created_at desc limit {$start} , {$perpage} ");
    while ($result = mysqli_fetch_assoc($query_product)) {?>
    <div class="col-sm-12 col-lg-3">
      <div class="card m-3">
        <div class="card-body product">
          <a href="hilight_details.php?id=<?=$result['id']?>"><img src="Admin/uploads/<?=$result['picture']?>" width="100%"  ></a>
          <span class="name_product pl-2 mt-3"><?=$result['product']?></span>
          <a href="hilight_details.php?id=<?=$result['id']?>"  class="btn-sm btn-warning mt-2"><i class="fa fa-search"></i> More..</a>
        </div>
      </div>
    </div>
    <?php } ?>

  <div class="col-12">
    <div class="row m-0 justify-content-center">
      <div class="col">
        <nav class="" aria-label="Page navigation example">
        <ul class="pagination m-auto">
          <li class="page-item"><a class="page-link" href="hilight.php?page=1">Back</a></li>
          <?php
          $query_product2 = mysqli_query($dbc , "SELECT * FROM product order by created_at desc");
          $total_record = mysqli_num_rows($query_product2);
          $total_page = ceil($total_record / $perpage);
          for ($i=1; $i < $total_page; $i++) { ?>
            <li class="page-item "><a class="page-link <?=$i == $_GET['page'] ? "nav-active" : NULL?>" href="hilight.php?page=<?=$i?>"><?=$i?></a></li>
        <?php } ?>
          <li class="page-item"><a class="page-link" href="hilight.php?page=<?=$total_page?>">Next</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>
  </div>
</div>
</div>
<?php include '_footer.php'; ?>

  </body>
</html>