<!DOCTYPE html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booking Price Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .container {
            max-width: 500px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input, select, button {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            font-size: 1.2em;
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Booking Price Calculator</h2>
    <label for="people">Number of People:</label>
    <input type="number" id="people" min="1" placeholder="Enter number of people" required>

    <label for="apartments">Number of Apartments:</label>
    <select id="apartments" required>
        <option value="1">1 Apartment</option>
        <option value="2">2 Apartments</option>
    </select>

    <button onclick="calculatePrice()">Calculate Price</button>

    <div class="result" id="result"></div>
</div>

<script>
    function calculatePrice() {
        const people = parseInt(document.getElementById('people').value) || 0;
        const apartments = parseInt(document.getElementById('apartments').value) || 1;

        const pricePerPerson = 100;
        const apartmentPrices = apartments === 1 ? 1000 : 2000;
        const discounts = apartments === 1 ? 400 : 800;

        const totalPrice = (people * pricePerPerson) + apartmentPrices - discounts;

        document.getElementById('result').innerText = `Total Price: ${totalPrice} BWP`;
    }
</script>

</body>
</html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Booking Form</title>
  <style>
    #booking-form {
      font-family: Arial, sans-serif;
      margin: 20px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      max-width: 400px;
      background: #f9f9f9;
    }

    #booking-form h2 {
      margin-bottom: 20px;
    }

    #bookingForm label {
      display: block;
      margin: 10px 0 5px;
    }

    #bookingForm input,
    #bookingForm select {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    #bookingForm div {
      margin: 5px 0;
    }

    #bookingForm h3 {
      margin-top: 20px;
      color: #333;
    }

    #bookingForm button {
      padding: 10px 20px;
      color: #fff;
      background: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #bookingForm button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>

<div id="booking-form">
  <h2>Booking Form</h2>
  <form id="bookingForm">
    <label for="eventType">Event Type:</label>
    <select id="eventType" name="eventType">
      <option value="wedding">Wedding</option>
      <option value="conference">Conference</option>
      <option value="birthday">Birthday Party</option>
    </select>

    <label for="numberOfGuests">Number of Guests:</label>
    <input type="number" id="numberOfGuests" name="numberOfGuests" min="1" value="1">

    <label for="duration">Duration (Hours):</label>
    <input type="number" id="duration" name="duration" min="1" value="1">

    <label for="extras">Extras:</label>
    <div>
      <input type="checkbox" id="catering" name="extras" value="catering">
      <label for="catering">Catering (+$50/hour)</label>
    </div>
    <div>
      <input type="checkbox" id="decoration" name="extras" value="decoration">
      <label for="decoration">Decoration (+$100)</label>
    </div>

    <h3>Total Price: $<span id="totalPrice">0</span></h3>

    <button type="button" id="calculatePrice">Book Now</button>
  </form>
</div>

<script>
  document.getElementById("calculatePrice").addEventListener("click", function () {
    const eventType = document.getElementById("eventType").value;
    const numberOfGuests = parseInt(document.getElementById("numberOfGuests").value, 10) || 1;
    const duration = parseInt(document.getElementById("duration").value, 10) || 1;
    const catering = document.getElementById("catering").checked;
    const decoration = document.getElementById("decoration").checked;

    const basePrices = {
      wedding: 200,
      conference: 150,
      birthday: 100,
    };

    const cateringCostPerHour = 50;
    const decorationCost = 100;

    let totalPrice = basePrices[eventType] * duration;

    if (catering) {
      totalPrice += cateringCostPerHour * duration;
    }

    if (decoration) {
      totalPrice += decorationCost;
    }

    document.getElementById("totalPrice").textContent = totalPrice;

    alert(`Your total price is $${totalPrice}. Proceeding with booking!`);
  });
</script>

</body>
</html>
