
{include file="sections/header.tpl"}
            <div class="container-fluid">
                <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:#3444d5 !important;"></div>
                            <div class="card-body box-style">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class=" num-text text-black font-w200 fs-48">{$_c['currency_code']}{number_format($iday,0,$_c['dec_point'],$_c['thousands_sep'])}</h4>
                                        <p class="fs-14">{Lang::T('Income Today')}</p>
                                    </div>
                                    <div class="icon" style="color: #864AD1;">
                                        <i class="fas fa-dollar-sign"></i>
                                    </div>
                                </div>
                                <div class="">
                                    <a href="{$_url}reports/by-date" class="small-box-footer" style="color: #fc5130;">{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">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class="num-text text-black font-w200 fs-48">{$_c['currency_code']}{number_format($imonth,0,$_c['dec_point'],$_c['thousands_sep'])}</h4>
                                        <p class="fs-14">{Lang::T('Income This Month')}</p>
                                    </div>
                                    <!--<div class="icon" style="color: #FFB930;">
                                        <i class="fa fa-chart-bar"></i>
                                    </div>-->
                                </div>
                                <div class="">
                                    <a href="{$_url}reports/by-period" class="small-box-footer" style="color: #fc5130;">{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-success card-border"></div>
                            <div class="card-body box-style">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class="num-text text-black font-w200 fs-48">{$u_act}/{$u_all}</h4>
                                        <p class="fs-14">{Lang::T('Users Active')}</p>
                                    </div>
                                    <div class="icon" style="color: #20F174;">
                                        <i class="fa fa-users"></i>
                                    </div>
                                </div>
                                <div class="">
                                    <a href="{$_url}plan/list" class="small-box-footer" style="color: #fc5130;">{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 box-style">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class="num-text text-black font-w200 fs-48">{$c_all}</h4>
                                        <p class="fs-14">{Lang::T('Total Users')}</p>
                                    </div>
                                    <div class="icon" style="color: #3ECDFF;">
                                        <i class="fa fa-users"></i>
                                    </div>
                                </div>
                                <div class="" >
                                    <a href="{$_url}customers/list" class="small-box-footer" style="color: #fc5130;">{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-3 col-xxl-3 col-lg-6 col-sm-6">
                        <div class="card card-bd">
                            <div class="bg-secondary card-border" style="background:#3444d5 !important;"></div>
                            <div class="card-body box-style">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class=" num-text text-black font-w200 fs-48" id="total-online-users"></h4>
                                        <p class="fs-14">{Lang::T('Online Users')}</p>
                                    </div>
                                    <div class="icon" style="color: #864AD1;">
                                        <i class="fas fa-users"></i>
                                    </div>
                                </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">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class="num-text text-black font-w200 fs-48" id="total_data"></h4>
                                        <p class="fs-14">{Lang::T('Data Usage')}</p>
                                    </div>
                                    <div class="icon" style="color: #FFB930;">
                                        <i class="fas fa-signal"></i>
                                    </div>
                                </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-success card-border"></div>
                            <div class="card-body box-style">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class="num-text text-black font-w200 fs-48" id="online-hotspot-users"></h4>
                                        <p class="fs-14">{Lang::T('Online Hotspot Users')}</p>
                                    </div>
                                    <div class="icon" style="color: #20F174;">
                                        <i class="fas fa-wifi"></i>
                                    </div>
                                </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 box-style">
                                <div class="media align-items-center col">
                                    <div class="inner media-body me-3">
                                        <h4 class="num-text text-black font-w200 fs-48" id="online-pppoe-users"></h4>
                                        <p class="fs-14">{Lang::T('Online PPPoE Users')}</p>
                                    </div>
                                    <div class="icon" style="color: #3ECDFF;">
                                        <i class="fas fa-network-wired"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <!-- solid sales graph -->
                        {if $_c['hide_mrc'] != 'yes'}
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-th"></i>
                                    <h3 class="card-title">{Lang::T('Monthly Customers')}</h3>
                                    <div class="card-tools pull-right">
                                        
                                        <a href="{$_url}dashboard&refresh" class="btn bg-teal btn-xsm"><i
                                                class="fa fa-refresh"></i>
                                        </a>
                                    </div>
                                </div>
                                <!-- <div class="card-body text-center pb-0 px-2 pt-2">
                                    <div id="widgetChart1" class="widgetChart1 dashboard-chart"></div>
                                </div> -->
                                <div class="card-body border-radius-none">
                                    <canvas class="chart" id="chart" style="height: 200px;"></canvas>
                                </div>
                            </div>
                        {/if}
                    </div>
                    <div class="col-md-6">
                        <!-- solid sales graph -->
                        {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">
                                        <a href="{$_url}dashboard&refresh" class="btn bg-teal btn-sm"><i
                                                class="fa fa-refresh"></i>
                                        </a>
                                    </div>
                                </div>
                                <!-- <div class="card-body pb-0 px-2 pt-2">
                                    <div id="chartTimeline" class="timeline-chart"></div>
                                </div> -->
                                <div class="card-body border-radius-none">
                                    <canvas id="salesChart" class="monthly-project-chart" style="height: 200px;"></canvas>
                                </div>
                            </div>
                        {/if}
                    </div>
                    <div class="col-md-12">
                        {if $_c['hide_uet'] != 'yes'}
                            <div class="card card-warning card-hovered project-stats table-responsive">
                                <div class="card-header">
                                    <h3 class="card-title">{Lang::T('Expired Users')}</h3></div>
                                <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-condensed">
                                        <thead>
                                            <tr>
                                                <th>{Lang::T('Fullname')}</th>
                                                <th>{Lang::T('Username')}</th>
                                                <th>{Lang::T('Created On')}</th>
                                                <th>{Lang::T('Expires On')}</th>
                                                <th>{Lang::T('Router')}</th>
                                                <th>{Lang::T('Package')}</th>
                                                <th>{Lang::T('Action')}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {foreach $expire as $expired}
                                                <tr>
                                                    <td><a href="{$_url}customers/viewu/{$expired['username']}">{$expired['fullname']}</a></td>
                                                    <td><a href="{$_url}customers/viewu/{$expired['username']}">{$expired['username']}</a></td>
                                                    <td>{Lang::dateAndTimeFormat($expired['recharged_on'],$expired['recharged_time'])}
                                                    </td>
                                                    <td>{Lang::dateAndTimeFormat($expired['expiration'],$expired['time'])}
                                                    </td>
                                                    <td>{$expired['routers']}</td>
                                                    <td>{$expired['namebp']}</td>
                                                    <td>
                                                    <a href="{$_url}plan/recharge/{$expired['customer_id']}" id="{$expired['customer_id']}" style="margin: 0px;color:black;"
                                                        class="btn btn-warning btn-xs">{Lang::T('Recharge')}</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        {/foreach}
                                    </table>
                                </div>
                                &nbsp; {include file="pagination.tpl"}
                                </div>
                            </div>
                        {/if}
                    </div>
                    <div class="col-md-6">
                        {if $_c['disable_voucher'] != 'yes' && $stocks['unused']>0 || $stocks['used']>0}
                            {if $_c['hide_vs'] != 'yes'}
                                <div class="card card-primary card-hovered project-stats">
                                    <div class="card-header">Vouchers Stock</div>
                                    <div class="table-responsive">
                                        <table class="table table-striped table-condensed">
                                            <thead>
                                                <tr>
                                                    <th>{Lang::T('Plan Name')}</th>
                                                    <th>unused</th>
                                                    <th>used</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {foreach $plans as $stok}
                                                    <tr>
                                                        <td>{$stok['name_plan']}</td>
                                                        <td>{$stok['unused']}</td>
                                                        <td>{$stok['used']}</td>
                                                    </tr>
                                                </tbody>
                                            {/foreach}
                                            <tr>
                                                <td>Total</td>
                                                <td>{$stocks['unused']}</td>
                                                <td>{$stocks['used']}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            {/if}
                        {/if}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        {if $_c['hide_aui'] != 'yes'}
                            <div class="card card-hovered activities">
                                <div class="card-header"><h3 class="card-title">{Lang::T('All Users Insights')}</h3></div>
                                <div class="card-body">
                                    <canvas id="userRechargesChart" style="height: 600px;"></canvas>
                                </div>
                            </div>
                        {/if}
                    </div>
                    <div class="col-md-6">
                        {if $_c['hide_al'] != 'yes'}
                            <div class="card card-info card-hovered activities" style="height: 600px;">
                                <div class="card-header"><a class="card-title" href="{$_url}logs">{Lang::T('Activity Log')}</a></div>
                                <div class="card-body">
                                    <div id="DZ_W_TimeLine" class="widget-timeline dz-scroll ps ps--active-y" style="height: 460px;">
                                        <ul class="timeline">
                                            {foreach $dlog as $dlogs}
                                                <li class="primary">
                                                    <div class="timeline-badge primary"></div>
                                                    <div class="timeline-panel text-muted">
                                                        <span class="point"></span>
                                                        <span class="time small text-muted">{Lang::timeElapsed($dlogs['date'],true)}</span>
                                                        <p>{$dlogs['description']}</p>
                                                    </div>
                                                </li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {/if}
                    </div>
                </div>
                <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
                <script type="text/javascript">
                    {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: '#fc5130',
                                            borderColor: '#fc5130',
                                            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_tmc'] != '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: 'bar',
                                    //type: 'radialBar',
                                    data: {
                                        labels: labels,
                                        datasets: [{
                                            label: 'Monthly Sales',
                                            data: data,
                                            backgroundColor: '#fc5130', // Customize the background color
                                            borderColor: '#fc5130', // Customize the border color
                                            borderWidth: 2
                                        }]
                                    },
                                    options: {
                                        responsive: true,
                                        scales: {
                                            x: {
                                                grid: {
                                                    display: false
                                                }
                                            },
                                            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}
                    {if $_c['hide_aui'] != 'yes'}
                        {literal}
                            document.addEventListener("DOMContentLoaded", function() {
                                // Get the data from PHP and assign it to JavaScript variables
                                var u_act = '{/literal}{$u_act}{literal}';
                                var c_all = '{/literal}{$c_all}{literal}';
                                var u_all = '{/literal}{$u_all}{literal}';
                                //lets calculate the inactive users as reported
                                var expired = u_all - u_act;
                                var inactive = c_all - u_all;
                                // Create the chart data
                                var data = {
                                    labels: ['Active Users', 'Expired Users', 'Inactive Users'],
                                    datasets: [{
                                        label: 'User Recharges',
                                        data: [parseInt(u_act), parseInt(expired), parseInt(inactive)],
                                        backgroundColor: ['rgba(4, 191, 13)', 'rgba(191, 35, 4)', 'rgba(0, 0, 255, 0.5'],
                                        borderColor: ['rgba(0, 255, 0, 1)', 'rgba(255, 99, 132, 1)', 'rgba(0, 0, 255, 0.7'],
                                        borderWidth: 1
                                    }]
                                };
                                // Create chart options
                                var options = {
                                    responsive: true,
                                    aspectRatio: 1,
                                    plugins: {
                                        legend: {
                                            position: 'bottom',
                                            labels: {
                                                boxWidth: 15
                                            }
                                        }
                                    }
                                };
                                // Get the canvas element and create the chart
                                var ctx = document.getElementById('userRechargesChart').getContext('2d');
                                var chart = new Chart(ctx, {
                                    type: 'pie',
                                    data: data,
                                    options: options
                                });
                            });
                        {/literal}
                    {/if}
                </script>
                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></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);
                            // Check if data is null or missing properties and set defaults to 0
                            $('#total-online-users').text(data.total_users || 0);
                            $('#online-hotspot-users').text(data.hotspot_users || 0);
                            $('#online-pppoe-users').text(data.ppp_users || 0);
                            $('#total_data').text(data.total_bytes || 0);
                        },
                        error: function(error) {
                            console.log('Error fetching data:', error);
                            // Set all values to 0 in case of an error
                            $('#total-online-users').text(0);
                            $('#online-hotspot-users').text(0);
                            $('#online-pppoe-users').text(0);
                            $('#total_data').text(0);
                        }
                    });
                });
                </script>

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