document.addEventListener('DOMContentLoaded', function() {
    // Initialize charts
    const genderCtx = document.getElementById('genderChart').getContext('2d');
    const locationCtx = document.getElementById('locationChart').getContext('2d');
    
    // Gender Distribution Chart (Pie)
    new Chart(genderCtx, {
        type: 'pie',
        data: {
            labels: ['Female', 'Male'],
            datasets: [{
                data: [12, 35],
                backgroundColor: [
                    'rgba(236, 72, 153, 0.7)',
                    'rgba(59, 130, 246, 0.7)'
                ],
                borderColor: [
                    'rgba(236, 72, 153, 1)',
                    'rgba(59, 130, 246, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((value / total) * 100);
                            return `${label}: ${value} (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });
    
    // Location Distribution Chart (Bar)
    new Chart(locationCtx, {
        type: 'bar',
        data: {
            labels: ['D5', 'KRC', 'LMB', 'TV Tower'],
            datasets: [
                {
                    label: 'Female',
                    data: [6, 2, 2, 2],
                    backgroundColor: 'rgba(236, 72, 153, 0.7)',
                    borderColor: 'rgba(236, 72, 153, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Male',
                    data: [7, 6, 12, 10],
                    backgroundColor: 'rgba(59, 130, 246, 0.7)',
                    borderColor: 'rgba(59, 130, 246, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    stacked: false,
                    grid: {
                        display: false
                    }
                },
                y: {
                    stacked: false,
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});