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

<div class="alert alert-warning shadow-sm mb-4 border-0 fw-bold text-dark" role="alert">
    <i class="fas fa-exclamation-triangle me-2 text-warning fs-5"></i> Calon siswa dengan rentang nilai <strong>50.00 - 69.99</strong>. Perlu keputusan manajerial untuk meluluskan atau menolak.
</div>

<div class="d-flex flex-wrap gap-2 mb-3" role="tablist">
  <button class="btn btn-warning text-dark fw-bold px-4 active" id="btn-tab-putra-p" data-bs-toggle="tab" data-bs-target="#tab-putra-p" type="button" role="tab" aria-controls="tab-putra-p" aria-selected="true">
    <i class="fa fa-male me-1"></i> Putra
  </button>
  <button class="btn btn-outline-warning text-dark fw-bold px-4" id="btn-tab-putri-p" data-bs-toggle="tab" data-bs-target="#tab-putri-p" type="button" role="tab" aria-controls="tab-putri-p" 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-p" role="tabpanel" aria-labelledby="btn-tab-putra-p">
    @include('admin.kesiswaan.ppdb._table_pertimbangkan_gender', ['ppdbs' => $ppdbs->where('jenkel', 'L'), 'genderLabel' => 'Putra'])
  </div>
  <div class="tab-pane fade" id="tab-putri-p" role="tabpanel" aria-labelledby="btn-tab-putri-p">
    @include('admin.kesiswaan.ppdb._table_pertimbangkan_gender', ['ppdbs' => $ppdbs->where('jenkel', 'P'), 'genderLabel' => 'Putri'])
  </div>
</div>


{{-- Script sederhana untuk mengubah warna tombol saat tab diklik --}}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const btnPutraP = document.getElementById('btn-tab-putra-p');
    const btnPutriP = document.getElementById('btn-tab-putri-p');

    if(btnPutraP && btnPutriP) {
        btnPutraP.addEventListener('shown.bs.tab', function () {
          btnPutraP.classList.remove('btn-outline-warning');
          btnPutraP.classList.add('btn-warning');
          btnPutriP.classList.remove('btn-warning');
          btnPutriP.classList.add('btn-outline-warning');
        });

        btnPutriP.addEventListener('shown.bs.tab', function () {
          btnPutriP.classList.remove('btn-outline-warning');
          btnPutriP.classList.add('btn-warning');
          btnPutraP.classList.remove('btn-warning');
          btnPutraP.classList.add('btn-outline-warning');
        });
    }
  });
</script>