@extends('backoffice.template.app')
@section('script')
  <script>
    $(document).ready(function() {
      $('#table-category').DataTable();
      $('#table-entertainment').DataTable();
    });

    function handleDelete(url) {
      console.log(url)
      $("#form-delete").attr('action', url);
    }

    function handleEditCateg(category, url) {
      $('#form-edit-c').attr('action', url);
      console.log(category);
      $('#Cnama-edit').val(category.nama);
    }

    function handleDeleteCateg(url) {
      $('#form-delete-c').attr('action', url);
    }
  </script>
  @if (session('success'))
    <script>
      Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
      })
    </script>
  @endif
@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">Entertainment /</span> Index
    </h4>
  </div>
  <div class="card mb-3">
    <div class="card-header d-flex justify-content-between">
      <h4>Kategori Entertainment</h4>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create-category">Tambah</button>
    </div>
    <div class="card-body">
      <table class="table table-bordered table-striped" id="table-category">
        <thead>
          <tr>
            <th>#</th>
            <th>Nama</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($categories as $i => $c)
            <tr>
              <td style="width: 9px; white-space: nowrap">{{ $i + 1 }}</td>
              <td>{{ $c->nama }}</td>
              <td style="width: 9px; white-space: nowrap;">
                <button class="btn btn-warning"
                  onclick="handleEditCateg({{ $c }}, '{{ route('backoffice.entertainment.category.update', $c->id) }}')"
                  data-bs-toggle="modal" data-bs-target="#modal-edit-category"> <i
                    class='bx bxs-edit-alt align-text-bottom'></i>Edit</button>
                <button class="btn btn-danger"
                  onclick="handleDeleteCateg('{{ route('backoffice.entertainment.category.delete', $c->id) }}')"data-bs-toggle="modal"
                  data-bs-target="#modal-delete-category"><i class='bx bx-trash align-text-bottom'></i>Delete</button>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <h4>Entertainments</h4>
      <div>
        <a class="btn btn-primary" href="{{ route('backoffice.entertainment.create') }}">Tambah</a>
      </div>
    </div>
    <div class="card-body">
      <table class="table table-bordered table-striped" id="table-entertainment">
        <thead>
          <tr>
            <th>#</th>
            <th>Judul</th>
            <th>Deskripsi</th>
            <th>File</th>
            <th>Tanggal</th>
            <th>Kategori</th>
            <th>Tipe</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($entertainments as $i => $e)
            <tr>
              <td>{{ $i + 1 }}</td>
              <td>{{ $e->judul }}</td>
              <td>{{ substr($e->deskripsi, 0, 49) . '...' }}</td>
              <td>
                @switch($e->tipe)
                  @case('foto')
                    <img width="100" src="{{ asset('storage/' . $e->file) }}" alt="foto">
                  @break

                  @case('video')
                    <video width="100" src="{{ asset('storage/' . $e->file) }}" controls></video>
                  @break
                @endswitch
              </td>
              <td>{{ $e->tanggal }}</td>
              <td>{{ $e->category->nama ?? null }}</td>
              <td>
                <span class="badge bg-info">{{ $e->tipe }}</span>
              </td>
              <td class="text-nowrap">
                <a href="{{ route('backoffice.entertainment.edit', $e->id) }}" class="btn btn-warning me-1">
                  <i class='bx bxs-edit-alt align-text-bottom'></i>
                </a>

                <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modal-delete"
                  onclick="handleDelete('{{ route('backoffice.entertainment.delete', $e->id) }}')">
                  <i class='bx bx-trash align-text-bottom'></i>
                </button>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  {{-- MODAL SECTION --}}

  <!-- MODAL CREATE CATEGORY -->
  <div class="modal fade" id="modal-create-category" tabindex="-1" aria-labelledby="modal-create-categoryLabel"
    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-create-categoryLabel">Tambah Kategori</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="{{ route('backoffice.entertainment.category.store') }}" method="post" id="form-store-c">
            @csrf
            <div class="mb-3">
              <label for="nama" class="form-label">Nama</label>
              <input type="text" name="nama" class="form-control" id="nama" required>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" form="form-store-c">Tambah</button>
        </div>
      </div>
    </div>
  </div>
  {{-- modal edit category --}}
  <div class="modal fade" id="modal-edit-category" tabindex="-1" aria-labelledby="modal-edit-categoryLabel"
    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-edit-categoryLabel">Edit Kategori</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form method="post" id="form-edit-c">
            @csrf
            @method('put')
            <div class="mb-3">
              <label for="nama" class="form-label">Nama</label>
              <input type="text" name="nama" class="form-control" id="Cnama-edit" required>
            </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-c">Update</button>
        </div>
      </div>
    </div>
  </div>
  {{-- modal delete category --}}
  <div class="modal fade" id="modal-delete-category" tabindex="-1" aria-labelledby="modal-delete-categoryLabel"
    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-delete-categoryLabel">Hapus Kategori</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form method="post" id="form-delete-c">
            @csrf
            @method('delete')
            <p>Apa Anda Yakin Untuk Menghapus Kategori 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-c">Hapus</button>
        </div>
      </div>
    </div>
  </div>

  {{-- MODAL DELETE ENTERTAINMET --}}
  <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">Kategori 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