@extends('layouts.app')

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

@section('content')
<div class="space-y-4 md:space-y-6 animate-fade-in">
    
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
            <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">Selamat datang kembali, <span class="font-semibold text-primary-600 dark:text-primary-400">{{ auth()->user()->name }}</span></p>
        </div>
        <div class="flex items-center space-x-2 text-xs sm:text-sm text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 px-3 py-2 rounded-lg">
            <i data-lucide="calendar" class="w-4 h-4 flex-shrink-0"></i>
            <span class="whitespace-nowrap">{{ now()->format('l, d F Y') }}</span>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
        
        <!-- Total Therapist -->
        <div class="group relative bg-white dark:bg-gray-800 rounded-xl md:rounded-2xl shadow-soft hover:shadow-soft-lg transition-all duration-300 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-primary-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative p-4 md:p-6">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-primary-100 transition-colors">Total Therapist</p>
                        <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white group-hover:text-white mt-1 md:mt-2 transition-colors truncate">{{ $totalTherapists }}</h3>
                        <div class="flex items-center mt-2 md:mt-3 text-xs sm:text-sm">
                            <span class="text-green-600 dark:text-green-400 group-hover:text-green-200 font-medium flex items-center">
                                <i data-lucide="trending-up" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 flex-shrink-0"></i>
                                Aktif
                            </span>
                        </div>
                    </div>
                    <div class="w-12 h-12 sm:w-14 sm:h-14 flex-shrink-0 rounded-lg md:rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center shadow-lg transition-all duration-300">
                        <i data-lucide="users" class="w-6 h-6 sm:w-7 sm:h-7 text-white"></i>
                    </div>
                </div>
            </div>
            <div class="h-1 bg-gradient-to-r from-primary-500 to-primary-600"></div>
        </div>

        <!-- Total Jadwal -->
        <div class="group relative bg-white dark:bg-gray-800 rounded-xl md:rounded-2xl shadow-soft hover:shadow-soft-lg transition-all duration-300 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-accent-500 to-accent-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative p-4 md:p-6">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-accent-100 transition-colors">Total Jadwal</p>
                        <h3 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white group-hover:text-white mt-1 md:mt-2 transition-colors truncate">{{ $totalSchedules }}</h3>
                        <div class="flex items-center mt-2 md:mt-3 text-xs sm:text-sm">
                            <span class="text-accent-600 dark:text-accent-400 group-hover:text-accent-200 font-medium flex items-center">
                                <i data-lucide="calendar-check" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 flex-shrink-0"></i>
                                Bulan ini
                            </span>
                        </div>
                    </div>
                    <div class="w-12 h-12 sm:w-14 sm:h-14 flex-shrink-0 rounded-lg md:rounded-xl bg-gradient-to-br from-accent-500 to-accent-600 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center shadow-lg transition-all duration-300">
                        <i data-lucide="calendar-days" class="w-6 h-6 sm:w-7 sm:h-7 text-white"></i>
                    </div>
                </div>
            </div>
            <div class="h-1 bg-gradient-to-r from-accent-500 to-accent-600"></div>
        </div>

        <!-- Total Gaji Bulan Ini -->
        <div class="group relative bg-white dark:bg-gray-800 rounded-xl md:rounded-2xl shadow-soft hover:shadow-soft-lg transition-all duration-300 overflow-hidden sm:col-span-2 lg:col-span-1">
            <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-green-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative p-4 md:p-6">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-emerald-100 transition-colors">Total Gaji Bulan Ini</p>
                        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white group-hover:text-white mt-1 md:mt-2 transition-colors break-words">Rp {{ number_format($totalSalaryThisMonth, 0, ',', '.') }}</h3>
                        <div class="flex items-center mt-2 md:mt-3 text-xs sm:text-sm">
                            <span class="text-emerald-600 dark:text-emerald-400 group-hover:text-emerald-200 font-medium flex items-center">
                                <i data-lucide="arrow-up-right" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 flex-shrink-0"></i>
                                {{ now()->format('F Y') }}
                            </span>
                        </div>
                    </div>
                    <div class="w-12 h-12 sm:w-14 sm:h-14 flex-shrink-0 rounded-lg md:rounded-xl bg-gradient-to-br from-emerald-500 to-green-600 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center shadow-lg transition-all duration-300">
                        <i data-lucide="banknote" class="w-6 h-6 sm:w-7 sm:h-7 text-white"></i>
                    </div>
                </div>
            </div>
            <div class="h-1 bg-gradient-to-r from-emerald-500 to-green-600"></div>
        </div>
    </div>

    <!-- Grafik Bulanan -->
    <div class="bg-white dark:bg-gray-800 rounded-xl md:rounded-2xl shadow-soft overflow-hidden">
        <div class="p-4 md:p-6 border-b border-gray-200 dark:border-gray-700">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div class="flex-1 min-w-0">
                    <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white flex items-center">
                        <i data-lucide="bar-chart-3" class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-primary-600 dark:text-primary-400 flex-shrink-0"></i>
                        <span class="truncate">Grafik Bulanan</span>
                    </h2>
                    <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">Treatment Selesai, Total Fee, Bonus Pasien</p>
                </div>
                <div class="flex items-center space-x-2 sm:space-x-3">
                    <div class="relative flex-1 sm:flex-initial min-w-0">
                        <i data-lucide="calendar" class="absolute left-2 sm:left-3 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-4 sm:h-4 text-gray-400 pointer-events-none"></i>
                        <select id="yearFilter" class="w-full pl-7 sm:pl-10 pr-8 sm:pr-10 py-2 sm:py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg sm:rounded-xl text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all appearance-none cursor-pointer">
                            @for($y = date('Y'); $y >= date('Y') - 5; $y--)
                                <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                            @endfor
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-2 sm:right-3 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-4 sm:h-4 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-2 sm:p-4 md:p-6">
            <div class="relative w-full h-[300px] sm:h-80 md:h-96 lg:h-[420px]">
                <canvas id="monthlyChart" class="w-full h-full"></canvas>
            </div>
        </div>
    </div>

    <!-- Top Therapist -->
    <div class="bg-white dark:bg-gray-800 rounded-xl md:rounded-2xl shadow-soft overflow-hidden">
        <div class="p-4 md:p-6 border-b border-gray-200 dark:border-gray-700">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div class="flex-1 min-w-0">
                    <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white flex items-center">
                        <i data-lucide="trophy" class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-amber-500 flex-shrink-0"></i>
                        <span class="truncate">Top Therapist</span>
                    </h2>
                    <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">Berdasarkan Treatment Selesai & Total Fee</p>
                </div>
                <div class="flex items-center gap-2 sm:gap-3 flex-wrap">
                    <div class="relative flex-1 sm:flex-initial min-w-[120px]">
                        <i data-lucide="calendar" class="absolute left-2 sm:left-3 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-4 sm:h-4 text-gray-400 pointer-events-none"></i>
                        <select id="monthFilterTop" class="w-full pl-7 sm:pl-10 pr-8 sm:pr-10 py-2 sm:py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg sm:rounded-xl text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all appearance-none cursor-pointer">
                            @for($m = 1; $m <= 12; $m++)
                                <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                            @endfor
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-2 sm:right-3 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-4 sm:h-4 text-gray-400 pointer-events-none"></i>
                    </div>
                    <div class="relative flex-1 sm:flex-initial min-w-[100px]">
                        <select id="yearFilterTop" class="w-full pl-3 sm:pl-4 pr-8 sm:pr-10 py-2 sm:py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg sm:rounded-xl text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all appearance-none cursor-pointer">
                            @for($y = date('Y'); $y >= date('Y') - 5; $y--)
                                <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                            @endfor
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-2 sm:right-3 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-4 sm:h-4 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-2 sm:p-4 md:p-6">
            <div class="relative w-full h-[320px] sm:h-80 md:h-96 lg:h-[420px]">
                <canvas id="topTherapistChart" class="w-full h-full"></canvas>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Initialize Lucide icons
lucide.createIcons();

// Data untuk chart
const monthlyData = @json($monthlyData);
const topTherapists = @json($topTherapists);

// Check dark mode
const isDarkMode = document.documentElement.classList.contains('dark');
const textColor = isDarkMode ? '#e5e7eb' : '#374151';
const gridColor = isDarkMode ? 'rgba(75, 85, 99, 0.2)' : 'rgba(0, 0, 0, 0.05)';

// Responsive configuration
const isMobile = window.innerWidth < 640;
const isTablet = window.innerWidth >= 640 && window.innerWidth < 1024;

// Common chart options for modern look
const commonOptions = {
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
        mode: 'index',
        intersect: false,
    },
    layout: {
        padding: {
            left: isMobile ? 0 : 10,
            right: isMobile ? 0 : 10,
            top: isMobile ? 5 : 10,
            bottom: isMobile ? 5 : 10
        }
    }
};

// Monthly Chart
const ctx = document.getElementById('monthlyChart').getContext('2d');
let monthlyChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: isMobile ? ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'] : ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
        datasets: [
            {
                label: 'Treatment',
                data: monthlyData.map(d => d.treatments),
                backgroundColor: 'rgba(99, 102, 241, 0.85)',
                borderColor: 'rgb(99, 102, 241)',
                borderWidth: 0,
                borderRadius: isMobile ? 8 : 10,
                barThickness: isMobile ? 'flex' : undefined,
                maxBarThickness: isMobile ? 18 : 40,
                yAxisID: 'y'
            },
            {
                label: 'Fee (Rp)',
                data: monthlyData.map(d => d.fee),
                backgroundColor: 'rgba(6, 182, 212, 0.85)',
                borderColor: 'rgb(6, 182, 212)',
                borderWidth: 0,
                borderRadius: isMobile ? 8 : 10,
                barThickness: isMobile ? 'flex' : undefined,
                maxBarThickness: isMobile ? 18 : 40,
                yAxisID: 'y1'
            },
            {
                label: 'Bonus (Rp)',
                data: monthlyData.map(d => d.bonus),
                backgroundColor: 'rgba(16, 185, 129, 0.85)',
                borderColor: 'rgb(16, 185, 129)',
                borderWidth: 0,
                borderRadius: isMobile ? 8 : 10,
                barThickness: isMobile ? 'flex' : undefined,
                maxBarThickness: isMobile ? 18 : 40,
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        ...commonOptions,
        plugins: {
            legend: {
                position: isMobile ? 'bottom' : 'top',
                labels: {
                    font: {
                        size: isMobile ? 9 : (isTablet ? 11 : 13),
                        weight: '600',
                        family: 'Inter'
                    },
                    padding: isMobile ? 6 : (isTablet ? 10 : 15),
                    color: textColor,
                    usePointStyle: true,
                    pointStyle: 'circle',
                    boxWidth: isMobile ? 8 : 10,
                    boxHeight: isMobile ? 8 : 10
                }
            },
            tooltip: {
                backgroundColor: isDarkMode ? 'rgba(31, 41, 55, 0.95)' : 'rgba(0, 0, 0, 0.85)',
                padding: isMobile ? 8 : 12,
                titleFont: {
                    size: isMobile ? 11 : 14,
                    weight: 'bold',
                    family: 'Inter'
                },
                bodyFont: {
                    size: isMobile ? 10 : 13,
                    family: 'Inter'
                },
                borderColor: isDarkMode ? 'rgba(75, 85, 99, 0.5)' : 'rgba(0, 0, 0, 0.1)',
                borderWidth: 1,
                cornerRadius: 8,
                callbacks: {
                    label: function(context) {
                        let label = context.dataset.label || '';
                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            if (label.includes('Rp')) {
                                label += 'Rp ' + context.parsed.y.toLocaleString('id-ID');
                            } else {
                                label += context.parsed.y;
                            }
                        }
                        return label;
                    }
                }
            }
        },
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                beginAtZero: true,
                title: {
                    display: !isMobile,
                    text: 'Treatment',
                    font: {
                        size: isMobile ? 10 : (isTablet ? 11 : 13),
                        weight: '600',
                        family: 'Inter'
                    },
                    color: textColor
                },
                ticks: {
                    font: {
                        size: isMobile ? 8 : (isTablet ? 10 : 12),
                        family: 'Inter'
                    },
                    color: textColor,
                    maxTicksLimit: isMobile ? 5 : 8,
                    padding: isMobile ? 4 : 8
                },
                grid: {
                    color: gridColor,
                    drawBorder: false
                }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                beginAtZero: true,
                title: {
                    display: !isMobile,
                    text: 'Rupiah',
                    font: {
                        size: isMobile ? 10 : (isTablet ? 11 : 13),
                        weight: '600',
                        family: 'Inter'
                    },
                    color: textColor
                },
                grid: {
                    drawOnChartArea: false,
                    drawBorder: false
                },
                ticks: {
                    font: {
                        size: isMobile ? 8 : (isTablet ? 10 : 12),
                        family: 'Inter'
                    },
                    color: textColor,
                    maxTicksLimit: isMobile ? 5 : 8,
                    padding: isMobile ? 4 : 8,
                    callback: function(value) {
                        if (value >= 1000000) {
                            return (value / 1000000).toFixed(1) + 'M';
                        }
                        return (value / 1000).toFixed(0) + 'K';
                    }
                }
            },
            x: {
                ticks: {
                    font: {
                        size: isMobile ? 8 : (isTablet ? 10 : 12),
                        weight: '500',
                        family: 'Inter'
                    },
                    color: textColor,
                    maxRotation: 0,
                    minRotation: 0,
                    padding: isMobile ? 4 : 8
                },
                grid: {
                    display: false,
                    drawBorder: false
                }
            }
        }
    }
});

// Top Therapist Chart
const ctxTop = document.getElementById('topTherapistChart').getContext('2d');
let topTherapistChart = new Chart(ctxTop, {
    type: 'bar',
    data: {
        labels: topTherapists.map(t => {
            if (isMobile && t.name.length > 8) {
                return t.name.substring(0, 8) + '..';
            }
            return t.name;
        }),
        datasets: [
            {
                label: 'Treatment',
                data: topTherapists.map(t => t.completed_treatments),
                backgroundColor: 'rgba(99, 102, 241, 0.85)',
                borderColor: 'rgb(99, 102, 241)',
                borderWidth: 0,
                borderRadius: isMobile ? 8 : 10,
                barThickness: isMobile ? 'flex' : undefined,
                maxBarThickness: isMobile ? 18 : 40,
                yAxisID: 'y'
            },
            {
                label: 'Fee (Rp)',
                data: topTherapists.map(t => t.total_fee),
                backgroundColor: 'rgba(6, 182, 212, 0.85)',
                borderColor: 'rgb(6, 182, 212)',
                borderWidth: 0,
                borderRadius: isMobile ? 8 : 10,
                barThickness: isMobile ? 'flex' : undefined,
                maxBarThickness: isMobile ? 18 : 40,
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        ...commonOptions,
        plugins: {
            legend: {
                position: isMobile ? 'bottom' : 'top',
                labels: {
                    font: {
                        size: isMobile ? 9 : (isTablet ? 11 : 13),
                        weight: '600',
                        family: 'Inter'
                    },
                    padding: isMobile ? 6 : (isTablet ? 10 : 15),
                    color: textColor,
                    usePointStyle: true,
                    pointStyle: 'circle',
                    boxWidth: isMobile ? 8 : 10,
                    boxHeight: isMobile ? 8 : 10
                }
            },
            tooltip: {
                backgroundColor: isDarkMode ? 'rgba(31, 41, 55, 0.95)' : 'rgba(0, 0, 0, 0.85)',
                padding: isMobile ? 8 : 12,
                titleFont: {
                    size: isMobile ? 11 : 14,
                    weight: 'bold',
                    family: 'Inter'
                },
                bodyFont: {
                    size: isMobile ? 10 : 13,
                    family: 'Inter'
                },
                borderColor: isDarkMode ? 'rgba(75, 85, 99, 0.5)' : 'rgba(0, 0, 0, 0.1)',
                borderWidth: 1,
                cornerRadius: 8,
                callbacks: {
                    label: function(context) {
                        let label = context.dataset.label || '';
                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            if (label.includes('Rp')) {
                                label += 'Rp ' + context.parsed.y.toLocaleString('id-ID');
                            } else {
                                label += context.parsed.y;
                            }
                        }
                        return label;
                    }
                }
            }
        },
        scales: {
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                beginAtZero: true,
                title: {
                    display: !isMobile,
                    text: 'Treatment',
                    font: {
                        size: isMobile ? 10 : (isTablet ? 11 : 13),
                        weight: '600',
                        family: 'Inter'
                    },
                    color: textColor
                },
                ticks: {
                    font: {
                        size: isMobile ? 8 : (isTablet ? 10 : 12),
                        family: 'Inter'
                    },
                    color: textColor,
                    maxTicksLimit: isMobile ? 5 : 8,
                    padding: isMobile ? 4 : 8
                },
                grid: {
                    color: gridColor,
                    drawBorder: false
                }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                beginAtZero: true,
                title: {
                    display: !isMobile,
                    text: 'Fee (Rp)',
                    font: {
                        size: isMobile ? 10 : (isTablet ? 11 : 13),
                        weight: '600',
                        family: 'Inter'
                    },
                    color: textColor
                },
                grid: {
                    drawOnChartArea: false,
                    drawBorder: false
                },
                ticks: {
                    font: {
                        size: isMobile ? 8 : (isTablet ? 10 : 12),
                        family: 'Inter'
                    },
                    color: textColor,
                    maxTicksLimit: isMobile ? 5 : 8,
                    padding: isMobile ? 4 : 8,
                    callback: function(value) {
                        if (value >= 1000000) {
                            return (value / 1000000).toFixed(1) + 'M';
                        }
                        return (value / 1000).toFixed(0) + 'K';
                    }
                }
            },
            x: {
                ticks: {
                    font: {
                        size: isMobile ? 8 : (isTablet ? 10 : 12),
                        weight: '500',
                        family: 'Inter'
                    },
                    color: textColor,
                    maxRotation: isMobile ? 45 : 0,
                    minRotation: isMobile ? 45 : 0,
                    autoSkip: isMobile,
                    maxTicksLimit: isMobile ? 5 : undefined,
                    padding: isMobile ? 4 : 8
                },
                grid: {
                    display: false,
                    drawBorder: false
                }
            }
        }
    }
});

// Filter year
document.getElementById('yearFilter').addEventListener('change', function() {
    window.location.href = '{{ route("dashboard") }}?year=' + this.value;
});

// Filter month & year top therapist
document.getElementById('monthFilterTop').addEventListener('change', function() {
    const year = document.getElementById('yearFilterTop').value;
    window.location.href = '{{ route("dashboard") }}?year=' + year + '&month=' + this.value;
});

document.getElementById('yearFilterTop').addEventListener('change', function() {
    const month = document.getElementById('monthFilterTop').value;
    window.location.href = '{{ route("dashboard") }}?year=' + this.value + '&month=' + month;
});

// Handle window resize - charts are already responsive with maintainAspectRatio: false
// No need to rebuild on resize, Chart.js handles it automatically

// Re-initialize icons after page load
setTimeout(() => {
    lucide.createIcons();
}, 100);
</script>
@endpush
@endsection