@extends('backoffice.template.app')
@section('script')
  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
      })
    </script>
  @endif
  <script>
    $(document).ready(function() {
      $('#table_id').DataTable();
    });
    // SCRIPT FOR HANDLE MODAL
    function handleCreate(url) {
      $("#nama").val('');
      $("#form-create").attr('action', url);
      $('#form-create').prepend('<input type="hidden" name="_method" value="POST"/>' )
      $('#modal-create button[type="submit"]').text('Tambah')
    }

    function handleEdit(k_perizinan, url) {
      $("#nama").val(k_perizinan.nama);
      $("#form-create").attr('action', url);
      $('#form-create').prepend('<input type="hidden" name="_method" value="PATCH"/>' )
      $('#modal-create button[type="submit"]').text('Ubah')
    }

    function handleDelete(url) {
      console.log(url);
      $("#form-delete").attr('action', url);
    }
  </script>
@endsection
@section('content')
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold py-0 mb-0 ">
      <span class="text-muted fw-light">Perizinan /</span> Kategori Perizinan
    </h4>
    <div>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create" onclick="handleCreate('{{route('backoffice.kategori-perizinan.store')}}')">Tambah</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <table class="table table-bordered table-striped" id="table_id">
        <thead>
          <tr>
            <th>#</th>
            <th class="w-100">Kategori Perizinan</th>
            <th class="text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($k_perizinans as $i => $kp)
            <tr>
              <td>{{ $i + 1 }}</td>
              <td>{{ $kp->nama }}</td>
              <td class="text-nowrap">
                <button class="btn btn-warning me-1" data-bs-toggle="modal" data-bs-target="#modal-create"
                  onclick="handleEdit({{ $kp }}, '{{ route('backoffice.kategori-perizinan.update', $kp->id) }}')">
                  <i class='bx bxs-edit-alt align-text-bottom'></i>
                  Edit
                </button>

                <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modal-delete"
                  onclick="handleDelete('{{ route('backoffice.kategori-perizinan.delete', $kp->id) }}')">
                  <i class='bx bx-trash align-text-bottom'></i>
                  Delete
                </button>
              </td>
            </tr>
          @endforeach

        </tbody>
      </table>
    </div>
  </div>

  {{-- MODAL CREATE --}}
  <div class="modal fade" id="modal-create" tabindex="-1" aria-labelledby="modal-createLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="modal-createLabel">Kategori Perizinan</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-create" action="{{ route('backoffice.kategori-perizinan.store') }}" method="POST">
            @csrf
            <div class="mb-3">
              <label for="nama" class="form-label">Nama</label>
              <input type="text" class="form-control" id="nama" name="nama" required>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary" form="form-create">Tambah</button>
        </div>
      </div>
    </div>
  </div>
  
  {{-- MODAL DELETE --}}
  <div class="modal fade" id="modal-delete" tabindex="-1" aria-labelledby="modal-deleteLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="modal-deleteLabel">Kategori Perizinan</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-delete" method="POST">
            @csrf
            @method('delete')
            <p>Apa Anda Yakin Untuk Menghapus Data ini ?</p>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-danger" form="form-delete">Delete</button>
        </div>
      </div>
    </div>
  </div>
@endsection