 <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',
                 {{ $clientCount->where('clients_status', 'active')->first()->total ?? 0 }},
             ],
             ['Total Deactivated Customer',
                 {{ $clientCount->where('clients_status', 'deactive')->first()->total ?? 0 }}
             ],
             ["Expired Customer", {{ $clientCount->where('clients_status', 'expired')->first()->total ?? 0 }}],
             ['Pending Customer', {{ $clientCount->where('client_approval', 'pending')->first()->total ?? 0 }}],
             ["{{ date('F Y') }} New Customer", {{ $newClients ?? 0 }}],
             ["{{ date('F Y') }} Deactivated Customer", {{ $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>
 @can('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", {{ (float) $thisMonthBillGenerate }}, '#4f46e5'],
                 ["Collection", {{ (float) $thisMonthBillPaid }}, '#22c55e'],
                 ["Due", {{ (float) $currentMonthDue }}, '#f97373'],
             ]);

             var options = {
                 title: 'Billing Snapshot ({{ 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>
 @endcan

 <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;
             @endphp
             @foreach ($clientSummary->reverse() as $summary)
                 ['{{ $summary->month_year }}', {{ $summary->total_active_clients }},
                     '{{ $colors[$index % count($colors)] }}'
                 ],
                 @php $index++; @endphp
             @endforeach
         ]);

         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>
