@extends('guru.kelas.layout')

@section('tab_content')
<div class="main-grid" style="grid-template-columns: 1fr; align-items: start;">
    <div class="card" style="background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; overflow: hidden;">
        <div class="card-header" style="background: #f8fafc; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <h3 style="margin: 0; font-size: 1.15rem; font-weight: 700; color: #1e293b;"><i class="fa-solid fa-users-line text-primary"></i> Daftar Anggota Kelas {{ $kelas->nama_kelas }}</h3>
            <span style="font-weight: 600; padding: 4px 12px; border-radius: 9999px; font-size: 0.84rem; background-color: #eff6ff; color: #2563eb;">Total: {{ count($siswaList) }} Siswa</span>
        </div>
        
        <div class="card-body" style="padding: 20px;">
            <!-- Search bar -->
            <div style="margin-bottom: 16px; display: flex; justify-content: flex-end;">
                <input 
                    type="text" 
                    id="search-anggota" 
                    class="form-control" 
                    placeholder="Cari anggota kelas..." 
                    onkeyup="searchAnggota()" 
                    style="max-width: 300px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 38px; width: 100%;"
                >
            </div>

            <!-- Anggota Table -->
            <div class="table-responsive" style="overflow-x: auto; width: 100%;">
                <table class="modern-table" id="anggota-table" style="width: 100%; border-collapse: collapse; text-align: left;">
                    <thead>
                        <tr style="border-bottom: 2px solid #e2e8f0; background-color: #f8fafc;">
                            <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; width: 60px;">No</th>
                            <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; width: 120px;">NIS</th>
                            <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase;">Nama Siswa</th>
                            <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; width: 160px;">Jenis Kelamin</th>
                            <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; width: 120px;">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($siswaList as $s)
                            <tr class="anggota-row" style="border-bottom: 1px solid #e2e8f0; transition: background 0.15s ease;">
                                <td style="padding: 14px; color: #475569;">{{ $loop->iteration }}</td>
                                <td style="padding: 14px; font-weight: 600; color: #334155;">{{ $s->siswaProfile?->nis ?: '-' }}</td>
                                <td class="anggota-nama" style="padding: 14px; font-weight: 600; color: #0f172a;">{{ $s->name }}</td>
                                <td style="padding: 14px; color: #475569;">
                                    @if(($s->siswaProfile?->jenis_kelamin ?? '') === 'L')
                                        <span style="display: inline-flex; align-items: center; gap: 6px;"><i class="fa-solid fa-mars" style="color: #3b82f6;"></i> Laki-laki</span>
                                    @elseif(($s->siswaProfile?->jenis_kelamin ?? '') === 'P')
                                        <span style="display: inline-flex; align-items: center; gap: 6px;"><i class="fa-solid fa-venus" style="color: #ec4899;"></i> Perempuan</span>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td style="padding: 14px;">
                                    <span style="display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 9999px; font-size: 0.78rem; font-weight: 600; background-color: #d1e7dd; color: #0f5132;"><i class="fa-solid fa-circle-check"></i> Aktif</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" style="padding: 24px; text-align: center; color: #64748b;">Belum ada siswa terdaftar di kelas ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function searchAnggota() {
        const input = document.getElementById("search-anggota").value.toLowerCase();
        const rows = document.querySelectorAll(".anggota-row");

        rows.forEach(row => {
            const nameEl = row.querySelector(".anggota-nama");
            if (nameEl) {
                const name = nameEl.textContent.toLowerCase();
                if (name.includes(input)) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            }
        });
    }
</script>
@endpush