{{-- resources/views/stock_aging/aging_quantity_chart.blade.php --}}

<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">
            <i class="fa fa-bar-chart"></i> Stock Aging Distribution by Quantity
        </h3>
    </div>
    <div class="box-body">
        <div style="position: relative; height: 280px;">
            <canvas id="agingQuantityChart"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    console.log('=== AGING QUANTITY CHART - START ===');
    console.log('Chart.js loaded?', typeof Chart !== 'undefined' ? 'Yes' : 'No');

    document.addEventListener('DOMContentLoaded', function() {
        console.log('=== AGING QUANTITY CHART - DOM CONTENT LOADED ===');
        
        var summaryData = @json($reportData['summary'] ?? []);
        var orderedCategories = @json($orderedCategories ?? []);
        
        console.log('Quantity Summary Data:', summaryData);
        console.log('Quantity Ordered Categories:', orderedCategories);
        console.log('Has quantity data?', Object.keys(summaryData).length > 0 ? 'Yes' : 'No');
        
        // Check if canvas exists
        var canvas = document.getElementById('agingQuantityChart');
        console.log('Quantity Canvas exists?', canvas ? 'Yes' : 'No');
        
        initializeQuantityChart(summaryData, orderedCategories);
    });

    function initializeQuantityChart(summaryData, orderedCategories) {
        console.log('=== INITIALIZE QUANTITY CHART ===');
        
        var labels = [];
        var quantities = [];
        var colors = [];
        
        var colorMap = {
            '0-30': '#28a745',
            '31-60': '#17a2b8',
            '61-90': '#ffc107',
            '91-120': '#fd7e14',
            '121-160': '#e83e8c',
            '160+': '#dc3545'
        };
        
        var labelMap = {
            '0-30': 'Fresh / Fast-moving',
            '31-60': 'Aging stock',
            '61-90': 'Slow-moving',
            '91-120': 'High aging',
            '121-160': 'Very slow-moving',
            '160+': 'Dead / Obsolete risk'
        };

        var categoriesToUse = orderedCategories && orderedCategories.length > 0 
            ? orderedCategories 
            : Object.keys(summaryData);

        console.log('Quantity categories to use:', categoriesToUse);

        categoriesToUse.forEach(function(category) {
            var data = summaryData[category];
            if (data && data.quantity > 0) {
                var label = labelMap[category] || data.label || category;
                labels.push(label);
                quantities.push(parseFloat(data.quantity));
                colors.push(colorMap[category] || '#6c757d');
                console.log('Added quantity for category:', category, 'quantity:', data.quantity);
            } else if (data) {
                console.log('Category has no quantity:', category, data);
            }
        });

        if (labels.length === 0) {
            console.warn('No quantity data - showing placeholder');
            labels = ['No Data Available'];
            quantities = [0];
            colors = ['#6c757d'];
        }

        var ctx = document.getElementById('agingQuantityChart');
        
        if (!ctx) {
            console.error('Canvas element #agingQuantityChart not found!');
            return;
        }
        
        var ctx2d = ctx.getContext('2d');
        
        if (window.agingQuantityChartInstance) {
            console.log('Destroying existing quantity chart instance');
            window.agingQuantityChartInstance.destroy();
        }
        
        try {
            window.agingQuantityChartInstance = new Chart(ctx2d, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Stock Quantity',
                        data: quantities,
                        backgroundColor: colors.map(function(color) {
                            return color + '80';
                        }),
                        borderColor: colors,
                        borderWidth: 2,
                        borderRadius: 4,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: labels.length > 1 && labels[0] !== 'No Data Available'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    var value = context.parsed.y;
                                    var total = context.dataset.data.reduce(function(a, b) {
                                        return a + b;
                                    }, 0);
                                    var percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return value.toFixed(2) + ' units (' + percentage + '%)';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    if (value >= 1000000) {
                                        return (value / 1000000).toFixed(1) + 'M';
                                    } else if (value >= 1000) {
                                        return (value / 1000).toFixed(1) + 'K';
                                    }
                                    return value.toFixed(0);
                                }
                            },
                            grid: {
                                display: true,
                                color: 'rgba(0,0,0,0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                maxRotation: 45,
                                minRotation: 30,
                                font: {
                                    size: 10
                                }
                            }
                        }
                    },
                    animation: {
                        duration: 1500,
                        easing: 'easeOutQuart'
                    }
                }
            });
            
            console.log('✅ Quantity chart initialized successfully!');
            
        } catch (error) {
            console.error('❌ Error creating quantity chart:', error);
        }
        
        console.log('=== END INITIALIZE QUANTITY CHART ===');
    }
</script>