Embed

<div class="kotikulma-booking">
  <style>
    .kotikulma-booking {
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: #234234;
      padding: 12px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
    }

    .kotikulma-booking .container {
      width: 100%;
      max-width: 800px;
      background: #fff;
      padding: 24px;
      border-radius: 14px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      box-sizing: border-box;
    }

    .kotikulma-booking h1 {
      text-align: center;
      color: #2a5d43;
      font-size: 1.8rem;
      margin-bottom: 24px;
    }

    .kotikulma-booking label {
      font-weight: 600;
      display: block;
      margin-top: 12px;
      margin-bottom: 6px;
      font-size: 1rem;
    }

    .kotikulma-booking input,
    .kotikulma-booking select,
    .kotikulma-booking textarea {
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid #c7d5cc;
      font-size: 1rem;
      background-color: #fbfdfb;
      box-sizing: border-box;
    }

    .kotikulma-booking button {
      margin-top: 20px;
      background-color: #3a7c5e;
      color: white;
      border: none;
      padding: 14px;
      border-radius: 10px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
    }

    .kotikulma-booking button:hover {
      background-color: #2c6048;
    }

    .kotikulma-booking .date-list {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .kotikulma-booking .date-item {
      background: #eef8f1;
      border: 1px solid #c7d5cc;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .kotikulma-booking .remove-date {
      color: #b33636;
      font-weight: bold;
      cursor: pointer;
      font-size: 1.1rem;
    }

    .hidden { display: none; }
  </style>

  <div class="container">
    <h1>Pyydä tarjous</h1>

    <form id="bookingForm" action="https://formspree.io/f/xvgwbjrq" method="POST" novalidate>

      <label for="customerType">Asiakastyyppi</label>
      <select id="customerType" name="customerType" required>
        <option value="" disabled selected hidden>Valitse...</option>
        <option value="yksityinen">Yksityinen</option>
        <option value="yritys">Yritys</option>
      </select>

      <label for="houseType">Asunnon tyyppi</label>
      <select id="houseType" name="houseType" required>
        <option value="" disabled selected hidden>Valitse...</option>
        <option value="omakotitalo">Omakotitalo</option>
        <option value="rivitalo">Rivitalo</option>
        <option value="kerrostalo">Kerrostalo</option>
        <option value="muu">Muu</option>
      </select>

      <label for="service">Palvelu</label>
      <select id="service" name="service" required>
        <option value="" disabled selected hidden>Valitse...</option>
        <option value="pihan-ja-nurmikonhoito">Pihan- ja nurmikonhoito</option>
        <option value="lumipalvelut">Lumipalvelut</option>
        <option value="siivouspalvelut">Siivouspalvelut</option>
        <option value="rakenteiden-ja-ulkopintojen-huolto">Rakenteiden ja ulkopintojen huolto</option>
        <option value="romunkerays-ja-kierratyspalvelut">Romunkeräys ja kierrätyspalvelut</option>
        <option value="apukasi-ja-kuljetuspalvelut">Apukäsi & kuljetuspalvelut</option>
        <option value="muu-mika">Muu, mikä?</option>
      </select>

      <div class="form-group hidden" id="custom-service-group">
        <label for="customService">Muu palvelu</label>
        <input type="text" id="customService" name="customService" placeholder="Kerro mitä tarvitset">
      </div>

      <label for="dateInput">Valitse mieluisat päivämäärät</label>
      <input type="date" id="dateInput">
      <div id="dateList" class="date-list"></div>
      <input type="hidden" id="selectedDates" name="selectedDates">

      <label for="name">Nimi</label>
      <input type="text" id="name" name="name" placeholder="Etunimi Sukunimi" required>

      <label for="email">Sähköposti</label>
      <input type="email" id="email" name="email" placeholder="esim. nimi@email.com" required>

      <label for="phone">Puhelinnumero</label>
      <input type="tel" id="phone" name="phone" placeholder="esim. 040 123 4567" required>

      <label for="address">Osoite</label>
      <input type="text" id="address" name="address" placeholder="Katuosoite, Postinumero ja -toimipaikka" required>

      <label for="extra">Lisätietoja</label>
      <textarea id="extra" name="extra" placeholder="Kirjoita mahdolliset lisätiedot..."></textarea>

      <button type="submit">Lähetä tarjouspyyntö</button>

      <div class="success-message hidden" id="successMessage">✅ Tarjouspyyntö lähetetty onnistuneesti!</div>
    </form>
  </div>
</div>

<script>
  // "Muu, mikä?" kenttä
  const serviceEl = document.getElementById('service');
  const customServiceGroup = document.getElementById('custom-service-group');
  const customServiceInput = document.getElementById('customService');

  serviceEl.addEventListener('change', () => {
    if (serviceEl.value === 'muu-mika') {
      customServiceGroup.classList.remove('hidden');
      customServiceInput.required = true;
      customServiceInput.focus();
    } else {
      customServiceGroup.classList.add('hidden');
      customServiceInput.required = false;
      customServiceInput.value = '';
    }
  });

  // Useiden päivämäärien valinta
  const dateInput = document.getElementById('dateInput');
  const dateList = document.getElementById('dateList');
  const selectedDatesInput = document.getElementById('selectedDates');

  let dates = [];

  dateInput.addEventListener('change', () => {
    const selected = dateInput.value;
    if (selected && !dates.includes(selected)) {
      dates.push(selected);
      updateDateList();
    }
    dateInput.value = '';
  });

  function updateDateList() {
    dateList.innerHTML = '';
    dates.forEach((d, index) => {
      const item = document.createElement('div');
      item.className = 'date-item';
      item.innerHTML = `${d} <span class="remove-date" data-index="${index}">✖</span>`;
      dateList.appendChild(item);
    });

    selectedDatesInput.value = dates.join(', ');
  }

  // Poista valittu päivämäärä
  dateList.addEventListener('click', (e) => {
    if (e.target.classList.contains('remove-date')) {
      const index = e.target.getAttribute('data-index');
      dates.splice(index, 1);
      updateDateList();
    }
  });
</script>
