<?php
  require_once("../../session_check.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"]);

  $retrieveObj=new RETRIEVE();

  //get last inserted item
  $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");
  $product_image=$get_product->p_image;
?>




<h4 class="page-title">
  <span class="la la-cubes"></span>
  Products
</h4>
<p><a href="#" class="bold" onclick="products_view()">Products</a> <span class="fas fa-angle-right"></span> Edit product : <i><?php echo $get_product->p_name; ?></i> </p>
<div class="content-wrapper ">
    <div class="row">
        <div class="col-md-12">
          <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active" id="nav-information-tab" data-toggle="tab" href="#nav-information" role="tab" aria-controls="nav-information" aria-selected="true">Information</a>
              <a class="nav-item nav-link" id="nav-main-image-tab" data-toggle="tab" href="#nav-main-image" role="tab" aria-controls="nav-main-image" aria-selected="false">Main image</a>
              <a class="nav-item nav-link" id="nav-supporting-images-tab" data-toggle="tab" href="#nav-supporting-images" role="tab" aria-controls="nav-supporting-images" aria-selected="false">Supporting images</a>
            </div>
          </nav>
          <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-information" role="tabpanel" aria-labelledby="nav-information-tab">
                <div class="mx-auto card p-2">
                  <form id="edit_product_form" class="row">
                    <div class="col-md-4">
                      <div class="my-2">
                        <input class="form-control" type="text" name="product_name" placeholder="Product name" value="<?php echo $get_product->p_name ?>">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="my-2">
                        <?php 
                          $food_product_selected_status="";
                          $chemical_product_selected_status="";
                          $tech_product_selected_status="";

                          if($get_product->p_category=="food_product"){
                            $food_product_selected_status=" selected ";
                            $chemical_product_selected_status="";
                            $tech_product_selected_status="";
                          }else if($get_product->p_category=="chemical_product"){
                            $food_product_selected_status="";
                            $chemical_product_selected_status=" selected ";
                            $tech_product_selected_status="";
                          }else if($get_product->p_category=="tech_product"){
                            $food_product_selected_status="";
                            $chemical_product_selected_status="";
                            $tech_product_selected_status=" selected ";
                          }
                        ?>
                        <select class="form-control" name="product_category">
                          <option <?php echo $food_product_selected_status; ?> value="food_product">Food product</option>
                          <option <?php echo $chemical_product_selected_status; ?> value="chemical_product">Chemical product</option>
                          <option <?php echo $tech_product_selected_status; ?> value="tech_product">Tech product</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="my-2">
                        <input class="form-control" type="text" name="price" placeholder="Price" value="<?php echo $get_product->p_price ?>">
                      </div>
                    </div>

                    <div class="col-md-12 pt-3">
                      <label for="product_description">Product Description :</label>
                      <textarea class="form-control" name="product_description" id="product_description"><?php echo $get_product->p_description ?></textarea>
                    </div>
                    <div class="col-md-12">
                      <div class="my-2" id="edit_product_response">
                        
                      </div>

                      <div class="my-2">
                        <input type="hidden" name="edit_product_note" value="<?php echo $get_product->p_id ?>">
                        <button type="submit" class="btn btn-primary btn-block enter-btn" onclick="edit_product()">Update</button>
                      </div>
                    </div>
                  </form>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-main-image" role="tabpanel" aria-labelledby="nav-main-image-tab">
                <div class="mx-auto" style="max-width: 500px;">
                  <span class="hand_cursor mx-auto" data-toggle="collapse" data-target="#update_profile_container" id="profilePhotoContainer">
                      <?php 
                        if(!empty($get_product->p_image)){
                          echo '<img id="product_picture" src="../img/products/'.$get_product->p_image.'?timestamp'.time().'" alt="..." style="max-height:250px" class="rounded mb-2 img-thumbnail" > ';
                        }else{
                          echo "<span class='fas fa-image fa-5x text-dark bg-light shadow-sm rounded border border-white' style='padding:8px 10px;'></span>";
                        }
                      ?>
                  </span>
                  <div id="update_profile_container" class="collapse" >
                    <span class="btn btn-primary btn-file my-1">
                        <input type="file" id="upload_image">
                    </span>
                  </div>
                  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" id="uploadimageContainer" style="display: none;">
                    <div class="row">
                            <div class="col-md-8 text-center">
                              <div id="image_demo" style="width:350px; margin-top:30px"></div>
                            </div>
                            <div class="col-md-4" style="padding-top:30px;">
                              <button class="btn btn-block btn-primary crop_image my-1">Update</button>
                          </div>
                        </div>
                  </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-supporting-images" role="tabpanel" aria-labelledby="nav-supporting-images-tab">
                <div class="container-fluid">
                  <div class="text-right">
                    <form class="text-right" id="add_more_product_supporting_images_form" enctype="multipart/form-data">
                      <input type="hidden" name="add_more_product_supporting_images_note" value="<?php echo $p_id ?>">
                      <a class="btn btn-file text-primary hand_cursor" href="#!" data-toggle="collapse" data-target="#supporting_images_container_">
                        <span class="fas fa-plus"></span> 
                          add supporting image
                      </a>
                      <div class="p-2 collapse bg-white rounded" id="supporting_images_container_">
                        <div class="text-center">
                          <h6 class="lead text-center">Add supporting images</h6>
                        </div>
                        <div class="input-group">
                          <label class="input-group-append mt-2">Select Images : &nbsp;</label>
                          <input class="form-control form-control-sm" type="file" multiple name="upload_other_images[]" id="upload_other_images" onchange="add_more_product_supporting_images(<?php echo $p_id ?>)">
                        </div>
                      </div>
                    </form>
                  </div>
                  <div id="add_more_product_supporting_images_response">
                    
                  </div>
                  <div id="supporting_images_container" class="my-2 bg-white p-2">
                    
                  </div>
                </div>
            </div>
          </div>   
        </div>
    </div>
</div>

<script>  
  var editor = new Simditor({
    textarea: $('#product_description')
    //optional options
  });
  
  var product_image='<?php echo $product_image ?>';
  $(document).ready(function(){
    view_product_supporting_images(<?php echo $p_id ?>)
    

    var d=new Date();
    var upload_btn_action=$(this).text();
    var image_crop = $('#image_demo').croppie({
      enableExif: true,
      viewport: {
        width:200,
        height:200,
        type:'square' //circle
      },
      boundary:{
        width:300,
        height:300
      }
    });
    


    $('#upload_image').on('change', function(){
      var reader = new FileReader();
      reader.onload = function (event) {
        image_crop.croppie('bind', {
          url: event.target.result
        }).then(function(){
          console.log('jQuery bind complete');
        });
      }
      reader.readAsDataURL(this.files[0]);
      $('#uploadimageContainer').show();
      $('html, body').animate({
          scrollTop: $("#uploadimageContainer").offset().top
      }, 1000);
    });

    $('.crop_image').click(function(event){
      $.LoadingOverlay("show");
      upload_btn_action=$(this).text();
      image_crop.croppie('result', {
        type: 'canvas',
        size: "original", 
        format: "png",
        quality: 1
      }).then(function(response){
        $.ajax({
          url:"includes_/products/upload_product_main_image_edit.php",
          type: "POST",
          data:{"image": response,p_id:<?php echo $p_id ?>},
          
          cache: false,
             
          success:function(data)
          { 
            $.LoadingOverlay("hide", true); 
            //$('#uploadimageContainer').modal('hide');
            if(data==1){
              $("#product_picture").attr("src","../img/products/"+product_image+"?timestamp"+d.getTime())
              $("#uploadimageContainer").hide()
            }
          }
        });
      })
    });

  });  
</script>