{{-- resources/views/admin/kesiswaan/ppdb/_table_gagal_tes.blade.php --}}

<div class="alert alert-danger shadow-sm mb-4 border-0 fw-bold" role="alert">
    <i class="fas fa-times-circle me-2 fs-5"></i> Calon siswa dengan nilai <strong>di bawah 50.00</strong> (Status: Tidak Lulus).
</div>

<div class="d-flex flex-wrap gap-2 mb-3" role="tablist">
  <button class="btn btn-danger fw-bold px-4 active" id="btn-tab-putra-g" data-bs-toggle="tab" data-bs-target="#tab-putra-g" type="button" role="tab" aria-controls="tab-putra-g" aria-selected="true">
    <i class="fa fa-male me-1"></i> Putra
  </button>
  <button class="btn btn-outline-danger fw-bold px-4" id="btn-tab-putri-g" data-bs-toggle="tab" data-bs-target="#tab-putri-g" type="button" role="tab" aria-controls="tab-putri-g" aria-selected="false">
    <i class="fa fa-female me-1"></i> Putri
  </button>
</div>

<div class="tab-content border-top pt-3">
  <div class="tab-pane fade show active" id="tab-putra-g" role="tabpanel" aria-labelledby="btn-tab-putra-g">
    @include('admin.kesiswaan.ppdb._table_gagal_gender', ['ppdbs' => $ppdbs->where('jenkel', 'L'), 'genderLabel' => 'Putra'])
  </div>
  <div class="tab-pane fade" id="tab-putri-g" role="tabpanel" aria-labelledby="btn-tab-putri-g">
    @include('admin.kesiswaan.ppdb._table_gagal_gender', ['ppdbs' => $ppdbs->where('jenkel', 'P'), 'genderLabel' => 'Putri'])
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const btnPutraG = document.getElementById('btn-tab-putra-g');
    const btnPutriG = document.getElementById('btn-tab-putri-g');

    if(btnPutraG && btnPutriG) {
        btnPutraG.addEventListener('shown.bs.tab', function () {
          btnPutraG.classList.remove('btn-outline-danger');
          btnPutraG.classList.add('btn-danger');
          btnPutriG.classList.remove('btn-danger');
          btnPutriG.classList.add('btn-outline-danger');
        });

        btnPutriG.addEventListener('shown.bs.tab', function () {
          btnPutriG.classList.remove('btn-outline-danger');
          btnPutriG.classList.add('btn-danger');
          btnPutraG.classList.remove('btn-danger');
          btnPutraG.classList.add('btn-outline-danger');
        });
    }
  });
</script>