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

    $retrieveObj=new RETRIEVE();

    $where_values="";

    if(isset($_POST["b_id"])){
      $b_id=addslashes($_POST["b_id"]);
      $where_values=" b_id='$b_id' and ";
    }

    //get last inserted item
    $get_blog=$retrieveObj->retriever("blog","*"," $where_values blog.user_id",$user_id,"blog.b_id","DESC","fetch");
?>

<h4 class="page-title">
  <span class="fas fa-blog"></span>
  Blog
</h4>
<p><a href="#" class="bold" onclick="blog_view()">Blog</a> <span class="fas fa-angle-right"></span> Add blog post image for <strong><?php  echo $get_blog->b_title; ?></strong></p>
<div class="content-wrapper ">
    <div class="row">
        <div class="col-md-12">
          <div class="mx-auto card p-2">
            <p class="text-center lead">Add blog post image</p>
            <div class="row my-1">
              <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="input-group bg-light">
                  <label for="upload_image" class="input-group-append pt-2 pb-0 px-2">Main image &nbsp;</label>
                  <input class="form-control" type="file" name="upload_image" id="upload_image">
                </div>  
              </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-danger crop_image my-1">Finish</button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

<script>  
  
$(document).ready(function(){

  var upload_btn_action=$(this).text();
  var image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:125,
      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();
  });

  $('.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_/blogs/upload_blog_post_image.php",
        type: "POST",
        data:{"image": response,b_id:<?php echo $get_blog->b_id ?>},
        
        cache: false,
           
        success:function(data)
        { 
          //$('#uploadimageContainer').modal('hide');
          $.LoadingOverlay("hide", true); 
           
          if(data==1){
            if(upload_btn_action=="Finish"){
              //Uploaded and finish
                $("#main_section").html("<p class='alert alert-success'>Operation successful. Redirecting...</p>");
               setTimeout(function(){ 
                  $("#main_section").load("includes_/blogs/add_blog_post_info.php");
                }, 2000);
            }
          }
            
        }
      });
    })
  });

});  
</script>
    