@extends('admin.layout.base')

@push('styles')
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css">
@endpush

@section('content')
<div class="content-container">
    <div class="table-container">
        <table id="usersTable" class="display">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data will be inserted here via AJAX -->
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('js')
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>

<script>
$(document).ready(function() {
    $('#usersTable').DataTable({
        processing: true,
        serverSide: false, 
        ajax: {
            url: "{{ url('/api/users') }}", 
            type: "GET",
            dataSrc: ""
        },
        columns: [
            { data: "fullname" },
            { data: "email" },
            { data: "phone" }
        ]
    });
});
</script>
@endpush