// Handle booking form submission
      document.getElementById('bookingForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // Get form data
        const bookingData = {
          firstName: document.getElementById('firstName').value.trim(),
          lastName: document.getElementById('lastName').value.trim(),
          email: document.getElementById('email').value.trim(),
          phone: document.getElementById('phone').value.trim(),
          travelDate: document.getElementById('travelDate').value,
          hotelCategory: document.getElementById('hotelCategory').value,
          adults: document.getElementById('adults').value,
          children: document.getElementById('children').value,
          specialRequests: document.getElementById('specialRequests').value
        };

        console.log('Booking details:', bookingData);

        // Basic validation
        if (!bookingData.firstName || !bookingData.lastName || !bookingData.email || !bookingData.phone || !bookingData.travelDate) {
          alert('Please fill in all required fields (Name, Email, Phone, Travel Date)');
          return;
        }

        // Validate email format
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(bookingData.email)) {
          alert('Please enter a valid email address');
          return;
        }

        // Add booking-specific details
        bookingData.referenceNumber = getUniqueReferenceNumber();
        bookingData.status = 'pending';
        bookingData.packageName = 'Turkey Magic Package';
        bookingData.bookingDate = new Date();

        console.log('Booking details:', bookingData);

        // Save booking to localStorage
        const bookings = JSON.parse(localStorage.getItem('bookings')) || [];
        bookings.push(bookingData);
        localStorage.setItem('bookings', JSON.stringify(bookings));
        console.log('Booking saved:', bookingData);

        // Create or update user account
        const user = createOrUpdateUserAccount(bookingData);

        // Save updated users list
        const users = JSON.parse(localStorage.getItem('users')) || [];
        if (!users.some(u => u.email === user.email)) {
          users.push(user);
          localStorage.setItem('users', JSON.stringify(users));
        }

        // Show success message with login details for new users
        const successMessage = document.getElementById('successMessage');
        successMessage.innerHTML = `
          <h2>Booking Confirmed!</h2>
          <p>Thank you for booking with Funny Tourism. Your booking reference number is: ${bookingData.referenceNumber}</p>

          <div class="login-details">
            <h3>Your Login Credentials</h3>
            <p><strong>Username:</strong> ${bookingData.email}</p>
            ${user.isNewUser ? `<p><strong>Temporary Password:</strong> ${user.password}</p>` : '<p>You can view your booking details by logging in to your existing account.</p>'}
            <p class="login-note">Please save these credentials to access your booking details in the future.</p>
          </div>

          <button class="back-btn" onclick="hideSuccessMessage()">← Return to Package Details</button>
        `;

        this.reset();

        // Close booking form
        document.getElementById('bookingOverlay').style.display = 'none';
      });


      function getUniqueReferenceNumber() {
        return Math.random().toString(36).substring(2, 15);
      }

      function createOrUpdateUserAccount(bookingData) {
        const users = JSON.parse(localStorage.getItem('users')) || [];
        const userIndex = users.findIndex(user => user.email === bookingData.email);
        let user;
        let isNewUser = false;

        if (userIndex === -1) {
          // Create new user
          const tempPassword = Math.random().toString(36).slice(-8);
          console.log('Temporary password:', tempPassword);

          user = {
            email: bookingData.email,
            password: tempPassword,
            firstName: bookingData.firstName,
            lastName: bookingData.lastName,
            phone: bookingData.phone,
            role: 'guest',
            referenceNumbers: [bookingData.referenceNumber],
            createdAt: new Date(),
            isNewUser: true
          };
          isNewUser = true;
        } else {
          // Update existing user
          user = users[userIndex];
          user.referenceNumbers.push(bookingData.referenceNumber);
          isNewUser = false;
        }

        return { ...user, isNewUser };
      }
      //Form
      //<form id="bookingForm">
          //<div class="form-group">
            //<label for="firstName">First Name *</label>
            //<input type="text" id="firstName" name="firstName" required>
          //</div>

          //<div class="form-group">
            //<label for="lastName">Last Name *</label>
            //<input type="text" id="lastName" name="lastName" required>
          //</div>

          //<div class="form-group">
            //<label for="email">Email *</label>
            //<input type="email" id="email" name="email" required>
          //</div>

          //<div class="form-group">
            //<label for="phone">Phone *</label>
            //<input type="tel" id="phone" name="phone" required>
          //</div>

          //<div class="form-group">
            //<label for="travelDate">Travel Date *</label>
            //<input type="date" id="travelDate" name="travelDate" required>
          //</div>

          //<div class="form-group">
            //<label for="hotelCategory">Hotel Category</label>
            //<select id="hotelCategory" name="hotelCategory">
              //<option value="budget">Budget</option>
              //<option value="mid-range">Mid-range</option>
              //<option value="luxury">Luxury</option>
            //</select>
          //</div>

          //<div class="form-group">
            //<label for="adults">Adults</label>
            //<input type="number" id="adults" name="adults" min="1" value="1">
          //</div>

          //<div class="form-group">
            //<label for="children">Children</label>
            //<input type="number" id="children" name="children" min="0" value="0">
          //</div>

          //<div class="form-group">
            //<label for="specialRequests">Special Requests</label>
            //<textarea id="specialRequests" name="specialRequests"></textarea>
          //</div>

          //<button type="submit">Book Now</button>
      //</form>