{{-- resources/views/admin/akademik/data-master/_tab_rombels.blade.php --}}
<div class="card card-round shadow-sm border-0">
    <div class="card-header d-flex justify-content-between align-items-center py-3 bg-white">
        <div class="card-title" style="font-size: 1.1rem;">
            <i class="fas fa-users me-2 text-primary"></i> Data Rombel
        </div>
        <button class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahRombel">
            <i class="fa fa-plus me-1"></i> Tambah Rombel
        </button>
    </div>

    <div class="card-body">
        <ul class="nav nav-pills nav-secondary nav-pills-no-bd mb-4" id="rombelGenderTabs">
            <li class="nav-item">
                <button class="nav-link active fw-bold px-3 py-2 rounded-3" type="button" data-filter="all">
                    Semua Kelas
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link fw-bold px-3 py-2 rounded-3" type="button" data-filter="L">
                    Kelas Putra
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link fw-bold px-3 py-2 rounded-3" type="button" data-filter="P">
                    Kelas Putri
                </button>
            </li>
        </ul>

        <div class="table-responsive">
            <table class="table table-striped table-hover align-middle mb-0">
                <thead class="table-dark text-center">
                    <tr>
                        <th width="5%">No</th>
                        <th width="15%">Tingkat</th>
                        <th width="15%">Rombel</th>
                        <th width="15%">Gender</th>
                        <th width="15%">Kode</th>
                        <th class="text-start">Nama Rombel</th>
                        <th width="10%">Status</th>
                        <th width="10%">Aksi</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($rombels as $rombel)
                        <tr class="text-center rombel-row" data-jenkel="{{ $rombel->jenkel }}">
                            <td class="col-no text-secondary fw-bold">{{ $loop->iteration }}</td>

                            <td>
                                <span class="badge bg-info shadow-sm w-100 py-2">
                                    {{ $rombel->levelKelas->level_kelas }}
                                </span>
                            </td>

                            <td class="fw-bold text-dark">{{ $rombel->rombel }}</td>

                            <td>
                                @if($rombel->jenkel === 'L')
                                    <span class="badge bg-primary shadow-sm w-100 py-2">Putra</span>
                                @else
                                    <span class="badge bg-warning text-dark shadow-sm w-100 py-2">Putri</span>
                                @endif
                            </td>

                            <td>
                                <span class="badge bg-light text-dark border border-secondary-subtle">
                                    {{ $rombel->kode }}
                                </span>
                            </td>

                            <td class="text-start fw-bold text-dark">
                                {{ $rombel->nama_rombel }}
                            </td>

                            <td>
                                <form action="{{ route('admin.rombels.toggle', $rombel->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('PATCH')
                                    <div class="form-check form-switch d-flex justify-content-center">
                                        <input class="form-check-input" type="checkbox" onchange="this.form.submit()" {{ $rombel->is_active ? 'checked' : '' }}>
                                    </div>
                                </form>
                            </td>

                            <td>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-warning btn-sm btn-edit-rombel" 
                                            data-bs-toggle="modal" data-bs-target="#modalEditRombel"
                                            data-id="{{ $rombel->id }}"
                                            data-level="{{ $rombel->level_kelas_id }}"
                                            data-rombel="{{ $rombel->rombel }}"
                                            data-jenkel="{{ $rombel->jenkel }}"
                                            title="Edit">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-5">
                                <i class="fas fa-folder-open fa-3x mb-3 opacity-50"></i>
                                <h5>Belum Ada Data Rombel</h5>
                                <p class="mb-0">Silakan tambahkan data rombongan belajar baru.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- MODAL TAMBAH & EDIT --}}
@include('admin.akademik.data-master._modal_edit_rombel')
@include('admin.akademik.data-master._modal_tambah_rombel')

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const tabs = document.querySelectorAll('#rombelGenderTabs .nav-link');
  const rows = document.querySelectorAll('.rombel-row');

  function resetNumbering() {
    let no = 1;
    rows.forEach(row => {
      if (row.style.display !== 'none') {
        row.querySelector('.col-no').innerText = no++;
      }
    });
  }

  tabs.forEach(tab => {
    tab.addEventListener('click', function () {
      tabs.forEach(t => t.classList.remove('active'));
      this.classList.add('active');

      const filter = this.dataset.filter;

      rows.forEach(row => {
        if (filter === 'all') {
          row.style.display = '';
        } else {
          row.style.display = row.dataset.jenkel === filter ? '' : 'none';
        }
      });

      resetNumbering();
    });
  });

  resetNumbering();

  document.querySelectorAll('.btn-edit-rombel').forEach(btn => {
    btn.addEventListener('click', function () {
      const id = this.dataset.id;
      document.getElementById('edit_level').value = this.dataset.level;
      document.getElementById('edit_rombel').value = this.dataset.rombel;
      document.getElementById('edit_jenkel').value = this.dataset.jenkel;
      document.getElementById('formEditRombel').setAttribute('action', `/admin/akademik/rombels/${id}`);
    });
  });
});
</script>
@endpush