@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 Alumni</h1>
                        <p class="mt-2 text-black/85 max-w-xl">Daftar Alumni 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 Alumni</li>
                        </ol>
                    </nav>

                </div>
            </div>          
            <div class="mb-6">
                <label>Tahun Lulus</label>
                <div class="mb-4">
                    <input type="text" class="px-3 py-2 border border-gray-300 rounded" id="year" name="year" placeholder="Tahun Lulus" value="{{date('Y')}}" >
                    <button class="px-4 py-2 bg-utama text-white rounded hover:bg-utama-gelap" onclick="searYear()" id="btn-year"><i class="fa fa-search"></i> Cari</button>
                </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 Alumni</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">Program Keahlian / Kelas</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Konsentrasi Keahlian / Jurusan</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Tahun Lulus</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Status</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('getStudentPassedfrontend') }}",
                data: function(d) {
                    d.year = $('#year').val()
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false

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

    function searYear() {
        var year = $('#year').val();
        if (year == '') {
            Swal.fire({
                title: "Tahun Lulus Kosong",
                text: "Tahun Lulus tidak boleh kosong!",
                icon: "error"
            });
            return false;
        } else {
            table.ajax.reload(null, false);
        }
    }
</script>
@endsection