@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);
      $("#edit-tipe").val(kolom.tipe);
      $("#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="{{ route('backoffice.dokumen-perizinan') }}">Dokumen Perizinan</a></li>
        <li class="breadcrumb-item"><a href="{{ route('backoffice.form', $form->perizinan->id) }}">Form</a></li>
        <li class="breadcrumb-item"><a class="text-primary">Kolom</a></li>
      </ol>
    </nav>
    <div>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah</button>
      <button class="btn {{ $form->is_fixed ? 'btn-success disabled' : 'btn-primary' }}"
        onclick="handleFix('{{ route('backoffice.form.is-fixed', $form->id) }}')" data-bs-toggle="modal"
        data-bs-target="#modal-fix">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-check-circle-fill" viewBox="0 0 16 16">
          <path
            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
        </svg>
      </button>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Dokumen Perizinan</th>
            <th>Tipe Kolom</th>
            <th class="text-center">Edit</th>
            <th>Opsi Pilihan</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($koloms as $i => $k)
            <tr>
              <td>{{ $i + 1 }}</td>
              <td>{{ $k->nama }}</td>
              <td>{{ $k->tipe }}</td>
              <td style="width: 19px; white-space: nowrap">
                <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal-edit"
                  onclick="handleEdit({{ $k }}, '{{ route('backoffice.kolom.update', $k->id) }}')">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-pencil-square align-text-top" viewBox="0 0 16 16">
                    <path
                      d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                    <path fill-rule="evenodd"
                      d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                  </svg>
                  Edit
                </button>
                <button class="btn btn-danger mx-1" data-bs-toggle="modal" data-bs-target="#modal-delete"
                  onclick="handleDelete('{{ route('backoffice.kolom.delete', $k->id) }}')">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-trash3-fill align-text-top" viewBox="0 0 16 16">
                    <path
                      d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z" />
                  </svg>
                  Delete
                </button>
              </td>
              <td style="width: 19px" class="text-nowrap text-center">
                @if (in_array($k->tipe, $tipe_options))
                  <a class="btn btn-info" href="{{ route('backoffice.kolom.opsi', $k->id) }}"
                    style="display: flex; align-items: center; gap: 5px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                      class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                      <path
                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />
                    </svg>
                    Buat Opsi
                  </a>
                @else
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-dash-lg" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z" />
                  </svg>
                @endif
              </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">Kolom Form {{ $form->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.store') }}" method="POST">
            @csrf
            <input type="number" name="form_id" value="{{ $form->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>
            <div class="mb-3">
              <label for="tipe" class="form-label">Tipe Kolom</label>
              <select class="form-select" name="tipe" id="tipe">
                <option value="" selected disabled>--Pilih Tipe Kolom--</option>
                @foreach ($tipes as $t)
                  <option value="{{ $t }}">{{ $t }}</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">Kolom Form {{ $form->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>
            <div class="mb-3">
              <label for="tipe" class="form-label">Tipe Kolom</label>
              <select class="form-select" name="tipe" id="edit-tipe" required>
                <option value="" selected disabled>--Pilih Tipe Kolom--</option>
                @foreach ($tipes as $t)
                  <option value="{{ $t }}">{{ $t }}</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">Kolom Form {{ $form->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>
   {{-- MODAL IS FIXED --}}
   <div class="modal fade" tabindex="-1" id="modal-fix">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Publish Dokumen</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="{{route('backoffice.form.is-fixed', $form->id)}}" method="post" id="form-fix">
            @csrf
            @method('patch')
            <p>Apa Anda Yakin Untuk Membuat Dokumen Ini Menjadi Fix ?</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-primary" form="form-fix" name="is_fixed"
            value="1">Simpan</button>
        </div>
      </div>
    </div>
  </div>
@endsection