<?php $this->load->view('meta') ?>
  <div class="wrapper">
<?php $this->load->view('sidebar') ?>
<?php $this->load->view('navbar') ?>
        <div class="container-fluid">

          <!-- DataTales Example -->
          <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
              <h6 class="m-0 font-weight-bold text-primary">Slide</h6>
              <div class="dropdown no-arrow">
	              <button class="btn btn-sm btn-success" id="btnAdd" onclick="tambah()" ><span class="fa fa-plus"></span> Tambah Data</button>
              </div>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-bordered datatable" cellspacing="0">
                  <thead>
                    <tr>
                      <th class="text-center">No</th>
                      <th class="text-center">Gambar</th>
                      <th class="text-center">Status</th>
                      <th class="text-center">Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                  <?php
            		  $no=1;
            		  foreach ($slide as $slide){
                    $status=$slide->status_slide;
                    if ($status==1){
                        $status="Aktif";
                    }else{
                        $status="Non Aktif";
                        
                    }
            		  ?>
                    <tr>
                        <td class="text-center"><?php echo $no ?></td>
                        <td class="text-center"><img style="width: 100px" src="assets/images/slide/<?php echo $slide->gambar_slide ?>"></td>
                        <td><?php echo $status ?></td>
                        <td class="center">
                            <button type="button" id="edit<?= encrypt($slide->id_slide) ?>" class="btn btn-success btn-sm" data-toggle="tooltip" title="Ubah" onclick="ubah('<?= encrypt($slide->id_slide) ?>')"><i class="fas fa-fw fa-pencil-alt"></i></button>
                            <button type="button" class="btn btn-danger btn-sm" data-toggle="tooltip" title="Hapus" onclick="hapus('<?= encrypt($slide->id_slide) ?>')"><i class="fas fa-fw fa-trash-alt"></i></button>
                        </td>
                    </tr>
                  <?php
        				  $no++;
        				  }
        				  ?>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

        </div>


    <!-- Modal -->
    <div id="modalAdd" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
                <!-- Modal content-->
            <div class="modal-content">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Tambah Slide</h6>
                      <div class="dropdown no-arrow">
	                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                </div>
                <form id="formAdd" class="form-horizontal" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                    <div class="container-fluid">
				      <div class="row">
                          <div class="col-md-3">Gambar</div>
                          <div class="col-md-8">
                            <input type="file" name="gambar_slide" id="gambar_slide_add" class="form-control" onchange="return validasiFile()" />
                          </div>
                      </div>
                      <div class="row">
                        <div class="col-md-3"></div>
                          <div class="col-md-8">
                            <div id="pratinjauGambar"></div>
                            <br/>
                          </div>
                        <br/>
                      </div>
                      <div class="row">
                          <div class="col-md-3 control-label">Status</div>
                          <div class="col-md-8">
                              <select name="status_slide" class="form-control">
                                  <option value="1">Aktif</option>
                                  <option value="0">Non Aktif</option>
                              </select>
                          </div>
                      </div> 

                    </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
                        <button id="btnSubmitAdd" type="submit" class="btn btn-success">Submit</button>
                    </div>
                </form>
            </div>
        </div>                    
    </div>
    
    
    <div id="modalEdit" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
                <!-- Modal content-->
            <div class="modal-content">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Edit Slide</h6>
                      <div class="dropdown no-arrow">
	                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                </div>
                <form id="formEdit" class="form-horizontal" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="id_slide" id="id_slide" class="form-control" required />
                    <div class="modal-body">
                    <div class="container-fluid">
                      <div class="row">
                          <div class="col-md-3">Gambar</div>
                          <div class="col-md-8">
                            <input type="file" name="gambar_slide" id="gambar_slide_edit" class="form-control" onchange="return validasiFileEdit()" />
                          </div>
                      </div>
                      <div class="row">
                        <div class="col-md-3"></div>
                          <div class="col-md-8">
                            <div id="pratinjauGambarEdit"></div>
                            <br/>
                          </div>
                        <br/>
                      </div>
                      <div class="row">
                          <div class="col-md-3 control-label">Status</div>
                          <div class="col-md-8">
                              <select name="status_slide" id="status_slide" class="form-control">
                                  <option value="1">Aktif</option>
                                  <option value="0">Non Aktif</option>
                              </select>
                          </div>
                      </div> 
                    </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
                        <button id="btnSubmitEdit" type="submit" class="btn btn-success">Submit</button>
                    </div>
                </form>
            </div>
        </div>                    
    </div>
                        
                        
                        
    <?php $this->load->view('footer') ?>
  </div><!-- ./wrapper -->
  <?php $this->load->view('js') ?>
	<!-- DATA TABLES-->
  <script>
  	function tambah(){
		$('#btnAdd').html('<i class="fa fa-spinner spinner"></i> Loading...');
		$('#formAdd')[0].reset();

		$('#btnAdd').html('<span class="fa fa-plus"></span> Tambah Data');
		$('#modalAdd').modal('show');
	}
	
	$('#formAdd').submit(function(e){
		e.preventDefault();
		//var data = $(this).serialize();
		$('#btnSubmitAdd').html('<i class="fa fa-spinner spinner"></i> Loading...');
		$('#btnSubmitAdd').attr('disabled', true);
    var formData = new FormData($(this)[0]);

		$.ajax({
			type : 'post',
      enctype: 'multipart/form-data',
			url : '<?php echo base_url(); ?>slide/add',
			data : formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false
		}).done(function(res){
			$('#btnSubmitAdd').html('Submit');
			$('#btnSubmitAdd').removeAttr('disabled');
			if(res=='1'){
				$("#modalAdd").modal('toggle');
			  swal({
				title: 'Data Behasil Ditambah',
				text: 'Data berhasil disimpan ke database.',
				type: 'success',
				closeOnConfirm: false
			  }, function(isConfirm){
				if(isConfirm){
				  location.reload();
				}
			  })
			}else{
				swal("Kesalahan!", "Masukkan data dengan lengkap!", 'error');
			}
		}).fail(function(res){
			console.log(res);
		});
	});
	
	function ubah(id){
		$('#edit'+id).html('<i class="spinner fa fa-spinner"></i>');
		$('#formEdit')[0].reset();
		$.ajax({
			type: 'post',
			url: '<?php echo base_url(); ?>slide/get_data',
			data: 'id='+id
		}).done(function(res){
			var data = $.parseJSON(res);
      $('#status_slide').val(data.status_slide);
//      $('#pratinjauGambarEdit').attr('src','assets/images/slide/'+data.gambar_slide);
      document.getElementById('pratinjauGambarEdit').innerHTML = '<img src="assets/images/slide/'+data.gambar_slide+'" width="100%"/>';
			$('#id_slide').val(id);

			$('#edit'+id).html('<i class="fas fa-fw fa-pencil-alt"></i>');
			$('#modalEdit').modal('show');

		}).fail(function(res){
			console.log(res);
		});
	}
	
	
	$('#formEdit').submit(function(e){
		e.preventDefault();
		//var data = $(this).serialize();
		$('#btnSubmitEdit').html('<i class="spinner fa fa-spinner"></i> Loading...');
		$('#btnSubmitEdit').attr('disabled', true);
    var formData = new FormData($(this)[0]);
		$.ajax({
			type : 'post',
			url : '<?php echo base_url(); ?>slide/update',
			data : formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false
		}).done(function(res){
			$('#btnSubmitEdit').html('Submit');
			$('#btnSubmitEdit').removeAttr('disabled');
			if(res=='1'){
				$("#modalEdit").modal('toggle');
			  swal({
				title: 'Data Behasil Diubah',
				text: 'Data berhasil disimpan ke database.',
				type: 'success',
				closeOnConfirm: false
			  }, function(isConfirm){
				if(isConfirm){
				  location.reload();
				}
			  })
			}else{
			swal("Kesalahan!", "Masukkan data dengan lengkap", 'error');
			}
		}).fail(function(res){
			console.log(res);
		});
	});


	function hapus(code){
            swal({
                    title: "Apakah anda yakin?",
                    text: "Data akan dihapus permanen dari Database!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#EF5350",
                    confirmButtonText: "Hapus",
                    cancelButtonText: "Batal",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true
                },
                function(){
                      $.ajax({
                        type: 'post',
                        url: '<?php echo base_url(); ?>slide/delete',
                        data: {
                          submit: true,
                          id: code
                        }
                      }).done(function(){
                        swal({
                            title: "Berhasil",
                            text: "Data Berhasil Dihapus",
                            type: "success",
                            showCancelButton: false,
                            closeOnConfirm: true
                        },
                        function(isConfirm){
                            if (isConfirm) {
                            location.reload();
                            }
                        });
                    });
                }
            );
          }
  </script>
<script type="text/javascript">
  function validasiFile(){
    var inputFile = document.getElementById('gambar_slide_add');
    var pathFile = inputFile.value;
    var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!ekstensiOk.exec(pathFile)){
        alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
        inputFile.value = '';
        return false;
    }else{
        //Pratinjau gambar
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('pratinjauGambar').innerHTML = '<img src="'+e.target.result+'" width="100%"/>';
            };
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
}


  function validasiFileEdit(){
    var inputFile = document.getElementById('gambar_slide_edit');
    var pathFile = inputFile.value;
    var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!ekstensiOk.exec(pathFile)){
        alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
        inputFile.value = '';
        return false;
    }else{
        //Pratinjau gambar
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('pratinjauGambarEdit').innerHTML = '<img src="'+e.target.result+'" width="100%"/>';
            };
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
}
</script>
</body>
</html>
