{{-- 
    Generate Chart Component
    
    Komponen JavaScript untuk generate charts dengan Chart.js
    - Chart.js library integration
    - Framework MSJ color scheme
    - Responsive design
    - Multiple chart types (bar, line, area)
    
    Usage:
    @include('components.generate-chart')
    
    Requires: $chartHelper variable in controller
--}}

<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
// Inject PHP chart configurations to JavaScript
@if(isset($chartHelper))
window.ChartConfigs = {
    @if(isset($upload_bom_data))
    upload_bom: @json($chartHelper::getChartConfig('upload_bom', $upload_bom_data)),
    upload_bom_summary: @json($chartHelper::getChartSummary($upload_bom_data, 'upload_bom')),
    @endif
    
    @if(isset($request_bom_data))
    request_bom: @json($chartHelper::getChartConfig('request_bom', $request_bom_data)),
    request_bom_summary: @json($chartHelper::getChartSummary($request_bom_data, 'request_bom')),
    @endif
    
    @if(isset($time_data))
    time: @json($chartHelper::getChartConfig('time', $time_data)),
    time_summary: @json($chartHelper::getChartSummary($time_data, 'time')),
    @endif
};
@endif
</script>

<script>
/**
 * MSJ Chart Manager
 * Manages chart initialization and rendering with year filtering
 */
const MSJChartManager = {
    charts: {},
    originalConfigs: {}, // Store original unfiltered configs
    currentFilters: {
        upload_bom: 'all',
        request_bom: 'all',
        time: 'all'
    },
    
    /**
     * Initialize all charts on page
     */
    init: function() {
        console.log('Initializing MSJ Charts...');
        
        if (typeof Chart === 'undefined') {
            console.error('Chart.js library not loaded!');
            return;
        }
        
        // Set global Chart.js defaults for MSJ styling
        Chart.defaults.font.family = "'Open Sans', sans-serif";
        Chart.defaults.color = '#344767';
        Chart.defaults.responsive = true;
        
        // Apply responsive font sizes based on screen width
        this.applyResponsiveFontSizes();
        
        // Store original configs
        if (window.ChartConfigs) {
            this.originalConfigs = JSON.parse(JSON.stringify(window.ChartConfigs));
        }
        
        // Initialize year filter dropdowns
        this.initYearFilters();
        
        // Initialize each chart type
        this.initChart('upload_bom', 'uploadBomChart');
        this.initChart('request_bom', 'requestBomChart');
        this.initChart('time', 'timeChart');
        
        console.log('Charts initialized successfully');
    },
    
    /**
     * Apply responsive font sizes based on screen width
     */
    applyResponsiveFontSizes: function() {
        const screenWidth = window.innerWidth;
        
        if (screenWidth <= 576) {
            // Extra small devices
            Chart.defaults.font.size = 9;
        } else if (screenWidth <= 768) {
            // Small devices
            Chart.defaults.font.size = 10;
        } else if (screenWidth <= 991) {
            // Tablet devices
            Chart.defaults.font.size = 11;
        } else {
            // Desktop
            Chart.defaults.font.size = 12;
        }
    },
    
    /**
     * Initialize year filter dropdowns
     */
    initYearFilters: function() {
        const self = this;
        
        // Setup filter for each chart type
        ['upload_bom', 'request_bom', 'time'].forEach(chartType => {
            const filterId = chartType.replace('_', '-') + '-year-filter';
            const filterElement = document.getElementById(filterId);
            
            if (filterElement) {
                filterElement.addEventListener('change', function() {
                    const selectedYear = this.value;
                    self.currentFilters[chartType] = selectedYear;
                    self.filterChartByYear(chartType, selectedYear);
                });
                
                // Populate dropdown with available years
                self.populateYearFilter(chartType, filterId);
            }
        });
    },
    
    /**
     * Populate year filter dropdown
     */
    populateYearFilter: function(chartType, filterId) {
        const filterElement = document.getElementById(filterId);
        if (!filterElement) return;
        
        const config = this.originalConfigs[chartType];
        if (!config || !config.data) return;
        
        // Extract unique years based on chart type
        const years = new Set();
        
        if (chartType === 'time') {
            // For time chart, years are in dataset labels (e.g., "Januari 2025")
            if (config.data.datasets) {
                config.data.datasets.forEach(dataset => {
                    if (dataset.label) {
                        const parts = dataset.label.split(' ');
                        if (parts.length >= 2) {
                            const year = parts[parts.length - 1];
                            if (!isNaN(year)) {
                                years.add(year);
                            }
                        }
                    }
                });
            }
        } else {
            // For upload_bom and request_bom, years are in labels
            if (config.data.labels) {
                config.data.labels.forEach(label => {
                    const parts = label.split(' ');
                    if (parts.length >= 2) {
                        const year = parts[parts.length - 1];
                        if (!isNaN(year)) {
                            years.add(year);
                        }
                    }
                });
            }
        }
        
        // Clear existing options
        filterElement.innerHTML = '';
        
        // Sort years descending and add options
        const sortedYears = Array.from(years).sort().reverse();
        
        sortedYears.forEach((year, index) => {
            const option = document.createElement('option');
            option.value = year;
            option.textContent = year;
            if (index === 0) {
                option.selected = true; // Set newest year as default
            }
            filterElement.appendChild(option);
        });
        
        // Show filter only if multiple years exist
        const filterContainer = filterElement.closest('.chart-year-filter');
        if (filterContainer) {
            if (years.size > 1) {
                filterContainer.style.display = 'block';
                // Auto-filter to newest year on init
                if (sortedYears.length > 0) {
                    this.currentFilters[chartType] = sortedYears[0];
                    this.filterChartByYear(chartType, sortedYears[0]);
                }
            } else {
                filterContainer.style.display = 'none';
            }
        }
    },
    
    /**
     * Filter chart data by year
     */
    filterChartByYear: function(chartType, year) {
        const canvasId = chartType === 'upload_bom' ? 'uploadBomChart' : 
                        chartType === 'request_bom' ? 'requestBomChart' : 'timeChart';
        
        const originalConfig = this.originalConfigs[chartType];
        if (!originalConfig) return;
        
        let filteredConfig = JSON.parse(JSON.stringify(originalConfig));
        
        if (chartType === 'time') {
            // Time chart: Filter datasets by year (datasets contain periods like "Januari 2025")
            const filteredDatasets = [];
            
            originalConfig.data.datasets.forEach(dataset => {
                if (dataset.label && dataset.label.includes(year)) {
                    filteredDatasets.push(JSON.parse(JSON.stringify(dataset)));
                }
            });
            
            filteredConfig.data.datasets = filteredDatasets;
            // Labels remain the same (hour ranges)
            filteredConfig.data.labels = originalConfig.data.labels;
            
        } else {
            // Upload/Request BOM charts: Filter labels and data by year
            const filteredLabels = [];
            const datasetIndices = [];
            
            originalConfig.data.labels.forEach((label, index) => {
                if (label.includes(year)) {
                    filteredLabels.push(label);
                    datasetIndices.push(index);
                }
            });
            
            filteredConfig.data.labels = filteredLabels;
            
            // Update each dataset's data
            filteredConfig.data.datasets.forEach((dataset, dsIndex) => {
                const originalDataset = originalConfig.data.datasets[dsIndex];
                const filteredData = [];
                
                datasetIndices.forEach(index => {
                    filteredData.push(originalDataset.data[index]);
                });
                
                dataset.data = filteredData;
            });
        }
        
        // Update chart config
        window.ChartConfigs[chartType] = filteredConfig;
        
        // Reinitialize chart
        this.initChart(chartType, canvasId);
    },
    
    /**
     * Initialize individual chart
     * 
     * @param {string} configKey - Key in ChartConfigs
     * @param {string} canvasId - Canvas element ID
     */
    initChart: function(configKey, canvasId) {
        // Check if canvas exists
        const canvas = document.getElementById(canvasId);
        if (!canvas) {
            console.log(`Canvas ${canvasId} not found, skipping chart initialization`);
            return;
        }
        
        // Check if config exists
        if (!window.ChartConfigs || !window.ChartConfigs[configKey]) {
            console.log(`Chart config for ${configKey} not found`);
            return;
        }
        
        const config = window.ChartConfigs[configKey];
        
        // Destroy existing chart if exists
        if (this.charts[canvasId]) {
            this.charts[canvasId].destroy();
        }
        
        try {
            // Create new chart
            const ctx = canvas.getContext('2d');
            this.charts[canvasId] = new Chart(ctx, config);
            
            console.log(`Chart ${canvasId} created successfully`);
            
            // Update summary card if exists
            this.updateSummaryCard(configKey);
        } catch (error) {
            console.error(`Error creating chart ${canvasId}:`, error);
        }
    },
    
    /**
     * Update summary statistics card
     * 
     * @param {string} configKey - Key for summary data
     */
    updateSummaryCard: function(configKey) {
        const summaryKey = configKey + '_summary';
        const summary = window.ChartConfigs[summaryKey];
        
        if (!summary) return;
        
        // Update DOM elements with summary data
        const prefix = configKey.replace('_', '-');
        
        const totalEl = document.getElementById(`${prefix}-total`);
        if (totalEl) totalEl.textContent = summary.total_count.toLocaleString('id-ID');
        
        const avgEl = document.getElementById(`${prefix}-average`);
        if (avgEl) avgEl.textContent = summary.average.toLocaleString('id-ID');
        
        const maxEl = document.getElementById(`${prefix}-max`);
        if (maxEl) maxEl.textContent = summary.max.toLocaleString('id-ID');
        
        const minEl = document.getElementById(`${prefix}-min`);
        if (minEl) minEl.textContent = summary.min.toLocaleString('id-ID');
    },
    
    /**
     * Destroy all charts (cleanup)
     */
    destroy: function() {
        Object.keys(this.charts).forEach(chartId => {
            if (this.charts[chartId]) {
                this.charts[chartId].destroy();
            }
        });
        this.charts = {};
    },
    
    /**
     * Refresh specific chart
     * 
     * @param {string} canvasId - Canvas element ID
     */
    refresh: function(canvasId) {
        if (this.charts[canvasId]) {
            this.charts[canvasId].update();
        }
    },
    
    /**
     * Export chart as image
     * 
     * @param {string} canvasId - Canvas element ID
     * @param {string} filename - Output filename (base name without year)
     */
    exportAsImage: function(canvasId, filename = 'chart.png') {
        const chart = this.charts[canvasId];
        if (!chart) {
            console.error(`Chart ${canvasId} not found`);
            return;
        }
        
        // Determine chart type from canvas ID
        let chartType = '';
        if (canvasId === 'uploadBomChart') {
            chartType = 'upload_bom';
        } else if (canvasId === 'requestBomChart') {
            chartType = 'request_bom';
        } else if (canvasId === 'timeChart') {
            chartType = 'time';
        }
        
        // Get current filter year
        let selectedYear = '';
        if (chartType && this.currentFilters[chartType] && this.currentFilters[chartType] !== 'all') {
            selectedYear = this.currentFilters[chartType];
        }
        
        // Modify filename to include year if filtered
        let finalFilename = filename;
        if (selectedYear) {
            // Remove .png extension
            const baseFilename = filename.replace('.png', '');
            // Add year before extension
            finalFilename = `${baseFilename}-${selectedYear}.png`;
        }
        
        const url = chart.toBase64Image();
        const link = document.createElement('a');
        link.download = finalFilename;
        link.href = url;
        link.click();
    }
};

/**
 * Initialize charts when DOM is ready
 */
document.addEventListener('DOMContentLoaded', function() {
    // Wait a bit for DataTables to finish rendering
    setTimeout(function() {
        MSJChartManager.init();
    }, 500);
});

/**
 * Re-initialize charts on window resize untuk responsive adjustment
 */
let resizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        console.log('Window resized, re-initializing charts...');
        
        // Apply responsive font sizes first
        MSJChartManager.applyResponsiveFontSizes();
        
        // Store current filters
        const currentFilters = { ...MSJChartManager.currentFilters };
        
        // Re-initialize all charts with current filters
        Object.keys(currentFilters).forEach(chartType => {
            const year = currentFilters[chartType];
            if (year && year !== 'all') {
                MSJChartManager.filterChartByYear(chartType, year);
            } else {
                // Re-init without filter
                const canvasId = chartType === 'upload_bom' ? 'uploadBomChart' : 
                                chartType === 'request_bom' ? 'requestBomChart' : 'timeChart';
                MSJChartManager.initChart(chartType, canvasId);
            }
        });
    }, 300);
});

/**
 * Cleanup on page unload
 */
window.addEventListener('beforeunload', function() {
    MSJChartManager.destroy();
});
</script>

<style>
/* Chart Container Styling */
.chart-container {
    position: relative;
    height: auto;
    min-height: 400px;
    margin: 20px 0;
    padding: 15px;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
    overflow: visible;
}

.chart-container canvas {
    width: 100% !important;
    height: 400px !important;
}

/* Summary Card Styling */
.chart-summary-card {
    background: linear-gradient(135deg, #028284 0%, #81E6D9 100%);
    color: white;
    border-radius: 0.75rem;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 20px 27px 0 rgba(2, 130, 132, 0.15);
}

.chart-summary-card .row {
    margin-left: -5px;
    margin-right: -5px;
}

.chart-summary-card .col-6,
.chart-summary-card .col-3 {
    padding-left: 5px;
    padding-right: 5px;
}

.chart-summary-card .summary-item {
    text-align: center;
    padding: 8px 5px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chart-summary-card .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 3px;
    line-height: 1.2;
    word-break: break-word;
}

.chart-summary-card .summary-label {
    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chart Header */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f2f5;
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #344767;
}

.chart-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Year Filter Dropdown */
.chart-year-filter {
    display: none; /* Hidden by default, shown when multiple years exist */
}

.chart-year-filter select {
    padding: 6px 12px;
    font-size: 0.875rem;
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    background: white;
    color: #344767;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.chart-year-filter select:hover {
    border-color: #028284;
}

.chart-year-filter select:focus {
    outline: none;
    border-color: #028284;
    box-shadow: 0 0 0 0.2rem rgba(2, 130, 132, 0.25);
}

.chart-year-filter label {
    font-size: 0.875rem;
    color: #344767;
    margin-right: 8px;
    font-weight: 500;
}

.chart-actions button {
    padding: 5px 15px;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    background: #028284;
    color: white;
    transition: all 0.3s ease;
}

.chart-actions button:hover {
    background: #026668;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(2, 130, 132, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .chart-container {
        height: auto;
        min-height: 300px;
        padding: 10px;
        margin: 15px 0;
        overflow: visible;
    }
    
    .chart-container canvas {
        max-height: none !important;
        height: 300px !important;
    }
    
    .chart-summary-card {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .chart-summary-card .row {
        margin-left: -3px;
        margin-right: -3px;
    }
    
    .chart-summary-card .col-6,
    .chart-summary-card .col-3 {
        padding-left: 3px;
        padding-right: 3px;
    }
    
    .chart-summary-card .summary-item {
        padding: 6px 3px;
        min-height: 55px;
    }
    
    .chart-summary-card .summary-value {
        font-size: 1.1rem;
    }
    
    .chart-summary-card .summary-label {
        font-size: 0.65rem;
        letter-spacing: 0.3px;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .chart-title {
        font-size: 1.05rem;
        width: 100%;
    }
    
    .chart-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
    
    .chart-year-filter {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .chart-year-filter label {
        font-size: 0.8rem;
        margin-bottom: 5px;
        margin-right: 0;
    }
    
    .chart-year-filter select {
        width: 100%;
        font-size: 0.8rem;
        padding: 8px 10px;
    }
    
    .chart-actions button {
        font-size: 0.8rem;
        padding: 8px 12px;
        width: 100%;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 576px) {
    .chart-container {
        height: auto;
        min-height: 280px;
        padding: 8px;
        margin: 10px 0;
        overflow: visible;
    }
    
    .chart-container canvas {
        max-height: none !important;
        height: 280px !important;
    }
    
    .chart-summary-card {
        padding: 8px;
    }
    
    .chart-summary-card .row {
        margin-left: -2px;
        margin-right: -2px;
    }
    
    .chart-summary-card .col-6,
    .chart-summary-card .col-3 {
        padding-left: 2px;
        padding-right: 2px;
        margin-bottom: 5px;
    }
    
    .chart-summary-card .summary-item {
        padding: 5px 2px;
        min-height: 50px;
    }
    
    .chart-summary-card .summary-value {
        font-size: 0.95rem;
    }
    
    .chart-summary-card .summary-label {
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }
    
    .chart-title {
        font-size: 0.95rem;
    }
    
    .chart-year-filter label {
        font-size: 0.75rem;
    }
    
    .chart-year-filter select {
        font-size: 0.75rem;
        padding: 6px 8px;
    }
    
    .chart-actions button {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
}

/* Landscape phone orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .chart-container {
        height: auto;
        min-height: 250px;
        overflow: visible;
    }
    
    .chart-container canvas {
        max-height: none !important;
        height: 250px !important;
    }
    
    .chart-summary-card .row {
        flex-wrap: nowrap;
        margin-left: -2px;
        margin-right: -2px;
    }
    
    .chart-summary-card .col-6,
    .chart-summary-card .col-3 {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    .chart-summary-card .summary-item {
        min-height: 45px;
        padding: 4px 2px;
    }
    
    .chart-summary-card .summary-value {
        font-size: 0.9rem;
    }
    
    .chart-summary-card .summary-label {
        font-size: 0.55rem;
    }
}

/* Tablet devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .chart-container {
        height: auto;
        min-height: 350px;
        padding: 12px;
    }
    
    .chart-container canvas {
        max-height: none !important;
        height: 350px !important;
    }
    
    .chart-summary-card .summary-value {
        font-size: 1.3rem;
    }
    
    .chart-summary-card .summary-label {
        font-size: 0.7rem;
    }
}
</style>