@extends('layouts.frontend')
@section('main-content')
    <section id="alumni" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="relative rounded-lg overflow-hidden mb-8">
                <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{asset('assets/admin/images/breadcum.jpg')}}');"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-yellow-400/70 via-yellow-200/30 to-emerald-600/70"></div>
                
                <div class="relative z-10 max-w-7xl mx-auto px-4 py-5 md:py-9 flex flex-col md:flex-row md:items-center md:justify-between">
                    
                    <div>
                        <h1 class="text-2xl md:text-4xl font-bold text-black">Data Siswa</h1>
                        <p class="mt-2 text-black/85 max-w-xl">Daftar Siswa lengkap dengan informasi singkat. Gunakan kotak pencarian untuk menemukan siswa.</p>
                    </div>

                    <nav class="text-sm text-black/95 mt-4 md:mt-0" aria-label="Breadcrumb">
                        <ol class="list-reset flex items-center space-x-2 justify-start md:justify-end">
                            <li><a href="{{ url('/') }}" class="hover:underline text-black">Beranda</a></li>
                            <li class="text-black/60">/</li>
                            <li class="text-black font-semibold">Data Siswa</li>
                        </ol>
                    </nav>

                </div>
            </div>            
            <div class="overflow-x-auto">
                <table id="ajax-datatables" class="min-w-full bg-white border border-gray-300 table-auto border-collapse">
                    <thead>
                        <tr>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">#</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Nama Siswa</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Jenis Kelamin</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Tingkat</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Kelas</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Program Keahlian</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-700 divide-y divide-gray-200">
                    </tbody>
                </table>
            </div>
        </div>
    </section>

<script>
    var table;
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        table = $('#ajax-datatables').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            responsive: true,
            ajax: {
                url: "{{ route('getStudentfrontend') }}"
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false

                },
                {
                    data: 'fullname',
                    name: 'fullname'
                },
                {
                    data: 'gender',
                    name: 'gender'
                },
                {
                    data: 'grade',
                    name: 'grade'
                },
                {
                    data: 'classroom',
                    name: 'classroom'
                },
                {
                    data: 'major',
                    name: 'major'
                },
            ]
        });

    });

</script>
<style>
    #ajax-datatables td{ border:1px solid #e5e7eb; }
</style>
@endsection