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

<style>
    .table-fixed {
        table-layout: fixed;
        width: 100%;
        word-wrap: break-word;
    }
    
    .table-fixed td {
        white-space: normal !important;
        overflow-wrap: break-word;
        vertical-align: middle;
    }

    .btn-wa {
        font-size: 0.65rem !important;
        padding: 4px 2px !important;
    }
</style>

<div class="table-responsive" style="overflow-x: hidden;">
  <table class="table table-bordered table-striped table-hover align-middle mb-0 table-fixed">
    <thead class="table-dark text-center align-middle" style="font-size: 0.8rem;">
      <tr>
        <th style="width: 8%;">No</th>
        <th style="width: 40%; text-align: left; padding-left: 15px;">Biodata Calon Siswa</th>
        <th style="width: 17%;">Kontak Ortu/Wali</th>
        <th style="width: 12%;">Total Nilai</th>
        <th style="width: 16%;">Status Keputusan</th>
        <th style="width: 10%;">Tindakan</th>
      </tr>
    </thead>
    <tbody>
      @forelse($ppdbs as $ppdb)
        <tr class="text-center bg-white">
          <td class="fw-bold" style="font-size: 0.85rem;">{{ $loop->iteration }}</td>
          
          <td class="text-start px-3 py-2">
            <div class="mb-1 border-bottom pb-1">
                <div class="mb-1">
                    <span class="badge bg-success shadow-sm" title="No. Registrasi">{{ $ppdb->register }}</span>
                    @if($ppdb->jenkel === 'L') 
                        <span class="badge bg-primary px-2 shadow-sm ms-1">Laki-laki</span>
                    @elseif($ppdb->jenkel === 'P') 
                        <span class="badge bg-danger px-2 shadow-sm ms-1">Perempuan</span>
                    @endif
                </div>
                <div class="text-dark fw-bold mt-1" style="font-size: 0.95rem;">{{ $ppdb->name }}</div>
            </div>
            
            <ul class="list-unstyled mb-0 text-muted" style="font-size: 0.75rem; line-height: 1.6;">
                <li>
                    <i class="fa fa-id-card fa-fw me-1 text-secondary"></i> NIS: <span class="text-dark fw-bold">{{ $ppdb->nis ?? '-' }}</span>
                </li>
                <li>
                    <i class="fa fa-building fa-fw me-1 text-secondary"></i> Asal Sekolah: <span class="text-dark fw-bold">{{ $ppdb->sekolah_asal }}</span>
                </li>
                <li>
                    <i class="fa fa-calendar-alt fa-fw me-1 text-secondary"></i> TTL: <span class="text-dark fw-bold">{{ $ppdb->tmpt_lahir }}, {{ optional($ppdb->tgl_lahir)->format('d F Y') ?? '-' }}</span>
                </li>
            </ul>
          </td>

          <td class="px-2">
            @if($ppdb->handphone_ayah) 
                <a href="https://wa.me/{{ preg_replace('/^0/', '62', $ppdb->handphone_ayah) }}" target="_blank" class="btn btn-outline-success shadow-sm mb-1 w-100 btn-wa">
                    <i class="fab fa-whatsapp"></i> Ayah: {{ $ppdb->handphone_ayah }}
                </a>
            @endif
            @if($ppdb->handphone_ibu) 
                <a href="https://wa.me/{{ preg_replace('/^0/', '62', $ppdb->handphone_ibu) }}" target="_blank" class="btn btn-outline-success shadow-sm w-100 btn-wa">
                    <i class="fab fa-whatsapp"></i> Ibu: {{ $ppdb->handphone_ibu }}
                </a>
            @endif
            @if(!$ppdb->handphone_ayah && !$ppdb->handphone_ibu)
                <span class="text-muted fst-italic small">-</span>
            @endif
          </td>

          <td class="align-middle">
            <span class="fs-4 fw-bold text-primary">{{ $ppdb->tes->tes_total ?? '-' }}</span>
          </td>

          <td class="align-middle px-2">
            @php $nilai = $ppdb->tes->tes_total ?? null; @endphp
            
            @if($nilai !== null)
                @if($nilai >= 70)
                  <span class="badge bg-success shadow-sm py-2 w-100" style="font-size: 0.75rem;"><i class="fa fa-check me-1"></i> LULUS</span>
                @elseif($nilai >= 50)
                  <span class="badge bg-warning text-dark shadow-sm py-2 w-100" style="font-size: 0.75rem;"><i class="fa fa-exclamation-circle me-1"></i> PERTIMBANGKAN</span>
                @else
                  <span class="badge bg-danger shadow-sm py-2 w-100" style="font-size: 0.75rem;"><i class="fa fa-times me-1"></i> GAGAL</span>
                @endif
            @else
                <span class="text-muted fst-italic small">Belum Dinilai</span>
            @endif
          </td>

          <td class="text-center align-middle">
            <div class="d-flex flex-wrap gap-1 justify-content-center align-items-center">
                @if(!$ppdb->siswa)
                    <a href="{{ route('admin.ppdb.convert.create', $ppdb->id) }}" class="btn btn-success btn-sm shadow-sm py-1 px-2" data-bs-toggle="tooltip" title="Proses Jadi Siswa Aktif">
                       <i class="fa fa-user-plus"></i>
                    </a>
                @else
                    <span class="badge bg-secondary shadow-sm py-2 px-2" data-bs-toggle="tooltip" title="Sudah Menjadi Siswa Aktif"><i class="fa fa-check-circle"></i></span>
                    <form action="{{ route('admin.ppdb.convert.rollback', $ppdb->id) }}" method="POST" class="d-inline m-0 p-0" data-confirm-delete="true" data-item-name="Siswa {{ $ppdb->name }}">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm shadow-sm py-1 px-2" data-bs-toggle="tooltip" title="Batalkan Konversi">
                            <i class="fa fa-undo"></i>
                        </button>
                    </form>
                @endif
            </div>
          </td>
        </tr>
      @empty
        <tr>
            <td colspan="6" class="text-center py-5 text-muted border-0">
                <i class="fa fa-users-slash fa-3x mb-3 opacity-25"></i>
                <h5>Tidak ada data {{ strtolower($genderLabel ?? 'calon siswa') }} pada kategori ini.</h5>
            </td>
        </tr>
      @endforelse
    </tbody>
  </table>
</div>