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 – October 31
  const RATE_XMAS_NY   = 300;  // December 1 – January 14
  const RATE_OTHER     = 250;  // All other dates

  // Christmas / New Year period
  // December 1 – January 14
  const XMAS_START_MMDD = "12-01";
  const XMAS_END_MMDD   = "01-14";

  // ==============================

  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 1–Jan 14:
        ${RATE_XMAS_NY} ${CURRENCY} •

        All 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 minimum date to today
  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));
  }

  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
    const m = nightUTC.getUTCMonth() + 1;
    const md = mmdd(nightUTC);

    // July 1 – October 31
    if (m >= 7 && m <= 10) {

      return {
        rate: RATE_PEAK_WHALE,
        season: "July–October (Peak whale season)"
      };

    }

    // December 1 – January 14
    // Cross-year Christmas / New Year period
    if (
      (m === 12 && md >= XMAS_START_MMDD) ||
      (m === 1 && md <= XMAS_END_MMDD)
    ) {

      return {
        rate: RATE_XMAS_NY,
        season: "December 1 – January 14"
      };

    }

    // All other dates
    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 each night's rate
    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;
      }

    }

    // Average nightly rate if booking crosses seasons
    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 pricing
    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>