<?php
/* Smarty version 4.5.3, created on 2026-02-21 09:04:28
  from '/var/www/html/kaptembwa/ui/ui_custom/widget/graph_customers_insight.tpl' */

/* @var Smarty_Internal_Template $_smarty_tpl */
if ($_smarty_tpl->_decodeProperties($_smarty_tpl, array (
  'version' => '4.5.3',
  'unifunc' => 'content_69994aec6a4eb5_05429832',
  'has_nocache_code' => false,
  'file_dependency' => 
  array (
    '7fd4842afcb6a77c357701a7deb0c3b4ea5b80af' => 
    array (
      0 => '/var/www/html/kaptembwa/ui/ui_custom/widget/graph_customers_insight.tpl',
      1 => 1771476936,
      2 => 'file',
    ),
  ),
  'includes' => 
  array (
  ),
),false)) {
function content_69994aec6a4eb5_05429832 (Smarty_Internal_Template $_smarty_tpl) {
?><div class="card border-0 shadow-sm rounded-3 overflow-hidden">
    <div class="card-header bg-info bg-gradient text-white py-3 px-4">
        <div class="d-flex align-items-center">
            <div class="icon-wrapper me-3">
                <i class="isax isax-chart-21 fs-4"></i>
            </div>
            <div class="min-width-0">
                <h5 class="mb-0 fw-semibold text-truncate"><?php echo Lang::T('All Users Insights');?>
</h5>
                <small class="opacity-75 text-truncate d-block"><?php echo Lang::T('Current user status breakdown');?>
</small>
            </div>
        </div>
    </div>
    <div class="card-body p-3 p-lg-4">
        <div class="row g-3 align-items-stretch">
            <!-- Chart Column -->
            <div class="col-lg-5 col-xl-6">
                <div class="position-relative mx-auto" style="max-width: 280px;">
                    <div style="height: 260px;">
                        <canvas id="userRechargesChart" style="width: 100% !important; height: 100% !important;"></canvas>
                    </div>
                    <div class="position-absolute top-50 start-50 translate-middle text-center">
                        <h3 class="mb-0 fw-bold" id="totalUsers">0</h3>
                        <small class="text-muted text-nowrap"><?php echo Lang::T('Total Users');?>
</small>
                    </div>
                </div>
            </div>
            
            <!-- Stats Column -->
            <div class="col-lg-7 col-xl-6">
                <div class="d-flex flex-column gap-2 h-100 justify-content-center">
                    <!-- Active Users -->
                    <div class="d-flex align-items-center p-2 p-md-3 bg-success bg-opacity-10 rounded-3">
                        <div class="flex-shrink-0 me-2 me-md-3">
                            <div class="rounded-circle bg-success bg-opacity-25 d-flex align-items-center justify-content-center" 
                                 style="width: 40px; height: 40px; min-width: 40px;">
                                <i class="isax isax-user-tick text-success" style="font-size: 1.25rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 min-width-0">
                            <h6 class="mb-0 fw-semibold text-truncate"><?php echo Lang::T('Active Users');?>
</h6>
                            <small class="text-muted text-truncate d-block"><?php echo Lang::T('Currently subscribed');?>
</small>
                        </div>
                        <div class="text-end ms-2 flex-shrink-0">
                            <h5 class="mb-0 fw-bold text-success text-nowrap" id="activeCount">0</h5>
                            <small class="text-muted text-nowrap" id="activePercent">0%</small>
                        </div>
                    </div>
                    
                    <!-- Expired Users -->
                    <div class="d-flex align-items-center p-2 p-md-3 bg-danger bg-opacity-10 rounded-3">
                        <div class="flex-shrink-0 me-2 me-md-3">
                            <div class="rounded-circle bg-danger bg-opacity-25 d-flex align-items-center justify-content-center" 
                                 style="width: 40px; height: 40px; min-width: 40px;">
                                <i class="isax isax-clock-1 text-danger" style="font-size: 1.25rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 min-width-0">
                            <h6 class="mb-0 fw-semibold text-truncate"><?php echo Lang::T('Expired Users');?>
</h6>
                            <small class="text-muted text-truncate d-block"><?php echo Lang::T('Subscription ended');?>
</small>
                        </div>
                        <div class="text-end ms-2 flex-shrink-0">
                            <h5 class="mb-0 fw-bold text-danger text-nowrap" id="expiredCount">0</h5>
                            <small class="text-muted text-nowrap" id="expiredPercent">0%</small>
                        </div>
                    </div>
                    
                    <!-- Inactive Users -->
                    <div class="d-flex align-items-center p-2 p-md-3 bg-primary bg-opacity-10 rounded-3">
                        <div class="flex-shrink-0 me-2 me-md-3">
                            <div class="rounded-circle bg-primary bg-opacity-25 d-flex align-items-center justify-content-center" 
                                 style="width: 40px; height: 40px; min-width: 40px;">
                                <i class="isax isax-user-minus text-primary" style="font-size: 1.25rem;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 min-width-0">
                            <h6 class="mb-0 fw-semibold text-truncate"><?php echo Lang::T('Inactive Users');?>
</h6>
                            <small class="text-muted text-truncate d-block"><?php echo Lang::T('Never subscribed');?>
</small>
                        </div>
                        <div class="text-end ms-2 flex-shrink-0">
                            <h5 class="mb-0 fw-bold text-primary text-nowrap" id="inactiveCount">0</h5>
                            <small class="text-muted text-nowrap" id="inactivePercent">0%</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom styles to prevent text overflow */
    .min-width-0 {
        min-width: 0;
        flex: 1;
    }
    
    .text-nowrap {
        white-space: nowrap;
    }
    
    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Ensure chart canvas doesn't overflow */
    #userRechargesChart {
        max-width: 100%;
        height: auto !important;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .card-body {
            padding: 1rem;
        }
        
        .position-relative.mx-auto {
            max-width: 220px;
        }
        
        .rounded-circle {
            width: 35px !important;
            height: 35px !important;
            min-width: 35px !important;
        }
        
        .rounded-circle i {
            font-size: 1rem !important;
        }
        
        h6 {
            font-size: 0.9rem;
        }
        
        small {
            font-size: 0.75rem;
        }
        
        h5 {
            font-size: 1rem;
        }
    }
    
    @media (max-width: 576px) {
        .gap-2 {
            gap: 0.5rem !important;
        }
        
        .p-2.p-md-3 {
            padding: 0.5rem !important;
        }
    }
</style>

<?php echo '<script'; ?>
 type="text/javascript">
    
        document.addEventListener("DOMContentLoaded", function() {
            // Get the data from PHP and assign it to JavaScript variables
            var u_act = parseInt('<?php echo (($tmp = $_smarty_tpl->tpl_vars['u_act']->value ?? null)===null||$tmp==='' ? 0 ?? null : $tmp);?>
') || 0;
            var c_all = parseInt('<?php echo (($tmp = $_smarty_tpl->tpl_vars['c_all']->value ?? null)===null||$tmp==='' ? 0 ?? null : $tmp);?>
') || 0;
            var u_all = parseInt('<?php echo (($tmp = $_smarty_tpl->tpl_vars['u_all']->value ?? null)===null||$tmp==='' ? 0 ?? null : $tmp);?>
') || 0;
            
            // Calculate the inactive and expired users
            var expired = Math.max(0, u_all - u_act);
            var inactive = Math.max(0, c_all - u_all);
            
            var total = c_all || 1; // Prevent division by zero
            
            // Update statistics with formatted numbers
            document.getElementById('totalUsers').textContent = total.toLocaleString();
            document.getElementById('activeCount').textContent = u_act.toLocaleString();
            document.getElementById('expiredCount').textContent = expired.toLocaleString();
            document.getElementById('inactiveCount').textContent = inactive.toLocaleString();
            
            // Calculate and update percentages
            document.getElementById('activePercent').textContent = ((u_act / total) * 100).toFixed(1) + '%';
            document.getElementById('expiredPercent').textContent = ((expired / total) * 100).toFixed(1) + '%';
            document.getElementById('inactivePercent').textContent = ((inactive / total) * 100).toFixed(1) + '%';

            // Only create chart if canvas exists and there's data
            var ctx = document.getElementById('userRechargesChart');
            if (ctx) {
                ctx = ctx.getContext('2d');
                
                // Create the chart data with modern colors
                var data = {
                    labels: ['Active Users', 'Expired Users', 'Inactive Users'],
                    datasets: [{
                        label: 'User Status',
                        data: [u_act, expired, inactive],
                        backgroundColor: [
                            'rgba(16, 185, 129, 0.9)',  // Success green
                            'rgba(239, 68, 68, 0.9)',    // Danger red
                            'rgba(59, 130, 246, 0.9)'    // Primary blue
                        ],
                        borderColor: [
                            'rgba(16, 185, 129, 1)',
                            'rgba(239, 68, 68, 1)',
                            'rgba(59, 130, 246, 1)'
                        ],
                        borderWidth: 2,
                        hoverOffset: 10
                    }]
                };

                // Create chart options
                var options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '65%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            padding: 8,
                            borderRadius: 6,
                            titleFont: {
                                size: 13,
                                weight: 'bold'
                            },
                            bodyFont: {
                                size: 12
                            },
                            callbacks: {
                                label: function(context) {
                                    var label = context.label || '';
                                    var value = context.parsed;
                                    var percentage = ((value / total) * 100).toFixed(1);
                                    return label + ': ' + value.toLocaleString() + ' (' + percentage + '%)';
                                }
                            }
                        }
                    },
                    animation: {
                        animateRotate: true,
                        animateScale: true,
                        duration: 1500,
                        easing: 'easeInOutQuart'
                    }
                };

                // Create the doughnut chart
                new Chart(ctx, {
                    type: 'doughnut',
                    data: data,
                    options: options
                });
            }
        });
    
<?php echo '</script'; ?>
><?php }
}
