@extends('layouts.admin')
@section('title', 'Profil Ketua')
@section('content')
<section class="content">
  <h4>Data Profil Ketua</h4>
  @if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </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 Profil Ketua : 0</span>
        <div class="tools">
          <a class="btn btn-success btn-sm pull-right" href="{{route('ketua_form')}}" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tambah Data"><i class="fas fa-plus"></i></a>
          <button class="btn btn-outline-primary btn-sm pull-right" onclick="refresh()" data-bs-toggle="tooltip" data-bs-placement="bottom" 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="row">
          <div class="col-12 col-md-12 col-lg-6">
            <div class="row g-2">
              <div class="col-md-4">
                <select class="form-control" name="filter_tipe" id="filter_tipe" required>
                  <option value="-">-- Semua --</option>
                  @foreach($tipe AS $value)
                  <option value="{{$value}}">{{$value}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <input type="search" name="search" id="search" class="form-control">
              </div>
              <div class="col-md-3">
                <button type="submit" onclick="refresh()" class="w-100 btn btn-outline-primary">
                  <i class="fas fa-search me-2"></i>Cari
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
      <table id="mytable" class="table table-hover table-bordered nowrap" width="100%" style="width:100%">
        <thead>
          <th>#</th>
          <th>Nama Ketua</th>
          <th>Jabatan</th>
          <th>Tahun Jabatan</th>
          <th>Status</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 Profil Ketua : '+total)
        return "Total "+ total +" Data";
      },
      "ajax": {
        url: "{{ route('ketua_list_data') }}",
        type: "POST",
        headers: {
          'X-CSRF-Token': $('meta[name="_token"]').attr('content')
        },
        data: function (d) {
          d.search = $('input[type="search"]').val();
          d.tipe = $('#filter_tipe').val();
        }
      },
      "columns": [
        { data: 'action', name: 'action', orderable: false},
        { data: 'nama', name: 'nama' },
        { data: 'tipe', name: 'tipe', orderable: false },
        { data: 'masa_jabatan', name: 'tahun_awal_jabatan' },
        { data: '_status', name: 'status' },
        ],
      "columnDefs":[
        { "width": "0%", "targets": 0 },
        ],
      "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('ketua_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 switchStatus(id){
    $.ajax({
      url: "{{ route('ketua_switch_status') }}",
      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"), refresh());
      },
      error: function (data) {
        $.alert({ title: "", content: data.responseJSON.message });
      },
    });

  }
  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('ketua_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!"})}})}}}});
  }
</script>
@endsection