document.addEventListener('DOMContentLoaded', function() {
    // Sample data for charts (replace with real data from your API)
    const assetData = {
        status: {
            working: 40,
            nonWorking: 8
        },
        types: {
            desktop: 35,
            laptop: 15
        },
        warranty: {
            active: 30,
            expired: 18
        },
        regions: {
            south: 32,
            east: 18
        }
    };

    // Calculate quick stats
    document.getElementById('totalAssets').textContent = assetData.status.working + assetData.status.nonWorking;
    document.getElementById('workingAssets').textContent = assetData.status.working;
    document.getElementById('nonWorkingAssets').textContent = assetData.status.nonWorking;
    document.getElementById('expiredAssets').textContent = assetData.warranty.expired;

    // Status Chart
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'pie',
        data: {
            labels: ['Working', 'Non-Working'],
            datasets: [{
                data: [assetData.status.working, assetData.status.nonWorking],
                backgroundColor: ['#10B981', '#EF4444'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Type Chart
    const typeCtx = document.getElementById('typeChart').getContext('2d');
    new Chart(typeCtx, {
        type: 'doughnut',
        data: {
            labels: ['Desktop', 'Laptop'],
            datasets: [{
                data: [assetData.types.desktop, assetData.types.laptop],
                backgroundColor: ['#3B82F6', '#F59E0B'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Warranty Chart
    const warrantyCtx = document.getElementById('warrantyChart').getContext('2d');
    new Chart(warrantyCtx, {
        type: 'pie',
        data: {
            labels: ['Active Warranty', 'Expired Warranty'],
            datasets: [{
                data: [assetData.warranty.active, assetData.warranty.expired],
                backgroundColor: ['#F59E0B', '#6B7280'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Region Chart
    const regionCtx = document.getElementById('regionChart').getContext('2d');
    new Chart(regionCtx, {
        type: 'bar',
        data: {
            labels: ['South', 'East'],
            datasets: [{
                label: 'Assets by Region',
                data: [assetData.regions.south, assetData.regions.east],
                backgroundColor: ['#6366F1', '#EC4899'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});