@extends('layouts.admin')
@section('title', 'Galeri Kegiatan')
@section('content')
<section class="content">
  <h4>Data Galeri Kegiatan</h4>
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    {{ $message }}
  </div>
  @endif
  <div class="card mt-4">
    <div class="card-header">
      <div class="d-flex flex-wrap justify-content-between">
        <span id="card_title">Data Galeri Kegiatan : 0</span>
        <div class="tools">
          <a class="btn btn-success btn-sm" href="{{route('gallery_form')}}" data-bs-toggle="tooltip" data-bs-title="Tambah Data"><i class="fas fa-plus"></i></a>
          <button class="btn btn-outline-primary btn-sm" onclick="refresh()" data-bs-toggle="tooltip" data-bs-title="Refresh Data"><i class="fas fa-sync"></i></button>
        </div>
      </div>
    </div>
    <div class="card-body ">
      <form class="mb-2" method="POST" onsubmit="refresh(); return false;" autocomplete="off">
        @csrf
        <div class="col-lg-6 col-md-12">
          <div class="row g-2">
            <div class="col-lg-9 col-md-10 col-sm-9 col-10">
              <input type="search" name="search" id="search" class="form-control" placeholder="Pencarian">
            </div>
            <div class="col-lg-3 col-md-2 col-sm-3 col-2">
              <button type="submit" onclick="refresh()" class="w-100 btn btn-outline-primary">
                <i class="fas fa-search me-sm-2"></i><span class="d-none d-sm-inline">Cari</span>
              </button>
            </div>
          </div>
        </div>
      </form>
      <table id="mytable" class="table table-hover table-bordered nowrap" width="100%" style="width:100%">
        <thead>
          <th>#</th>
          <th>Galeri Kegiatan</th>
          <th>Publish</th>
          <th>Waktu</th>
        </thead>
      </table>
    </div>
  </div>
</section>
@endsection
@section("javascript")
<script>
  // prevent form submit
  const form = document.querySelector("form");
  form.addEventListener('submit', function (e) {
    e.preventDefault();
  });
</script>
<script type="text/javascript">
  var table;
  window.onload = function(){
    $('.modal').on('show.bs.modal', function (e) {window.onbeforeunload = function (){return "";};});
    $('.modal').on('hide.bs.modal', function (e) {window.onbeforeunload = null;});
  }
  $(document).ready( function () {
    $.ajaxSetup({
      headers: {
        'X-CSRF-Token': $('meta[name="_token"]').attr('content')
      }
    });
    table = $('#mytable').DataTable({
      "destroy": true,
      "autoWidth": true,
      "processing": true,
      "serverSide": true,
      "responsive": true,
      "deferRender": true,
      "info": true,
      "searching": false,
      "lengthChange": false,
      "language": {
        "info": "_TOTAL_ Data",
        "infoFiltered": "",
        "infoEmpty": '0 Data',
        "zeroRecords": "Tidak Ada Data",
        "emptyTable": "Tidak Ada Data",
        "lengthMenu":"_MENU_ Data",
        "search": "",
      },
      "scrollX": true,
      "lengthMenu": [
        [10,20,50],
        [10,20,50],
        ],
      "infoCallback": function( settings, start, end, max, total, pre ) {
        $("#card_title").html('Data Galeri Kegiatan : '+total)
        return "Total "+ total +" Data";
      },
      "ajax": {
        url: "{{ route('gallery_list_data') }}",
        type: "POST",
        headers: {
          'X-CSRF-Token': $('meta[name="_token"]').attr('content')
        },
        data: function (d) {
          d.search = $('input[type="search"]').val();
        }
      },
      "columns": [
        { data: 'action', name: 'action', orderable: false},
        { data: 'judul', name: 'galeri_judul' },
        { data: 'published', name: 'is_publish' },
        { data: 'createdat', name: 'published_at' },
        ],
      "columnDefs":[
        { "width": "0%", "targets": 0 },
        { "width": "0%", "targets": 2 },
        { "width": "0%", "targets": 3 },
        ],
      "order": [[3, 'desc']]
    });
    $('input[type="search"]').on('change', function(e){
      refresh();
    });
  });
  var isLogin = true;
  setInterval(function(){checkSession();}, 1000*60*2);/*2 menit*/
  function checkSession(){$.ajax({url : "{{ route('hassession') }}",type: "GET",dataType: "JSON",success: function(data){if(data){isLogin = true;}else{isLogin = false;}}});}
  function refresh() {
    if(isLogin){table.ajax.reload(null, false);}else{
      $.alert({
        title: 'Session habis', content: "Silahkan login terlebih dahulu!",
        buttons:{btnOk:{text:"OK", btnClass: 'btn-primary', keys: ['enter'], action:function (argument) {window.location.href = "{{url('login_admin')}}";}}}
      });
    }
  }
  $("#myForm").on('submit', function(e){
    var formData = new FormData(this);
    $('.btnSave').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
    $('.btnSave').attr('disabled', true);
    $(document).find("span.text-danger").remove();
    $.ajax({
      type:'POST', url: "{{ route('gallery_store') }}", data: formData, cache: false, contentType: false, processData: false,
      success: (data) => {
        if(data.status){
          alertSukses('Notifikasi', data.message,'bg-success');
          $("#myModal").modal('hide');
          refresh();
        }else{
          alertSukses('Notifikasi', data.message,'bg-danger');
        }
        $(".btnSave").html('Simpan Data');
        $(".btnSave").attr("disabled", false);
      },
      error: function(data){
        $(".btnSave").html('Simpan Data');
        $(".btnSave").attr("disabled", false);
        $.each(data.responseJSON.errors,function(field_name,error){
          $(document).find('[name='+field_name+']').after('<span style="font-weight: light" class="text-danger">' +error+ '</span>');
          $('[name='+field_name+']').focus();
        });
      }
    });
  });
  function deleteFunc(id){
    $.confirm({title:"Warning!",content:"Delete data?",type:"red",backgroundDismiss:!1,backgroundDismissAnimation:"glow",buttons:{btnBatal:{text:"Cancel",btnClass:"btn-light",keys:["esc"],action:function(){}},btnHapus:{text:"Delete",btnClass:"btn-danger",keys:["enter"],action:function(){$.ajax({url:"{{ route('gallery_delete') }}",type:"POST",data:{id:id},dataType:"json",success:function(t){t.status?(alertSukses("Notifikasi",""+t.message,"bg-success"),refresh()):alertSukses("Notifikasi",""+t.message,"bg-danger")},error:function(t,e,n){$.alert({title:"Warning!",content:"Error deleting data!"})}})}}}});
  }
  function _published(id, data) {
    var checkBox = document.getElementById(id);
    checkBox.addEventListener('change', function() {
      console.log(data, this.checked);
      var send_data = {id:data, checked:this.checked};
      $.ajax({
        type:'POST', url: "{{ route('gallery_published') }}", data: send_data, dataType:"json",
        success: (data) => {
          if(data.status){
            alertSukses('Notifikasi', data.message,'bg-success');
          }else{
            alertSukses('Notifikasi', data.message,'bg-danger');
          }
        },
        error: function(data){
          alertSukses('Notifikasi', 'Gagal ubah data','bg-danger');
        }
      });
    });
  }
</script>
@endsection