@extends('backoffice.template.app')
@section('content')
  <h4 class="fw-bold py-3 mb-2 d-flex justify-content-between">
    <span>
      Jadwal TV
    </span>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah Jadwal
      TV</button>

  </h4>
  <div class="card">
    <div class="card-body">
      <table class="table table-striped" id="table-jadwal">
        <thead>
          <tr>
            <th>#</th>
            <th>Nama</th>
            <th>Waktu</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($jadwal_tvs as $i => $j)
            <tr>
              <td>{{ $i + 1 }}</td>
              <td>{{ $j->nama }}</td>
              <td>{{ date_format(date_create($j->waktu), 'd M Y, H:i:s') }}</td>
              <td style="white-space: nowrap;">
                <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal-edit"
                  onclick="handleEdit({{ $j }}, '{{ route('backoffice.jadwal-tv.update', $j->id) }}')">Edit</button>
                <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modal-delete"
                  onclick="handleDelete('{{ route('backoffice.jadwal-tv.delete', $j->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">Tambah Jadwal</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="{{ route('backoffice.jadwal-tv.store') }}" method="post" id="form-create">
            @csrf
            <div class="mb-3">
              <label for="nama" class="form-label">Nama</label>
              <input type="text" name="nama" id="nama" class="form-control">
            </div>
            <div class="mb-3">
              <label for="waktu" class="form-label">Waktu</label>
              <input type="datetime-local" name="waktu" id="waktu" class="form-control">
            </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">Edit Jadwal</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">
            @csrf
            @method('put')
            <div class="mb-3">
              <label for="nama-edit" class="form-label">Nama</label>
              <input type="text" name="nama" id="nama-edit" class="form-control">
            </div>
            <div class="mb-3">
              <label for="waktu-edit" class="form-label">Waktu</label>
              <input type="datetime-local" name="waktu" id="waktu-edit" class="form-control">
            </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">Tambah</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">Hapus Jadwal</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">
            @csrf
            @method('delete')
            <p>Apa Anda Yakin Untuk Menghapus Jadwal 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">Hapus</button>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('script')
  <script>
    $(document).ready(function() {
      $('#table-jadwal').DataTable();
    });

    function handleEdit(jadwal, url) {
      $('#form-edit').attr('action', url);
      $('#nama-edit').val(jadwal.nama);
    }

    function handleDelete(url) {
      $('#form-delete').attr('action', url);
    }
  </script>
@endsection