---
layout: default
title: Dover Training Boat Booking
header_title: SwimTayka Dover Training Boat Booking
subheading: Book your own training place for Friday 29 May to Sunday 31 May 2026.
show_mode_banner: true
---
<style>
:root {
  --muted: #506680;
  --ok: #0f8f3a;
  --warn: #b06500;
  --danger: #b42318;
  --radius: 12px;
  --shadow: 0 8px 22px rgba(12, 40, 74, 0.08);
}
.container { width: min(1080px, 92%); margin: 0 auto; }
.notice, .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.notice { padding: 1rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.boats { display: grid; gap: .9rem; }
.boat-card { padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.boat-card.held { border-left: 6px solid var(--warn); }
.boat-card.open { border-left: 6px solid var(--ok); }
.boat-card.full { border-left: 6px solid var(--danger); opacity: .92; }
.row { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.meta { color: var(--muted); font-size: .93rem; }
.pill { font-size: .78rem; border-radius: 999px; padding: .2rem .55rem; font-weight: 700; }
.pill.open { background: #e6f6ea; color: #0b6b2b; }
.pill.held { background: #fff4e6; color: #8a5300; }
.pill.full { background: #fde8e8; color: #8f1f1f; }
.bookings { margin: .6rem 0 0; padding-left: 1rem; color: #2d425a; }
.panel { padding: 1rem; height: fit-content; }
label { display: block; font-weight: 600; margin: .55rem 0 .2rem; }
input, select { width: 100%; padding: .62rem; border-radius: 8px; border: 1px solid #bac9db; }
.checkbox { margin: .65rem 0; display: flex; gap: .55rem; align-items: flex-start; }
.checkbox input { width: auto; margin-top: .22rem; }
button { width: 100%; border: none; background: var(--brand); color: #fff; padding: .72rem; border-radius: 8px; font-weight: 700; cursor: pointer; }
button:hover { background: var(--brand-dark); }
#message.error { color: var(--danger); }
#message.success { color: var(--ok); }
.small { color: var(--muted); font-size: .88rem; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
</style>
<div class="container"><section class="notice">
      <h2>How team-priority works</h2>
      <p><strong>Team-priority period:</strong> up to and including <strong>Monday 25 May 2026, 23:59</strong> (local time).</p>
      <ul>
        <li>During team-priority, the first swimmer from a team to book on a boat holds that boat for their team.</li>
        <li>After the deadline, all remaining standard and reserve places open to all teams.</li>
        <li>Expected cost is approximately <strong>£100</strong>; your team captain will confirm the final amount and collect cash directly.</li>
      </ul>
      <p class="small">Demo mode fallback: if Supabase credentials are not configured, bookings are stored in <code>localStorage</code>.</p>
    </section>

    <div class="grid">
      <section>
        <h2>Boat sessions</h2>
        <div id="boatCards" class="boats"></div>
      </section>

      <aside class="panel">
        <h2>Book a place</h2>
        <form id="bookingForm">
          <label for="swimmerName">Name</label>
          <input id="swimmerName" required maxlength="120" />

          <label for="email">Email</label>
          <input id="email" type="email" required maxlength="200" />

          <label for="team">Team</label>
          <select id="team" required></select>

          <label for="boat">Boat session</label>
          <select id="boat" required></select>

          <label for="seatType">Seat type</label>
          <select id="seatType" required>
            <option value="standard">Standard place</option>
            <option value="reserve">Reserve place</option>
          </select>

          <div class="checkbox">
            <input id="paymentAgreed" type="checkbox" required />
            <label for="paymentAgreed">I agree I will pay my team captain directly in cash. The expected cost is about £100 and the captain will confirm the final amount.</label>
          </div>

          <button id="submitButton" type="submit">Submit booking</button>
          <p id="message" role="status" aria-live="polite"></p>
          <p class="small">Note: stronger production protection should use server-side capacity checks (for example Supabase RPC functions) to avoid race-condition double bookings.</p>
        </form>
      </aside>
    </div></div>
<!-- Configure these for Supabase mode. Leave empty for local demo mode. -->
  <script>
    window.APP_CONFIG = {
      SUPABASE_URL: "",
      SUPABASE_ANON_KEY: ""
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  <script>
    const TRAINING_MENU_VISIBLE_FROM_ISO = "2026-05-23T10:00:00Z";
    const TRAINING_MENU_VISIBLE_UNTIL_ISO = "2026-05-26T20:00:00Z";
    const TEAM_PRIORITY_DEADLINE_ISO = "2026-05-25T23:59:00";
    const STANDARD_CAPACITY = 6;
    const RESERVE_CAPACITY = 2;

    const teams = [
      "SwimTayka - Seal the Deal", "Team 2", "Team 3", "Team 4", "Team 5",
      "Team 6", "Team 7", "Team 8", "Team 9", "Guest / reserve swimmer"
    ];

    const initialBoats = [
      { id: 1, name: "Friday day training boat", session_date: "2026-05-29", start_time: "14:00", end_time: "16:00", notes: "Daylight coaching session" },
      { id: 2, name: "Friday night training boat", session_date: "2026-05-29", start_time: "20:30", end_time: "22:30", notes: "Night swim practice" },
      { id: 3, name: "Saturday day training boat A", session_date: "2026-05-30", start_time: "10:00", end_time: "12:00", notes: "Morning session A" },
      { id: 4, name: "Saturday day training boat B", session_date: "2026-05-30", start_time: "13:00", end_time: "15:00", notes: "Afternoon session B" },
      { id: 5, name: "Saturday night training boat", session_date: "2026-05-30", start_time: "20:30", end_time: "22:30", notes: "Night swim practice" },
      { id: 6, name: "Sunday morning training boat", session_date: "2026-05-31", start_time: "09:00", end_time: "11:00", notes: "Final weekend session" }
    ];

    const state = { boats: [], bookings: [], useSupabase: false, supabase: null };

    const byId = (id) => document.getElementById(id);
    const formatDate = (d) => new Date(d + "T00:00:00").toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short", year: "numeric" });
    const isTeamPriorityMode = () => new Date() <= new Date(TEAM_PRIORITY_DEADLINE_ISO);

    
    function updateTrainingMenuVisibility() {
      const link = byId("doverTrainingNavLink");
      if (!link) return;
      const now = new Date();
      const visibleFrom = new Date(TRAINING_MENU_VISIBLE_FROM_ISO);
      const visibleUntil = new Date(TRAINING_MENU_VISIBLE_UNTIL_ISO);
      if (now < visibleFrom || now > visibleUntil) {
        link.style.display = "none";
      }
    }

    function bookingCounts(boatId) {
      const active = state.bookings.filter(b => b.boat_id === boatId && b.status === "confirmed");
      return {
        standard: active.filter(b => b.seat_type === "standard").length,
        reserve: active.filter(b => b.seat_type === "reserve").length,
        active
      };
    }

    function teamHoldingBoat(boatId) {
      const confirmed = state.bookings
        .filter(b => b.boat_id === boatId && b.status === "confirmed")
        .sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
      return confirmed.length ? confirmed[0].team_id : null;
    }

    function boatStatus(boat) {
      const counts = bookingCounts(boat.id);
      const isFull = counts.standard >= STANDARD_CAPACITY && counts.reserve >= RESERVE_CAPACITY;
      if (isFull) return { label: "Full", cls: "full" };
      const holdingTeam = teamHoldingBoat(boat.id);
      if (isTeamPriorityMode() && holdingTeam) return { label: `Held for ${holdingTeam}`, cls: "held" };
      return { label: "Open", cls: "open" };
    }

    function canBook(boatId, teamId, seatType) {
      const counts = bookingCounts(boatId);
      if (seatType === "standard" && counts.standard >= STANDARD_CAPACITY) return { ok: false, reason: "Standard places are full for this boat." };
      if (seatType === "reserve" && counts.reserve >= RESERVE_CAPACITY) return { ok: false, reason: "Reserve places are full for this boat." };

      if (isTeamPriorityMode()) {
        const holder = teamHoldingBoat(boatId);
        if (holder && holder !== teamId) {
          return { ok: false, reason: `This boat is currently held for ${holder} during team-priority.` };
        }
      }
      return { ok: true };
    }

    function render() {
      byId("modeBanner").textContent = isTeamPriorityMode()
        ? "Current mode: TEAM-PRIORITY (boats are held by first-booking team until 25 May 2026, 23:59)."
        : "Current mode: OPEN BOOKING (remaining places are open to all teams).";

      const boatCards = byId("boatCards");
      boatCards.innerHTML = "";
      state.boats.forEach(boat => {
        const counts = bookingCounts(boat.id);
        const status = boatStatus(boat);
        const card = document.createElement("article");
        card.className = `boat-card ${status.cls}`;
        card.innerHTML = `
          <div class="row">
            <h3>${boat.name}</h3>
            <span class="pill ${status.cls}">${status.label}</span>
          </div>
          <p class="meta">${formatDate(boat.session_date)} · ${boat.start_time}–${boat.end_time}</p>
          <p class="meta">${boat.notes || "No notes"}</p>
          <p><strong>Standard places:</strong> ${counts.standard} / ${STANDARD_CAPACITY}</p>
          <p><strong>Reserve places:</strong> ${counts.reserve} / ${RESERVE_CAPACITY}</p>
          <p><strong>Current bookings:</strong></p>
          <ul class="bookings">${counts.active.length
            ? counts.active.map(b => `<li>${b.swimmer_name} (${b.team_id}, ${b.seat_type})</li>`).join("")
            : "<li>No bookings yet</li>"}</ul>
        `;
        boatCards.appendChild(card);
      });

      const teamSel = byId("team");
      const boatSel = byId("boat");
      if (!teamSel.options.length) {
        teams.forEach(t => teamSel.add(new Option(t, t)));
      }

      const selectedTeam = teamSel.value || teams[0];
      const prevBoat = Number(boatSel.value);
      boatSel.innerHTML = "";
      state.boats.forEach(boat => {
        const check = canBook(boat.id, selectedTeam, byId("seatType").value || "standard");
        const option = new Option(`${boat.name} (${boat.session_date} ${boat.start_time})`, boat.id, false, prevBoat === boat.id);
        option.disabled = !check.ok;
        if (!check.ok) option.text += " — unavailable";
        boatSel.add(option);
      });
    }

    function getLocalBookings() {
      return JSON.parse(localStorage.getItem("swimtayka_bookings") || "[]");
    }
    function setLocalBookings(data) {
      localStorage.setItem("swimtayka_bookings", JSON.stringify(data));
    }

    async function loadData() {
      const { SUPABASE_URL, SUPABASE_ANON_KEY } = window.APP_CONFIG || {};
      state.useSupabase = Boolean(SUPABASE_URL && SUPABASE_ANON_KEY && window.supabase);
      if (state.useSupabase) {
        try {
          state.supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
          const { data: boats, error: boatsErr } = await state.supabase.from("boats").select("*").order("session_date").order("start_time");
          const { data: bookings, error: bookingsErr } = await state.supabase.from("boat_bookings").select("*").eq("status", "confirmed");
          if (boatsErr || bookingsErr) throw new Error("Could not load Supabase data. Check credentials and SQL setup.");
          state.boats = boats;
          state.bookings = bookings;
          return;
        } catch (err) {
          console.warn("Unable to communicate with Supabase. Falling back to local storage.", err);
        }
      }
      state.boats = initialBoats;
      state.bookings = getLocalBookings();
    }

    async function persistBooking(booking) {
      if (state.useSupabase) {
        const { error } = await state.supabase.from("boat_bookings").insert(booking);
        if (error) throw new Error(error.message);
      } else {
        const all = getLocalBookings();
        all.push(booking);
        setLocalBookings(all);
      }
    }

    function setMessage(text, type = "") {
      const el = byId("message");
      el.textContent = text;
      el.className = type;
    }

    async function onSubmit(e) {
      e.preventDefault();
      setMessage("");
      const booking = {
        swimmer_name: byId("swimmerName").value.trim(),
        email: byId("email").value.trim().toLowerCase(),
        team_id: byId("team").value,
        boat_id: Number(byId("boat").value),
        seat_type: byId("seatType").value,
        payment_agreed: byId("paymentAgreed").checked,
        status: "confirmed",
        created_at: new Date().toISOString()
      };

      if (!booking.payment_agreed) {
        setMessage("You must agree to pay your team captain in cash.", "error");
        return;
      }

      const duplicate = state.bookings.some(b =>
        b.status === "confirmed" &&
        b.boat_id === booking.boat_id &&
        b.email.toLowerCase() === booking.email
      );
      if (duplicate) {
        setMessage("A confirmed booking already exists for this email on this boat.", "error");
        return;
      }

      const permission = canBook(booking.boat_id, booking.team_id, booking.seat_type);
      if (!permission.ok) {
        setMessage(permission.reason, "error");
        return;
      }

      byId("submitButton").disabled = true;
      try {
        await persistBooking(booking);
        await loadData();
        render();
        byId("bookingForm").reset();
        setMessage("Booking confirmed. Please pay your captain directly in cash (final amount confirmed by captain).", "success");
      } catch (err) {
        setMessage(`Could not save booking: ${err.message}`, "error");
      } finally {
        byId("submitButton").disabled = false;
      }
    }

    function wireEvents() {
      byId("team").addEventListener("change", render);
      byId("seatType").addEventListener("change", render);
      byId("bookingForm").addEventListener("submit", onSubmit);
    }

    (async () => {
      try {
        await loadData();
        wireEvents();
        updateTrainingMenuVisibility();
        render();
      } catch (err) {
        setMessage(err.message, "error");
      }
    })();
  </script>