@extends('layouts.admin')

@section('page_title', 'Student Management')

@section('content')
<div class="card admin-card border-0 shadow-sm" style="border-radius: 12px;">
    <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <div class="bg-primary bg-opacity-10 text-primary rounded-2 p-2 me-3">
                <i class="bi bi-people fs-5"></i>
            </div>
            <div>
                <h6 class="fw-bold mb-0">Student Management</h6>
                <p class="text-secondary mb-0" style="font-size: 0.75rem;">Monitor and manage registered student accounts.</p>
            </div>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle w-100 mb-0" id="users-table">
                <thead class="bg-light bg-opacity-50">
                    <tr>
                        <th class="border-0 small text-uppercase py-3 px-4">ID</th>
                        <th class="border-0 small text-uppercase py-3">Name</th>
                        <th class="border-0 small text-uppercase py-3">Email</th>
                        <th class="border-0 small text-uppercase py-3">Standard</th>
                        <th class="border-0 small text-uppercase py-3">Subjects</th>
                        <th class="border-0 small text-uppercase py-3 px-4 text-end" width="100px">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(function() {
        var table = $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.users.index') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'standard', name: 'standard'},
                {data: 'subjects_count', name: 'subjects_count'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],
            language: {
                searchPlaceholder: "Search students...",
                paginate: {
                    previous: '<i class="bi bi-chevron-left"></i>',
                    next: '<i class="bi bi-chevron-right"></i>'
                }
            }
        });
    });

    function deleteStudent(id) {
        if (confirm('Are you sure you want to delete this student account? This action cannot be undone.')) {
            $.ajax({
                url: "{{ url('admin/users') }}/" + id,
                type: 'DELETE',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#users-table').DataTable().ajax.reload();
                    alert(response.success);
                }
            });
        }
    }
</script>
@endpush
@endsection