@extends('layouts.admintemplate')
@section('content')
    <div class="pcoded-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="page-header-title">
                            <h5 class="m-b-10">Selamat Datang Di Dashboard</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pcoded-inner-content">
            <div class="main-body">
                <div class="page-wrapper">
                    <div class="page-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card bg-c-green total-card">
                                    <div class="card-block">
                                        <div class="text-left">
                                            <h4>{{ $jumlahbarang }}</h4>
                                            <p class="m-0">Data Barang</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card bg-c-green total-card">
                                    <div class="card-block">
                                        <div class="text-left">
                                            <h4>{{ $jumlahtransaksi }}</h4>
                                            <p class="m-0">Jumlah Transaksi</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const salesData = @json($sales);
    const monthNames = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    const labels = monthNames;
    const data = [];
    for (let i = 0; i < 12; i++) {
        data.push(salesData[i + 1] || 0);
    }

    const ctx = document.getElementById('salesChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Total Penjualan',
                data: data,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    // Data produk terlaris untuk Pie Chart
    const produkLabels = @json($produkTerlaris->pluck('namabarang'));
    const produkData = @json($produkTerlaris->pluck('total_terjual'));
    const pieColors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'];

    const pieCtx = document.getElementById('salesPieChart').getContext('2d');
    const pieChart = new Chart(pieCtx, {
        type: 'pie',
        data: {
            labels: produkLabels,
            datasets: [{
                label: 'Penjualan Produk',
                data: produkData,
                backgroundColor: pieColors,
            }]
        }
    });

    // Tampilkan label di bawah pie chart
    const pieLabelsDiv = document.getElementById('pieLabels');
    produkLabels.forEach((label, index) => {
        let color = pieColors[index % pieColors.length];
        pieLabelsDiv.innerHTML += `
            <span style="display: inline-block; width: 15px; height: 15px; background-color: ${color}; margin-right: 5px;"></span>
            ${label} <br>
        `;
    });
</script>
@endsection