@extends('layouts.master')

@section('title', 'Student List')

@section('content')
<div class="page-heading">
    <x-page-title title="Student List" />

    <section class="section">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table" id="students-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Batch</th>
                                <th>Photo</th>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>Emergency Contact</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@push('js')
<script>
$(document).ready(function() {
    $('#students-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.students.index') }}",
        columns: [
            { data: 'registration_no', name: 'registration_no' },
            { data: 'batch', name: 'batch' },
            { data: 'photo', name: 'photo', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'phone', name: 'phone' },
            { data: 'emergency_contact', name: 'emergency_contact' },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
        responsive: true
    });
});
</script>
@endpush