Embed

<div id="tgh-booking-widget"></div>

<style>
  /* Tongapuku Guest House — simple clean widget */
  .tgh-wrap{max-width:780px;margin:0 auto;padding:18px;border:1px solid rgba(0,0,0,.12);border-radius:14px}
  .tgh-title{font-size:22px;font-weight:700;margin:0 0 6px}
  .tgh-sub{margin:0 0 16px;opacity:.75}
  .tgh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .tgh-field label{display:block;font-weight:600;margin:0 0 6px}
  .tgh-field input,.tgh-field select,.tgh-field textarea{
    width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.18);border-radius:10px;font-size:16px
  }
  .tgh-row{display:flex;gap:12px;flex-wrap:wrap}
  .tgh-box{flex:1;min-width:220px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.04)}
  .tgh-rate{font-weight:700}
  .tgh-total{font-size:18px;font-weight:800}
  .tgh-note{font-size:13px;opacity:.75;margin-top:8px;line-height:1.35}
  .tgh-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
  .tgh-btn{
    appearance:none;border:0;border-radius:12px;padding:12px 14px;font-weight:700;font-size:16px;cursor:pointer
  }
  .tgh-btn-primary{background:#111;color:#fff}
  .tgh-btn-ghost{background:transparent;border:1px solid rgba(0,0,0,.2)}
  .tgh-error{color:#b00020;font-weight:600;margin-top:10px;display:none}
  .tgh-small{font-size:13px;opacity:.8}
  @media (max-width:720px){
    .tgh-grid{grid-template-columns:1fr}
  }
</style>

<script>
(function(){
  // ========= EDIT THESE =========
  const PROPERTY_NAME = "Tongapuku Guest House";
  const CURRENCY = "TOP";
  const BOOKINGS_EMAIL = "bookings@tongapukuguesthouse.com";

  // Rates (per room, per night)
  const RATE_PEAK_WHALE = 400;  // July 1 – Oct 31
  const RATE_XMAS_NY   = 250;   // "2nd week Dec" – "end of 1st week Jan"
  const RATE_JAN_MAR   = 180;   // "2nd week Jan" – Mar 31
  const RATE_OTHER     = 220;   // All other dates

  // Define your “week” cutoffs here (adjust if needed)
  // Assumption:
  // - Xmas/Ny window: Dec 8 – Jan 7 (inclusive of nights starting Dec 8 up to night of Jan 6)
  // - Jan-Mar: Jan 8 – Mar 31
  const XMAS_START_MMDD = "12-08";
  const XMAS_END_MMDD   = "01-07";
  const JANMAR_START_MMDD = "01-08";
  const JANMAR_END_MMDD   = "03-31";
  // ==============================

  const mount = document.getElementById("tgh-booking-widget");
  if(!mount) return;

  mount.innerHTML = `
    <div class="tgh-wrap">
      <h2 class="tgh-title">${PROPERTY_NAME} — Booking Request</h2>
      <p class="tgh-sub">Select dates & rooms to see the nightly rate and total (in ${CURRENCY}).</p>

      <div class="tgh-grid">
        <div class="tgh-field">
          <label for="tgh-checkin">Check-in</label>
          <input id="tgh-checkin" type="date" />
        </div>

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

        <div class="tgh-field">
          <label for="tgh-rooms">Rooms (max 4)</label>
          <select id="tgh-rooms">
            <option value="1">1 room</option>
            <option value="2">2 rooms</option>
            <option value="3">3 rooms</option>
            <option value="4">4 rooms</option>
          </select>
          <div class="tgh-small" style="margin-top:6px;">You have 4 rooms available (request-to-book).</div>
        </div>

        <div class="tgh-field">
          <label for="tgh-guests">Guests (optional)</label>
          <input id="tgh-guests" type="number" min="1" placeholder="e.g., 4" />
        </div>

        <div class="tgh-field" style="grid-column:1/-1;">
          <label for="tgh-notes">Message (optional)</label>
          <textarea id="tgh-notes" rows="3" placeholder="Any special requests? Arrival time?"></textarea>
        </div>
      </div>

      <div class="tgh-row" style="margin-top:14px;">
        <div class="tgh-box">
          <div>Nightly rate (per room): <span class="tgh-rate" id="tgh-rate">—</span></div>
          <div class="tgh-small" id="tgh-season">Select dates to see pricing.</div>
        </div>
        <div class="tgh-box">
          <div>Nights: <strong id="tgh-nights">—</strong></div>
          <div>Total: <span class="tgh-total" id="tgh-total">—</span></div>
          <div class="tgh-note">Total = nights × rooms × nightly rate. Final confirmation subject to availability.</div>
        </div>
      </div>

      <div class="tgh-error" id="tgh-error"></div>

      <div class="tgh-actions">
        <button class="tgh-btn tgh-btn-primary" id="tgh-send">Send booking request</button>
        <button class="tgh-btn tgh-btn-ghost" id="tgh-clear" type="button">Clear</button>
      </div>

      <div class="tgh-note">
        <strong>Season rates:</strong>
        Jul–Oct: ${RATE_PEAK_WHALE} ${CURRENCY} •
        Dec (2nd week)–Jan (1st week): ${RATE_XMAS_NY} ${CURRENCY} •
        Jan (2nd week)–Mar: ${RATE_JAN_MAR} ${CURRENCY} •
        Other dates: ${RATE_OTHER} ${CURRENCY}
      </div>
    </div>
  `;

  const $ = (id)=>document.getElementById(id);

  const checkin  = $("tgh-checkin");
  const checkout = $("tgh-checkout");
  const rooms    = $("tgh-rooms");
  const guests   = $("tgh-guests");
  const notes    = $("tgh-notes");

  const rateEl   = $("tgh-rate");
  const seasonEl = $("tgh-season");
  const nightsEl = $("tgh-nights");
  const totalEl  = $("tgh-total");
  const errorEl  = $("tgh-error");

  // Set min date to today (local browser date)
  const todayISO = new Date().toISOString().slice(0,10);
  checkin.min = todayISO;
  checkout.min = todayISO;

  function parseISODate(iso){
    // iso = YYYY-MM-DD
    const [y,m,d] = iso.split("-").map(Number);
    return new Date(Date.UTC(y, m-1, d)); // UTC midnight (stable maths)
  }

  function fmtMoney(n){
    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format(n) + " " + CURRENCY;
  }

  function mmdd(dateUTC){
    const m = String(dateUTC.getUTCMonth()+1).padStart(2,"0");
    const d = String(dateUTC.getUTCDate()).padStart(2,"0");
    return `${m}-${d}`;
  }

  function getNightlyRateForNight(nightUTC){
    // nightUTC represents the "night starting" date (check-in + i)
    const m = nightUTC.getUTCMonth() + 1;
    const md = mmdd(nightUTC);

    // Jul 1 – Oct 31
    if (m >= 7 && m <= 10) {
      return { rate: RATE_PEAK_WHALE, season: "July–October (Peak whale season)" };
    }

    // Xmas/Ny: Dec 8 – Jan 7 (cross-year)
    // If date is in Dec and >= start, or in Jan and <= end
    if ((m === 12 && md >= XMAS_START_MMDD) || (m === 1 && md <= XMAS_END_MMDD)) {
      return { rate: RATE_XMAS_NY, season: "Dec (2nd week) – Jan (1st week)" };
    }

    // Jan-Mar: Jan 8 – Mar 31
    if ((m === 1 && md >= JANMAR_START_MMDD) || (m === 2) || (m === 3 && md <= JANMAR_END_MMDD)) {
      return { rate: RATE_JAN_MAR, season: "Jan (2nd week) – end of March" };
    }

    return { rate: RATE_OTHER, season: "Standard dates" };
  }

  function compute(){
    errorEl.style.display = "none";
    errorEl.textContent = "";

    const ci = checkin.value;
    const co = checkout.value;

    if(!ci || !co){
      rateEl.textContent = "—";
      seasonEl.textContent = "Select dates to see pricing.";
      nightsEl.textContent = "—";
      totalEl.textContent = "—";
      return;
    }

    const ciD = parseISODate(ci);
    const coD = parseISODate(co);

    if(coD <= ciD){
      errorEl.textContent = "Check-out must be after check-in.";
      errorEl.style.display = "block";
      rateEl.textContent = "—";
      seasonEl.textContent = "";
      nightsEl.textContent = "—";
      totalEl.textContent = "—";
      return;
    }

    const nights = Math.round((coD - ciD) / (1000*60*60*24));
    const roomCount = Number(rooms.value);

    // Calculate per-night rates across stay (in case dates span seasons)
    let sumRate = 0;
    let firstNightInfo = null;
    let sameSeason = true;

    for(let i=0;i<nights;i++){
      const night = new Date(ciD.getTime() + i*(1000*60*60*24));
      const info = getNightlyRateForNight(night);
      sumRate += info.rate;
      if(!firstNightInfo) firstNightInfo = info;
      if(info.season !== firstNightInfo.season) sameSeason = false;
    }

    // If seasons vary, show average nightly rate and note
    const avgRate = Math.round(sumRate / nights);
    const total = sumRate * roomCount;

    nightsEl.textContent = String(nights);
    rateEl.textContent = fmtMoney(sameSeason ? firstNightInfo.rate : avgRate);

    seasonEl.textContent = sameSeason
      ? firstNightInfo.season
      : "Mixed seasons (total calculated per-night across your dates)";

    totalEl.textContent = fmtMoney(total);
  }

  function buildEmail(){
    const ci = checkin.value;
    const co = checkout.value;
    const roomCount = Number(rooms.value);
    const guestCount = guests.value ? Number(guests.value) : "";
    const msg = notes.value ? notes.value.trim() : "";

    const ciD = ci ? parseISODate(ci) : null;
    const coD = co ? parseISODate(co) : null;

    if(!ci || !co || !ciD || !coD || coD <= ciD){
      errorEl.textContent = "Please select valid check-in and check-out dates before sending.";
      errorEl.style.display = "block";
      return null;
    }

    const nights = Math.round((coD - ciD) / (1000*60*60*24));

    // Build per-night line items
    let lines = [];
    let sumRate = 0;

    for(let i=0;i<nights;i++){
      const night = new Date(ciD.getTime() + i*(1000*60*60*24));
      const info = getNightlyRateForNight(night);
      sumRate += info.rate;
      const y = night.getUTCFullYear();
      const m = String(night.getUTCMonth()+1).padStart(2,"0");
      const d = String(night.getUTCDate()).padStart(2,"0");
      lines.push(`${y}-${m}-${d}: ${info.rate} ${CURRENCY} (${info.season})`);
    }

    const total = sumRate * roomCount;

    const subject = encodeURIComponent(`${PROPERTY_NAME} Booking Request: ${ci} to ${co} (${roomCount} room${roomCount>1?'s':''})`);
    const body = encodeURIComponent(
`Mālō e lelei,

I would like to request a booking at ${PROPERTY_NAME}.

Check-in: ${ci}
Check-out: ${co}
Nights: ${nights}
Rooms: ${roomCount}
Guests: ${guestCount || '—'}

Pricing (per room, per night):
${lines.join('\n')}

Estimated total (nights × rooms × nightly rate): ${total} ${CURRENCY}

Message:
${msg || '—'}

Thank you.`
    );

    return `mailto:${BOOKINGS_EMAIL}?subject=${subject}&body=${body}`;
  }

  $("tgh-send").addEventListener("click", function(){
    compute();
    const link = buildEmail();
    if(link) window.location.href = link;
  });

  $("tgh-clear").addEventListener("click", function(){
    checkin.value = "";
    checkout.value = "";
    rooms.value = "1";
    guests.value = "";
    notes.value = "";
    compute();
  });

  [checkin, checkout, rooms, guests, notes].forEach(el => {
    el.addEventListener("change", compute);
    el.addEventListener("keyup", compute);
  });

  compute();
})();
</script>