 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


 <script type="text/javascript">
     google.charts.load("current", {
         packages: ["corechart"]
     });
     google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
         var data = google.visualization.arrayToDataTable([
             ['Task', 'Hours per Day', ],
             ['Total Active Customer',
                 <?php echo e($clientCount->where('clients_status', 'active')->first()->total ?? 0); ?>,
             ],
             ['Total Deactivated Customer',
                 <?php echo e($clientCount->where('clients_status', 'deactive')->first()->total ?? 0); ?>

             ],
             ["Expired Customer", <?php echo e($clientCount->where('clients_status', 'expired')->first()->total ?? 0); ?>],
             ['Pending Customer', <?php echo e($clientCount->where('client_approval', 'pending')->first()->total ?? 0); ?>],
             ["<?php echo e(date('F Y')); ?> New Customer", <?php echo e($newClients ?? 0); ?>],
             ["<?php echo e(date('F Y')); ?> Deactivated Customer", <?php echo e($thisMonthDeactive); ?>],
         ]);

         var options = {
             title: 'Customer Status Overview',
             pieHole: 0.55,
             legend: {
                 position: 'right',
                 textStyle: {
                     color: '#374151',
                     fontSize: 12
                 }
             },
             chartArea: {
                 width: '80%',
                 height: '80%'
             },
             pieSliceText: 'percentage',
             slices: {
                 0: {
                     color: '#6366f1'
                 }, // indigo
                 1: {
                     color: '#f97373'
                 }, // soft coral
                 2: {
                     color: '#fb7185'
                 }, // rose
                 3: {
                     color: '#facc6b'
                 }, // soft amber
                 4: {
                     color: '#34d399'
                 }, // emerald
                 5: {
                     color: '#38bdf8'
                 }, // sky
             },
             backgroundColor: 'transparent'
         };

         var chart = new google.visualization.PieChart(document.getElementById('customer_info'));
         chart.draw(data, options);
     }
 </script>
 <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('show-dashboard')): ?>
     <script type="text/javascript">
         google.charts.load("current", {
             packages: ["corechart"]
         });

         google.charts.setOnLoadCallback(drawStuff);

         function drawStuff() {
             var data = google.visualization.arrayToDataTable([
                 ['Element', 'Tk', {
                     role: 'style'
                 }],
                 ["Amount", <?php echo e((float) $thisMonthBillGenerate); ?>, '#4f46e5'],
                 ["Collection", <?php echo e((float) $thisMonthBillPaid); ?>, '#22c55e'],
                 ["Due", <?php echo e((float) $currentMonthDue); ?>, '#f97373'],
             ]);

             var options = {
                 title: 'Billing Snapshot (<?php echo e(date('F Y')); ?>)',
                 legend: {
                     position: 'bottom',
                     textStyle: {
                         color: '#374151',
                         fontSize: 11
                     }
                 },
                 chartArea: {
                     width: '80%',
                     height: '65%'
                 },
                 hAxis: {
                     title: '',
                     textStyle: {
                         color: '#4b5563',
                         fontSize: 11
                     }
                 },
                 vAxis: {
                     textStyle: {
                         color: '#6b7280',
                         fontSize: 11
                     },
                     gridlines: {
                         color: '#e5e7eb'
                     }
                 },
                 bar: {
                     groupWidth: "70%"
                 },
                 backgroundColor: 'transparent'
             };

             var chart = new google.visualization.ColumnChart(document.getElementById('accounts_info'));
             chart.draw(data, options);
         }

         window.addEventListener('resize', drawStuff); // Optional: make chart responsive
     </script>
 <?php endif; ?>

 <script type="text/javascript">
     google.charts.load("current", {
         packages: ['corechart']
     });
     google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
         var data = google.visualization.arrayToDataTable([
             ['Month', 'Total Active Clients', {
                 role: 'style'
             }],
             <?php
                 $colors = ['#6366f1', '#22c55e', '#f97373', '#facc6b', '#38bdf8', '#a855f7', '#0ea5e9', '#f472b6', '#10b981', '#60a5fa', '#fbbf24', '#4ade80'];
                 $index = 0;
             ?>
             <?php $__currentLoopData = $clientSummary->reverse(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $summary): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                 ['<?php echo e($summary->month_year); ?>', <?php echo e($summary->total_active_clients); ?>,
                     '<?php echo e($colors[$index % count($colors)]); ?>'
                 ],
                 <?php $index++; ?>
             <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
         ]);

         var view = new google.visualization.DataView(data);
         view.setColumns([0, 1,
             {
                 calc: "stringify",
                 sourceColumn: 1,
                 type: "string",
                 role: "annotation"
             },
             2
         ]);

         var options = {
             title: 'Client Growth (Last 12 Months)',
             width: 500,
             bar: {
                 groupWidth: "70%"
             },
             legend: {
                 position: "none"
             },
             chartArea: {
                 width: '80%',
                 height: '65%'
             },
             vAxis: {
                 title: 'Total Active Clients',
                 titleTextStyle: {
                     color: '#111827',
                     fontSize: 14
                 },
                 textStyle: {
                     color: '#6b7280',
                     fontSize: 11
                 },
                 gridlines: {
                     color: '#e5e7eb'
                 }
             },
             hAxis: {
                 title: 'Month',
                 titleTextStyle: {
                     color: '#111827',
                     fontSize: 14
                 },
                 textStyle: {
                     color: '#4b5563',
                     fontSize: 11
                 }
             },
             backgroundColor: 'transparent'
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('client_summery'));
         chart.draw(view, options);
     }
 </script>








 <style>
     #accounts_info {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 400px;
     }

     #customer_info {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 400px;

     }

     #client_summery {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 400px;

     }
 </style>
<?php /**PATH /var/www/html/rk/radius-circle/resources/views/layout/dashboard_chart.blade.php ENDPATH**/ ?>