Untitled

        document.addEventListener('DOMContentLoaded', function () {
            var editModal = document.getElementById("edit-modal");
            var closeEditBtn = document.querySelector(".close-edit");

            // Open Bewerken Modal
            document.querySelectorAll('.edit-url-btn').forEach(button => {
                button.addEventListener('click', function () {
                    const listItem = this.closest('li');
                    document.getElementById('edit-url-id').value = listItem.dataset.id;
                    document.getElementById('edit-url').value = listItem.querySelector('.url-address').textContent;
                    document.getElementById('edit-selector').value = listItem.querySelector('.url-selector').textContent;
                    document.getElementById('edit-title').value = listItem.querySelector('.url-title').textContent;
                    editModal.style.display = "block";
                });
            });

            if(closeEditBtn) { closeEditBtn.onclick = function () { editModal.style.display = "none"; } }

            // Verwerk URL Bewerken rechtstreeks via product.php actie
            document.getElementById('edit-url-form').addEventListener('submit', function (event) {
                event.preventDefault();
                const id = document.getElementById('edit-url-id').value;
                const url = document.getElementById('edit-url').value;
                const selector = document.getElementById('edit-selector').value;
                const title = document.getElementById('edit-title').value;

                fetch('product.php?id=<?php echo $product_id; ?>', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: new URLSearchParams({ action: 'edit_url', id, url, selector, title })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        const listItem = document.querySelector(`li[data-id="${id}"]`);
                        listItem.querySelector('.url-title').textContent = title;
                        listItem.querySelector('.url-address').textContent = url;
                        listItem.querySelector('.url-selector').textContent = selector;
                        editModal.style.display = 'none';
                    } else { alert('Error bij bewerken.'); }
                });
            });

            // Verwerk URL Verwijderen rechtstreeks via product.php actie
            document.querySelectorAll('.delete-url-btn').forEach(button => {
                button.addEventListener('click', function () {
                    const listItem = this.closest('li');
                    if (confirm('Are you sure you want to delete this URL?')) {
                        fetch('product.php?id=<?php echo $product_id; ?>', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: new URLSearchParams({ action: 'delete_url', id: listItem.dataset.id })
                        })
                        .then(res => res.json())
                        .then(data => { 
                            if (data.success) { 
                                listItem.remove(); 
                            } else { 
                                alert('Error bij verwijderen.'); 
                            } 
                        });
                    }
                });
            });

            // LOGICA VOOR DE PRICE UPDATE SHADOWBOX
            const trackerModal = document.getElementById('tracker-modal');
            const updateBtn = document.getElementById('update-prices-btn');
            const closeTrackerBtn = document.querySelector('.close-tracker');
            const modalLoading = document.getElementById('modal-loading');
            const modalResults = document.getElementById('modal-results');

            if (updateBtn && trackerModal) {
                updateBtn.addEventListener('click', function () {
                    trackerModal.style.display = 'block';
                    modalLoading.style.display = 'block';
                    modalResults.style.display = 'none';
                    modalResults.innerHTML = '';

                    fetch('product.php?id=<?php echo $product_id; ?>', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        body: new URLSearchParams({ 'update_prices': '1' })
                    })
                    .then(response => response.text())
                    .then(htmlOutput => {
                        modalLoading.style.display = 'none';
                        modalResults.style.display = 'block';
                        modalResults.innerHTML = htmlOutput;
                    })
                    .catch(error => {
                        modalLoading.style.display = 'none';
                        modalResults.style.display = 'block';
                        modalResults.innerHTML = '<p style="color:red; font-family:sans-serif;">❌ Er is een serverfout opgetreden.</p>';
                    });
                });
            }

            if (closeTrackerBtn) {
                closeTrackerBtn.onclick = function () {
                    trackerModal.style.display = 'none';
                    location.reload(); 
                }
            }

            window.onclick = function (event) {
                if (event.target === editModal) { editModal.style.display = "none"; }
                if (event.target === trackerModal) { trackerModal.style.display = "none"; location.reload(); }
            }

            // CHART.JS GRAFIEK INITIALISATIE
            const ctx = document.getElementById('priceChart').getContext('2d');
            const priceData = <?php echo json_encode($prices); ?>;
            const datasets = [];

            const groupedData = priceData.reduce((acc, item) => {
                if (!acc[item.title]) { acc[item.title] = []; }
                acc[item.title].push({ x: new Date(item.date), y: parseFloat(item.price) });
                return acc;
            }, {});

            Object.keys(groupedData).forEach(title => {
                datasets.push({
                    label: title,
                    data: groupedData[title],
                    borderColor: '#' + Math.floor(Math.random() * 16777215).toString(16),
                    borderWidth: 2,
                    fill: false
                });
            });

            if(typeof Chart !== 'undefined') {
                new Chart(ctx, {
                    type: 'line',
                    data: { datasets: datasets },
                    options: {
                        scales: { x: { type: 'time', time: { unit: 'day' } } }
                    }
                });
            }
        });