{include file="sections/header.tpl"}
<style>
    .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for zoom and shadow */
    }
    
    .card:hover {
        transform: scale(1.05); /* Zoom in */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
    }
    </style>
    
    <div class="row mb-4">
        {if in_array($_admin['user_type'], ['SuperAdmin', 'Admin', 'Report'])}
            <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                <a href="{$_url}reports/by-date" class="text-decoration-none">
                    <div class="card shadow h-100" style="border-left: 5px solid #3444d5; cursor: pointer;">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="text-muted small" style="font-size: 1rem;">{Lang::T('Income Today')}</div>
                                    <div class="font-weight-bold" style="font-size: 1.75rem;">
                                        <sup>{$_c['currency_code']}</sup>
                                        {number_format($iday, 0, $_c['dec_point'], $_c['thousands_sep'])}
                                    </div>
                                </div>
                                <i class="fas fa-calendar-day text-info" style="font-size: 2.5rem;"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
    
            <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                <a href="{$_url}reports/by-period" class="text-decoration-none">
                    <div class="card shadow h-100" style="border-left: 5px solid #28a745; cursor: pointer;">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="text-muted small" style="font-size: 1rem;">{Lang::T('Income This Month')}</div>
                                    <div class="font-weight-bold" style="font-size: 1.75rem;">
                                        <sup>{$_c['currency_code']}</sup>
                                        {if isset($imonth)}{number_format($imonth, 0, $_c['dec_point'], $_c['thousands_sep'])}{else}N/A{/if}
                                    </div>
                                </div>
                                <i class="fas fa-calendar-alt text-success" style="font-size: 2.5rem;"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
        {/if}
    
        <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
            <a href="{$_url}plan/list" class="text-decoration-none">
                <div class="card shadow h-100" style="border-left: 5px solid #ffc107; cursor: pointer;">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="text-muted small" style="font-size: 1rem;">{Lang::T('Users Active')}</div>
                                <div class="font-weight-bold" style="font-size: 1.75rem;">{$u_act}</div>
                            </div>
                            <i class="ion ion-person text-warning" style="font-size: 2.5rem;"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
            <a href="{$_url}customers/list" class="text-decoration-none">
                <div class="card shadow h-100" style="border-left: 5px solid #dc3545; cursor: pointer;">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="text-muted small" style="font-size: 1rem;">{Lang::T('Total Users')}</div>
                                <div class="font-weight-bold" style="font-size: 1.75rem;">{$c_all}</div>
                            </div>
                            <i class="fas fa-users text-danger" style="font-size: 2.5rem;"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    

<div class="row mb-4">
    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4 mb-3">
        <a href="{$_url}customers/list" class="text-decoration-none">
            <div class="card shadow-sm h-100" style="border-left: 5px solid #3444d5; cursor: pointer; height: 60px;">
                <div class="card-body p-1">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small">{Lang::T('Online Users')}</div>
                            <h4 class="font-weight-bold" id="total-online-users"></h4>
                        </div>
                        <i class="fas fa-users text-secondary" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4 mb-3">
        <a href="{$_url}data/usage" class="text-decoration-none">
            <div class="card shadow-sm h-100" style="border-left: 5px solid #FFC107; cursor: pointer; height: 60px;">
                <div class="card-body p-1">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small">{Lang::T('Data Usage')}</div>
                            <h4 class="font-weight-bold" id="total_data"></h4>
                        </div>
                        <i class="fas fa-signal text-warning" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4 mb-3">
        <a href="{$_url}onlineusers/hotspot" class="text-decoration-none">
            <div class="card shadow-sm h-100" style="border-left: 5px solid #28A745; cursor: pointer; height: 60px;">
                <div class="card-body p-1">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small">{Lang::T('Online Hotspot Users')}</div>
                            <h4 class="font-weight-bold" id="online-hotspot-users"></h4>
                        </div>
                        <i class="fas fa-wifi text-success" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4 mb-3">
        <a href="{$_url}plugin/pppoe_monitor_router_menu" class="text-decoration-none">
            <div class="card shadow-sm h-100" style="border-left: 5px solid #17A2B8; cursor: pointer; height: 60px;">
                <div class="card-body p-1">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-muted small">{Lang::T('Online PPPoE Users')}</div>
                            <h4 class="font-weight-bold" id="online-ppp-users"></h4>
                        </div>
                        <i class="fas fa-network-wired text-info" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="row mb-4">
    <div class="col-md-4">
        {if $run_date}
            {assign var="current_time" value=$smarty.now}
            {assign var="run_time" value=strtotime($run_date)}
            {if $current_time - $run_time > 3600}
                <div class="panel panel-cron-warning mb-3">
                    <div class="panel-heading"><i class="fa fa-clock-o"></i> &nbsp; {Lang::T('Cron has not run for over 1 hour. Please check your setup.')}</div>
                </div>
            {else}
                <div class="panel panel-cron-success mb-3">
                    <div class="panel-heading">{Lang::T('Cron Job last ran on')}: {$run_date}</div>
                </div>
            {/if}
        {else}
            <div class="panel panel-cron-danger mb-3">
                <div class="panel-heading"><i class="fa fa-warning"></i> &nbsp; {Lang::T('Cron appear not been setup, please check your cron setup.')}</div>
            </div>
        {/if}
    </div>
    <div class="col-md-4">
        {if $_c['router_check'] && count($routeroffs) > 0}
        <div class="panel panel-danger">
            <div class="panel-heading text-bold">{Lang::T('Routers Offline')}</div>
            <div class="table-responsive">
                <table class="table table-condensed">
                    <tbody>
                        {foreach $routeroffs as $ros}
                            <tr>
                                <td><a href="{$_url}routers/edit/{$ros['id']}" class="text-bold text-red">{$ros['name']}</a></td>
                                <td data-toggle="tooltip" data-placement="top" class="text-red"
                                        title="{Lang::dateTimeFormat($ros['last_seen'])}">{Lang::timeElapsed($ros['last_seen'])}
                                </td>
                            </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    {/if}
    </div>
    <div class="col-md-4">
        {if $_c['hide_pg'] != 'yes'}
            <div class="panel panel-success mb-3">
                <div class="panel-heading">{Lang::T('Payment Gateway')}: {str_replace(',', ', ', $_c['payment_gateway'])}</div>
            </div>
        {/if}
    </div>
</div>
    
    
    <ol class="breadcrumb">
        <li>{Lang::dateFormat($start_date)}-</li>
        <li>{Lang::dateFormat($current_date)}</li>
        {if $_c['enable_balance'] == 'yes' && in_array($_admin['user_type'], ['SuperAdmin', 'Admin', 'Report'])}
            <li onclick="window.location.href = '{$_url}customers&search=&order=balance&filter=Active&orderby=desc'" style="cursor: pointer;">
                {Lang::T('Customer Balance')} <sup>{$_c['currency_code']}</sup>
                <b>{number_format($cb, 0, $_c['dec_point'], $_c['thousands_sep'])}</b>
            </li>
        {/if}
    </ol>
    


<div class="row">
    <div class="col-md-6">
        {if $_c['hide_mrc'] != 'yes'}
            <div class="card card-solid">
                <div class="card-header">
                    <i class="fa fa-th"></i>
                    <h3 class="card-title">{Lang::T('Daily Active Users')}</h3>
                    <div class="card-tools pull-right"></div>
                </div>
                <div class="card-body border-radius-none">
                    <canvas class="chart" id="activeUsersChart" style="height: 250px;"></canvas>
                </div>
            </div>
        {/if}
    </div>



    <div class="col-md-6">
        {if $_c['hide_tms'] != 'yes'}
            <div class="card card-solid">
                <div class="card-header">
                    <i class="fa fa-inbox"></i>
                    <h3 class="card-title">{Lang::T('Daily Sales')}</h3>
                    <div class="card-tools pull-right"></div>
                </div>
                <div class="card-body border-radius-none">
                    <canvas class="chart" id="dailySalesChart" style="height: 250px;"></canvas>
                </div>
            </div>
        {/if}
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        {if $_c['hide_tms'] != 'yes'}
            <div class="card card-solid">
                <div class="card-header">
                    <i class="fa fa-inbox"></i>
                    <h3 class="card-title">{Lang::T('Total Monthly Sales')}</h3>
                    <div class="card-tools pull-right"></div>
                </div>
                <div class="card-body border-radius-none">
                    <canvas class="chart" id="salesChart" style="height: 250px;"></canvas>
                </div>
            </div>
        {/if}
    </div>

    <div class="col-md-6">
        {if $_c['hide_mrc'] != 'yes'}
            <div class="card card-solid">
                <div class="card-header">
                    <i class="fa fa-th"></i>
                    <h3 class="card-title">{Lang::T('Monthly Registered Customers')}</h3>
                    <div class="card-tools pull-right"></div>
                </div>
                <div class="card-body border-radius-none">
                    <canvas class="chart" id="chart" style="height: 250px;"></canvas>
                </div>
            </div>
        {/if}
    </div>

    <div class="col-md-12">
        

<div class="card card-info card-hovered mb20 activities">
    <div class="card-header">
    
        <h3 class="text-xl font-medium mb-2">Recent Transactions</h3>
    </div>
    <div class="card-body">
        <div class="table-responsive mt-4">
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Price</th>
                    <th>Recharged On</th>
                    <th>Recharged Time</th>
                    <th>Type</th>
                    <th>Method</th>
                </tr>
            </thead>
            <tbody>
                {foreach from=$latestTransactions item=transaction}
                <tr>
                    <td>{$transaction.username}</td>
                    <td>{$transaction.price}</td>
                    <td>{$transaction.recharged_on}</td>
                    <td>{$transaction.recharged_time}</td>
                    <td>{$transaction.type}</td>
                    <td>{$transaction.method}</td>
                </tr>
                {/foreach}
            </tbody>
        </table></div>
    </div>
</div>
</div>

</div>
    

<div class="row">
    
    <div class="col-md-6">
        {if $_c['hide_tms'] != 'yes'}
            <div class="card card-solid">
                <div class="card-header">
                    <i class="fa fa-inbox"></i>
                    <h3 class="card-title">{Lang::T('Hotspot Package Utilization')}</h3>
                    <div class="card-tools pull-right"></div>
                </div>
                <div class="card-body border-radius-none">
                    <canvas class="chart" id="hotspotChart" style="height: 50px;"></canvas>
                </div>
            </div>
        {/if}
    </div>
    <!-- PPPOE Package Utilization Chart -->
    <div class="col-md-6">
        {if $_c['hide_mrc'] != 'yes'}
            <div class="card card-solid">
                <div class="card-header">
                    <i class="fa fa-th"></i>
                    <h3 class="card-title">{Lang::T('PPPOE Package Utilization')}</h3>
                    <div class="card-tools pull-right"></div>
                </div>
                <div class="card-body border-radius-none">
                    <canvas class="chart" id="pppoeChart" style="height: 250px;"></canvas>
                </div>
            </div>
        {/if}
    </div>
</div>
<div class="card card-warning mb-3 card-hovered project-stats table-responsive">
    <div class="card-title">
        <h5>{Lang::T('User Expired, Today')}</h5>
    </div>
    <div class="table-responsive">
        <table class="table table-condensed table-hover">
            <caption>{Lang::T('List of users whose accounts expired today')}</caption>
            <thead class="thead-light">
                <tr>
                    <th scope="col">{Lang::T('Username')}</th>
                    <th scope="col">{Lang::T('Created / Expired')}</th>
                    <th scope="col">{Lang::T('Internet Package')}</th>
                    <th scope="col">{Lang::T('Location')}</th>
                </tr>
            </thead>
            <tbody>
                {foreach $expire as $expired}
                    {assign var="rem_exp" value="{$expired['expiration']} {$expired['time']}"}
                    {assign var="rem_started" value="{$expired['recharged_on']} {$expired['recharged_time']}"}
                    <tr>
                        <td>
                            <a href="{$_url}customers/viewu/{$expired['username']}" class="text-decoration-none">
                                {$expired['username']}
                            </a>
                        </td>
                        <td>
                            <small data-toggle="tooltip" data-placement="top"
                                   title="{Lang::dateAndTimeFormat($expired['recharged_on'],$expired['recharged_time'])}">
                                {Lang::timeElapsed($rem_started)}
                            </small>
                            /
                            <span data-toggle="tooltip" data-placement="top"
                                  title="{Lang::dateAndTimeFormat($expired['expiration'],$expired['time'])}">
                                {Lang::timeElapsed($rem_exp)}
                            </span>
                        </td>
                        <td>{$expired['namebp']}</td>
                        <td>{$expired['routers']}</td>
                    </tr>
                {/foreach}
            </tbody>
        </table>
    </div>
    &nbsp; {include file="pagination.tpl"}
</div>



</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script type="text/javascript">

{if $_c['hide_mrc'] != 'yes'}
    {literal}
        document.addEventListener("DOMContentLoaded", function() {
            // Daily Sales Chart Script
            var dailySales = JSON.parse('{/literal}{$dailySales}{literal}');
            var salesLabels = [];
            var salesData = [];
            
            dailySales.forEach(function(sale) {
                var date = new Date(sale.date);
                salesLabels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
                salesData.push(sale.amount);
            });

            var ctxSales = document.getElementById('dailySalesChart').getContext('2d');
            new Chart(ctxSales, {
                type: 'line',
                data: {
                    labels: salesLabels,
                    datasets: [{
                        label: 'Daily Sales',
                        data: salesData,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1,
                        fill: true,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgb(75, 192, 192)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return 'Sales: $' + context.parsed.y.toFixed(2);
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    return '' + value.toFixed(0);
                                }
                            }
                        }
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    }
                }
            });
        });
    {/literal}
{/if}

{if $_c['hide_mrc'] != 'yes'}
    {literal}
        document.addEventListener("DOMContentLoaded", function() {
            // Active Users Chart Script
            var activeUsers = JSON.parse('{/literal}{$activeUsersData|escape:'javascript'}{literal}');
            var userLabels = [];
            var userData = [];

            activeUsers.forEach(function(user) {
                var date = new Date(user.recharged_on + 'T00:00:00'); // Ensure date is correctly parsed
                userLabels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
                userData.push(user.count);
            });

            var ctxUsers = document.getElementById('activeUsersChart').getContext('2d');
            new Chart(ctxUsers, {
                type: 'line',
                data: {
                    labels: userLabels,
                    datasets: [{
                        label: 'Active Users',
                        data: userData,
                        borderColor: 'rgb(54, 162, 235)',
                        tension: 0.1,
                        fill: true,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgb(54, 162, 235)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return 'Users: ' + context.parsed.y.toFixed(0);
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    return '' + value.toFixed(0);
                                }
                            }
                        }
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    }
                }
            });
        });
    {/literal}
{/if}

    {if $_c['hide_mrc'] != 'yes'}
        {literal}
            document.addEventListener("DOMContentLoaded", function() {
                var counts = JSON.parse('{/literal}{$monthlyRegistered|json_encode}{literal}');

                var monthNames = [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ];

                var labels = [];
                var data = [];

                for (var i = 1; i <= 12; i++) {
                    var month = counts.find(count => count.date === i);
                    labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3));
                    data.push(month ? month.count : 0);
                }

                var ctx = document.getElementById('chart').getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Registered Members',
                            data: data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 205, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(201, 203, 207, 0.2)'
                            ],
                            borderColor: [
                                'rgb(255, 99, 132)',
                                'rgb(255, 159, 64)',
                                'rgb(255, 205, 86)',
                                'rgb(75, 192, 192)',
                                'rgb(54, 162, 235)',
                                'rgb(153, 102, 255)',
                                'rgb(201, 203, 207)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            x: {
                                grid: {
                                    display: false
                                }
                            },
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        }
                    }
                });
            });
        {/literal}
    {/if}

{if $_c['hide_mrc'] != 'yes'}
    {literal}
    document.addEventListener("DOMContentLoaded", function() {
        var hotspotData = JSON.parse('{/literal}{$hotspot_utilization|json_encode}{literal}');
        var pppoeData = JSON.parse('{/literal}{$pppoe_utilization|json_encode}{literal}');

        function createDoughnutChart(ctx, data, label) {
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(data),
                    datasets: [{
                        label: label,
                        data: Object.values(data),
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(201, 203, 207, 0.2)'
                        ],
                        borderColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                            'rgb(255, 206, 86)',
                            'rgb(75, 192, 192)',
                            'rgb(153, 102, 255)',
                            'rgb(255, 159, 64)',
                            'rgb(201, 203, 207)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,                   
                }
            });
        }

        var ctxHotspot = document.getElementById('hotspotChart').getContext('2d');
        createDoughnutChart(ctxHotspot, hotspotData, 'Hotspot Packages');

        var ctxPPPOE = document.getElementById('pppoeChart').getContext('2d');
        createDoughnutChart(ctxPPPOE, pppoeData, 'PPPOE Packages');
    });
    {/literal}
{/if}

    {if $_c['hide_tms'] != 'yes'}
        {literal}
            document.addEventListener("DOMContentLoaded", function() {
                var monthlySales = JSON.parse('{/literal}{$monthlySales|json_encode}{literal}');

                var monthNames = [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ];

                var labels = [];
                var data = [];

                for (var i = 1; i <= 12; i++) {
                    var month = findMonthData(monthlySales, i);
                    labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3));
                    data.push(month ? month.totalSales : 0);
                }

                var ctx = document.getElementById('salesChart').getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Monthly Sales',
                            data: data,
                            fill: true,
                            backgroundColor: 'rgba(56, 161, 105, 0.2)', // Use the primary color with transparency
                            borderColor: 'rgba(56, 161, 105, 1)', // Use the primary color
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            x: {
                                grid: {
                                    display: true
                                }
                            },
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        }
                    }
                });
            });

            function findMonthData(monthlySales, month) {
                for (var i = 0; i < monthlySales.length; i++) {
                    if (monthlySales[i].month === month) {
                        return monthlySales[i];
                    }
                }
                return null;
            }
        {/literal}
    {/if}
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
        $.ajax({
            url: "{$_url}onlineusers/sms_balance",
            method: 'GET',
            dataType: 'json',
            success: function(response) {
            if (response.status === 'success' && response.data && response.data.remaining_balance) {
                $('#sms-balance').text(response.data.remaining_balance);
            } else if (response.message) {
                $('#sms-balance').text('Error: ' + response.message);
            } else {
                $('#sms-balance').text('Unknown error');
            }
        },
            error: function() {
                $('#sms-balance').text('Failed to fetch balance');
            }
        });
    });
    </script>

<script>
$(document).ready(function() {
    $.ajax({
        url: "{$_url}onlineusers/summary", // Adjust this URL to your actual endpoint
        type: 'GET',
        dataType: 'json', // Ensure the expected response is JSON
        success: function(data) {
            console.log('Data fetched successfully:', data);
            $('#total-online-users').text(data.total_users);
            $('#online-hotspot-users').text(data.hotspot_users);
            $('#online-ppp-users').text(data.ppoe_users);
				$('#total_data').text(data.total_bytes);
        },
        error: function(error) {
            console.log('Error fetching data:', error);
        }
    });
});
</script>
</div>
{include file="sections/footer.tpl"}
