@extends('layouts.website')

@section('title', 'Directory Peserta Didik')

@section('content')

<style>
    /* Styling Custom agar selaras dengan tema Website */
    .text-primary-custom {
        color: #1a237e !important;
    }
    .bg-primary-custom {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    }
    .btn-primary-custom {
        background: #1a237e;
        border: none;
        color: white;
    }
    .btn-primary-custom:hover {
        background: #283593;
        color: white;
    }
    .table-hover tbody tr:hover {
        background-color: rgba(26, 35, 126, 0.05);
        transition: 0.3s;
    }
    .input-group-text {
        background: transparent;
        border-right: none;
    }
    .search-input {
        border-left: none;
    }
    .search-input:focus {
        box-shadow: none;
        border-color: #ced4da;
    }
</style>

<div class="container my-5" style="min-height: 70vh;">
    
    {{-- 1. HEADER --}}
    <div class="text-center mb-5" data-aos="fade-down" data-aos-duration="1000">
        <h2 class="fw-bold text-primary-custom">Directory Peserta Didik</h2>
        <p class="text-muted mt-2">Data seluruh peserta didik aktif SMK Swasta 16 Farmasi Bengkulu.</p>
        <div style="width: 50px; height: 3px; background: #fbc02d; margin: 0 auto;"></div>
    </div>

    {{-- 2. SEARCH & FILTER --}}
    <div class="row justify-content-center mb-4" data-aos="fade-up">
        <div class="col-md-8">
            <form action="{{ route('directory.siswa') }}" method="GET">
                <div class="input-group input-group-lg shadow-sm rounded-pill overflow-hidden bg-white">
                    <span class="input-group-text ps-4 border-0 bg-white text-muted"><i class="fas fa-search"></i></span>
                    <input type="text" name="q" class="form-control border-0 search-input" placeholder="Cari berdasarkan nama atau jurusan..." value="{{ request('q') }}">
                    <button class="btn btn-primary-custom px-4 fw-bold" type="submit">Cari</button>
                    @if(request('q'))
                        <a href="{{ route('directory.siswa') }}" class="btn btn-secondary px-3" title="Reset Pencarian"><i class="fas fa-times"></i></a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    {{-- 3. DATA TABLE --}}
    <div class="card shadow-lg border-0 rounded-4 overflow-hidden" data-aos="fade-up" data-aos-delay="200">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-primary-custom text-white">
                        <tr>
                            <th class="py-3 px-3 text-center" width="5%">No</th>
                            <th class="py-3 px-3" width="30%">Nama Lengkap</th>
                            <th class="py-3 px-3" width="10%">Kelas</th>
                            <th class="py-3 px-3" width="20%">Jurusan</th>
                            <th class="py-3 px-3" width="25%">Asal Sekolah</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- Gunakan $siswas (bukan $siswas) sesuai Controller --}}
                        @forelse($siswas as $index => $item)
                            <tr>
                                <td class="text-center text-muted fw-bold">{{ $siswas->firstItem() + $index }}</td>
                                
                                {{-- Nama dengan Avatar Inisial --}}
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="rounded-circle bg-light d-flex align-items-center justify-content-center text-primary-custom fw-bold me-3 border" style="width: 35px; height: 35px;">
                                            {{ substr($item->nama_lengkap, 0, 1) }}
                                        </div>
                                        <div>
                                            <span class="fw-bold text-dark d-block">{{ $item->nama_lengkap }}</span>
                                            @if(!empty($item->nisn))
                                                <small class="text-muted" style="font-size: 0.75rem;">NISN: {{ $item->nisn }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </td>                                
                                
                                {{-- Kelas (Belum ada data) --}}
                                <td>
                                     @if($item->kelas)
                                        <span class="badge bg-info text-dark rounded-pill bg-opacity-25 border border-info">
                                            {{ $item->kelas }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                
                                {{-- Jurusan --}}
                                <td>
                                    @if($item->jurusan)
                                        <span class="badge bg-info text-dark rounded-pill bg-opacity-25 border border-info">
                                            {{ $item->jurusan }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                
                                {{-- Asal Sekolah (Belum ada data) --}}
                                <td>
                                     @if($item->asal_sekolah)
                                        <span class="badge bg-info text-dark rounded-pill bg-opacity-25 border border-info">
                                            {{ $item->asal_sekolah }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <div class="text-muted my-4">
                                        <i class="fas fa-inbox fa-3x mb-3 text-gray-300 opacity-50"></i>
                                        <p class="mb-0 fw-bold">Data tidak ditemukan.</p>
                                        <p class="small">Silakan coba kata kunci lain.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- 4. PAGINATION --}}
    <div class="d-flex justify-content-center mt-5">
        {{ $siswas->withQueryString()->links() }}
    </div>

</div>

@endsection