@extends('layouts.app')

@section('title', 'Data PSAJ - ' . $jenjang)

@section('content')
<div class="container-fluid">
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle-fill me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif
    
    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif
    
    <!-- Page Header -->
    <div class="row mb-3">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item">Data PSAJ</li>
                    <li class="breadcrumb-item active">{{ $jenjang }}</li>
                </ol>
            </nav>
            <h2 class="h4 mb-0">Data PSAJ - {{ $jenjang }}</h2>
            @if($school)
            <p class="text-muted">{{ $school->name }}</p>
            @endif
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-primary bg-opacity-10 p-3">
                                <i class="bi bi-people-fill fs-4 text-primary"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1 small">Total Siswa Kelas {{ $jenjang == 'SDLB' ? 'VI' : ($jenjang == 'SMPLB' ? 'IX' : 'XII') }}</h6>
                            <h3 class="mb-0">{{ $students->count() }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-info bg-opacity-10 p-3">
                                <i class="bi bi-gender-male fs-4 text-info"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1 small">Laki-laki</h6>
                            <h3 class="mb-0">{{ $students->where('jenis_kelamin', 'L')->count() }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-success bg-opacity-10 p-3">
                                <i class="bi bi-gender-female fs-4 text-success"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1 small">Perempuan</h6>
                            <h3 class="mb-0">{{ $students->where('jenis_kelamin', 'P')->count() }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-warning bg-opacity-10 p-3">
                                <i class="bi bi-camera-fill fs-4 text-warning"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1 small">Dengan Foto</h6>
                            <h3 class="mb-0">{{ $students->whereNotNull('photo')->count() }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="bi bi-list-ul me-2"></i>
                Daftar Siswa Kelas {{ $jenjang == 'SDLB' ? 'VI' : ($jenjang == 'SMPLB' ? 'IX' : 'XII') }}
            </h5>
            <div>
                <a href="{{ route('students.create') }}" class="btn btn-light btn-sm me-2">
                    <i class="bi bi-plus-circle me-1"></i> Tambah Siswa Baru
                </a>
                <a href="{{ route('admin-sekolah.psaj.kartu-batch', ['jenjang' => strtolower($jenjang)]) }}" 
                   class="btn btn-info btn-sm" 
                   target="_blank">
                    <i class="bi bi-printer-fill me-1"></i> Cetak Kartu
                </a>
            </div>
        </div>
        <div class="card-body">
            @if($students->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 3%">#</th>
                            <th style="width: 8%">Foto</th>
                            <th style="width: 15%">Nama</th>
                            <th style="width: 10%">NIK</th>
                            <th style="width: 8%">NISN</th>
                            <th style="width: 8%">NIS</th>
                            <th style="width: 5%" class="text-center">JK</th>
                            <th style="width: 12%">TTL</th>
                            <th style="width: 10%">Nama Ibu</th>
                            <th style="width: 12%">Ketunaan</th>
                            <th style="width: 9%" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($students as $index => $student)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>
                                @if($student->photo)
                                    <img src="{{ asset('storage/' . $student->photo) }}" 
                                         alt="{{ $student->nama }}" 
                                         class="img-thumbnail" 
                                         style="width: 50px; height: 50px; object-fit: cover;">
                                @else
                                    <div class="bg-secondary text-white text-center rounded" 
                                         style="width: 50px; height: 50px; line-height: 50px; font-size: 20px;">
                                        <i class="bi bi-person-fill"></i>
                                    </div>
                                @endif
                            </td>
                            <td>
                                <strong>{{ $student->nama }}</strong>
                            </td>
                            <td><small>{{ $student->nik }}</small></td>
                            <td>{{ $student->nisn }}</td>
                            <td>{{ $student->nis }}</td>
                            <td class="text-center">
                                <span class="badge bg-{{ $student->jenis_kelamin == 'L' ? 'info' : 'success' }}">
                                    {{ $student->jenis_kelamin }}
                                </span>
                            </td>
                            <td>
                                <small>{{ $student->tempat_lahir }}, {{ $student->tanggal_lahir->format('d/m/Y') }}</small>
                            </td>
                            <td>{{ $student->nama_ibu }}</td>
                            <td>
                                @if($student->disabilityType)
                                    <span class="badge bg-warning text-dark">{{ $student->disabilityType->code }}</span>
                                    <small>{{ $student->disabilityType->name }}</small>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('students.show', $student) }}" 
                                       class="btn btn-outline-info" 
                                       title="Lihat Detail">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('students.edit', $student) }}" 
                                       class="btn btn-outline-primary" 
                                       title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="{{ route('admin-sekolah.psaj.kartu', ['jenjang' => strtolower($jenjang), 'noPeserta' => $student->id]) }}" 
                                       class="btn btn-outline-success" 
                                       target="_blank"
                                       title="Cetak Kartu">
                                        <i class="bi bi-printer"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="text-center py-5">
                <i class="bi bi-inbox text-muted" style="font-size: 4rem;"></i>
                <h5 class="text-muted mt-3">Belum Ada Data Siswa</h5>
                <p class="text-muted">
                    Belum ada siswa kelas {{ $jenjang == 'SDLB' ? 'VI' : ($jenjang == 'SMPLB' ? 'IX' : 'XII') }} di sekolah ini.
                </p>
                <a href="{{ route('students.create') }}" class="btn btn-primary mt-2">
                    <i class="bi bi-plus-circle me-1"></i> Tambah Siswa Pertama
                </a>
            </div>
            @endif
        </div>
    </div>

    <!-- Info Box -->
    <div class="alert alert-info mt-4" role="alert">
        <h6 class="alert-heading">
            <i class="bi bi-info-circle me-2"></i>Informasi PSAJ
        </h6>
        <ul class="mb-0 small">
            <li>Data PSAJ {{ $jenjang }} mengambil data dari siswa <strong>Kelas {{ $jenjang == 'SDLB' ? 'VI' : ($jenjang == 'SMPLB' ? 'IX' : 'XII') }}</strong></li>
            <li>Pastikan setiap siswa sudah memiliki <strong>foto</strong> untuk keperluan cetak kartu peserta</li>
            <li>Upload foto siswa melalui menu Edit pada masing-masing data siswa</li>
            <li>Foto yang direkomendasikan: ukuran 3x4 cm, format JPG/PNG, maksimal 2MB</li>
            <li>Untuk menambah siswa baru, gunakan tombol "Tambah Siswa Baru" dan pastikan pilih kelas yang sesuai</li>
        </ul>
    </div>
</div>
@endsection