@extends('layouts/contentLayoutMaster')

@section('title', 'Dashboard Analytics')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/base/plugins/extensions/ext-component-toastr.css') }}">
@endsection
@section('page-style')
@endsection
@php
    $configData = Helper::applClasses();
@endphp

@section('content')
    <!-- Dashboard Analytics Start -->
    <section id="dashboard-analytics">
        <section id="chartjs-chart">
            <div class="row charts">
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="card">
                        <div
                            class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                            <div class="header-left">
                                <h4 class="card-title">Milk Purchase Volume Of
                                    {{ \Carbon\Carbon::now()->format('d-M-y') }}</h4>
                            </div>
                        </div>
                        
                        <div>
                            <canvas id="stackedChart" data-height="1200"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="card">
                        <div
                            class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                            <div class="header-left">
                                <h4 class="card-title">
                                    Balances As On
                                    {{ \Carbon\Carbon::now()->format('d-M-y') }} 
                                </h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="milkPurchasesAtDate" class="bar-chart-ex chartjs" data-height="1200"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row charts">
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="card">
                        <div
                            class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                            <div class="header-left">
                                <h4 class="card-title">Area Office Collection History (7 Days)
                                </h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart" class="bar-chart-ex chartjs" data-height="1200"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-6 col-md-12 col-sm-12">
                    <div class="card">
                        <div
                            class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                            <div class="header-left">
                                <h4 class="card-title">Over All Collection Trend (7 Days)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="lineChart" class="bar-chart-ex chartjs" data-height="1200"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row charts">
                <div class="col-lg-6 col-xl-6 col-md-12 col-sm-12">
                    <div class="card">
                        <div
                            class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                            <div class="header-left">
                                <h4 class="card-title">Active vs. Inactive Users</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="donutChart" style="height: 199px;" class="bar-chart-ex chartjs"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <!-- Dashboard Analytics end -->
@endsection

@section('vendor-script')
    <script src="{{ asset('vendors/js/extensions/toastr.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection
@section('page-script')
    <script>
        @if (Session::has('message'))
            toastr['success']('{{ Session::get('message') }}', 'Success!', {
                closeButton: true,
                tapToDismiss: false,
                rtl: false
            });
        @endif

        // Stacked Bar Chart for Todays Milk Purchases by Area Office
        const areaOffices = {!! json_encode($areaOffices) !!};
        const milkPurchases = {!! json_encode($milkPurchases) !!};
        
        const labels = areaOffices.map(a => a.name);

        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'Area Office',
                    data: milkPurchases.map(p => p.areaOfficeGrossVolume),
                    backgroundColor: '#10b981', // Emerald
                    borderRadius: 6,
                    barPercentage: 0.6,
                    categoryPercentage: 0.6,
                },
                {
                    label: 'MMT',
                    data: milkPurchases.map(p => p.mmt),
                    backgroundColor: '#3b82f6', // Blue
                    borderRadius: 6,
                    barPercentage: 0.6,
                    categoryPercentage: 0.6,
                },
                {
                    label: 'MCC',
                    data: milkPurchases.map(p => p.mcc),
                    backgroundColor: '#f59e0b', // Amber
                    borderRadius: 6,
                    barPercentage: 0.6,
                    categoryPercentage: 0.6,
                }
            ]
        };

        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: 20
                },
                scales: {
                    x: {
                        stacked: true,
                        ticks: {
                            // maxRotation: 45,
                            // minRotation: 45,
                            font: {
                                size: 13,
                                weight: '600'
                            },
                            color: '#4b5563'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        ticks: {
                            font: {
                                size: 13
                            },
                            color: '#4b5563',
                            callback: function(value) {
                                // return (value / 1000).toLocaleString();
                                return value.toLocaleString();
                            }
                        },
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                            borderDash: [4, 4]
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 13,
                                weight: '600'
                            },
                            color: '#4b5563',
                            usePointStyle: true,
                            pointStyle: 'circle'
                        },
                        onClick: null
                    },
                    tooltip: {
                        backgroundColor: '#ffffff',
                        titleColor: '#111827',
                        bodyColor: '#374151',
                        borderColor: '#d1d5db',
                        borderWidth: 1,
                        cornerRadius: 6,
                        padding: 10,
                        displayColors: false,
                        footerMarginTop: 0, // 🔽 Reduce space between body and footer (default is 6)

                        callbacks: {
                            title: (tooltipItems) => {
                                // Return the label as title (Area Office)
                                return tooltipItems[0].label;
                            },
                            label: function (context) {
                                const label = context.dataset.label || '';
                                // const value = Math.round(context.parsed.y / 1000);
                                const value = Math.round(context.parsed.y);
                                return `${label}: ${value.toLocaleString()}`;
                            },
                            afterBody: function (tooltipItems) {
                                const index = tooltipItems[0].dataIndex;

                                // const ao = Math.round(data.datasets[0].data[index] / 1000) || 0;
                                // const mmt = Math.round(data.datasets[1].data[index] / 1000) || 0;
                                // const mcc = Math.round(data.datasets[2].data[index] / 1000) || 0;
                                const ao = Math.round(data.datasets[0].data[index]) || 0;
                                const mmt = Math.round(data.datasets[1].data[index]) || 0;
                                const mcc = Math.round(data.datasets[2].data[index]) || 0;

                                const total = ao + mmt + mcc;
                                return `Total: ${total.toLocaleString()}`;
                            },
                            // This removes the footer completely
                            footer: () => ''
                        }
                    }
                },
                animation: {
                    duration: 1000,
                    easing: 'easeOutQuart'
                }
            }
        };

        new Chart(document.getElementById('stackedChart').getContext('2d'), config);


        $('.changeTheme').click(function() {
            var id = $(this).attr("id");
            if (id == 'dark') {
                var chart = Chart.getChart('stackedChart');
                chart.options.scales.x.ticks.color = '#ffffff';
                chart.options.scales.y.ticks.color = '#ffffff';
                chart.options.plugins.legend.labels.color = '#ffffff';
                chart.update();

                var chartCanvas = Chart.getChart('milkPurchasesAtDate');
                chartCanvas.options.scales.x.ticks.color = '#ffffff';
                chartCanvas.options.scales.y.ticks.color = '#ffffff';
                chartCanvas.options.plugins.legend.labels.color = '#ffffff';
                chartCanvas.update();

                var myChart = Chart.getChart('myChart');
                myChart.options.scales.x.ticks.color = '#ffffff';
                myChart.options.scales.y.ticks.color = '#ffffff';
                myChart.options.plugins.legend.labels.color = '#ffffff';
                myChart.update();

                var lineChart = Chart.getChart('lineChart');
                lineChart.options.scales.x.ticks.color = '#ffffff';
                lineChart.options.scales.y.ticks.color = '#ffffff';
                lineChart.options.plugins.legend.labels.color = '#ffffff';
                lineChart.update();

                var donutChart = Chart.getChart('donutChart');
                donutChart.options.plugins.legend.labels.color = '#ffffff';
                donutChart.update();
            } else {
                var chart = Chart.getChart('stackedChart');
                chart.options.scales.x.ticks.color = '#000000';
                chart.options.scales.y.ticks.color = '#000000';
                chart.options.plugins.legend.labels.color = '#000000';
                chart.update();

                var chartCanvas = Chart.getChart('milkPurchasesAtDate');
                chartCanvas.options.scales.x.ticks.color = '#000000';
                chartCanvas.options.scales.y.ticks.color = '#000000';
                chartCanvas.options.plugins.legend.labels.color = '#000000';
                chartCanvas.update();

                var myChart = Chart.getChart('myChart');
                myChart.options.scales.x.ticks.color = '#000000';
                myChart.options.scales.y.ticks.color = '#000000';
                myChart.options.plugins.legend.labels.color = '#000000';
                myChart.update();

                var lineChart = Chart.getChart('lineChart');
                lineChart.options.scales.x.ticks.color = '#000000';
                lineChart.options.scales.y.ticks.color = '#000000';
                lineChart.options.plugins.legend.labels.color = '#000000';
                lineChart.update();

                var donutChart = Chart.getChart('donutChart');
                donutChart.options.plugins.legend.labels.color = '#000000';
                donutChart.update();
            }
        });
    </script>
    
    <script>
        // Get the canvas element
        const chartCanvas = document.getElementById('milkPurchasesAtDate');

        // Get the JSON data passed from the server-side
        const milkPurchasesAtDateData = {!! $milkPurchasesAtDate !!};

        // Extract the data for the chart
        const areaOfficeIds = milkPurchasesAtDateData.map(data => data.area_office_id);
        const areaOfficeGrossVolumes = milkPurchasesAtDateData.map(data => data.areaOfficeGrossVolume);
        const mmtVolumes = milkPurchasesAtDateData.map(data => data.mmt);
        const mccVolumes = milkPurchasesAtDateData.map(data => data.mcc);

        // Create the chart
        new Chart(chartCanvas, {
            type: 'bar',
            data: {
                labels: areaOfficeIds,
                datasets: [
                    {
                        label: 'Area Office',
                        data: areaOfficeGrossVolumes,
                        backgroundColor: '#10b981', // Green (solid)
                        borderRadius: 6,
                        barPercentage: 0.6,
                        categoryPercentage: 0.6,
                    },
                    {
                        label: 'MMT',
                        data: mmtVolumes,
                        backgroundColor: '#3b82f6', // Blue (solid)
                        borderRadius: 6,
                        barPercentage: 0.6,
                        categoryPercentage: 0.6,
                    },
                    {
                        label: 'MCC',
                        data: mccVolumes,
                        backgroundColor: '#f59e0b', // Amber (solid)
                        borderRadius: 6,
                        barPercentage: 0.6,
                        categoryPercentage: 0.6,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: 20
                },
                scales: {
                    x: {
                        stacked: false,
                        ticks: {
                            font: {
                                size: 13,
                                weight: '600'
                            },
                            color: '#4b5563'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                    y: {
                        stacked: false,
                        beginAtZero: true,
                        ticks: {
                            font: {
                                size: 13
                            },
                            color: '#4b5563',
                            callback: function (value) {
                                // return (value / 1000).toLocaleString();
                                return value.toLocaleString();
                            }
                        },
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                            borderDash: [4, 4]
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 13,
                                weight: 'normal' // not bold
                            },
                            color: '#4b5563',
                            usePointStyle: true,
                            pointStyle: 'circle'
                        },
                        onClick: null // disables filter toggle
                    },
                    tooltip: {
                        backgroundColor: '#ffffff',
                        titleColor: '#111827',
                        bodyColor: '#374151',
                        borderColor: '#d1d5db',
                        borderWidth: 1,
                        cornerRadius: 6,
                        padding: 10,
                        displayColors: false,
                        footerMarginTop: 0,
                        callbacks: {
                            title: (tooltipItems) => {
                                return tooltipItems[0].label;
                            },
                            label: function (context) {
                                const label = context.dataset.label || '';
                                // const value = Math.round(context.parsed.y / 1000);
                                const value = Math.round(context.parsed.y);
                                return `${label}: ${value.toLocaleString()}`;
                            },
                            afterBody: function (tooltipItems) {
                                const index = tooltipItems[0].dataIndex;

                                const ao = Math.round(areaOfficeGrossVolumes[index]) || 0;
                                const mmt = Math.round(mmtVolumes[index]) || 0;
                                const mcc = Math.round(mccVolumes[index]) || 0;

                                const total = ao + mmt + mcc;
                                return `Total: ${total.toLocaleString()}`;
                            },
                            footer: () => ''
                        }
                    }
                },
                animation: {
                    duration: 1000,
                    easing: 'easeOutQuart'
                }
            }
        });

        // Weekly area office purchases data //

        // Backend data passed into JS
        const weeklyAreaOfficePurchases = {!! json_encode($weeklyAreaOfficePurchases) !!};

        // Extract labels (dates)
        const weekDates = weeklyAreaOfficePurchases.map(item => item.date);

        // Extract all area office names dynamically (keys except 'date')
        const areaOfficeNames = Object.keys(weeklyAreaOfficePurchases[0]).filter(key => key !== 'date');

        // Prepare dataset: each area office gets its own volume array for the 7 days
        const areaOfficeDatasets = areaOfficeNames.map((officeName, index) => {
            const volumes = weeklyAreaOfficePurchases.map(item => item[officeName]);

            const colorPalettes = [
                ['#2563eb', 'rgba(37, 99, 235, 0.2)'],
                ['#f59e0b', 'rgba(245, 158, 11, 0.2)'],
                ['#10b981', 'rgba(16, 185, 129, 0.2)'],
                ['#ef4444', 'rgba(239, 68, 68, 0.2)'],
                ['#8b5cf6', 'rgba(139, 92, 246, 0.2)'],
                ['#ec4899', 'rgba(236, 72, 153, 0.2)'],
                ['#14b8a6', 'rgba(20, 184, 166, 0.2)'],
                ['#f97316', 'rgba(249, 115, 22, 0.2)']
            ];

            const colorSet = colorPalettes[index % colorPalettes.length];
            const myChartCtx = document.getElementById('myChart').getContext('2d');
            const gradient = myChartCtx.createLinearGradient(0, 0, 0, myChartCtx.canvas.height);
            gradient.addColorStop(0, colorSet[0]);
            gradient.addColorStop(1, colorSet[1]);

            return {
                label: officeName,
                data: volumes,
                backgroundColor: gradient,
                borderColor: colorSet[0],
                borderWidth: 2,
                borderRadius: 6,
                barPercentage: 0.6,
                categoryPercentage: 0.6,
            };
        });

        // Chart creation
        const myChartCanvas = document.getElementById('myChart').getContext('2d');
        new Chart(myChartCanvas, {
            type: 'bar',
            data: {
                labels: weekDates,
                datasets: areaOfficeDatasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: 20
                },
                scales: {
                    x: {
                        stacked: false,
                        ticks: {
                            font: {
                                size: 13,
                                weight: '600'
                            },
                            color: '#4b5563'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                    y: {
                        stacked: false,
                        beginAtZero: true,
                        ticks: {
                            font: {
                                size: 13
                            },
                            color: '#4b5563',
                            callback: function (value) {
                                return value.toLocaleString();
                            }
                        },
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                            borderDash: [4, 4]
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 13,
                                weight: 'normal'
                            },
                            color: '#4b5563',
                            usePointStyle: true,
                            pointStyle: 'circle'
                        },
                        onClick: () => {}
                    },
                    tooltip: {
                        backgroundColor: '#ffffff',
                        titleColor: '#111827',
                        bodyColor: '#374151',
                        borderColor: '#d1d5db',
                        borderWidth: 1,
                        cornerRadius: 6,
                        padding: 10,
                        displayColors: true,
                        footerMarginTop: 0,
                        callbacks: {
                            title: (tooltipItems) => tooltipItems[0].label,
                            label: function (context) {
                                const label = context.dataset.label || '';
                                const value = Math.round(context.parsed.y);
                                return `${label}: ${value.toLocaleString()}`;
                            },
                            footer: () => ''
                        }
                    }
                },
                animation: {
                    duration: 1000,
                    easing: 'easeOutQuart'
                }
            }
        });

        // Weekly all area office milk purchases data
        const totalMilkPurchasesGrossVolume = {!! json_encode($weeklyMilkPurchasesOfAllAos) !!};

        const dates = totalMilkPurchasesGrossVolume.map(item => item.date);
        const volumes = totalMilkPurchasesGrossVolume.map(item => item.total_volume);

        const ctx = document.getElementById('lineChart').getContext('2d');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: dates,
                datasets: [{
                    label: 'Total Gross Volume',
                    data: volumes,
                    backgroundColor: 'rgba(0, 0, 255, 0.7)',
                    borderColor: 'rgba(0, 0, 255, 1)',
                    fill: false,
                    tension: 0.4,
                    borderWidth: 2,
                    pointRadius: 5,
                    pointBackgroundColor: 'rgba(0, 0, 255, 1)'
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        ticks: {
                            color: '#4b5563',
                            font: { size: 12 }
                        },
                        title: {
                            display: true,
                            text: 'Date',
                            color: '#374151',
                            font: { size: 14, weight: 'bold' }
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: value => value.toLocaleString(),
                            color: '#4b5563',
                            font: { size: 12 }
                        },
                        title: {
                            display: true,
                            text: 'Volume',
                            color: '#374151',
                            font: { size: 14, weight: 'bold' }
                        },
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                            borderDash: [4, 4]
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: context => `Volume: ${context.parsed.y.toLocaleString()}`
                        }
                    }
                },
                layout: {
                    padding: 10
                }
            }
        });

        // Active vs Inactive Users Donut Chart
        var activeUsers = ;
        var inActiveUsers = ;
        
        var donutCtx = document.getElementById('donutChart').getContext('2d');
        var donutChart = new Chart(donutCtx, {
            type: 'doughnut',
            data: {
                labels: ['Active Users', 'Inactive Users'],
                datasets: [{
                    data: [activeUsers, inActiveUsers],
                    backgroundColor: ['#0000FF', '#FF0000'],
                    hoverBackgroundColor: ['#0000FF', '#FF0000']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });

    </script>

    // <script>
    //     var areaOfficePurchases = null;
        
    //     // Extract unique area office names
    //     var areaOfficeNames = Object.keys(areaOfficePurchases[0]).filter(key => key !== 'date');

    //     // Extract the 7 dates
    //     var weekDates = areaOfficePurchases.map(item => item.date);

    //     // Prepare dataset: each area office gets its own array of 7 volume values
    //     var areaOfficeVolumes = areaOfficeNames.map(function(name) {
    //         return areaOfficePurchases.map(item => item[name]);
    //     });

    //     // Assign a unique canvas context name
    //     var myChartCanvas = document.getElementById('myChart').getContext('2d');

    //     new Chart(myChartCanvas, {
    //         type: 'bar',
    //         data: {
    //             labels: weekDates,
    //             datasets: areaOfficeNames.map(function(name, index) {
    //                 var gradient = myChartCanvas.createLinearGradient(0, 0, 0, myChartCanvas.canvas.height);
    //                 var colors = [
    //                     ['rgb(0, 0, 255)', 'rgba(0, 0, 255, 0.2)'],
    //                     ['rgb(255, 0, 0)', 'rgba(255, 0, 0, 0.2)'],
    //                     ['rgb(0, 255, 0)', 'rgba(0, 255, 0, 0.2)'],
    //                     ['rgb(255, 165, 0)', 'rgba(255, 165, 0, 0.2)'],
    //                     ['rgb(128, 0, 128)', 'rgba(128, 0, 128, 0.2)'],
    //                     ['rgb(0, 128, 128)', 'rgba(0, 128, 128, 0.2)'],
    //                     ['rgb(255, 20, 147)', 'rgba(255, 20, 147, 0.2)'],
    //                     ['rgb(139, 69, 19)', 'rgba(139, 69, 19, 0.2)']
    //                 ];

    //                 var colorSet = colors[index % colors.length];
    //                 gradient.addColorStop(0, colorSet[0]);
    //                 gradient.addColorStop(1, colorSet[1]);

    //                 return {
    //                     label: name,
    //                     data: areaOfficeVolumes[index],
    //                     backgroundColor: gradient,
    //                     borderColor: colorSet[0],
    //                     borderWidth: 2,
    //                     borderRadius: 10,
    //                 };
    //             })
    //         },
    //         options: {
    //             responsive: true,
    //             scales: {
    //                 x: {
    //                     stacked: false,
    //                     grid: {
    //                         color: 'rgb(0, 0, 0)',
    //                     }
    //                 },
    //                 y: {
    //                     stacked: false,
    //                     beginAtZero: true,
    //                 }
    //             },
    //             plugins: {
    //                 legend: {
    //                     position: 'bottom'
    //                 }
    //             },
    //             layout: {
    //                 padding: {
    //                     left: 10,
    //                     right: 10,
    //                     top: 10,
    //                     bottom: 10
    //                 }
    //             }
    //         }
    //     });
    // </script>

@endsection