@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') }}
                <form action="{{ route('dashboard.index') }}" method="GET">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="year">Año</label>
                            <select name="year" id="year" class="form-control">
                                @foreach ($years as $year)
                                    <option value="{{ $year->year }}" {{ $selectedYear == $year->year ? 'selected' : '' }}>{{ $year->year }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="month">Mes</label>
                            <select name="month" id="month" class="form-control">
                                @foreach ($months as $month)
                                    <option value="{{ $month->month }}" {{ $selectedMonth == $month->month ? 'selected' : '' }}>{{ $month->month }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mt-4">
                            <button type="submit" class="btn btn-primary">Filtrar</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                
                <div class="row justify-content-center">
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart"></canvas>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Estado</th>
                                        <th>Cantidad</th>
                                        <th>%</th>
                                    </tr>
                                </thead>
                                <tbody id="table1">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart2"></canvas>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Cantidad</th>
                                        <th>%</th>
                                        <th>Valor</th>
                                    </tr>
                                </thead>
                                <tbody id="table2">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart3"></canvas>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Estado ODC</th>
                                        <th>Cantidad</th>
                                        <th>%</th>
                                    </tr>
                                </thead>
                                <tbody id="table3">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart4"></canvas>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Almacén</th>
                                        <th>ODC</th>
                                        <th>%</th>
                                    </tr>
                                </thead>
                                <tbody id="table4">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart5"></canvas>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Grupo</th>
                                        <th>Cantidad</th>
                                        <th>%</th>
                                    </tr>
                                </thead>
                                <tbody id="table5">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart6"></canvas>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Grupo</th>
                                        <th>Total Vendido</th>
                                        <th>%</th>
                                    </tr>
                                </thead>
                                <tbody id="table6">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-4 mt-4">
                        <canvas id="myChart7"></canvas>
                        <div class="table-responsive mt-3">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Grupo</th>
                                        <th>Total Vendido</th>
                                        <th>%</th>
                                    </tr>
                                </thead>
                                <tbody id="table7">
                                    <!-- Data will be populated by JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </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) !!},
                    orderNumber: {!! json_encode($orderNumber) !!},
                    salesNumber: {!! json_encode($salesNumber) !!},
                    salesDetails: {!! json_encode($salesDetails) !!},
                    historicalOrders: {!! json_encode($historicalOrders) !!},
                };

                // console.log(chartData);

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

                const populateTable = (tableId, labels, data, showPercentage = false, formatCurrency = false) => {
                    const tbody = document.getElementById(tableId);
                    tbody.innerHTML = '';
                    
                    const total = data.reduce((sum, val) => sum + val, 0);
                    
                    // Create array of objects with label, value, and percentage for sorting
                    const tableData = labels.map((label, index) => ({
                        label: label,
                        value: data[index],
                        percentage: total > 0 ? ((data[index] / total) * 100) : 0
                    }));
                    
                    // Sort by percentage in descending order if showPercentage is true
                    if (showPercentage) {
                        tableData.sort((a, b) => b.percentage - a.percentage);
                    }
                    
                    tableData.forEach((item) => {
                        const row = document.createElement('tr');
                        const percentage = item.percentage.toFixed(1);
                        
                        let valueDisplay = item.value;
                        if (formatCurrency) {
                            valueDisplay = new Intl.NumberFormat('en-US', { 
                                style: 'currency', 
                                currency: 'USD' 
                            }).format(item.value);
                        } else {
                            valueDisplay = new Intl.NumberFormat().format(item.value);
                        }
                        
                        row.innerHTML = `
                            <td>${item.label}</td>
                            <td>${valueDisplay}</td>
                            ${showPercentage ? `<td>${percentage}%</td>` : ''}
                        `;
                        tbody.appendChild(row);
                    });
                };

                const populateSimpleTable = (tableId, labels, data) => {
                    const tbody = document.getElementById(tableId);
                    tbody.innerHTML = '';
                    
                    labels.forEach((label, index) => {
                        const row = document.createElement('tr');
                        const value = data[index];
                        
                        row.innerHTML = `
                            <td>${label}</td>
                            <td>${new Intl.NumberFormat().format(value)}</td>
                        `;
                        tbody.appendChild(row);
                    });
                };

                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',
                        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
                    }]
                });

                // Chart 1: Partners by Status
                const chart1Labels = Object.values(chartData.partnersByStatus).map(item => item.status);
                const chart1Data = Object.values(chartData.partnersByStatus).map(item => item.count);
                
                createChart(
                    document.getElementById('myChart'),
                    'pie',
                    pieChartData(chart1Labels, chart1Data),
                    {
                        ...pieChartOptions('Socios: ' + chartData.totalPartners),
                        plugins: {
                            ...pieChartOptions('Socios: ' + chartData.totalPartners).plugins,
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.parsed;
                                        const dataArr = context.chart.data.datasets[0].data;
                                        const total = dataArr.reduce((a, b) => a + b, 0);
                                        const percentage = total ? ((value / total) * 100).toFixed(1) : 0;
                                        return `${value} (${percentage}%)`;
                                    }
                                }
                            }
                        }
                    }
                );
                populateTable('table1', chart1Labels, chart1Data, true);

                // Chart 2: Orders vs Sales
                const chart2Labels = ["Cotizaciones", "Ventas"];
                const chart2Data = [chartData.totalOrders, chartData.totalSales];

                createChart(
                    document.getElementById('myChart2'),
                    'bar',
                    barChartData(chart2Labels, chart2Data),
                    {
                        ...barChartOptions('Ventas totales: $' + chartData.totalSales.toFixed(2)),
                        plugins: {
                            ...barChartOptions('Ventas totales: $' + chartData.totalSales.toFixed(2)).plugins,
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.label || '';
                                        let value = context.parsed.y;
                                        let formattedValue = Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                                        let percentage = '';
                                        let cant = '';
                                        if (context.dataIndex === 0) {
                                            // Only for "Cotizaciones"
                                            cant = chartData.orderNumber;
                                            percentage = ((value / chartData.totalOrders) * 100).toFixed(2) + '%';
                                        } else if (context.dataIndex === 1) {
                                            // Only for "Ventas"
                                            cant = chartData.salesNumber;
                                            percentage = ((value / chartData.totalSales) * 100).toFixed(2) + '%';
                                        }
                                        if (context.dataIndex === 1 && chartData.totalOrders > 0) {
                                            // Only for "Ventas"
                                            percentage = ((value / chartData.totalOrders) * 100).toFixed(2) + '%';
                                        }
                                        // return cantidad, percent and total sales
                                        return `${cant}:${percentage}: $${formattedValue} `;
                                    }
                                }
                            }
                        }
                    }
                );
                // Show just 2 decimals in table as well
                const populateSimpleTable2 = (tableId, labels, data) => {
                    const tbody = document.getElementById(tableId);
                    tbody.innerHTML = '';
                    
                    labels.forEach((label, index) => {
                        const row = document.createElement('tr');
                        let value = data[index];
                        let formattedValue = Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        
                        // Get quantity and calculate percentage
                        let quantity = 0;
                        let percentage = 0;
                        
                        if (index === 0) {
                            // Cotizaciones
                            quantity = chartData.orderNumber;
                            percentage = chartData.totalOrders > 0 ? ((value / chartData.totalOrders) * 100).toFixed(2) : 0;
                        } else if (index === 1) {
                            // Ventas
                            quantity = chartData.salesNumber;
                            percentage = chartData.totalOrders > 0 ? ((value / chartData.totalOrders) * 100).toFixed(2) : 0;
                        }
                        
                        row.innerHTML = `
                            <td>${label}</td>
                            <td>${quantity.toLocaleString()}</td>
                            <td>${percentage}%</td>
                            <td>$${formattedValue}</td>
                        `;
                        tbody.appendChild(row);
                    });
                };
                populateSimpleTable2('table2', chart2Labels, chart2Data);

                // Chart 3: Orders by Status
                const chart3Labels = ["Cerrado sin facturar", "Cotizado", "En negociacion", "Prefactura", "Facturado"];
                const chart3Data = [chartData.cerradoSinFacturar, chartData.cotizado, chartData.enNegociacion, chartData.prefactura, chartData.facturado];
                
                createChart(
                    document.getElementById('myChart3'),
                    'pie',
                    pieChartData(chart3Labels, chart3Data),
                    {
                        ...pieChartOptions('ODC por estado'),
                        plugins: {
                            ...pieChartOptions('ODC por estado').plugins,
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.parsed;
                                        const dataArr = context.chart.data.datasets[0].data;
                                        const total = dataArr.reduce((a, b) => a + b, 0);
                                        const percentage = total ? ((value / total) * 100).toFixed(1) : 0;
                                        return `${label}: ${value} (${percentage}%)`;
                                    }
                                }
                            }
                        }
                    }
                );
                populateTable('table3', chart3Labels, chart3Data, true);

                // Chart 4: Orders by Warehouse
                const chart4Labels = Object.values(chartData.ordersByWarehouse).map(item => item.warehouse_name);
                const chart4Data = Object.values(chartData.ordersByWarehouse).map(item => item.count);

                createChart(
                    document.getElementById('myChart4'),
                    'pie',
                    pieChartData(chart4Labels, chart4Data),
                    {
                        ...pieChartOptions('ODC por Almacen'),
                        plugins: {
                            ...pieChartOptions('ODC por Almacen').plugins,
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.parsed;
                                        const dataArr = context.chart.data.datasets[0].data;
                                        const total = dataArr.reduce((a, b) => a + b, 0);
                                        const percentage = total ? ((value / total) * 100).toFixed(1) : 0;
                                        return `${label}: ${value} (${percentage}%)`;
                                    }
                                }
                            }
                        }
                    }
                );
                populateTable('table4', chart4Labels, chart4Data, true);

                // Chart 5: Items by Group (Quantity)
                const chart5Labels = Object.values(chartData.orderDetails).map(item => item.subgrupo);
                const chart5Data = Object.values(chartData.orderDetails).map(item => item.cantidad);
                
                createChart(
                    document.getElementById('myChart5'),
                    'pie',
                    pieChartData(chart5Labels, chart5Data),
                    {
                        ...pieChartOptions('Cantidad de items de ODC totales por Grupo'),
                        plugins: {
                            ...pieChartOptions('Cantidad de items de ODC totales por Grupo').plugins,
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.parsed;
                                        const dataArr = context.chart.data.datasets[0].data;
                                        const total = dataArr.reduce((a, b) => a + b, 0);
                                        const percentage = total ? ((value / total) * 100).toFixed(1) : 0;
                                        return `${value} (${percentage}%)`;
                                    }
                                }
                            }
                        }
                    }
                );
                populateTable('table5', chart5Labels, chart5Data, true);

                // console.log(chartData.orderDetails);

                // Chart 6: Sales by Group (Total Sales)
                const chart6Labels = Object.values(chartData.orderDetails).map(item => item.subgrupo);
                const chart6Data = Object.values(chartData.orderDetails).map(item => item.totalVendido);
                
                createChart(
                    document.getElementById('myChart6'),
                    'pie',
                    pieChartData(chart6Labels, chart6Data),
                    {
                        ...pieChartOptions2('ODC totales por Grupo'),
                        plugins: {
                            ...pieChartOptions2('ODC totales por Grupo').plugins,
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.parsed;
                                        const dataArr = context.chart.data.datasets[0].data;
                                        const total = dataArr.reduce((a, b) => a + b, 0);
                                        const percentage = total ? ((value / total) * 100).toFixed(1) : 0;
                                        const formattedValue = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
                                        return `${formattedValue} (${percentage}%)`;
                                    }
                                }
                            }
                        }
                    }
                );
                populateTable('table6', chart6Labels, chart6Data, true, true);

                //add the same for $salesDetails real sales
                // Chart 7: Sales Details
                const salesDetailsLabels = Object.values(chartData.salesDetails).map(item => item.subgrupo);
                const salesDetailsData = Object.values(chartData.salesDetails).map(item => item.totalVendido);

                createChart(
                    document.getElementById('myChart7'),
                    'pie',
                    pieChartData(salesDetailsLabels, salesDetailsData),
                    {
                        ...pieChartOptions2('Ventas reales por Grupo'),
                        plugins: {
                            ...pieChartOptions2('Ventas reales por Grupo').plugins,
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.parsed;
                                        const dataArr = context.chart.data.datasets[0].data;
                                        const total = dataArr.reduce((a, b) => a + b, 0);
                                        const percentage = total ? ((value / total) * 100).toFixed(1) : 0;
                                        const formattedValue = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
                                        return `${formattedValue} (${percentage}%)`;
                                    }
                                }
                            }
                        }
                    }
                );
                populateTable('table7', salesDetailsLabels, salesDetailsData, true, true);

                // console.log(chartData.salesDetails);
                // console.log(chartData.historicalOrders);

            });
        </script>
@endpush