{{-- resources/views/public/guru/siswa_kelas.blade.php --}}
@extends('layouts.app')
@section('title', 'Data Siswa Kelas - ' . ($setting->web_name ?? 'Sekolah'))

@section('content')

@include('public.guru._hero')

<section class="section light-background pt-3 pb-5" style="min-height: 50vh;">
    <div class="container" data-aos="fade-up">
        
        <div class="d-flex flex-column flex-md-row align-items-center justify-content-between mb-4 px-2">
            <div class="mb-3 mb-md-0 text-center text-md-start">
                <h4 class="fw-bold text-dark mb-1"><i class="fas fa-users text-info me-2"></i> Daftar Siswa</h4>
                <p class="text-muted mb-0">
                    Kelas: <strong class="text-primary">{{ $kelas->nama_kelas ?? $kelas->rombel->nama_rombel ?? '-' }}</strong> | 
                    Wali Kelas: <strong>{{ $kelas->waliKelas->name ?? 'Belum Diatur' }}</strong>
                </p>
            </div>
            
            <a href="{{ route('guru.jadwal') }}" class="btn btn-outline-secondary rounded-pill px-4 shadow-sm">
                <i class="fas fa-arrow-left me-2"></i>Kembali ke Jadwal
            </a>
        </div>

        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-header bg-info text-white py-3 px-4 border-0 d-flex justify-content-between align-items-center">
                <h6 class="fw-bold mb-0 text-uppercase"><i class="fas fa-list-ol me-2"></i> Siswa Aktif</h6>
                <span class="badge bg-white text-info rounded-pill">{{ $siswas->count() }} Siswa</span>
            </div>
            
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light text-center small text-muted">
                            <tr>
                                <th width="5%" class="py-3">No</th>
                                <th width="10%" class="py-3">Foto</th>
                                <th width="20%" class="py-3">NIS / NIPD</th>
                                <th width="50%" class="py-3 text-start">Nama Lengkap</th>
                                <th width="15%" class="py-3">L/P</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($siswas as $index => $siswa)
                                <tr class="text-center">
                                    <td class="fw-bold text-secondary">{{ $index + 1 }}</td>
                                    <td>
                                        <img src="{{ $siswa->img ? asset('uploads/siswa/' . $siswa->img) : asset('kaiadmin/assets/img/iconuser.png') }}" 
                                             alt="Foto {{ $siswa->name }}" 
                                             class="rounded-circle shadow-sm border" 
                                             style="width: 45px; height: 45px; object-fit: cover;">
                                    </td>
                                    <td>
                                        <span class="fw-bold text-dark">{{ $siswa->nipd ?? '-' }}</span><br>
                                        <small class="text-muted">{{ $siswa->nis ?? '-' }}</small>
                                    </td>
                                    <td class="text-start">
                                        <div class="fw-bold text-dark fs-6">{{ $siswa->name }}</div>
                                    </td>
                                    <td>
                                        @if($siswa->jenkel == 'L')
                                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary-subtle px-3"><i class="fas fa-male me-1"></i> Laki-laki</span>
                                        @else
                                            <span class="badge bg-warning bg-opacity-10 text-warning border border-warning-subtle px-3"><i class="fas fa-female me-1"></i> Perempuan</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <i class="fas fa-user-slash fa-3x mb-3 opacity-50"></i>
                                        <h5 class="fw-bold">Belum Ada Siswa</h5>
                                        <p>Data siswa untuk kelas ini belum diinput atau tidak ada siswa yang berstatus Aktif.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection

@push('scripts')
<style>
    #header { background-color: #263351 !important; }
    #header.header-scrolled { background-color: rgba(38, 51, 81, 0.95) !important; }
    .table-hover tbody tr:hover { background-color: #f8f9fa; }
</style>
@endpush