{include file="sections/header.tpl"}
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<div class="container-fluid">
    
    <style>
        .icon i {
            font-size: 28px; /* Sleeker icon size */
        }
        .card-body {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-body:hover {
            transform: translateY(-9px); /* Adds a subtle hover lift effect */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.705); /* Elegant shadow */
        }
        .num-text {
            font-family: 'Inter', sans-serif;
            font-weight: 300;
        }
        .small-card-footer {
            font-weight: 500;
            transition: color 0.3s;
        }
        .small-card-footer:hover {
            color: #2326d6; /* Attractive hover color */
        }
    </style>

                <style>
                    .icon i{
                        font-size: 36px;
                    }
                </style>
                <div class="row">
                    <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                        <div class="card card-bd">
                            <div class="bg-secondary card-border" style="background:#3444d5b9 !important;"></div>
                            <div class="card-body card-style p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2"> <!-- Reduced margin -->
                                        <h4 class="num-text text-black font-w200 fs-28">{$_c['currency_code']}{number_format($iday,0,$_c['dec_point'],$_c['thousands_sep'])}</h4> <!-- Reduced font size -->
                                        <p class="fs-10">{Lang::T('Income Today')}</p> <!-- Reduced font size -->
                                    </div>
                                    <div class="icon" style="color: #864AD1;">
                                        <i class="fas fa-dollar-sign fs-20"></i> <!-- Reduced icon size -->
                                    </div>
                                </div>
                                <div class="">
                                    <a href="{$_url}reports/by-date" class="small-card-footer" style="color: #007bff;">{Lang::T('View Reports')} <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                        <div class="card card-bd">
                            <div class="bg-warning card-border"></div>
                            <div class="card-body p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2"> <!-- Reduced margin -->
                                        <h4 class="num-text text-black font-w200 fs-28" id="balance" style="display: none;">{$_c['currency_code']}{number_format($imonth,0,$_c['dec_point'],$_c['thousands_sep'])}</h4> <!-- Hidden balance initially -->
                                        <h4 class="num-text text-black font-w200 fs-28" id="hiddenText" style="cursor: pointer;">Tap to View</h4> <!-- Click to view text -->
                                        <p class="fs-10">{Lang::T('Income This Month')}</p> <!-- Reduced font size -->
                                    </div>
                                </div>
                                <div class="">
                                    <a href="{$_url}reports/by-period" class="small-card-footer" style="color: #007bff;">{Lang::T('View Reports')} <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Add JavaScript -->
                    <script>
                        document.getElementById('hiddenText').addEventListener('click', function() {
                            // Show the balance and hide the "Click to View Balance" text
                            document.getElementById('hiddenText').style.display = 'none';
                            document.getElementById('balance').style.display = 'block';

                            // After 5 seconds, hide the balance and show the "Click to View Balance" text again
                            setTimeout(function() {
                                document.getElementById('balance').style.display = 'none';
                                document.getElementById('hiddenText').style.display = 'block';
                            }, 5000); // 5000 milliseconds = 5 seconds
                        });
                    </script>
                    
                    
                    <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                        <div class="card card-bd">
                            <div class="bg-success card-border"></div>
                            <div class="card-body card-style p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2"> <!-- Reduced margin -->
                                        <h4 class="num-text text-black font-w200 fs-28">{$u_act}/{$u_all}</h4> <!-- Reduced font size -->
                                        <p class="fs-10">{Lang::T('Users Active')}</p> <!-- Reduced font size -->
                                    </div>
                                    <div class="icon" style="color: #20F174;">
                                        <i class="fa fa-users fs-20"></i> <!-- Reduced icon size -->
                                    </div>
                                </div>
                                <div class="">
                                    <a href="{$_url}plan/list" class="small-card-footer" style="color: #007bff;">{Lang::T('View All')} <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xl-3 col-xxl-3 col-lg-6 col-sm-6">
                        <div class="card card-bd">
                            <div class="bg-info card-border"></div>
                            <div class="card-body card-style p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2"> <!-- Reduced margin -->
                                        <h4 class="num-text text-black font-w200 fs-28">{$c_all}</h4> <!-- Reduced font size -->
                                        <p class="fs-10">{Lang::T('Total Users')}</p> <!-- Reduced font size -->
                                    </div>
                                    <div class="icon" style="color: #3ECDFF;">
                                        <i class="fa fa-users fs-20"></i> <!-- Reduced icon size -->
                                    </div>
                                </div>
                                <div class="">
                                    <a href="{$_url}customers/list" class="small-card-footer" style="color: #007bff;">{Lang::T('View All')} <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4">
                        <div class="card card-bd">
                            <div class="bg-secondary card-border" style="background:#3444d5 !important;"></div>
                            <div class="card-body card-style p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2">
                                        <h4 class="num-text text-black font-w200 fs-28" id="total-online-users"></h4> <!-- Reduced font size -->
                                        <p class="fs-10">{Lang::T('Online Users')}</p> <!-- Reduced font size -->
                                    </div>
                                    <div class="icon" style="color: #864AD1;">
                                        <i class="fas fa-users fs-24"></i> <!-- Reduced icon size -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4">
                        <div class="card card-bd">
                            <div class="bg-warning card-border"></div>
                            <div class="card-body p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2">
                                        <h4 class="num-text text-black font-w200 fs-28" id="total_data"></h4> <!-- Reduced font size -->
                                        <p class="fs-10">{Lang::T('Data Usage')}</p> <!-- Reduced font size -->
                                    </div>
                                    <div class="icon" style="color: #FFB930;">
                                        <i class="fas fa-signal fs-24"></i> <!-- Reduced icon size -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4">
                        <div class="card card-bd">
                            <div class="bg-success card-border"></div>
                            <div class="card-body card-style p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2">
                                        <h4 class="num-text text-black font-w200 fs-28" id="online-hotspot-users"></h4> <!-- Reduced font size -->
                                        <p class="fs-10">{Lang::T('Online Hotspot Users')}</p> <!-- Reduced font size -->
                                    </div>
                                    <div class="icon" style="color: #20F174;">
                                        <i class="fas fa-wifi fs-24"></i> <!-- Reduced icon size -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 col-xxl-3 col-lg-4 col-sm-4">
                        <div class="card card-bd">
                            <div class="bg-info card-border"></div>
                            <div class="card-body card-style p-2"> <!-- Reduced padding -->
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-2">
                                        <h4 class="num-text text-black font-w200 fs-28" id="online-ppp-users"></h4> <!-- Reduced font size -->
                                        <p class="fs-10">{Lang::T('Online PPPoE Users')}</p> <!-- Reduced font size -->
                                    </div>
                                    <div class="icon" style="color: #3ECDFF;">
                                        <i class="fas fa-network-wired fs-24"></i> <!-- Reduced icon size -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        {if $_c['hide_mrc'] != 'yes'}
                            <div class="card card-solid mb-3">
                                <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 mb-3">
                                <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 mb-3">
                                <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 mb-3">
                                <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>
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-info card-hovered mb-3">
                            <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 mb-3">
                                <div class="card-header">
                                    <i class="fa fa-inbox"></i>
                                    <h3 class="card-title">{Lang::T('Hotspot Package Utilization')}</h3>
                                </div>
                                <div class="card-body border-radius-none">
                                    <canvas class="chart" id="hotspotChart" style="height: 150px;"></canvas>
                                </div>
                            </div>
                        {/if}
                    </div>
                
                    <div class="col-md-6">
                        {if $_c['hide_mrc'] != 'yes'}
                            <div class="card card-solid mb-3">
                                <div class="card-header">
                                    <i class="fa fa-th"></i>
                                    <h3 class="card-title">{Lang::T('PPPOE Package Utilization')}</h3>
                                </div>
                                <div class="card-body border-radius-none">
                                    <canvas class="chart" id="pppoeChart" style="height: 250px;"></canvas>
                                </div>
                            </div>
                        {/if}
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-warning mb-3">
                            <div class="card-header">
                                <h3 class="card-title">{Lang::T('User Expired, Today')}</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <th>{Lang::T('Username')}</th>
                                                <th>{Lang::T('Created / Expired')}</th>
                                                <th>{Lang::T('Internet Package')}</th>
                                                <th>{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']}">{$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} <!-- End foreach $expire -->
                                        </tbody>
                                    </table>
                                </div>
                            </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"}
