@extends('layouts.app')
@section('title', 'Farm Analytics Dashboard - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>📊 Farm Analytics Dashboard</h1>
        <p>Comprehensive data insights and performance metrics for your blackberry farm</p>
        <p class="subtitle">Real-time analytics and growth projections</p>
    </div>
    
    <!-- Core Analytics Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/analytics/growth-projections" class="touch-btn touch-btn-success">📈 Growth Projections</a>
        <a href="/analytics/yield-forecasting" class="touch-btn touch-btn-warning">🫐 Yield Forecasting</a>
        <a href="/analytics/roi-analysis" class="touch-btn touch-btn-primary">💰 ROI Analysis</a>
        <a href="/analytics/weather-correlation" class="touch-btn touch-btn-primary">🌡️ Weather Analysis</a>
    </div>

    <!-- Geographic Analysis & Precision Agriculture -->
    <div class="mobile-card" style="margin-bottom: 30px;">
        <h3>🗺️ Geographic Analysis & Precision Agriculture</h3>
        <div class="responsive-grid cols-4" style="margin: 20px 0;">
            <a href="/analytics/geographic-analysis" class="touch-btn touch-btn-info">🗺️ Geographic Analysis</a>
            <a href="/analytics/geographic/field-mapping" class="touch-btn touch-btn-primary">📍 Field Mapping</a>
            <a href="/analytics/geographic/yield-mapping" class="touch-btn touch-btn-success">🌾 Yield Mapping</a>
            <a href="/analytics/geographic/soil-analysis" class="touch-btn touch-btn-warning">🌱 Soil Analysis</a>
        </div>
        <div class="responsive-grid cols-4" style="margin: 20px 0;">
            <a href="/analytics/geographic/zone-performance" class="touch-btn touch-btn-purple">📊 Zone Performance</a>
            <a href="/analytics/geographic/planting-recommendations" class="touch-btn touch-btn-green">💡 Planting Recommendations</a>
            <a href="/analytics/ml-predictions" class="touch-btn touch-btn-secondary">🔮 ML Predictions</a>
        </div>
    </div>

    <!-- Advanced Analytics Tools -->
    <div class="mobile-card" style="margin-bottom: 30px;">
        <h3>🚀 Advanced Analytics Tools</h3>
        <div class="responsive-grid cols-4" style="margin: 20px 0;">
            <a href="/analytics/scenario-comparison" class="touch-btn touch-btn-info">🎯 Scenario Comparison</a>
            <a href="/analytics/break-even" class="touch-btn touch-btn-success">⚖️ Break-Even Analysis</a>
            <a href="/analytics/sensitivity" class="touch-btn touch-btn-warning">📊 Sensitivity Analysis</a>
            <a href="/analytics/monte-carlo" class="touch-btn touch-btn-purple">🎲 Monte Carlo Simulation</a>
        </div>
        <div class="responsive-grid cols-4" style="margin: 20px 0;">
            <a href="/analytics/cash-flow" class="touch-btn touch-btn-green">💸 Cash Flow Analysis</a>
            <a href="/analytics/equipment-planning" class="touch-btn touch-btn-orange">🚜 Equipment Planning</a>
            <a href="/analytics/interactive-dashboard" class="touch-btn touch-btn-purple">🎮 Interactive Dashboard</a>
            <a href="/analytics/reports" class="touch-btn touch-btn-primary">📄 Professional Reports</a>
        </div>
        <div class="responsive-grid cols-4" style="margin: 20px 0;">
            <a href="/analytics/data-export" class="touch-btn touch-btn-info">📡 Data Export & API</a>
            <a href="/config/projections" class="touch-btn touch-btn-secondary">⚙️ Configure Parameters</a>
        </div>
    </div>

    <!-- Farm Overview KPIs -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ $analytics['plants']['total_plants'] ?? 0 }}</div>
            <div class="stat-label">Total Plants</div>
            <div class="stat-trend">+{{ $analytics['plants']['recent_plantings'] ?? 0 }} this quarter</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format($analytics['production']['total_harvest_weight'] ?? 0, 1) }}lbs</div>
            <div class="stat-label">Harvest This Year</div>
            <div class="stat-trend">${{ number_format($analytics['production']['harvest_value'] ?? 0, 2) }} value</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format($analytics['financial']['roi_percentage'] ?? 0, 1) }}%</div>
            <div class="stat-label">Current ROI</div>
            <div class="stat-trend">${{ number_format(($analytics['financial']['profit_by_month'][0]['profit'] ?? 0), 2) }} this month</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">{{ $analytics['workforce']['total_employees'] ?? 0 }}</div>
            <div class="stat-label">Active Employees</div>
            <div class="stat-trend">{{ number_format($analytics['workforce']['total_hours_ytd'] ?? 0, 0) }}h worked YTD</div>
        </div>
    </div>

    <!-- Quick Analytics Insights -->
    <div class="stats-grid" style="margin-bottom: 30px;">
        <div class="stat-card blue">
            <div class="stat-number">{{ number_format(($analytics['plants']['total_plants'] ?? 0) * 8 * 4.50) }}</div>
            <div class="stat-label">Potential Revenue</div>
            <div class="stat-trend">At full production</div>
        </div>
        <div class="stat-card purple">
            <div class="stat-number">{{ number_format(ceil(max(1, ($analytics['plants']['total_plants'] ?? 0)) / 50)) }}</div>
            <div class="stat-label">Acres Utilized</div>
            <div class="stat-trend">@ 50 plants/acre</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format(($analytics['plants']['total_plants'] ?? 0) * 25) }}</div>
            <div class="stat-label">Annual Labor Hours</div>
            <div class="stat-trend">@ 25 hours/plant</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format((($analytics['plants']['total_plants'] ?? 0) * 8 * 4.50) - (($analytics['plants']['total_plants'] ?? 0) * 150)) }}</div>
            <div class="stat-label">Projected Profit</div>
            <div class="stat-trend">Current scale</div>
        </div>
    </div>

    <!-- Main Analytics Charts -->
    <div class="mobile-card">
        <h3>📈 Farm Performance Overview</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin: 30px 0;">
            
            <!-- Plant Distribution Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🌱 Plant Distribution by Variety</h4>
                <canvas id="plantDistributionChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Monthly Harvest Trends -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🫐 Monthly Harvest Trends</h4>
                <canvas id="harvestTrendsChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Growth Metrics -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">📏 Plant Growth Metrics</h4>
                <canvas id="growthMetricsChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Financial Performance -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">💰 Financial Performance</h4>
                <canvas id="financialChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Detailed Analytics Sections -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 30px 0;">
        
        <!-- Plant Health Analytics -->
        <div class="mobile-card">
            <h3>🌿 Plant Health & Growth</h3>
            <div style="margin: 20px 0;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(56, 142, 60, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Average Plant Height</span>
                    <span style="font-weight: bold; color: var(--leaf-green); font-size: 1.2em;">{{ number_format($analytics['growth']['avg_height'] ?? 0, 1) }}"</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Average Health Score</span>
                    <span style="font-weight: bold; color: var(--blackberry-purple); font-size: 1.2em;">{{ number_format($analytics['growth']['avg_health_score'] ?? 0, 1) }}/10</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(255, 143, 0, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Measurements This Month</span>
                    <span style="font-weight: bold; color: #FF8F00; font-size: 1.2em;">{{ $analytics['growth']['measurements_this_month'] ?? 0 }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(198, 40, 40, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Average Plant Age</span>
                    <span style="font-weight: bold; color: var(--berry-red); font-size: 1.2em;">{{ number_format($analytics['plants']['avg_plant_age'] ?? 0, 0) }} days</span>
                </div>
            </div>
        </div>

        <!-- Operations Summary -->
        <div class="mobile-card">
            <h3>⚙️ Operations Summary</h3>
            <div style="margin: 20px 0;">
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                    <div style="text-align: center; padding: 20px; background: rgba(56, 142, 60, 0.1); border-radius: 8px;">
                        <div style="font-size: 2em; color: var(--leaf-green); font-weight: bold;">{{ $analytics['operations']['watering_events'] ?? 0 }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">💧 Watering Events</div>
                    </div>
                    <div style="text-align: center; padding: 20px; background: rgba(106, 27, 154, 0.1); border-radius: 8px;">
                        <div style="font-size: 2em; color: var(--blackberry-purple); font-weight: bold;">{{ $analytics['operations']['fertilizer_applications'] ?? 0 }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">🌱 Fertilizer Apps</div>
                    </div>
                    <div style="text-align: center; padding: 20px; background: rgba(255, 143, 0, 0.1); border-radius: 8px;">
                        <div style="font-size: 2em; color: #FF8F00; font-weight: bold;">{{ $analytics['operations']['soil_tests'] ?? 0 }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">🧪 Soil Tests</div>
                    </div>
                    <div style="text-align: center; padding: 20px; background: rgba(198, 40, 40, 0.1); border-radius: 8px;">
                        <div style="font-size: 2em; color: var(--berry-red); font-weight: bold;">{{ $analytics['operations']['pest_incidents'] ?? 0 }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">🐛 Pest Incidents</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Weather Impact -->
        <div class="mobile-card">
            <h3>🌡️ Weather Impact</h3>
            <div style="margin: 20px 0;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(56, 142, 60, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Average Temperature</span>
                    <span style="font-weight: bold; color: var(--leaf-green); font-size: 1.2em;">{{ number_format($analytics['weather']['avg_temperature'] ?? 0, 1) }}°F</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Total Rainfall</span>
                    <span style="font-weight: bold; color: var(--blackberry-purple); font-size: 1.2em;">{{ number_format($analytics['weather']['total_rainfall'] ?? 0, 1) }}\"</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(255, 143, 0, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Growing Degree Days</span>
                    <span style="font-weight: bold; color: #FF8F00; font-size: 1.2em;">{{ number_format($analytics['weather']['growing_degree_days'] ?? 0, 0) }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0; padding: 15px; background: rgba(198, 40, 40, 0.05); border-radius: 8px;">
                    <span style="color: var(--soil-brown); font-weight: 600;">Frost Days</span>
                    <span style="font-weight: bold; color: var(--berry-red); font-size: 1.2em;">{{ $analytics['weather']['frost_days'] }}</span>
                </div>
            </div>
        </div>

        <!-- Workforce Analytics -->
        <div class="mobile-card">
            <h3>👥 Workforce Analytics</h3>
            <div style="margin: 20px 0;">
                <div style="background: rgba(106, 27, 154, 0.05); padding: 20px; border-radius: 8px; margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--soil-brown); font-weight: 600;">Total Employees</span>
                        <span style="font-weight: bold; color: var(--blackberry-purple); font-size: 1.3em;">{{ $analytics['workforce']['total_employees'] }}</span>
                    </div>
                </div>
                <div style="background: rgba(56, 142, 60, 0.05); padding: 20px; border-radius: 8px; margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--soil-brown); font-weight: 600;">Hours Worked YTD</span>
                        <span style="font-weight: bold; color: var(--leaf-green); font-size: 1.3em;">{{ number_format($analytics['workforce']['total_hours_ytd'], 0) }}h</span>
                    </div>
                </div>
                <div style="background: rgba(255, 143, 0, 0.05); padding: 20px; border-radius: 8px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--soil-brown); font-weight: 600;">Average Hourly Rate</span>
                        <span style="font-weight: bold; color: #FF8F00; font-size: 1.3em;">${{ number_format($analytics['workforce']['avg_hourly_rate'] ?? 0, 2) }}</span>
                    </div>
                </div>
                
                <!-- Department Distribution -->
                <div style="margin-top: 20px;">
                    <h5 style="color: var(--soil-brown); margin-bottom: 10px;">Department Distribution</h5>
                    @foreach($analytics['workforce']['department_distribution'] as $dept)
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #E0E0E0;">
                        <span style="color: var(--soil-brown);">{{ ucwords(str_replace('_', ' ', $dept->department)) }}</span>
                        <span style="font-weight: bold; color: var(--blackberry-purple);">{{ $dept->count }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mobile-card" style="text-align: center; margin-top: 30px;">
        <h3>🚀 Quick Analytics Actions</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
            <a href="/analytics/plant-metrics" class="touch-btn touch-btn-primary">📈 Plant Metrics</a>
            <a href="/analytics/export?format=pdf" class="touch-btn touch-btn-success">📄 Export PDF Report</a>
            <a href="/analytics/export?format=excel" class="touch-btn touch-btn-warning">📊 Export Excel Data</a>
            <a href="/plants" class="touch-btn touch-btn-primary">🌱 Manage Plants</a>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Analytics Dashboard Charts Configuration
const chartColors = {
    purple: '#6A1B9A',
    green: '#388E3C',
    orange: '#FF8F00',
    red: '#C62828',
    blue: '#1976D2',
    lightPurple: 'rgba(106, 27, 154, 0.1)',
    lightGreen: 'rgba(56, 142, 60, 0.1)',
    lightOrange: 'rgba(255, 143, 0, 0.1)',
    lightRed: 'rgba(198, 40, 40, 0.1)',
    lightBlue: 'rgba(25, 118, 210, 0.1)'
};

// Plant Distribution by Variety Chart
const plantDistCtx = document.getElementById('plantDistributionChart').getContext('2d');
const plantDistData = {
    labels: [
        @foreach($analytics['plants']['plants_by_variety'] as $variety)
            '{{ $variety->variety->name ?? "Unknown" }}',
        @endforeach
    ],
    datasets: [{
        data: [
            @foreach($analytics['plants']['plants_by_variety'] as $variety)
                {{ $variety->count }},
            @endforeach
        ],
        backgroundColor: [
            chartColors.purple,
            chartColors.green,
            chartColors.orange,
            chartColors.red,
            chartColors.blue,
            '#9C27B0',
            '#4CAF50',
            '#FF9800'
        ],
        borderWidth: 2,
        borderColor: '#fff'
    }]
};

new Chart(plantDistCtx, {
    type: 'doughnut',
    data: plantDistData,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 12 }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = ((context.parsed / total) * 100).toFixed(1);
                        return `${context.label}: ${context.parsed} plants (${percentage}%)`;
                    }
                }
            }
        }
    }
});

// Monthly Harvest Trends Chart
const harvestCtx = document.getElementById('harvestTrendsChart').getContext('2d');
const harvestData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
        label: 'Harvest Weight (lbs)',
        data: [
            @foreach($analytics['production']['monthly_harvests'] as $month)
                {{ $month->total_weight ?? 0 }},
            @endforeach
        ],
        backgroundColor: chartColors.lightPurple,
        borderColor: chartColors.purple,
        borderWidth: 3,
        fill: true,
        tension: 0.4
    }, {
        label: 'Harvest Value ($)',
        data: [
            @foreach($analytics['production']['monthly_harvests'] as $month)
                {{ $month->total_value ?? 0 }},
            @endforeach
        ],
        backgroundColor: chartColors.lightGreen,
        borderColor: chartColors.green,
        borderWidth: 3,
        fill: true,
        tension: 0.4,
        yAxisID: 'y1'
    }]
};

new Chart(harvestCtx, {
    type: 'line',
    data: harvestData,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                title: {
                    display: true,
                    text: 'Weight (lbs)'
                }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                title: {
                    display: true,
                    text: 'Value ($)'
                },
                grid: {
                    drawOnChartArea: false,
                }
            }
        },
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Growth Metrics Chart
const growthCtx = document.getElementById('growthMetricsChart').getContext('2d');
const growthData = {
    labels: [
        @foreach($analytics['growth']['growth_trends'] as $trend)
            '{{ Carbon\Carbon::parse($trend->date)->format('M j') }}',
        @endforeach
    ],
    datasets: [{
        label: 'Average Height (inches)',
        data: [
            @foreach($analytics['growth']['growth_trends'] as $trend)
                {{ round($trend->avg_height, 1) }},
            @endforeach
        ],
        backgroundColor: chartColors.lightGreen,
        borderColor: chartColors.green,
        borderWidth: 3,
        fill: true,
        tension: 0.4
    }, {
        label: 'Average Health Score',
        data: [
            @foreach($analytics['growth']['growth_trends'] as $trend)
                {{ round($trend->avg_health * 10, 1) }}, // Scale to match height
            @endforeach
        ],
        backgroundColor: chartColors.lightPurple,
        borderColor: chartColors.purple,
        borderWidth: 3,
        fill: true,
        tension: 0.4
    }]
};

new Chart(growthCtx, {
    type: 'line',
    data: growthData,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Metrics'
                }
            }
        },
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Financial Performance Chart
const financialCtx = document.getElementById('financialChart').getContext('2d');
const financialData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
        label: 'Revenue',
        data: [
            @foreach($analytics['financial']['profit_by_month'] as $month)
                {{ $month['revenue'] }},
            @endforeach
        ],
        backgroundColor: chartColors.lightGreen,
        borderColor: chartColors.green,
        borderWidth: 2
    }, {
        label: 'Costs',
        data: [
            @foreach($analytics['financial']['profit_by_month'] as $month)
                {{ $month['costs'] }},
            @endforeach
        ],
        backgroundColor: chartColors.lightRed,
        borderColor: chartColors.red,
        borderWidth: 2
    }, {
        label: 'Profit',
        data: [
            @foreach($analytics['financial']['profit_by_month'] as $month)
                {{ $month['profit'] }},
            @endforeach
        ],
        backgroundColor: chartColors.lightPurple,
        borderColor: chartColors.purple,
        borderWidth: 2
    }]
};

new Chart(financialCtx, {
    type: 'bar',
    data: financialData,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Amount ($)'
                }
            }
        },
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Chart Performance Optimizations
Chart.defaults.font.family = 'Inter, -apple-system, BlinkMacSystemFont, sans-serif';
Chart.defaults.responsive = true;
Chart.defaults.maintainAspectRatio = false;

// Add chart animation performance settings
Chart.defaults.animation.duration = 1000;
Chart.defaults.animation.easing = 'easeInOutQuart';

// Add interactivity improvements
Chart.defaults.interaction.intersect = false;
Chart.defaults.interaction.mode = 'index';

// Add loading states for charts
function showChartLoading(chartId) {
    const canvas = document.getElementById(chartId);
    if (canvas) {
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#f8f9fa';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#6c757d';
        ctx.font = '16px Inter';
        ctx.textAlign = 'center';
        ctx.fillText('Loading chart...', canvas.width / 2, canvas.height / 2);
    }
}

// Chart resize optimization
let resizeTimeout;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function() {
        Chart.helpers.each(Chart.instances, function(instance) {
            instance.resize();
        });
    }, 100);
});

// Auto-refresh dashboard every 5 minutes with chart preservation
setTimeout(function() {
    // Destroy charts before refresh to prevent memory leaks
    Chart.helpers.each(Chart.instances, function(instance) {
        instance.destroy();
    });
    window.location.reload();
}, 300000);
</script>
@endpush