@extends('dashboard.layouts.main')

@section('container')
 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Grafik Rekapitulasi Sampah - Tahun {{ $tahun }}</h1>

    <form method="GET" class="mb-4">
        <div class="input-group" style="max-width: 300px">
            <label class="input-group-text">Tahun</label>
            <select name="tahun" class="form-select" onchange="this.form.submit()">
                @foreach ($list_tahun as $t)
                    <option value="{{ $t }}" {{ $t == $tahun ? 'selected' : '' }}>{{ $t }}</option>
                @endforeach
            </select>
        </div>
    </form>
</div>

<div class="col-lg-12">
    <canvas id="grafikGabungan"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
        const labels = {!! json_encode($data->pluck('nama')) !!};
        const dataMasuk = {!! json_encode($data->pluck('masuk')) !!};
        const dataTerkelola = {!! json_encode($data->pluck('terkelola')) !!};
        const dataTidakTerkelola = {!! json_encode($data->pluck('tidak_terkelola')) !!};

        new Chart(document.getElementById('grafikGabungan'), {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Sampah Masuk',
                        data: dataMasuk,
                        backgroundColor: '#169AD1',
                        borderColor: '#0f648f',
                        borderWidth: 1,
                        hoverBorderWidth: 2,
                        hoverBackgroundColor: '#555'

                    },
                    {
                        label: 'Sampah Terkelola',
                        data: dataTerkelola,
                        backgroundColor: '#4CAF50',
                        borderColor: '#388E3C',
                        borderWidth: 1,
                        hoverBorderWidth: 2,
                        hoverBackgroundColor: '#555'
                    },
                    {
                        label: 'Sampah Tidak Terkelola',
                        data: dataTidakTerkelola,
                        backgroundColor: '#E91E63',
                        borderColor: '#AD1457',
                        borderWidth: 1,
                        hoverBorderWidth: 2,
                        hoverBackgroundColor: '#555'
                    }
                ]

            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#000000', // warna tulisan label legend
                            font: {
                                size: 14,
                                weight: 'bold'
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Jumlah Sampah (kg)',
                            color: '#000000',
                            font: {
                                family: 'Arial',
                                size: 15,
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            color: '#000000',
                            font: {
                                size: 13
                            }
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Jenis Sampah',
                            color: '#000000',
                            font: {
                                family: 'Arial',
                                size: 15,
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            color: '#000000',
                            font: {
                                size: 13
                            }
                        }
                    }
                }
            }

        });
    </script>

@endsection