@extends('backoffice.template.app')
@section('script')
  <script>
    $('.dropify').dropify({
      tpl: {
        message: '<div class="dropify-message"><span class="file-icon" /></div>',
      }
    });

    function handleEdit(general, url, pathImg) {
      $(document).ready(function() {
        console.log(pathImg);
        $('#form-edit').attr('action', url);
        $('#value-edit').attr('data-default-file', pathImg);
        $('#nama-edit').val(general.nama);
        $('.dropify').dropify({
          tpl: {
            message: '<div class="dropify-message"><span class="file-icon" /></div>',
          }
        });
      });
    }

    function handleLightbox(path) {
      $('#image').attr('src', path);
    }
  </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>
  <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">Nama</th>
            <th class="text-center">Detail</th>
            <th class="text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($generals as $i => $g)
            <tr>
              <td>{{ $i + 1 }}</td>
              <td>{{ $g->nama }}</td>
              <td>
                <button class="btn btn-primary" data-bs-target="#modal-lightbox" data-bs-toggle="modal"
                  onclick="handleLightbox('{{ asset('storage/' . $g->value) }}' )">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-eye-fill" viewBox="0 0 16 16">
                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                    <path
                      d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                  </svg>
                </button>
              </td>
              <td>
                <button class="btn btn-info" style="display: flex; align-items: center; gap: 7px" data-bs-toggle="modal"
                  data-bs-target="#modal-edit"
                  onclick="handleEdit({{ $g }}, '{{ route('backoffice.general.update', $g->id) }}', '{{ asset('storage/' . $g->value) }}')">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-pencil-square" 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>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  {{-- MODAL EDIT --}}
  <div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="" method="post" id="form-edit" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
              <label for="" class="form-label">Nama</label>
              <input type="text" class="form-control" id="nama-edit" name="nama">
            </div>
            <div class="mb-3">
              <label for="" class="form-label">Value</label>

              <input type="file" class="form-control dropify" id="value-edit" name="value">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-edit" class="btn btn-primary">Update</button>
        </div>
      </div>
    </div>
  </div>
  {{-- MODAL LIGHTBOX --}}
  <div class="modal fade" id="modal-lightbox" tabindex="-1" aria-labelledby="exampleModalLabel" 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="exampleModalLabel"></h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <img src="" id="image" alt="" width="100%">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection