@extends('layouts.app')

@section('title_header')
    Statistik Order Part
@endsection

@section('breadcrumbs')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => '/'],
        ['label' => 'Statistik Order Part', 'url' => '/statistik-order-part'],
    ]" />
@endsection

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
@endpush

@section('content')
    <section>
        <div class="card card-border bg-white">
            <div class="card-body">
                <h5 class="text-lg font-semibold mb-4">Statistik Order Part per Kategori</h5>
                <canvas id="categoryChart" height="500"></canvas>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            fetch("/api/statistik/order-part/category")
                .then(res => res.json())
                .then(json => {
                    if (!json.success) throw new Error("Gagal ambil data");

                    const data = json.data || [];

                    const labels = data.map(item => item.category_name);
                    const totalParts = data.map(item => item.total_parts);
                    const totalPrice = data.map(item => item.total_price);

                    const ctx = document.getElementById("categoryChart").getContext("2d");

                    new Chart(ctx, {
                        type: "bar",
                        data: {
                            labels: labels,
                            datasets: [{
                                    label: "Jumlah Part Dipesan",
                                    data: totalParts,
                                    backgroundColor: "rgba(54, 162, 235, 0.6)",
                                    borderColor: "rgba(54, 162, 235, 1)",
                                    borderWidth: 1
                                },
                                {
                                    label: "Total Harga (RM)",
                                    data: totalPrice,
                                    backgroundColor: "rgba(75, 192, 192, 0.6)",
                                    borderColor: "rgba(75, 192, 192, 1)",
                                    borderWidth: 1,
                                    yAxisID: 'y1'
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            interaction: {
                                mode: 'index',
                                intersect: false,
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    position: 'left',
                                    title: {
                                        display: true,
                                        text: 'Jumlah Part'
                                    }
                                },
                                y1: {
                                    beginAtZero: true,
                                    position: 'right',
                                    grid: {
                                        drawOnChartArea: false
                                    },
                                    title: {
                                        display: true,
                                        text: 'Total Harga (RM)'
                                    }
                                }
                            },
                            plugins: {
                                legend: {
                                    position: 'bottom'
                                }
                            }
                        }
                    });
                })
                .catch(err => {
                    console.error(err);
                    alert("Gagal memuat data statistik order part.");
                });
        });
    </script>
@endpush