@extends('layouts.master')
@section('content')
<!-- Page Title Start -->
<div class="flex justify-between items-center mb-6">
    <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">Dashboard</h4>
</div>
<!-- Page Title End -->

@if(session('group_id') == 1)
<div class="grid xl:grid-cols-4 lg:grid-cols-2 grid-cols-1 gap-6 mb-6">
    @foreach($group as $dataGroup)
    <?php
        $bg = '';

        if(@$dataGroup->alias == 'dinas'){
            $bg = 'success';
        }elseif(@$dataGroup->alias == 'biro'){
            $bg = 'warning';
        }elseif(@$dataGroup->alias == 'badan'){
            $bg = 'danger';
        }elseif(@$dataGroup->alias == 'deputi'){
            $bg = 'info';
        }

    ?>
    <div class="card border-top-{{$bg}}">
        <div class="p-6">
            <div class="flex flex-col items-center">
                <div class="w-full">
                    {{-- <div class="flex justify-between">
                        <div class="p-1 bg-primary text-white rounded text-xs">{{date('Y')}}</div>
                    </div> --}}
                    <div class="flex items-center justify-between">
                        <div class="px-4 py-3 rounded-full bg-{{$bg}}-light">
                            <i class="ri-database-2-line text-lg text-{{$bg}}"></i>
                        </div>
                        <div>
                            <?php
                            $count = $classDataset::where('tahun',date('Y'))->whereHas('instansi',function($query) use ($dataGroup){
                                $query->where('parent','ilike','%'.$dataGroup->alias.'%');
                            })->count();
                            ?>
                            <h2 class="text-3xl bold my-3 py-0.5">{{$count}}</h2> 
                        </div>
                    </div>
                    
                </div>
                <div class="w-full">
                    <div class="">
                        <div class="mb-2"><h5 class="uppercase text-sm font-bold mt-0 truncate">Data {{$dataGroup->name}}</h5></div>
                        <a href="{{url('dashboard/dataset/'.$dataGroup->alias)}}" class="text-{{ $bg }} text-xs">Lihat Selengkapnya&nbsp;<i class="ri-arrow-right-line"></i></a>
                    </div>
                </div>
            </div> <!-- end row-->
        </div> <!-- end p-6 -->
    </div> <!-- end card -->
    @endforeach

    
</div>
@endif
<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6">
    <div class="card">
        <div class="p-6">
            <div class="flex items-center justify-center">
                <div class="w-full">
                    <h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Tingkat Pendidikan Tahun {{(date('Y')-1)}}</h5>
                    <p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Tingkat Pendidikan Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
                    <div id="penduduk1"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="p-6">
            <div class="flex items-center justify-center">
                <div class="w-full">
                    <h5 class="text-lg bold mb-10">Data Penduduk Berdasarkan Tingkat Pendidikan Tahun {{date('Y')}}</h5>
                    <p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Tingkat Pendidikan Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
                    <div id="penduduk2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6">
    <div class="card">
        <div class="p-6">
            <div class="flex items-center justify-center">
                <div class="w-full">
                    <h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}</h5>
                    <p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{(date('Y')-1)}}, berdasarkan data yang sudah di upload sebelumnya</p>
                    <div id="timbulan1"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="p-6">
            <div class="flex items-center justify-center">
                <div class="w-full">
                    <h5 class="text-lg bold mb-10">Data Jumlah Timbulan Sampah Tahun {{date('Y')}}</h5>
                    <p class="mb-10">Ini adalah data Data Jumlah Timbulan Sampah Tahun {{date('Y')}}, berdasarkan data yang sudah di upload sebelumnya</p>
                    <div id="timbulan2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- end row -->
@endsection
@section('js')
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<script>
    var base_url = '{{ url("/") }}';
    var tahun = '{{ date("Y")-1 }}';

     fetch(base_url+'/getPenduduk/'+tahun)
        .then(res => res.json())
        .then(data => {
            const series = data.series.map(Number);

            var options = {
                chart: {
                    type: 'pie',
                    height: 400
                },
                series: series,
                labels: data.labels,
                tooltip: {
                    custom: function({ series, seriesIndex, w }) {
                        // ambil nama kabupaten/kota langsung dari chart context
                        const kota = w.globals.labels[seriesIndex];
                        const value = series[seriesIndex].toLocaleString('id-ID');
                        
                        // hitung persentase dari total
                        const total = series.reduce((a, b) => a + b, 0);
                        const persen = ((series[seriesIndex] / total) * 100).toFixed(1);

                        return `
                            <div style="padding:6px 10px; font-size:13px;">
                                Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
                            </div>
                        `;
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 400
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#penduduk1"), options);
            chart.render();
        }).catch(error => console.error('Error:', error));
</script>
<script>
    var base_url = '{{ url("/") }}';
    var tahun = '{{ date("Y") }}';

     fetch(base_url+'/getPenduduk/'+tahun)
        .then(res => res.json())
        .then(data => {
            const series = data.series.map(Number);

            var options = {
                chart: {
                    type: 'pie',
                    height: 400
                },
                series: series,
                labels: data.labels,
                tooltip: {
                    custom: function({ series, seriesIndex, w }) {
                        // ambil nama kabupaten/kota langsung dari chart context
                        const kota = w.globals.labels[seriesIndex];
                        const value = series[seriesIndex].toLocaleString('id-ID');
                        
                        // hitung persentase dari total
                        const total = series.reduce((a, b) => a + b, 0);
                        const persen = ((series[seriesIndex] / total) * 100).toFixed(1);

                        return `
                            <div style="padding:6px 10px; font-size:13px;">
                                Jumlah Penduduk <b>${kota}</b>: ${value} (${persen}%)
                            </div>
                        `;
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 400
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#penduduk2"), options);
            chart.render();
        }).catch(error => console.error('Error:', error));
</script>
<script>
    var base_url = '{{ url("/") }}';
    var tahun = '{{ date("Y")-1 }}';

     fetch(base_url+'/getTimbulan/'+tahun)
        .then(res => res.json())
        .then(data => {
            const series = data.series.map(Number);

            var options = {
                chart: {
                    type: 'pie',
                    height: 400
                },
                series: series,
                labels: data.labels,
                tooltip: {
                    custom: function({ series, seriesIndex, w }) {
                        // ambil nama kabupaten/kota langsung dari chart context
                        const kota = w.globals.labels[seriesIndex];
                        const value = series[seriesIndex].toLocaleString('id-ID');
                        
                        // hitung persentase dari total
                        const total = series.reduce((a, b) => a + b, 0);
                        const persen = ((series[seriesIndex] / total) * 100).toFixed(1);

                        return `
                            <div style="padding:6px 10px; font-size:13px;">
                                Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
                            </div>
                        `;
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 400
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#timbulan1"), options);
            chart.render();
        }).catch(error => console.error('Error:', error));
</script>
<script>
     var base_url = '{{ url("/") }}';
    var tahun = '{{ date("Y") }}';

     fetch(base_url+'/getTimbulan/'+tahun)
        .then(res => res.json())
        .then(data => {
            const series = data.series.map(Number);

            var options = {
                chart: {
                    type: 'pie',
                    height: 400
                },
                series: series,
                labels: data.labels,
                tooltip: {
                    custom: function({ series, seriesIndex, w }) {
                        // ambil nama kabupaten/kota langsung dari chart context
                        const kota = w.globals.labels[seriesIndex];
                        const value = series[seriesIndex].toLocaleString('id-ID');
                        
                        // hitung persentase dari total
                        const total = series.reduce((a, b) => a + b, 0);
                        const persen = ((series[seriesIndex] / total) * 100).toFixed(1);

                        return `
                            <div style="padding:6px 10px; font-size:13px;">
                                Jumlah Timbulan Kg Per Hari <b>${kota}</b>: ${value} (${persen}%)
                            </div>
                        `;
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 400
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#timbulan2"), options);
            chart.render();
        }).catch(error => console.error('Error:', error));
</script>
@endsection