<?php require_once('../auth/auth.php'); ?>  
<section class="content">
 <div class="container-fluid">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <div class="card card-primary card-outline direct-chat direct-chat-primary shadow-none" style="border-left:1px solid #969c9d;border-right:1px solid #969c9d;border-bottom:1px solid #969c9d;">
        <div class="card-header" style="padding: 3px 8px;">
          <h3 class="card-title"> Eco Slider  </h3>
          <div class="card-tools">
     
            <button type="button" class="btn btn-tool" data-card-widget="remove" data-dismiss="modal">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>    
            <div class="card-body p-1 table-responsive cscroll" id="b_statment" style="max-height: 450px;">
               <div id="image_data"></div>
        </div>
    </div>
</div>

    <div class="col-md-4"></div>

</div>
</div>

</section>

<div id="imageModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"></h4>
   </div>
   <div class="modal-body">
    <form id="image_form" method="post" enctype="multipart/form-data">

   <div class="col-md-12">
                    <div class="form-group">
                       <label><?php echo 'Select Your image';?></label>
                        <input type="file" name="image" id="image" class="form-control form-control-sm" required="true" style="height:29px;line-height:13px;">
                    </div>
                 </div> 




     <input type="hidden" class="form-control form-control-sm" name="action" id="action" value="insert" />
     <input type="hidden" class="form-control form-control-sm" name="image_id" id="image_id" />

<center> <input type="submit"  name="insert" id="insert" value="Insert" class=" btn btn-success  btn-xs" /></center>
    

    </form>
   </div>

  </div>
 </div>
</div>
 
<script>  
$(document).ready(function(){
   fetch_data();
    function fetch_data(){
	  var action = "fetch";
	  $.ajax({
	    url:"../eco/action.php",
	    method:"POST",
	    data:{action:action},
	    success:function(data){ $('#image_data').html(data);}
	  });
    }



 $('#image_form').submit(function(event){
  event.preventDefault();
  var image_name = $('#image').val();
  if(image_name == ''){ alert("Please Select Image"); return false; }else{
   var extension = $('#image').val().split('.').pop().toLowerCase();
   if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1){ alert("Invalid Image File");$('#image').val(''); return false;
    }else {
	    $.ajax({
	    url:"../eco/action.php",
	     method:"POST",
	     data:new FormData(this),
	     contentType:false,
	     processData:false,
	     success:function(data)
	     {
	      alert(data);
	      fetch_data();
	      $('#image_form')[0].reset();
	      $('#imageModal').modal('hide');
	     }
	    });
	   }

  }
 });
 $(document).on('click', '.update', function(){
  $('#image_id').val($(this).attr("id"));
  $('#action').val("update");
  $('.modal-title');
  $('#insert').val("Update");
  $('#imageModal').modal("show");
 });

});  
</script>
