<x-app-layout>
    <x-slot name="header">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <h2 class="h4 mb-0">MikroTik Online List</h2>
            </div>
        </div>
    </x-slot>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="mikrotikOnlineTable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Customer ID</th>
                            <th>Customer Name</th>
                            <th>Phone</th>
                            <th>Username</th>
                            <th>Address</th>
                            <th>Profile</th>
                            <th>Service</th>
                            <th>Uptime</th>
                            <th>Caller ID</th>
                            <th>Router</th>
                            <th>Router IP</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const table = $('#mikrotikOnlineTable').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    ajax: '{!! route('admin.mikrotik.online.data') !!}',
                    columns: [
                        { data: 'customer_code', name: 'customer_code', defaultContent: '—' },
                        { data: 'customer_name', name: 'customer_name' },
                        { data: 'contact_phone', name: 'contact_phone', defaultContent: '—' },
                        { data: 'name', name: 'name' },
                        { data: 'address', name: 'address' },
                        { data: 'profile', name: 'profile' },
                        { data: 'service', name: 'service' },
                        { data: 'uptime', name: 'uptime' },
                        { data: 'caller_id', name: 'caller_id' },
                        { data: 'router_name', name: 'router_name' },
                        { data: 'router_ip', name: 'router_ip' },
                    ]
                });
                window.setInterval(() => table.ajax.reload(null, false), 30000);
            });
        </script>
    @endpush
</x-app-layout>
