@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(kolom, url) {
      console.log(kolom);
      console.log(url);
      $("#edit-nama").val(kolom.nama);
      kolom.lampiran ? $("#edit-lampiran").attr('checked', true) : $("#edit-lampiran").attr('checked', false);
      $("#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">
    <a href="{{ route('backoffice.kolom', $kolom->form->id) }}">
      <i class='bx bx-chevron-left shadow-sm bg-white p-1'
        style="box-sizing: content-box; border-radius: 10px; font-size: 38px"></i>
    </a>
    <h4 class="fw-bold py-0 mb-0 ">
      <span class="text-muted fw-light">Perizinan /</span> Opsi Kolom {{ $kolom->nama }}
    </h4>
    <div>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah</button>
    </div>
  </div> --}}
  <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 mb-4">
    <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a href="{{ route('backoffice.dokumen-perizinan') }}">Dokumen Perizinan</a></li>
      <li class="breadcrumb-item"><a href="{{ route('backoffice.form', $kolom->form->perizinan->id) }}">Form</a></li>
      <li class="breadcrumb-item"><a href="{{ route('backoffice.kolom', $kolom->form->id) }}">Kolom</a></li>
      <li class="breadcrumb-item"><a class="text-primary">Opsi</a></li>
    </ol>
  </nav>
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h4 class="mb-0">Opsi Kolom "{{ $kolom->nama }}"</h4>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah</button>
    </div>
    <div class="card-body">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Nama Opsi</th>
            <th class="text-center">Lampiran</th>
            <th class="text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($options as $i => $o)
            <tr>
              <td style="width: 9px; white-space: nowrap;">{{ $i + 1 }}</td>
              <td>{{ $o->nama }}</td>
              <td style="width: 19px; white-space: nowrap;">
                @if ($o->lampiran)
                  <span class="badge rounded-pill bg-success">Lampiran</span>
                @else
                  <span class="badge rounded-pill bg-secondary">Bukan Lampiran</span>
                @endif
              </td>
              <td style="width: 19px; white-space: nowrap;">
                <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal-edit"
                  onclick="handleEdit({{ $o }}, '{{ route('backoffice.kolom.opsi.update', $o->id) }}')">
                  Edit
                </button>

                <button class="btn btn-danger mx-1" data-bs-toggle="modal" data-bs-target="#modal-delete"
                  onclick="handleDelete('{{ route('backoffice.kolom.opsi.delete', $o->id) }}')">
                  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">Opsi Kolom {{ $kolom->nama }}</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.kolom.opsi.store') }}" method="POST">
            @csrf
            <input type="number" name="kolom_id" value="{{ $kolom->id }}" hidden>
            <div class="mb-3">
              <label for="nama" class="form-label">Nama</label>
              <input type="text" class="form-control" id="nama" name="nama" required>
            </div>
            @if ($kolom->tipe != 'select')
              <div class="mb-3">
                <label for="lampiran" class="form-label">lampiran</label>
                <div class="form-check form-switch">
                  <input class="form-check-input" style="width: 3em; height: 1.5em;" type="checkbox" role="switch"
                    id="flexSwitchCheckDefault" name="lampiran">
                </div>
              </div>
            @endif
          </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">Opsi Kolom {{ $kolom->nama }}</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>
            @if ($kolom->tipe != 'select')
              <div class="mb-3">
                <label for="lampiran" class="form-label">lampiran</label>
                <div class="form-check form-switch">
                  <input class="form-check-input" style="width: 3em; height: 1.5em;" type="checkbox" role="switch"
                    id="edit-lampiran" name="lampiran">
                </div>
              </div>
            @endif
          </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">Opsi Kolom {{ $kolom->nama }}</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