{{-- resources/views/public/siswa.blade.php --}}
@extends('layouts.public')
@section('title', 'Direktori Santri / Siswa')

@section('content')
<section class="position-relative d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 40vh; padding-top: 140px; padding-bottom: 80px; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%);">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3;"></div>
    
    <div class="container position-relative text-center text-white" style="z-index: 2;">
        <span class="badge px-4 py-2 rounded-pill mb-3" style="background: var(--accent-gold); color: var(--primary-dark); font-size: 0.95rem; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
            <i class="bi bi-mortarboard-fill me-1"></i> Peserta Didik
        </span>
        <h1 class="fw-bold mx-auto mb-3" style="font-size: 3rem; font-family: 'Cairo', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.3);">
            Direktori Santri & Siswa
        </h1>
        <p class="lead mx-auto" style="max-width: 700px; color: rgba(255,255,255,0.9); font-weight: 400; font-size: 1.1rem;">
            Mengenal lebih dekat para generasi penerus bangsa yang sedang menuntut ilmu di madrasah kami.
        </p>
    </div>
</section>

<section class="section-spacing section-bg-light" style="padding-top: 60px; padding-bottom: 100px;">
    <div class="container">
        <ul class="nav nav-pills justify-content-center mb-5 flex-wrap gap-2" id="direktori-siswa-tab" role="tablist">
            @forelse($jenjangs as $idx => $jenjang)
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ $idx == 0 ? 'active' : '' }} px-4 fw-bold rounded-pill shadow-sm bg-white text-dark border" id="jenjang-tab-{{ $jenjang->id }}" data-bs-toggle="pill" data-bs-target="#tab-jenjang-{{ $jenjang->id }}" type="button" role="tab" style="transition: all 0.3s;">
                        <i class="bi bi-layers me-1"></i> Jenjang {{ $jenjang->nama_jenjang }}
                    </button>
                </li>
            @empty
                <li class="nav-item">
                    <span class="nav-link disabled">Belum ada jenjang pendidikan terdaftar</span>
                </li>
            @endforelse
        </ul>

        <div class="tab-content" id="direktoriSiswaTabContent">
            
            @foreach($jenjangs as $idx => $jenjang)
                <div class="tab-pane fade {{ $idx == 0 ? 'show active' : '' }}" id="tab-jenjang-{{ $jenjang->id }}" role="tabpanel">
                    
                    @php
                        $siswaPerJenjang = collect();
                        foreach($jenjang->tingkats as $tingkat) {
                            foreach($tingkat->kelases as $kelas) {
                                foreach($kelas->siswa as $siswa) {
                                    $siswa->nama_kelas_full = $tingkat->nama_tingkat . ' - ' . $kelas->nama_kelas;
                                    $siswaPerJenjang->push($siswa);
                                }
                            }
                        }
                    @endphp

                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
                        @forelse($siswaPerJenjang as $siswa)
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden hover-lift text-center" style="transition: transform 0.3s ease, box-shadow 0.3s ease;">
                                <div class="card-body p-4">
                                    
                                    <div class="mb-4 position-relative d-inline-block">
                                        <img src="{{ $siswa->foto ? asset('storage/siswa/' . $siswa->foto) : 'https://ui-avatars.com/api/?name='.urlencode($siswa->nama_lengkap).'&background=random&size=200' }}" 
                                             class="img-fluid rounded-circle shadow-sm border border-white" 
                                             style="width: 120px; height: 120px; object-fit: cover; background: #f8f9fa; border-width: 3px !important;" 
                                             alt="Foto Siswa">
                                        
                                        <span class="position-absolute bottom-0 end-0 translate-middle-x p-2 border border-light rounded-circle shadow-sm {{ $siswa->jenis_kelamin == 'L' ? 'bg-primary' : 'bg-danger' }} text-white" style="width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: -10px;">
                                            <i class="bi {{ $siswa->jenis_kelamin == 'L' ? 'bi-gender-male' : 'bi-gender-female' }}" style="font-size: 14px;"></i>
                                        </span>
                                    </div>
                                    
                                    <h5 class="fw-bold text-dark mb-1 text-truncate" style="font-size: 1.1rem;" title="{{ $siswa->nama_lengkap }}">{{ $siswa->nama_lengkap }}</h5>
                                    
                                    <div class="mb-3 mt-2">
                                        <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill fw-medium border border-success border-opacity-25">
                                            <i class="bi bi-door-open me-1"></i> Kelas {{ $siswa->nama_kelas_full }}
                                        </span>
                                    </div>
                                    
                                    <div class="text-muted small mb-0 mt-3 border-top pt-3 text-start" style="border-color: rgba(0,0,0,0.05) !important;">
                                        <div class="d-flex justify-content-between mb-1">
                                            <span><i class="bi bi-upc-scan me-1"></i> NIS:</span>
                                            <strong class="text-dark">{{ $siswa->nis ?? '-' }}</strong>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span><i class="bi bi-person-vcard me-1"></i> NISN:</span>
                                            <strong class="text-dark">{{ $siswa->nisn ?? '-' }}</strong>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="col-12 text-center py-5 text-muted">
                            <i class="bi bi-person-slash" style="font-size: 4rem; opacity: 0.5;"></i>
                            <p class="mt-3 fs-5">Belum ada siswa aktif yang terdaftar di Jenjang {{ $jenjang->nama_jenjang }}.</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            @endforeach
            
        </div>
        
    </div>
</section>

<style>
    .hover-lift:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; 
    }
    
    #direktori-siswa-tab .nav-link.active {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%) !important;
        color: white !important;
        border-color: transparent !important;
    }
    #direktori-siswa-tab .nav-link:not(.active):hover {
        background-color: rgba(0,0,0,0.04) !important;
    }
</style>
@endsection