@extends('layouts.app')

@section('content')
    <div class="container my-4">
        <div class="card">
            <div class="d-flex justify-content-center mb-3 mt-3">
                <h4 class="text-center btn-primary btn-lg w-80">Laporan {{$bulan}}</h4>
            </div>
            <div class="row mt-3">
                <div class="col-12 col-md-6 mb-4 mb-md-0">
                    <h5 class="card-title text-center mb-4">Jumlah Transaksi Per Golongan</h5>
                    <div class="chart-container" style="position: relative; height:400px;">
                        <canvas id="bar-chart"></canvas>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <h5 class="card-title text-center mb-4">Frekuensi Kendaraan</h5>
                    <div class="chart-container" style="position: relative; height:400px;">
                        <canvas id="line-chart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const jumlahPerGolongan = @json($jumlahPerGolongan);

        const labels = Object.keys(jumlahPerGolongan).map(golongan => 'Golongan ' + golongan);
        const data = Object.values(jumlahPerGolongan);

        const ctx = document.getElementById('bar-chart').getContext('2d');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Jumlah Transaksi',
                    data: data,
                    backgroundColor: [
                        '#4e73df',
                        '#1cc88a',
                        '#36b9cc',
                        '#f6c23e',
                        '#e74a3b',
                        '#858796'
                    ],
                    borderColor: '#ffffff',
                    borderWidth: 1,
                    borderRadius: 5, // Bikin bar-nya ada sudut rounded
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: '#2c3e50',
                        titleColor: '#ffffff',
                        bodyColor: '#ecf0f1'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        const jumlahFrekruensi = @json($jumlahFrekruensi);

        const hariLabels = Object.keys(jumlahFrekruensi);
        const dataFrekruensi = Object.values(jumlahFrekruensi);

        const ctxLine = document.getElementById('line-chart').getContext('2d');

        new Chart(ctxLine, {
            type: 'line',
            data: {
                labels: hariLabels,
                datasets: [{
                    label: 'Frekuensi Kendaraan per Hari',
                    data: dataFrekruensi,
                    fill: true,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                    tension: 0.4, // bikin garis agak melengkung
                    pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(75, 192, 192, 1)',
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                }
            }
        });
    </script>

    <style>
        .chart-container {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
        }
    </style>
@endsection