@extends('backoffice.template.app')
@section('script')
  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
      })
    </script>
  @endif
  {{-- SCRIPT FOR HANDLE MODAL --}}
  <script>
    function handleEdit(perizinan, url) {
      console.log(perizinan);
      console.log(url);
      $("#edit-nama").val(perizinan.nama);
      $("#edit-kategori").val(perizinan.kategori_perizinan_id);
      $("#form-edit").attr('action', url);
    }

    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">
    <nav
      style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
      aria-label="breadcrumb" class="fs-5">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="#">Dokumen Perizinan</a></li>
      </ol>
    </nav>
    <div>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah</button>
    </div>
  </div>
  <div class="card">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Dokumen Perizinan</th>
          <th>Kategori Perizinan</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($perizinans as $i => $p)
          <tr>
            <td>{{ $i + 1 }}</td>
            <td>{{ $p->nama }}</td>
            <td>{{ $p->kategori_perizinan->nama }}</td>
            <td>
              <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal-edit"
                onclick="handleEdit({{ $p }}, '{{ route('backoffice.dokumen-perizinan.update', $p->id) }}')">
                Edit
              </button>

              <button class="btn btn-danger mx-1" data-bs-toggle="modal" data-bs-target="#modal-delete"
                onclick="handleDelete('{{ route('backoffice.dokumen-perizinan.delete', $p->id) }}')">
                Delete
              </button>
              <a class="btn btn-info" href="{{ route('backoffice.form', $p->id) }}">Buat Forms</a>
            </td>
          </tr>
        @endforeach

      </tbody>
    </table>
  </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">Dokumen 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.dokumen-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>
            <div class="mb-3">
              <label for="create-kategori" class="form-label">Kategori Perizinan</label>
              <select name="kategori_perizinan_id" class="form-select" id="create-kategori" required>
                <option value="" disabled selected>--Pilih Kategori Perizinan--</option>
                @foreach ($k_perizinans as $kp)
                  <option value="{{ $kp->id }}">{{ $kp->nama }}</option>
                @endforeach
              </select>
            </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 edit --}}
  <div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="modal-editLabel" 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-editLabel">Dokumen Perizinan</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-edit" method="POST">
            @csrf
            @method('patch')
            <div class="mb-3">
              <label for="edit-nama" class="form-label">Nama</label>
              <input type="text" class="form-control" id="edit-nama" name="nama" required>
            </div>
            <div class="mb-3">
              <label for="edit-kategori" class="form-label">Kategori Perizinan</label>
              <select name="kategori_perizinan_id" class="form-select" id="edit-kategori">
                <option value=" required" disabled selected>--Pilih Kategori Perizinan--</option>
                @foreach ($k_perizinans as $kp)
                  <option value="{{ $kp->id }}">{{ $kp->nama }}</option>
                @endforeach
              </select>
            </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-edit">Update</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">Dokumen 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