@extends('layouts.admin')
@section('menu', 'active')
@section('page_titulo', '📊 Dashboard ')
@section('titulo', 'Admin Home')
@section('conteudo')
    <!-- Content Row -->
    <div class="row mb-4">

        <div class="col-md-3">
            <div class="card p-3 bg-success text-white">
                💰 Receita Hoje
                <h4 id="revenue">0 Kz</h4>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card p-3 bg-primary text-white">
                📦 Pedidos
                <h4 id="ordersCount">0</h4>
            </div>
        </div>

    </div>
    <div class="row mt-4">

        <div class="col-md-6">
            <canvas id="ordersByHour"></canvas>
        </div>

        <div class="col-md-6">
            <canvas id="statusChart"></canvas>
        </div>

    </div>

    <div class="row mt-4">

        <div class="col-md-6">
            <canvas id="topProducts"></canvas>
        </div>

    </div>
@endsection
@push('script')
    <!-- Page level plugins -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Page level custom scripts -->
    <script src="{{ asset('admin/js/demo/chart-area-demo.js') }}"></script>
    <script src="{{ asset('admin/js/demo/chart-pie-demo.js') }}"></script>

    <script>
        let statusChart, hourChart, productChart;

        function loadDashboard() {
            fetch('/dashboard/data')
                .then(res => res.json())
                .then(data => {

                    document.getElementById('ordersCount').innerText = data.ordersCount;
                    // 💰 KPI
                    document.getElementById('revenue').innerText =
                        data.revenue;

                    // 📊 STATUS PIE
                    statusChart = new Chart(document.getElementById('statusChart'), {
                        type: 'doughnut',
                        data: {
                            labels: data.status.map(s => s.estado),
                            datasets: [{
                                data: data.status.map(s => s.total)
                            }]
                        }
                    });

                    // ⏱ ORDERS BY HOUR
                    hourChart = new Chart(document.getElementById('ordersByHour'), {
                        type: 'line',
                        data: {
                            labels: data.ordersByHour.map(o => o.hour + 'h'),
                            datasets: [{
                                label: 'Pedidos',
                                data: data.ordersByHour.map(o => o.total),
                                borderWidth: 2
                            }]
                        }
                    });

                    // 🍔 TOP PRODUCTS
                    productChart = new Chart(document.getElementById('topProducts'), {
                        type: 'bar',
                        data: {
                            labels: data.topProducts.map(p => p.item_pedido_produto.nome),
                            datasets: [{
                                label: 'Vendidos',
                                data: data.topProducts.map(p => p.total)
                            }]
                        }
                    });

                });

        }

        loadDashboard();
    </script>
@endpush

@include('partials.datatable')