async function getHotels() {
    const city = document.getElementById('cityInput').value;
    const container = document.getElementById('results');
    container.innerHTML = "Searching for hotels in " + city + "...";
    
    try {
        // Calling your PHP file
        const res = await fetch('hotel-search-new.php');
        const data = await res.json();
        
        container.innerHTML = "";

        // 1. Navigate the real structure: data -> hotels -> hotels (array)
        if (data.hotels && data.hotels.hotels) {
            data.hotels.hotels.forEach(hotel => {
                // 2. Get the price from the first room and first rate found
                // We use optional chaining (?.) to prevent crashes if a room has no price
                const firstRoom = hotel.rooms ? hotel.rooms[0] : null;
                const firstRate = firstRoom && firstRoom.rates ? firstRoom.rates[0] : null;
                const price = firstRate ? firstRate.net : "Price on request";
                const currency = firstRate && firstRate.taxes ? firstRate.taxes.taxes[0].currency : "EUR";

                container.innerHTML += `
                    <div class="hotel-card">
                        <h3>${hotel.name}</h3>
                        <p><strong>Zone:</strong> ${hotel.zoneName}</p>
                        <p class="price">Price: ${currency} ${price}</p>
                        <small>Room: ${firstRoom ? firstRoom.name : 'Standard'}</small>
                    </div>
                `;
            });
        } else {
            container.innerHTML = "No hotels found for this search.";
        }
    } catch (err) {
        console.error(err);
        container.innerHTML = "Error loading hotels. Make sure the server response is valid.";
    }
}