document.addEventListener('DOMContentLoaded', function() {
    const imieSelect = document.getElementById('imie');
    const photoDisplay = document.createElement('img');
    photoDisplay.style.width = "200px";
    photoDisplay.style.height = "auto";
    document.getElementById('prawy').appendChild(photoDisplay);

    let usersData = [];

    imieSelect.addEventListener('focus', function() {
        fetch('get.php')
            .then(response => response.json())
            .then(data => {
                usersData = data; 
                imieSelect.innerHTML = "";
                data.forEach(dane => {
                    const option = document.createElement('option');
                    option.value = dane.id;
                    option.textContent = dane.imie + " " + dane.nazwisko;
                    imieSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching data:', error));
    });

    imieSelect.addEventListener('change', function() {
        const selectedId = imieSelect.value;
        const selectedPerson = usersData.find(dane => dane.id == selectedId);
        if (selectedPerson && selectedPerson.photo) {
            photoDisplay.src = 'data:image/jpeg;base64,' + selectedPerson.photo;
        } else {
            photoDisplay.src = '';
        }
    });
});