document.addEventListener('DOMContentLoaded', function() {
    // Placeholder data
    const totalKtps = 500;
    const regions = ['Jakarta', 'Surabaya', 'Medan', 'Bandung'];
    const ktpList = [
        { nik: '1234567890', name: 'John Doe', email: 'john.doe@example.com', phone: '081234567890' },
        { nik: '9876543210', name: 'Jane Smith', email: 'jane.smith@example.com', phone: '089876543210' },
        { nik: '1122334455', name: 'Peter Jones', email: 'peter.jones@example.com', phone: '081122334455' }
    ];

    // Update summary section
    document.getElementById('total-ktps').textContent = totalKtps;

    // Chart.js setup
    const regionsChartCanvas = document.getElementById('regions-chart').getContext('2d');
    const regionsChart = new Chart(regionsChartCanvas, {
        type: 'bar',
        data: {
            labels: regions,
            datasets: [{
                label: 'Number of KTPs',
                data: [150, 120, 100, 80], // Placeholder data
                backgroundColor: '#2A64FC'
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Update KTP list table
    const ktpTableBody = document.getElementById('ktp-table-body');
    ktpList.forEach(ktp => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${ktp.nik}</td>
            <td>${ktp.name}</td>
            <td>${ktp.email}</td>
            <td>${ktp.phone}</td>
        `;
        tr.addEventListener('click', function() {
            showKtpDetails(ktp);
        });
        ktpTableBody.appendChild(tr);
    });

   function showKtpDetails(ktp) {
        document.getElementById('ktp-nik').textContent = ktp.nik;
        document.getElementById('ktp-name').textContent = ktp.name;
        document.getElementById('ktp-email').textContent = ktp.email;
        document.getElementById('ktp-phone').textContent = ktp.phone;

        // Get the modal
        var modal = document.getElementById("ktp-modal");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on the button, open the modal
        modal.style.display = "block";

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }

    // Logout button functionality
    document.getElementById('logout-button').addEventListener('click', function() {
        // Redirect to login page
        window.location.href = '../page-collection/index.html';
    });

    // Export to Excel button functionality (placeholder)
    document.getElementById('export-button').addEventListener('click', function() {
        alert('Export to Excel functionality will be implemented later.');
    });
});