
<?php
include('../config/constant.php');
include('../includes/header.php');
include('../includes/navbar.php');
 
                   require_once '../config/db.php';
                   require_once '../config/database.class.php';
                   require_once '../config/functions.php';
                   $d = new database($db_config);
?>
<style type="text/css">
.modal-dialog{max-width:760px};  
</style>
<!-- Begin Page Content-->
<div class="container-fluid">
    


  <!-- Button trigger modal -->

  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h5 class="m-0 font weight-bold text-primary">blog</h5>
      </div>
          
      
          <div class="card-body">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#blogModal" style="float: right">
          Add blog
        </button>
        <br/>
        <br/>
        <br/>

            <div class="table-responsive">
              <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th></th>
                    <th>Product</th>
                    <th>Image</th>
                    <th>Created_at</th>
                    <th>Updated_at</th>
                     <!--<th>Update</th>-->
                    <th>EDIT</th>
                    <th>DELETE</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- append using getAllServices() function -->
                </tbody>
              </table>   
            </div></div>
            
            
            
            
              <div class="modal-body">
                <form action="../blog/add_blog.php" id="addblogForm" method="POST" enctype="multipart/form-data">

        <div class="modal fade" id="blogModal" tabindex="1" role="dialog" aria-labelledby="examplemodalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">blog</h5>
                <button type="button" class="close closebtn" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>

              <div class="modal-body">
                    <div class="form-group">

                      <input type="hidden" name="id" id="id" class="form-control" placeholder="Enter Id">
                    </div>
                 
                    <!--<div class="form-group">
                    <!--  <label>blog</label>-->
                    <!--  <select class="form-control" id="blog" name="blog">-->
                                    
                    <!--               </select>-->
                    <!--               </div>-->
                     <div class="form-group">
                      <label>Title</label>
                      <input type="text" name="title" id="title" class="form-control" placeholder="Enter Title">
                    </div>
                     <div class="form-group">
                      <label>Subtitle</label>
                      <input type="text" name="subtitle" id="subtitle" class="form-control" placeholder="Enter Subtitle">
                    </div>
                    
                    
                     
                  <div class="form-group">
                      <label>Description</label>
                    <textarea style="resize: none; min-height:150px; min-width:430px;" name="description" id="description"></textarea>
                  </div>
                       <div class="form-group">
                        <label for="image">Select image:</label>
                        <img src='' style='max-height:200px;' id='image'>
                      <input type="file" id="image" name="image">
                    </div>
                   
                  </div>
                 <div class="modal-footer">
                    <button type="button" class="btn btn-secondary closebtn" data-dismiss="modal">Close</button>
                    <button type="submit" name="registerbtn" class="registerbtn btn-primary btn" onclick="saveblog();" >Save</button>
                  </div>
                </div>
             </form>
              </div>
            </div>
          </div>
          
          </div>
          <!-- End of Main Content -->


          <?php
          include('../includes/scripts.php');
          include('../includes/footer.php');
          ?>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" ></script>
                    <script>
          $(document).ready(function() {            
            $(".closebtn").click(function() {
             location.reload(true);
            });
          });  
          </script>
          <script>
$(document).ready(function() {
	$('#catid').on('change', function() {
			var catid = this.value;
			$.ajax({
				url: "get_blog.php",
				type: "POST",
				data: {
					catid: catid
				},
				cache: false,
				success: function(dataResult){
					$("#blog").html(dataResult);
				}
			});
		
		
	});
});
</script>
          <script type="text/javascript">
            $(document).ready(function(){
              getAllblog();
            });

            function saveblog(){
              var options = {
                beforeSend: function () {
              //anything before sending request eg loader etc....
            },
            success: function (res) {
              // once receive response from backend
              //parese json
              var json = $.parseJSON(res);
              if(json.status=='success'){
                alert(json.message);
                $('#blogModal').modal('hide');
                $('#id').val('');
                $('#title').val('');
                $('#subtitle').val('');
                $('#description').val('');
                $('#image').val('');
                getAllblog();
              }
              else{
                alert(json.message);
              }
              
            },
            error: function (response) {

            }        
          };
          $('#addblogForm').ajaxForm(options);
        }


        function editblog(id){
// alert(id);
$('#blogModal').modal('show');
$('#id').val(id);

$.ajax({
  type: "POST",
  data: 'id=' + id,
  url: '../blog/get_blog_by_id.php',
  success: function (response) {
    console.log(response)
    var json = $.parseJSON(response);

    $('#id').val(json[0].id);
    $('#title').val(json[0].title);
    $('#subtitle').val(json[0].subtitle);
   //$('#description').val(json[0].description);
   $('#description').summernote('editor.pasteHTML', json[0].description);
     $('#image').attr("src",'../uploads/'+json[0].image); 
  
  }
});
}

function deleteblog(id){
  if(confirm("Are you sure to delete")){


   $.ajax({
    type: "POST",
    data: 'id=' + id,
    url: '../blog/delete_blog.php',
    success: function (response) {
      console.log(response)
      var json = $.parseJSON(response);

      if(json.status=='success'){
        alert(json.message);
         getAllblog();
      }
      else{
        alert(json.message);
      }

    }
  });
 }
}

function  getAllblog(){
  $.ajax({
    type: "POST",
    data: 'id=' + id,
    url: '../blog/get_all_blog.php',
    success: function (response) {

      var json = $.parseJSON(response);
      var html = "";
      $('#dataTable tbody').html(html);

      for(i=0;i<json.length;i++){
        html = html+`
        <tr>
        <td>`+(i+1)+`</td>
        <td>`+json[i].title+`</td>
        <td>`+json[i].subtitle+`</td>
        <td><img src = `+json[i].image+` style='max-height:100px;max-width:100px;' class='img_in_modal'></td>
        <td>`+json[i].created_at+`</td>
        <td>`+json[i].updated_at+`</td>
        <!-- <td> 
        <?php echo'<a href="viewsub.php?id=`+json[i].id+`"  class="btn btn-success" >
        <i class="align-middle" data-feather="eye"></i>Update</a>'?>
         </td>-->
        <td> 
        <button type="button" class="btn btn-success" onclick="editblog(`+json[i].id+`);">
        <span class="glyphicon glyphicon-plus"></span> Edit</button>
        </td>
        <td>
        <button type="button" class="btn btn-danger" onclick="deleteblog(`+json[i].id+`);">
        <span class="glyphicon glyphicon-plus"></span> DELETE</button>
        </td> 
        </div>
        </tr>`;
      }
      $('#dataTable tbody').html(html);
    }
  });
}



</script>
</script>
 <!-- Summernote JS - CDN Link -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#description").summernote();
            $('.dropdown-toggle').dropdown();
        });
    </script>