@extends('guru.layouts.app')

@section('title', 'Daftar Siswa')

@section('content')

<style>
    .page-title {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 12px;
        margin-top: -10px;
    }
    @media (min-width: 769px) {
        .page-title { font-size: 30px; margin-top: -20px; margin-bottom: 10px; }
    }

    .custom-card {
        background: white;
        border-radius: 16px;
        border: 2px solid #e5e5e5;
        padding: 14px;
    }
    @media (min-width: 769px) { .custom-card { border-radius: 20px; padding: 25px; } }

    .table-header { background: #bae6fd; }

    /* ── CONTROLS BAR ── */
    .controls-bar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }
    @media (min-width: 576px) {
        .controls-bar {
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

    .search-box {
        background: #bae6fd;
        border-radius: 30px;
        padding: 6px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    @media (min-width: 576px) { .search-box { width: auto; } }
    .search-box input {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
        min-width: 0;
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
    }
    @media (min-width: 576px) { .search-box input { width: 150px; } }

    /* ── FILTER ROW ── */
    .filter-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 13px;
    }
    .per-page-select, .filter-select {
        border-radius: 8px;
        padding: 5px 8px;
        border: 1px solid #ccc;
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
    }

    /* ── TABLE ── */
    .table-responsive-custom {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table { min-width: 560px; }

    .badge-info {
        background: #e0f2fe;
        color: #0369a1;
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
    }
</style>

<h3 class="page-title">DAFTAR SISWA</h3>

<div class="custom-card">

    {{-- Search --}}
    <div class="controls-bar">
        <form method="GET" style="width:100%">
            <div class="search-box">
                <input type="text" name="search" placeholder="Cari siswa..." value="{{ request('search') }}">
                <button style="border:none;background:none;flex-shrink:0">
                    <img src="{{ asset('images/icon/main/search.png') }}" width="18" height="18" alt="Cari siswa">
                </button>
            </div>
        </form>
    </div>

    {{-- Filters --}}
    <form method="GET" class="filter-row">
        <span>Tampilkan</span>
        <select name="perPage" onchange="this.form.submit()" class="per-page-select">
            <option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
            <option value="25" {{ request('perPage') == 25 ? 'selected' : '' }}>25</option>
            <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
        </select>
        <span>data</span>

        <span>Filter Kelas</span>
        <select name="filter_kelas" onchange="this.form.submit()" class="filter-select">
            <option value="">Semua Kelas</option>
            @foreach($kelass as $kelas)
                <option value="{{ $kelas->id_kelas }}"
                    {{ request('filter_kelas') == $kelas->id_kelas ? 'selected' : '' }}>
                    {{ $kelas->tingkat }} - {{ $kelas->nama_kelas }}
                </option>
            @endforeach
        </select>
        <input type="hidden" name="search" value="{{ request('search') }}">
    </form>

    <div class="table-responsive-custom">
        <table class="table text-center align-middle">
            <thead class="table-header">
                <tr>
                    <th>No</th>
                    <th>NISN</th>
                    <th>Nama</th>
                    <th>Tempat Lahir</th>
                    <th>Tanggal Lahir</th>
                    <th>Kelas</th>
                </tr>
            </thead>

            <tbody>
                @forelse($siswas as $index => $siswa)
                <tr>
                    <td>{{ $siswas->firstItem() + $index }}</td>
                    <td>{{ $siswa->nisn }}</td>
                    <td style="text-align:left;white-space:nowrap;font-weight:500">{{ $siswa->nama }}</td>
                    <td>{{ $siswa->tempat_lahir }}</td>
                    <td style="white-space:nowrap">{{ \Carbon\Carbon::parse($siswa->tanggal_lahir)->format('d M Y') }}</td>
                    <td style="white-space:nowrap">{{ $siswa->kelas->tingkat }} - {{ $siswa->kelas->nama_kelas }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-muted py-4">Belum ada data siswa</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-end mt-2">
        {{ $siswas->links() }}
    </div>

</div>

@endsection