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

  if(!isset($_POST["p_id"])){
    die("<p class='alert alert-warning'>Invalid request</p>");
  }

  $p_id=addslashes($_POST["p_id"]);

  //OBJECTS
  $retrieveObj=new RETRIEVE();

  $get_product=$retrieveObj->retriever("products 
      JOIN product_images ON product_images.p_id=products.p_id
      WHERE products.p_status='active' and product_images.p_image_type='primary_image' and products.p_id='$p_id'","*","fetch");

?>

<style type="text/css">
.img-big-wrap img {
    height: auto;
    width: auto;
    display: inline-block;
    cursor: zoom-in;
}


.img-small-wrap .item-gallery {
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
    margin: 7px 2px;
    display: inline-block;
    overflow: hidden;
}

.img-small-wrap {
    text-align: center;
}
.img-small-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    
    cursor: zoom-in;
}
</style>

<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <p class="text-left mt-1">
      <a href="#blogs_container" class="btn btn-dark btn-sm" onclick="tech_product_list_view()">
        <span class="fa fa-arrow-left"></span>
        Back
      </a>
    </p>
  </div>
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="row">
        <!--div class="col-md-12 item-photo">
            
        </div-->
        <div class="img-small-wrap p-2">
            <a href="<?php echo 'img/products/'.$get_product->p_image.'?timestamp'.time() ?>" class="fancybox" rel="ligthbox">
                <img style="max-height: 300px;" class="mx-auto" src="img/products/<?php echo $get_product->p_image ?>" />
            </a>
            <div class="row">
                <?php
                    //get supporting images
                    $get_supporting_images=$retrieveObj->retriever("product_images","*","p_image_type='secondary_image' and p_id",$get_product->p_id,"fetchAll");
                    if($get_supporting_images!="1020"){
                        foreach ($get_supporting_images as $supporting_image) {
                ?>
                    <div class="col-lg-3 col-md-4 col-xs-6 thumb p-2">
                    <a href="<?php echo 'img/products/'.$supporting_image->p_image.'?timestamp'.time() ?>" class="fancybox" rel="ligthbox">
                        <?php echo '<img style="max-height:100px;" class="m-1 zoom img-fluid" src="img/products/'.$supporting_image->p_image.'?timestamp'.time().'"/>';  ?>
                       
                    </a>
                </div>
                <?
                        }
                ?>

                <?php
                    }
                ?>
           </div>
        </div>
                                    
        <div class="col-md-12">
            <div class="d-flex justify-content-between">
                <p class="lead"><?php echo $get_product->p_name ?></p>
                <span class="text-primary">@ MK <?php echo number_format($get_product->p_price) ?></span>
            </div>
            <div style="width:100%;border-top:1px solid silver">
               <?php echo $get_product->p_description ?>
            </div>
        </div>      
    </div>
  </div>
</div>




<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');
        });

        //-- Click on detail
        $("ul.menu-items > li").on("click",function(){
            $("ul.menu-items > li").removeClass("active");
            $(this).addClass("active");
        })

        $(".attr,.attr2").on("click",function(){
            var clase = $(this).attr("class");

            $("." + clase).removeClass("active");
            $(this).addClass("active");
        })

        //-- Click on QUANTITY
        $(".btn-minus").on("click",function(){
            var now = $(".section > div > input").val();
            if ($.isNumeric(now)){
                if (parseInt(now) -1 > 0){ now--;}
                $(".section > div > input").val(now);
            }else{
                $(".section > div > input").val("1");
            }
        })            
        $(".btn-plus").on("click",function(){
            var now = $(".section > div > input").val();
            if ($.isNumeric(now)){
                $(".section > div > input").val(parseInt(now)+1);
            }else{
                $(".section > div > input").val("1");
            }
        })                        
    }) 
</script>