@extends('layouts.master')
@section('css')
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

@endsection
@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> --}}

<div class="mb-3 hidden">
    <div class="card">
        <div class="card-header flex justify-between items-center">
            <h4 class="bold">Profile Wilayah</h4>
            <div>
                <select name="" id="" class="form-input">
                    <option value="">Data Penduduk</option>
                    <option value="">Data Timbulan Sampah</option>
                </select>
            </div>
        </div>
        <div class="">
            <div class="grid lg:grid-cols-2 grid-cols-1">
                <div class="flex p-6">
                    <div class="rounded" id="map" style="width: 600px; height: 400px;"></div>
                </div>
                <div class="flex justify-center items-center p-6">
                    Data
                </div>
            </div>
        </div>
    </div>
</div>
<div class="flex hidden gap-3">
    <div class="w-full">
        <div class="card">
            <div class="card-header flex justify-between items-center">
                <h4 class="bold">
                    Persebaran Data - 
                    @if(@request()->key)
                        {{ str_replace('_',' ',ucwords(@request()->key)) }}
                    @else
                        Tata Guna Lahan
                    @endif
                </h4>
                <div>
                    <select name="" id="" class="form-input kategori">
                        <option {{ @request()->key ==  '' ? 'selected' : ''  }} {{ @request()->key ==  'tata_guna_lahan' ? 'selected' : ''  }} value="tata_guna_lahan">Tata Guna Lahan </option>
                        <option {{ @request()->key ==  'kualitas_air' ? 'selected' : ''  }} value="kualitas_air">Kualitas Air</option>
                        <option {{ @request()->key ==  'kualitas_udara' ? 'selected' : ''  }} value="kualitas_udara">Kualitas Udara</option>
                        <option {{ @request()->key ==  'perkotaan' ? 'selected' : ''  }} value="perkotaan">Perkotaan</option>
                        <option {{ @request()->key ==  'kebencanaan' ? 'selected' : ''  }} value="kebencanaan">Kebencanaan</option>
                        <option {{ @request()->key ==  'tata_kelola' ? 'selected' : ''  }} value="tata_kelola">Tata Kelola</option>
                    </select>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                    <div class="card">
                        <div class="card-header bg-primary-light text-primary bold">Driving Force</div>
                        <div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
                    </div>
                    <div class="card">
                        <div class="card-header bg-primary-light text-primary bold">Pressures</div>
                        <div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
                    </div>
                    <div class="card">
                        <div class="card-header bg-primary-light text-primary bold">State</div>
                        <div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
                    </div>
                    <div class="card">
                        <div class="card-header bg-primary-light text-primary bold">Impact</div>
                        <div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
                    </div>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-1 gap-3 mt-3">
                    <div class="card">
                        <div class="card-header bg-primary-light text-primary bold">Response</div>
                        <div class="p-6"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tenetur repudiandae labore reprehenderit, ipsam consequatur odio molestiae quidem ratione atque dignissimos omnis nam voluptate iste at, cumque ipsum voluptas aperiam!</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="grid xl:grid-cols-2 lg:grid-cols-2 grid-cols-1 gap-6 mb-6 hidden">
    <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 Wilayah Tahun {{(date('Y')-1)}}</h5>
                    <p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah 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 Wilayah Tahun {{date('Y')}}</h5>
                    <p class="mb-10">Ini adalah data Data Penduduk Berdasarkan Wilayah 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 hidden">
    <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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
     <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS popup.<br> Easily customizable.')
                .openPopup();
     </script>
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<script>
    $('.kategori').on('change',function(){
        var val = $(this).val();
        window.location = "{{ url('dashboard?key=') }}"+val;
    });
    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: "100%"
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

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