<?php
  require_once("../../classes/main_classes.php");

  //OBJECTS
  $retrieveObj=new RETRIEVE();

  $get_products=$retrieveObj->retriever("products
    JOIN product_images ON product_images.p_id=products.p_id
    ","*","product_images.p_image_type='primary_image' and p_category","food_product","fetchAll");

?>

<table class="table table-borderless table-striped" id="food_products_table">
  <thead>
   <tr>
     <th></th>
   </tr>
  </thead>
  <tbody>
    <?php
      if($get_products!="1020"){
        foreach ($get_products as $product) {
      ?>
          <tr>
            <td>
              <!-- Custom content-->
              <div class="media align-items-lg-center flex-column flex-lg-row p-3">
                <div class="media-body order-2 order-lg-1">
                    <div class="row">
                      <div class="col-12 col-sm-4 col-md-3 col-lg-3">
                        <a href="<?php echo 'img/products/'.$product->p_image.'?timestamp'.time() ?>" class="fancybox" rel="ligthbox">
                          <img style="max-height: 170px;" src="img/products/<?php echo $product->p_image ?>" alt="Peanut Butter Photo" width="200" class="ml-lg-5 order-1 order-lg-2">
                        </a>
                      </div>
                      <div class="col-12 col-sm-8 col-md-9 col-lg-9">
                        <h5 class="mt-0 font-weight-bold mb-2"><?php echo $product->p_name ?></h5>
                        <div class="d-flex align-items-center justify-content-between mt-1">
                            <h6 class="font-weight-bold my-2">MK <?php echo number_format($product->p_price) ?></h6>
                        </div>
                        <div class="font-italic text-muted mb-0 small view-6-lines"><?php echo $product->p_description ?></div>
                        <p class="mt-2">
                          <button class="btn btn-info" onclick="food_product_details_view(<?php echo $product->p_id ?>)">Read more</button>
                        </p>
                        
                      </div>
                    </div>
                </div>
              </div>
            </td>
          </tr>
      <?php
        }
      }else{
        echo "<p class='alert alert-info tect-center'>Our food products will be here soon</p>";
      }
    ?>
  </tbody>
</table>

 <script type="text/javascript">
  $(document).ready(function () {
     //fancy box
        $(".fancybox").fancybox({
              openEffect: "none",
              closeEffect: "none"
          });
          
          $(".zoom").hover(function(){
          
          $(this).addClass('transition');
        }, function(){
              
          $(this).removeClass('transition');
        });

    var table = $('#food_products_table').DataTable({
      columnDefs: [
        {bSortable: false, targets: [0]} 
      ]
    });
   
  })
</script>