<x-app-layout>
      <link href="{{asset('main/vendor/chart/aos.css')}}" rel="stylesheet">
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Info Grafis') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg" style="display: flex;">
                <div style="width: 60%;">
                    <canvas id="statistik"></canvas>
                </div>
                <div style="width: 40%;">
                     <canvas id="scrap"></canvas>
                </div>
            </div>

           
        </div>
    </div>

       <script src="{{asset('main/vendor/chart/Chart.bundle.js')}}"></script>
        <script src="{{asset('main/vendor/chart/samples/utils.js')}}"></script>
    <script>
        

        var barChartData = {
            labels: <?php echo ($statistikBulanan); ?>,
            datasets: [{
                label: 'Pekerjaan 10 Bulan Terakhir',
                backgroundColor: '#DA2EC8',
         
              
                data: <?php echo json_encode($statistikBulanan_n); ?>
            }]

        };

    
            var ctx = document.getElementById('statistik').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    title: {
                      display: true,
                      text: 'Jumlah Pekerjaan'
                    },
                    scales: {
                        yAxes: [{
                  
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                    
                }
            });

            var donut = {
            labels: ['Badan Usaha', 'Tenaga Ahli'],
            datasets: [{
                label: 'Jumlah Data',
                backgroundColor: ['#006666','#FF007F'],
         
              
                data: <?php echo json_encode($pie); ?>
            }]

        };

    
            var ctx1 = document.getElementById('scrap').getContext('2d');
            window.myBar = new Chart(ctx1, {
                type: 'pie',
                data: donut,
                options: {
                    title: {
                      display: true,
                      text: 'Jumlah Data yg Telah Diambil'
                    }
                    
                }
            });
        </script>
</x-app-layout>
