35896-vm/assets/js/main.js

document.addEventListener('DOMContentLoaded', () => {
    const searchForm = document.getElementById('search-form');
    const searchInput = document.getElementById('search-input');
    const searchBtn = document.getElementById('search-btn');
    const resultsContainer = document.getElementById('results-container');
    const examples = document.querySelectorAll('.example-link');

    let wozChart = null; // To hold the chart instance

    // Helper to format currency
    const formatCurrency = (value) => new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0 }).format(value);

    const handleSearch = async (query) => {
        if (!query) return;

        const originalBtnText = searchBtn.innerHTML;
        searchBtn.innerHTML = '<span class="loader"></span>';
        searchBtn.disabled = true;
        resultsContainer.style.display = 'none';

        try {
            const response = await fetch(`/api/search.php?query=${encodeURIComponent(query)}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            displayResults(data);
        } catch (error) {
            console.error("Fetch error: ", error);
            displayError('Er is een fout opgetreden. Probeer het later opnieuw.');
        } finally {
            searchBtn.innerHTML = originalBtnText;
            searchBtn.disabled = false;
        }
    };

    searchForm.addEventListener('submit', (e) => {
        e.preventDefault();
        handleSearch(searchInput.value);
    });

    examples.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const exampleQuery = e.target.textContent;
            searchInput.value = exampleQuery;
            handleSearch(exampleQuery);
        });
    });

    const displayResults = (data) => {
        if (data.error) {
            displayError(data.error);
            return;
        }

        // --- Main Header ---
        document.getElementById('address-title').textContent = data.adres;
        document.getElementById('address-subtitle').textContent = `Gegevens voor ${data.postcode}, ${data.plaats}`;

        // --- Basisgegevens ---
        document.getElementById('info-postcode').textContent = data.postcode;
        document.getElementById('info-plaats').textContent = data.plaats;
        document.getElementById('info-gemeente').textContent = data.gemeente;
        document.getElementById('info-provincie').textContent = data.provincie;
        document.getElementById('info-buurt').textContent = data.buurt;
        document.getElementById('info-wijk').textContent = data.wijk;

        // --- Kadastrale Info ---
        document.getElementById('info-perceelnummer').textContent = data.perceelnummer;
        document.getElementById('info-eigendomssituatie').textContent = data.eigendomssituatie;
        document.getElementById('info-type').textContent = data.type;
        document.getElementById('info-bouwjaar').textContent = data.bouwjaar;
        document.getElementById('info-oppervlakte').textContent = `${data.oppervlakte} m²`;

        // --- WOZ Waarde ---
        document.getElementById('info-woz-waarde').textContent = formatCurrency(data.woz_waarde);
        renderWozChart(data.woz_ontwikkeling);

        // --- Energielabel ---
        document.getElementById('info-energielabel').textContent = data.energielabel;
        document.getElementById('info-energiekosten').textContent = `${formatCurrency(data.geschatte_energiekosten)}`;

        // --- Buurtstatistieken ---
        document.getElementById('info-gem-woz').textContent = formatCurrency(data.buurtstatistieken.gemiddelde_woz);
        document.getElementById('info-inwoners').textContent = data.buurtstatistieken.inwoners.toLocaleString('nl-NL');
        document.getElementById('info-gem-leeftijd').textContent = `${data.buurtstatistieken.gemiddelde_leeftijd} jaar`;
        document.getElementById('info-groen-score').textContent = `${data.buurtstatistieken.groen_score} / 10`;
        document.getElementById('info-veiligheid-score').textContent = `${data.buurtstatistieken.veiligheid_score} / 10`;

        // --- Verkoophistorie ---
        const historyBody = document.getElementById('verkoophistorie-body');
        historyBody.innerHTML = ''; // Clear previous results
        data.verkoophistorie.forEach(tx => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${new Date(tx.datum).toLocaleDateString('nl-NL')}</td>
                <td>${tx.type}</td>
                <td>${formatCurrency(tx.prijs)}</td>
            `;
            historyBody.appendChild(row);
        });

        resultsContainer.style.display = 'block';
        resultsContainer.scrollIntoView({ behavior: 'smooth' });
    };

    const renderWozChart = (wozData) => {
        const ctx = document.getElementById('woz-chart').getContext('2d');
        const labels = wozData.map(d => d.jaar);
        const values = wozData.map(d => d.waarde);

        if (wozChart) {
            wozChart.destroy(); // Destroy previous chart instance
        }

        wozChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'WOZ-Waarde',
                    data: values,
                    borderColor: '#0066cc',
                    backgroundColor: 'rgba(0, 102, 204, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#0066cc',
                    pointRadius: 4,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        ticks: {
                            callback: (value) => formatCurrency(value)
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    };

    const displayError = (message) => {
        alert(message);
    };
});

// Add some CSS for the loader
const style = document.createElement('style');
style.innerHTML = `
.loader {
  width: 18px;
  height: 18px;
  border: 2px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
`;
document.head.appendChild(style);