@extends('backoffice.template.app')
@section('script')
  @if (session('success-verif'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses!',
        text: "{{ session('success-verif') }}",
      })
    </script>
  @endif
  <script>
    $(document).ready(function() {
      $('#table-user').DataTable();
    });
  </script>
  <script>
    function handleEdit(l, url) {
      $('#isi-laporan').val(l.keterangan);
      $('#floatingTextarea').val(l.tanggapan);
      $("#form-edit").attr('action', url);
    }

    function zoomFoto(pathFoto) {
      $('#foto-zoom').attr('src', pathFoto);
    }
  </script>
@endsection
@section('content')
  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Admin /</span> Laporan Warga
  </h4>
  <div class="card py-4 px-4">
    <table class="table table-striped" id="table-user">
      <thead>
        <tr>
          <th>Judul</th>
          <th>Foto</th>
          <th>Keterangan</th>
          <th>Tanggal Pelaporan</th>
          <th>Lokasi</th>
          <th>Pelapor</th>
          <th>Home</th>
          <th>Tanggapan</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($laporan as $l)
          <tr>
            <td>{{ $l->nama }}</td>
            <td>
              @if ($l->foto != null)
                {{-- <button data-bs-toggle="modal" data-bs-target="#modal-foto">klick</button> --}}
                <img src="{{ asset('storage/' . $l->foto) }}" alt=""
                  style="width: 120px; height: 68px; object-fit: cover;"
                  onclick="zoomFoto('{{ asset('storage/' . $l->foto) }}')" data-bs-toggle="modal"
                  data-bs-target="#modal-foto">
              @else
                -
              @endif
            </td>
            <td>{{ Str::limit($l->keterangan, 2) }}</td>
            <td>{{ $l->tanggal }}</td>
            <td>{{ $l->lokasi }}</td>
            <td>{{ $l->user_no_ktp }}</td>
            <td>
              @switch($l->terkonfirmasi)
                @case(0)
                  <span class="badge bg-label-warning">Tidak Tampil</span>
                @break

                @case(1)
                  <span class="badge bg-label-success">Tampil</span>
                @break
              @endswitch
            </td>
            <td>{{ Str::limit($l->tanggapan, 10) }}</td>
            <td>
              <div class="actionform">
                {{-- <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                  Edit
                </button> --}}
                <button class="btn btn-warning me-1" data-bs-toggle="modal" data-bs-target="#modal-edit"
                  onclick="handleEdit({{ $l }}, '{{ route('laporanwarga.update', $l->id) }}')">
                  Edit
                </button>
              </div>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Modal Edit -->
  <div class="modal fade" id="modal-edit" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <form method="POST" id="form-edit">
          @csrf
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">Edit</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            {{-- @if ($l->terkonfirmasi == 1)
              <h5>Apakah anda ingin menghapus dari halaman home?</h5>
            @else
              <h5>Apakah anda menampilkan ke halaman home?</h5>
            @endif --}}
            <h5>Apakah anda ingin menampilkan ke halaman home?</h5>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1" name="terkonfirmasi">
              <label class="form-check-label" for="exampleCheck1">Klik jika iya</label>
            </div>
            <div class="mb-4">
              <label for="tanggapan" class="form-label">Isi Laporan</label>
              <textarea class="form-control" id="isi-laporan" style="height: 120px" disabled></textarea>
            </div>
            <div class="mb-4">
              <label for="tanggapan" class="form-label">Tanggapi Laporan</label>
              <textarea class="form-control" placeholder="Beri Tanggapan Di Kolom Ini" id="floatingTextarea" name="tanggapan"
                style="height: 120px"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tidak</button>
            <button type="submit" class="btn btn-success">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- Modal Edit -->
  <div class="modal fade" id="modal-foto" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" 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="staticBackdropLabel">Foto Laporan</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <img alt="foto laporan" id="foto-zoom" class="w-100">
        </div>
      </div>
    </div>
  </div>
@endsection