hotel.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book Hotels & Resorts | TicketEasy</title>
  <link rel="icon" href="logo.ico">
  <link rel="stylesheet" href="style.css?v=3.0">
</head>
<body style="padding-bottom: 60px;">

  <div class="booking-container">
    <div class="glass-card">
      <div class="search-title">🏨 Luxury Hotels & Beach Resorts</div>
      
      <div class="row">
        <div class="field">
          <label>Destination City / Region</label>
          <select id="destination">
            <option>Goa, India</option>
            <option>Hyderabad, India</option>
            <option>Delhi, India</option>
            <option>Mumbai, India</option>
            <option>Dubai, UAE</option>
            <option>Singapore</option>
            <option>Bangkok, Thailand</option>
          </select>
        </div>
      </div>

      <div class="row">
        <div class="field">
          <label>Check-in Date</label>
          <input type="date" id="checkin">
        </div>

        <div class="field">
          <label>Check-out Date</label>
          <input type="date" id="checkout">
        </div>
      </div>

      <div class="row">
        <div class="field">
          <label>Guests</label>
          <select id="guests">
            <option>1 Adult</option>
            <option>2 Adults</option>
            <option>3 Adults</option>
            <option>Family (2 Adults, 2 Kids)</option>
          </select>
        </div>

        <div class="field">
          <label>Rooms</label>
          <select id="rooms">
            <option>1 Room</option>
            <option>2 Rooms</option>
            <option>3 Rooms</option>
          </select>
        </div>
      </div>

      <button class="search-btn" onclick="openHotelBooking()">🚀 SEARCH & RESERVE ROOM</button>
    </div>
  </div>

  <!-- TOP HOTEL STAYS -->
  <div class="offers-section">
    <h2>🏨 Featured Luxury Hotels & Resorts</h2>
    <div class="offers-container">
      
      <div class="offer-card">
        <h3>Taj Krishna Hyderabad</h3>
        <p>5 Star Luxury • Banjara Hills, Hyderabad</p>
        <div class="price-tag">₹8,500 / night</div>
        <button onclick="openBookingModal({title:'Taj Krishna Hyderabad', type:'hotel', route:'Hyderabad, India', price:8500})">Book Stay</button>
      </div>

      <div class="offer-card">
        <h3>Taj Exotica Resort Goa</h3>
        <p>5 Star Luxury Beachfront • South Goa</p>
        <div class="price-tag">₹12,000 / night</div>
        <button onclick="openBookingModal({title:'Taj Exotica Goa Resort', type:'hotel', route:'Goa Beachfront', price:12000})">Book Stay</button>
      </div>

      <div class="offer-card">
        <h3>Atlantis The Palm Dubai</h3>
        <p>5 Star Luxury Oceanfront Resort</p>
        <div class="price-tag">₹18,000 / night</div>
        <button onclick="openBookingModal({title:'Atlantis The Palm Dubai', type:'hotel', route:'Dubai, UAE', price:18000})">Book Stay</button>
      </div>

      <div class="offer-card">
        <h3>Marina Bay Sands Singapore</h3>
        <p>Iconic Infinity Pool & SkyPark</p>
        <div class="price-tag">₹21,000 / night</div>
        <button onclick="openBookingModal({title:'Marina Bay Sands Singapore', type:'hotel', route:'Singapore', price:21000})">Book Stay</button>
      </div>

    </div>
  </div>

  <script src="booking-modal.js?v=3.0"></script>
  <script>
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    const dayAfter = new Date();
    dayAfter.setDate(dayAfter.getDate() + 3);

    document.getElementById("checkin").value = tomorrow.toISOString().split('T')[0];
    document.getElementById("checkout").value = dayAfter.toISOString().split('T')[0];

    function openHotelBooking() {
      const dest = document.getElementById("destination").value;
      openBookingModal({
        title: `Hotel Booking (${dest})`,
        type: "hotel",
        subtitle: `Check-in: ${document.getElementById("checkin").value}`,
        route: dest,
        price: 5500
      });
    }
  </script>
</body>
</html>