@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0)">Dokumen Legalitas</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{$category->name}}</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-6">
            <h6 class="card-title">List {{$category->name}}</h6>
          </div>
          <div class="col-6">
            <div class="float-end">
              <button class="btn btn-success mx-1" onclick="showModalInputModal()">Tambah {{$category->name}}</button>
            </div>
          </div>
        </div>        
        <div class="table-responsive">
          <table id="dataTableLegals" class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>uraian</th>
                <th>penerbit</th>
                <th>nomor</th>
                <th>tgl terbit</th>
                @if ($category->name === "Dokumen Perijinan")
                <th>tgl Expire</th>
                <th>masa waktu</th>
                @endif
                <th>link</th>
                <th>Action</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@include('legalitas.add')
@include('legalitas.edit')

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
  <script>
    const Toast = Swal.mixin({
                  toast: true,
                  position: 'top-end',
                  showConfirmButton: false,
                  timer: 3000
                });
    $(function() {
      if($('#datePickerExample').length) {
        var date = new Date();
        var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
        $('#datePickerExample').datepicker({
          format: "dd/mm/yyyy",
          todayHighlight: true,
          autoclose: true,
          orientation: "bottom"
        });
        $('#datePickerExample').datepicker('setDate', today);
      }
      var table = $('#dataTableLegals').DataTable({
        "aLengthMenu": [
          [10, 30, 50, -1],
          [10, 30, 50, "All"]
        ],
        "iDisplayLength": 10,
        "language": {
          search: ""
        },
        "dom": '<"html5buttons">lfrtip',
        "processing": false,
        "serverSide": false,
        "ajax": '{{route("legals.ajax", ["service" => "dt", "category_legal" => $category])}}',
        "columns": [
          { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
          { data: 'uraian', name: 'uraian'},
          { data: 'penerbit', name: 'penerbit'},
          { data: 'nomor', name: 'nomor'},
          { data: 'published_at', name: 'published_at'},
          @if ($category->name === "Dokumen Perijinan")       
          { data: 'expired_at', name: 'expired_at'},
          { data: 'masa_waktu', name: 'masa_waktu'},
          @endif
          { data: 'link', name: 'link'},
          { data: 'action', name: 'action'},
        ],
      });
      $('#dataTableLegals').each(function() {
        var datatable = $(this);
        // SEARCH - Add the placeholder for Search and Turn this into in-line form control
        var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
        search_input.attr('placeholder', 'Search');
        search_input.removeClass('form-control-sm');
        // LENGTH - Inline-Form control
        var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
        length_sel.removeClass('form-control-sm');
      });
    });

    function showModalInputModal()
    {
      const modal = $('#addModal');
      modal.removeAttr('hidden');
      modal.modal('show');
    }
    
    function showModalEditModal(e)
    {
      const modal = $('#editModal');
      var url = "{{route('legals.edit', ':id')}}";
      var urlUpdate = "{{route('legals.update', ':id')}}";
      $("#EdilegalsForm").attr('action', urlUpdate.replace(':id',e));
      $('#editPublished').datepicker({
          format: "dd/mm/yyyy",
          todayHighlight: true,
          autoclose: true,
          orientation: "bottom"
      });
      $.ajax({
        type: "GET",
        url: url.replace(':id', e),
        success: function (response) {
          const data = response.data; 
          $("#uraianEdit").val(data.uraian);
          $("#penerbitEdit").val(data.penerbit);
          $("#nomorEdit").val(data.nomor);
          $("#editPublished").datepicker('setDate', new Date(data.published_at));
          $("#masa_waktuEdit").val(data.masa_waktu);
          $("#linkEdit").val(data.link);
          modal.removeAttr('hidden');
          modal.modal('show');
        }
      });
    }
    
    function deleteSurat(e)
    {
      let urlDelete = "{{route('legals.destroy', ':id')}}";
      Swal.fire({
          title             : "Apakah Anda Yakin ?",
          text              : "Data Yang Sudah Dihapus Tidak Bisa Dikembalikan!",
          icon              : "warning",
          showCancelButton  : true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor : "#d33",
          confirmButtonText : "Ya, Tetap Hapus!"
      }).then((result) => {
          if (result.value) {
              $.ajax({
                  url    : urlDelete.replace(':id', e),
                  type   : "delete",
                  headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}',
                    "Accept": "application/json"
                  },
                  success: function(data) {
                    $('#dataTableLegals').DataTable().ajax.reload();
                    Toast.fire({
                      icon: 'success',
                      title: data.data
                    })
                  }
              })
          }
      });
    }

    // this is the id of the form
    $("#legalsForm").submit(function(e) {
      e.preventDefault(); // avoid to execute the actual submit of the form.
      
      let form = $(this);
      let actionUrl = "{{route('legals.store')}}";
      let callbackSuccess = (data) => {
        $('#addModal').modal('hide');
        form.trigger("reset");
        Toast.fire({
          icon: 'success',
          title: data.data
        })
        $('#dataTableLegals').DataTable().ajax.reload();
      };
      let callbackError = onError(['uraian', 'penerbit', 'nomor', 'published_at', 'masa_waktu', 'link']);
      ajaxFormCall(actionUrl, form, callbackSuccess, callbackError)
    });

    // this is the id of the form
    $("#EdilegalsForm").submit(function(e) {
      e.preventDefault(); // avoid to execute the actual submit of the form.
      
      let form = $(this);
      let actionUrl = form.attr('action');
      let callbackSuccess = (data) => {
        $('#editModal').modal('hide');
        form.trigger("reset");
        Toast.fire({
          icon: 'success',
          title: data.data
        })
        $('#dataTableLegals').DataTable().ajax.reload();
      };
      let callbackKey = (key) => {
        return key + "Edit";
      };
      let callbackError = onError(['uraianEdit', 'penerbitEdit', 'nomorEdit', 'published_atEdit', 'masa_waktuEdit', 'linkEdit'], callbackKey);
      ajaxFormCall(actionUrl, form, callbackSuccess, callbackError)
    });

    //function ajax dynmic
    function ajaxFormCall (url, form, callbackSuccess, callbackError) {
      $.ajax({
        type: "POST",
        url: url,
        headers: {
          "Accept": "application/json"
        },
        data: form.serialize(), // serializes the form's elements.
        success: callbackSuccess,
        error: callbackError
      });
    }

    function onError(field, callbackKey = null)
    {
      if (callbackKey == null) {
        callbackKey = (key) => {
          return key;
        };
      }
      let callbackError = (xhr, ajaxOptions, thrownError) => {
        $.each(field, function(index, value) {
          $(`#${value}`).removeClass('is-invalid');
        });
        if (xhr.status == 422) {
          Object.entries(xhr.responseJSON.errors).forEach(entry => {
            const [key, value] = entry;
            $(`#${callbackKey(key)}Message`).html(value);
            $(`#${callbackKey(key)}`).addClass("is-invalid");
          });
        }
      };
      return callbackError;
    }
  </script>
@endpush