{{-- resources/views/stock_aging/aging_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 Value
        </h3>
    </div>
    <div class="box-body">
        <div style="position: relative; height: 280px;">
            <canvas id="agingChart"></canvas>
        </div>
    </div>
</div>

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

    // Use DOMContentLoaded instead of jQuery ready
    document.addEventListener('DOMContentLoaded', function() {
        console.log('=== AGING CHART - DOM CONTENT LOADED ===');
        console.log('1. Checking if reportData exists...');
        console.log('2. reportData type:', typeof @json($reportData));
        
        // Debug: Log the data to see if it's being passed
        var summaryData = @json($reportData['summary'] ?? []);
        var orderedCategories = @json($orderedCategories ?? []);
        
        console.log('4. Summary Data:', summaryData);
        console.log('5. Summary Data Keys:', Object.keys(summaryData));
        console.log('6. Ordered Categories:', orderedCategories);
        console.log('7. Has summary data?', Object.keys(summaryData).length > 0 ? 'Yes' : 'No');
        
        // If no data, show a message
        if (Object.keys(summaryData).length === 0) {
            console.warn('8. No aging data available - check if products have stock and purchase history');
        } else {
            console.log('8. Data found! Proceeding to initialize chart.');
        }
        
        // Check if canvas exists
        var canvas = document.getElementById('agingChart');
        console.log('9. Canvas element exists?', canvas ? 'Yes' : 'No');
        if (canvas) {
            console.log('10. Canvas dimensions:', canvas.offsetWidth, 'x', canvas.offsetHeight);
        }
        
        initializeAgingChart(summaryData, orderedCategories);
    });

    function initializeAgingChart(summaryData, orderedCategories) {
        console.log('=== INITIALIZE AGING CHART ===');
        console.log('Function called with summaryData:', summaryData);
        console.log('Function called with orderedCategories:', orderedCategories);
        
        var labels = [];
        var values = [];
        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'
        };

        // Use ordered categories if available, otherwise use all categories
        var categoriesToUse = orderedCategories && orderedCategories.length > 0 
            ? orderedCategories 
            : Object.keys(summaryData);

        console.log('Categories to use:', categoriesToUse);
        console.log('Categories to use length:', categoriesToUse.length);

        if (categoriesToUse.length === 0) {
            console.warn('No categories to use!');
        }

        categoriesToUse.forEach(function(category, index) {
            console.log('Processing category ' + index + ':', category);
            var data = summaryData[category];
            console.log('Data for category ' + category + ':', data);
            
            if (data && data.stock_value > 0) {
                var label = labelMap[category] || data.label || category;
                var value = parseFloat(data.stock_value);
                var color = colorMap[category] || '#6c757d';
                
                labels.push(label);
                values.push(value);
                colors.push(color);
                
                console.log('✓ Added data for category:', category, 'value:', value, 'label:', label);
            } else if (data) {
                console.log('✗ Category has no stock value (0):', category, data);
            } else {
                console.log('✗ Category not found in summary:', category);
            }
        });

        console.log('Final labels (' + labels.length + '):', labels);
        console.log('Final values (' + values.length + '):', values);
        console.log('Final colors (' + colors.length + '):', colors);

        // If no data, show placeholder
        if (labels.length === 0) {
            console.warn('No labels found - showing placeholder');
            labels = ['No Data Available'];
            values = [0];
            colors = ['#6c757d'];
        }

        var ctx = document.getElementById('agingChart');
        console.log('Canvas context element:', ctx);
        
        if (!ctx) {
            console.error('Canvas element #agingChart not found in DOM!');
            return;
        }
        
        var ctx2d = ctx.getContext('2d');
        console.log('Canvas 2d context:', ctx2d);
        
        // Destroy existing chart if it exists
        if (window.agingChartInstance) {
            console.log('Destroying existing chart instance');
            window.agingChartInstance.destroy();
        }
        
        console.log('Creating new Chart instance...');
        
        try {
            window.agingChartInstance = new Chart(ctx2d, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Stock Value (KSh)',
                        data: values,
                        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 'KSh ' + value.toLocaleString() + ' (' + percentage + '%)';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    if (value >= 1000000) {
                                        return 'KSh ' + (value / 1000000).toFixed(1) + 'M';
                                    } else if (value >= 1000) {
                                        return 'KSh ' + (value / 1000).toFixed(1) + 'K';
                                    }
                                    return 'KSh ' + value.toLocaleString();
                                }
                            },
                            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('✅ Chart initialized successfully!');
            console.log('Chart instance:', window.agingChartInstance);
            console.log('Chart data:', window.agingChartInstance.data);
            
        } catch (error) {
            console.error('❌ Error creating chart:', error);
            console.error('Error stack:', error.stack);
        }
        
        console.log('=== END INITIALIZE AGING CHART ===');
    }
</script>