@extends('layouts.app')
@section('breadcrumb')
    <li class="breadcrumb-item">
        order_header
    </li>
@endsection
@section('header')
    <h3><i class="fa fa-list"></i> Dashboard </h3>
@endsection
@section('tools')

@endsection

@section('content')
    <div class="container">
        <div class='card'>
            <div class="card-header">{{ __('pages.dashboard') }}</div>
            <div class="card-body">
                
                <div class="row justify-content-center">
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart"></canvas>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart2"></canvas>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart3"></canvas>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart4"></canvas>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart5"></canvas>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart6"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
@endSection


@push('custom-scripts')
        <script type="module">
        

            $(document).ready(function() {
                const chartData = {
                    partnersByStatus: {!! json_encode($partnersByStatus) !!},
                    totalPartners: {!! json_encode($totalPartners) !!},
                    totalOrders: {!! json_encode($totalOrders) !!},
                    totalSales: {!! json_encode($totalSales) !!},
                    cerradoSinFacturar: {!! json_encode($cerradoSinFacturar) !!},
                    cotizado: {!! json_encode($cotizado) !!},
                    enNegociacion: {!! json_encode($enNegociacion) !!},
                    prefactura: {!! json_encode($prefactura) !!},
                    facturado: {!! json_encode($facturado) !!},
                    ordersByWarehouse: {!! json_encode($ordersByWarehouse) !!},
                    orderDetails: {!! json_encode($orderDetails) !!},
                };

                console.log(chartData);

                const createChart = (ctx, type, data, options) => {
                    return new Chart(ctx, { type, data, options });
                };

                const pieChartOptions = (title) => ({
                    responsive: true,
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: title },
                    }
                });

                const pieChartOptions2 = (title) => ({
                    responsive: true,
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: title },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';

                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed.y !== null) {
                                        label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed);
                                    }
                                    return label;
                                }
                            }
                        }
                    }
                });

                const barChartOptions = (title) => ({
                    responsive: true,
                    plugins: {
                        legend: { position: 'top' },
                        title: { display: true, text: title },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.label + ': $' + context.parsed.y;
                                }
                            }
                        }
                    }
                });
                

                const pieChartData = (labels, data) => ({
                    labels,
                    datasets: [{
                        data,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.8)',
                            'rgba(54, 162, 235, 0.8)',
                            'rgba(255, 206, 86, 0.8)',
                            'rgba(75, 192, 192, 0.8)',
                            'rgba(153, 102, 255, 0.8)',
                            'rgba(255, 159, 64, 0.8)',
                            'rgba(199, 199, 199, 0.8)',
                            'rgba(83, 102, 255, 0.8)',
                            'rgba(255, 99, 71, 0.8)',
                            'rgba(60, 179, 113, 0.8)',
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(199, 199, 199, 1)',
                            'rgba(83, 102, 255, 1)',
                            'rgba(255, 99, 71, 1)',
                            'rgba(60, 179, 113, 1)',
                        ],
                        borderWidth: 1
                    }]
                });

                const barChartData = (labels, data) => ({
                    labels,
                    datasets: [{
                        label: 'Ventas vs cotizaciones del mes pasado',
                        data,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.8)',
                            'rgba(54, 162, 235, 0.8)',
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                        ],
                        borderWidth: 1
                    }]
                });

                createChart(
                    document.getElementById('myChart'),
                    'pie',
                    pieChartData(Object.values(chartData.partnersByStatus).map(item => item.status), Object.values(chartData.partnersByStatus).map(item => item.count)),
                    pieChartOptions('Socios: ' + chartData.totalPartners)
                );

                createChart(
                    document.getElementById('myChart2'),
                    'bar',
                    barChartData(["Cotizaciones", "Ventas"], [chartData.totalOrders, chartData.totalSales]),
                    barChartOptions('Ventas totales: $' + chartData.totalSales)
                );

                createChart(
                    document.getElementById('myChart3'),
                    'pie',
                    pieChartData(["Cerrado sin facturar", "Cotizado", "En negociacion", "Prefactura", "Facturado"], [chartData.cerradoSinFacturar, chartData.cotizado, chartData.enNegociacion, chartData.prefactura, chartData.facturado]),
                    pieChartOptions('ODC por estado')
                );

                createChart(
                    document.getElementById('myChart4'),
                    'pie',
                    pieChartData(Object.values(chartData.ordersByWarehouse).map(item => item.warehouse_name), Object.values(chartData.ordersByWarehouse).map(item => item.count)),
                    pieChartOptions('ODC por Almacen')
                );

                createChart(
                    document.getElementById('myChart5'),
                    'pie',
                    pieChartData(Object.values(chartData.orderDetails).map(item => item.subgrupo), Object.values(chartData.orderDetails).map(item => item.cantidad)),
                    pieChartOptions('Cantidad de items por subgrupo')
                );

                console.log(chartData.orderDetails);

                createChart(
                    document.getElementById('myChart6'),
                    'pie',
                    pieChartData(Object.values(chartData.orderDetails).map(item => item.subgrupo), Object.values(chartData.orderDetails).map(item => item.totalVendido)),
                    pieChartOptions2('Totales por subgrupo')
                );
            });
        </script>
@endpush