@extends('dashboard.layouts.main')

@section('container')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Jenis Sampah</h1>
    </div>

    @if(session()->has('success'))
      <div class="alert alert-success col-lg-8" role="alert">
        {{ session('success') }}
      </div>
    @endif

    <div class="table-responsive col-lg-8">
        <!-- Tombol buka modal -->
        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#jenisSampahModal">
          Tambah data
        </button>

        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Jenis Sampah</th>
              <th scope="col">Aksi</th>
            </tr>
          </thead>
          <tbody>
            @foreach($data as $a)
            <tr>
              <td>{{ $loop->iteration }}</td>
              <td>{{ $a->nama_jenis }}</td>
              <td>
                <button class="badge bg-warning border-0" data-bs-toggle="modal" data-bs-target="#editModal{{ $a->id }}">
                  <span data-feather="edit"></span>
                </button>

                <form action="{{ url('') }}/jenis_sampah/{{ $a->id }}" method="post" class="d-inline">
                    @method('delete')
                    @csrf
                    <button class="badge bg-danger border-0" onclick="return confirm('Are you sure ?')"><span data-feather="x-circle"></span></button>
                </form>
                
              </td>
            </tr>
            <!-- Modal Edit -->
            <div class="modal fade" id="editModal{{ $a->id }}" tabindex="-1" aria-labelledby="editModalLabel{{ $a->id }}" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <form action="{{ url('jenis_sampah/' . $a->id) }}" method="POST">
                    @csrf
                    @method('put')
                    <div class="modal-header">
                      <h5 class="modal-title" id="editModalLabel{{ $a->id }}">Edit Jenis Sampah</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <div class="mb-3">
                        <label for="nama_jenis" class="form-label">Nama Jenis</label>
                        <input type="text" class="form-control" id="nama_jenis" name="nama_jenis" value="{{ $a->nama_jenis }}" required>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                      <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>

            @endforeach
          </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="jenisSampahModal" tabindex="-1" aria-labelledby="jenisSampahModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <form action="{{ url('jenis_sampah') }}" method="POST">
                @csrf
                <div class="modal-header">
                  <h5 class="modal-title" id="jenisSampahModalLabel">Tambah Jenis Sampah</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="mb-3">
                    <label for="nama_jenis" class="form-label">Jenis Sampah</label>
                    <input type="text" class="form-control" id="nama_jenis" name="nama_jenis" required>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                  <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
              </form>
            </div>
          </div>
        </div>

      </div>

@endsection