// 1. Mostrar Habitaciones como lista HTML limpia
async function getRooms() {
  const container = document.getElementById('rooms-list');
  container.innerHTML = "Cargando...";
  try {
    const res = await fetch(`${ROOMS_API}/rooms`);
    const data = await res.json();
    
    // Convertimos cada objeto JSON en un elemento de lista visual
    let html = "<ul style='list-style: none; padding: 0;'>";
    data.forEach(room => {
      html += `
        <li style='background: #fff; margin-bottom: 8px; padding: 10px; border-radius: 4px; border-left: 4px solid #0056b3;'>
          <strong>Habitación ${room.id}</strong> - ${room.type}<br>
          <small>Precio: $${room.price} | Estado: <em>${room.status}</em></small>
        </li>`;
    });
    html += "</ul>";
    
    container.innerHTML = html;
  } catch (err) {
    container.innerText = "Error consultando habitaciones: " + err.message;
  }
}

// 2. Mostrar Huéspedes como lista HTML limpia
async function getGuests() {
  const container = document.getElementById('guests-list');
  container.innerHTML = "Cargando...";
  try {
    const res = await fetch(`${GUESTS_API}/guests`);
    const data = await res.json();
    
    // Convertimos cada huésped en un elemento visual bonito
    let html = "<ul style='list-style: none; padding: 0;'>";
    data.forEach(guest => {
      html += `
        <li style='background: #fff; margin-bottom: 8px; padding: 10px; border-radius: 4px; border-left: 4px solid #28a745;'>
          <strong>ID ${guest.id}:</strong> ${guest.name}<br>
          <small>Estado: <em>${guest.status}</em></small>
        </li>`;
    });
    html += "</ul>";
    
    container.innerHTML = html;
  } catch (err) {
    container.innerText = "Error consultando huéspedes: " + err.message;
  }
}