{include file="sections/header.tpl"}

<!-- Main form for router selection -->


<div class="row">

    <div class="col-sm-12">
        <div class="card card-hovered mb-4">
            <form class="form-horizontal" method="post" action="{$_url}plugin/pppoe_monitor_router_menu">
                <ul class="nav nav-tabs">
                    {foreach $routers as $r}
                    <li class="nav-item">
                        <a class="nav-link {if $r['id']==$router}active{/if}" href="{$_url}plugin/pppoe_monitor_router_menu/{$r['id']}">{$r['name']}</a>
                    </li>
                    {/foreach}
                </ul>
            </form>
            <div class="card-header">
                <h5 class="m-0">{Lang::T('Hotspot Users')}</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <div class="row">
                        <div class="col-md-8">
                            <!-- Search form -->
                            <form id="site-search" method="post" action="{$_url}hotspot_users/list/">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <span class="fa fa-search"></span>
                                        </span>
                                    </div>
                                    <input type="text" name="username" class="form-control" placeholder="{Lang::T('Search by Username')}...">
                                    <div class="input-group-append">
                                        <button class="btn btn-success" type="submit">{Lang::T('Search')}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="hotspot_users_table" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>{Lang::T('Username')}</th>
                                <th>{Lang::T('Address')}</th>
                                <th>{Lang::T('Uptime')}</th>
                                <th>{Lang::T('Server')}</th>
                                <th>{Lang::T('MAC Address')}</th>
                                <th>{Lang::T('Session Time')}</th>
                                <th style="color: red;">{Lang::T('Upload')}</th>
                                <th style="color: green;">{Lang::T('Download')}</th>
                                <th>{Lang::T('Total')}</th>
                                <th>{Lang::T('Action')}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- DataTables will populate the table body dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {include file="pagination.tpl"}
    </div>
</div>

{include file="sections/footer.tpl"}

<!-- Include jQuery and DataTables JS CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    $('#hotspot_users_table').DataTable({
        "ajax": {
            "url": "{$_url}onlineusers/hotspot_users",
            "dataSrc": ""
        },
        "columns": [
            { "data": "username", "render": function(data) {
                return '<span style="color: blue;">' + data + '</span>';
            }},
            { "data": "address" },
            { "data": "uptime" },
            { "data": "server" },
            { "data": "mac" },
            { "data": "session_time" },
            { "data": "rx_bytes" },
            { "data": "tx_bytes" },
            { "data": null, "render": function(data, type, row) {
                return '<form method="post" action="{$_url}onlineusers/disconnect/{$routerId}/' + row.username + '/hotspot" style="display: inline;">' +
                       '<button type="submit" class="btn btn-danger btn-sm" title="Disconnect"><i class="fa fa-times"></i></button>' +
                       '</form>';
            }}
        ],
        "lengthMenu": [10, 25, 50, 100],
        "pageLength": 10,
        "ordering": true,
        "searching": true,
        "info": true,
        "autoWidth": false
    });
});
</script>
