Embed

<div class="vehicle-wrapper">
  <div class="logo-container">
    <img src="https://i.imgur.com/BOqyHHr.jpeg" alt="Taxi Snel Thuis logo">
  </div>

  <div class="vehicle-container">
    <h2>🚘 Kies je voertuig</h2>
    <p>De prijs wordt automatisch berekend op basis van afstand, voertuigtype en aantal personen.</p>

    <p class="spoed-info">
      Ritten die binnen <strong>4,5 uur</strong> voor vertrek worden geboekt, worden beschouwd als <strong>spoedritten</strong>.
    </p>

    
    <div class="vehicle" id="standaard" onclick="selectVehicle('standaard')">
      <span class="icon">🚗</span>
      <h3>Standaard Taxi</h3>
      <p id="prijs-standaard">Nog niet berekend</p>
    </div>

    <div class="vehicle" id="black" onclick="selectVehicle('black')">
      <span class="icon">🖤</span>
      <h3>Taxi Snel Thuis Black</h3>
      <p id="prijs-black">Nog niet berekend</p>
    </div>

    <div class="vehicle" id="vip" onclick="selectVehicle('vip')">
      <span class="icon">💎</span>
      <h3>VIP Luxe</h3>
      <p id="prijs-vip">Nog niet berekend</p>
    </div>

    
    <div id="extraOptionsBox" class="extra-options" style="display:none;">
      <h4>Extra opties</h4>

      
      <label class="select-label" id="vipExtraWrap" style="display:none;">
        VIP-treatments (aantal extra personen):
        <select id="vipExtraPersons">
          <option value="0" selected>+0 personen</option>
          <option value="1">+1 persoon</option>
          <option value="2">+2 personen</option>
          <option value="3">+3 personen</option>
        </select>
      </label>

      <div id="extraOptionsList"></div>
    </div>

    <button id="volgende-knop" onclick="opslaanEnVerder()" disabled>Volgende ➜</button>
  </div>
</div>

<script>
const apiKey = "AIzaSyDDBdVENep8G9ajmu7R-gx1qHGDfZuUCyI";
let geselecteerdVoertuig = "";
let laatsteAfstand = 0;

// ---------- Helpers ----------
function enableNextIfPriced() {
  const s = sessionStorage.getItem("price-standaard");
  const b = sessionStorage.getItem("price-black");
  const v = sessionStorage.getItem("price-vip");
  document.getElementById("volgende-knop").disabled = !(s && b && v);
}

function enforceNoneRule(container) {
  const all = [...container.querySelectorAll("input[type=checkbox]")];
  const none = all.find(i => i.dataset.none === "1");
  if (!none) return;
  if (none.checked) {
    all.forEach(i => { if (i !== none) i.checked = false; });
  } else {
    if (all.some(i => i !== none && i.checked)) none.checked = false;
  }
}

// Max 1 uit water/fris (groep A) en max 1 uit koffie (groep B)
function enforceVipDrinks(container) {
  const all = [...container.querySelectorAll("input[type=checkbox]")];
  const none = all.find(i => i.dataset.none === "1");
  const grpA = all.filter(i => i.dataset.group === "bevA");   // Water / Frisdrank
  const grpB = all.filter(i => i.dataset.group === "coffee"); // Koffie

  if (none && none.checked) { all.forEach(i => { if (i !== none) i.checked = false; }); return; }
  if (grpA.filter(i => i.checked).length > 1) {
    const last = grpA.find(i => i === document.activeElement);
    grpA.forEach(i => { if (i !== last) i.checked = false; });
  }
  if (grpB.filter(i => i.checked).length > 1) {
    const last = grpB.find(i => i === document.activeElement);
    grpB.forEach(i => { if (i !== last) i.checked = false; });
  }
}

function onOptionChange() {
  berekenPrijs();
}

// ---------- UI build ----------
function selectVehicle(type) {
  geselecteerdVoertuig = type;
  document.querySelectorAll('.vehicle').forEach(v => v.classList.remove('selected'));
  document.getElementById(type).classList.add('selected');

  const extraBox = document.getElementById("extraOptionsBox");
  const list = document.getElementById("extraOptionsList");
  const vipExtraWrap = document.getElementById("vipExtraWrap");
  list.innerHTML = "";
  extraBox.style.display = "none";
  vipExtraWrap.style.display = "none";

  let opties = [];
  if (type === "black") {
    // <<< FIX: objecten + wifi + 'Geen extra’s' als none >>>
    opties = [
      { label: "Geen extra’s", none: true },
      { label: "Wifi aan boord" },
      { label: "Eigen muziek" },
      { label: "Stille rit (Silent driver)" }
    ];
  } else if (type === "vip") {
    opties = [
      {label:"Geen extra’s", none:true},
      {label:"Water", group:"bevA"},
      {label:"Frisdrank", group:"bevA"},
      {label:"Koffie", group:"coffee"},
      {label:"Eigen muziek"},
      {label:"Stille rit"}
    ];
  }

  if (opcionesHeeftItems(optes=opciones=opties)) {} // placeholder to avoid accidental edits
  if (opcionesHeeftItems(opties)) {
    opties.forEach(item => {
      const text = (typeof item === "string") ? item : item.label;
      const label = document.createElement("label");
      label.className = "checkbox-option";
      const input = document.createElement("input");
      input.type = "checkbox";
      input.value = text;
      if (typeof item === "object" && item.group) input.dataset.group = item.group;
      if (typeof item === "object" && item.none)  input.dataset.none  = "1";

      label.appendChild(input);
      label.appendChild(document.createTextNode(" " + text));
      list.appendChild(label);
    });

    // Listeners
    list.querySelectorAll("input[type=checkbox]").forEach(cb => {
      cb.addEventListener("change", () => {
        if (type === "vip") enforceVipDrinks(list);
        else enforceNoneRule(list);
        onOptionChange();
      });
    });

    extraBox.style.display = "block";

    if (type === "vip") {
      vipExtraWrap.style.display = "block";
      document.getElementById("vipExtraPersons").addEventListener("change", onOptionChange);
    }
  }

  berekenPrijs();
}

// kleine helper om lege arrays te skippen
function opcionesHeeftItems(arr){ return Array.isArray(arr) && arr.length > 0; }

// ---------- Berekening ----------
async function berekenPrijs() {
  const pickup      = sessionStorage.getItem("pickup");
  const stop        = sessionStorage.getItem("stop");          // optioneel
  const destination = sessionStorage.getItem("destination");
  const datetime    = new Date(sessionStorage.getItem("datetime"));

  let data = {};
  try { data = JSON.parse(sessionStorage.getItem("pricingData") || "{}"); } catch {}

  const startFee      = data.startFee      || 2.50;
  const baseRate      = data.baseRate      || 1.40;
  const blackFactor   = data.blackFactor   || 1.20;
  const vipFactor     = data.vipFactor     || 1.28;
  const passengerFactor = data.passengerFactor || 1.0;
  const baggageFee    = data.baggageFee    || 0;
  const tripTypeFactor= data.tripTypeFactor|| 1.0;

  const now = new Date();
  const diffHours = (datetime - now) / 36e5;
  const spoedFactor = diffHours <= 4.5 ? 1.25 : 1;

  let distance = await berekenAfstand(pickup, stop, destination);
  if (!distance) {
    if (laatsteAfstand > 0) distance = laatsteAfstand;
    else { console.warn("Afstand onbekend"); return; }
  }
  distance = Math.max(distance, 7);
  laatsteAfstand = distance;

  const vipExtraSel = document.getElementById("vipExtraPersons");
  const n = vipExtraSel ? Number(vipExtraSel.value||0) : 0;
  let vipExtraFee = 0;
  if (n >= 1) vipExtraFee += 15;
  if (n >= 2) vipExtraFee += 10;
  if (n >= 3) vipExtraFee += 7.5;

  const baseCalc = (factor) =>
    (startFee + distance * baseRate) * factor * passengerFactor * spoedFactor * tripTypeFactor + baggageFee;

  const prijsStandaard = baseCalc(1.0);
  const prijsBlack     = baseCalc(blackFactor);
  const prijsVip       = baseCalc(vipFactor) + vipExtraFee;

  const prijzen = {
    standaard: prijsStandaard.toFixed(2),
    black:     prijsBlack.toFixed(2),
    vip:       prijsVip.toFixed(2)
  };

  document.getElementById("prijs-standaard").innerText = "€ " + prijzen.standaard;
  document.getElementById("prijs-black").innerText     = "€ " + prijzen.black;
  document.getElementById("prijs-vip").innerText       = "€ " + prijzen.vip;

  Object.entries(prijzen).forEach(([k, v]) => sessionStorage.setItem("price-" + k, v));
  sessionStorage.setItem("distance", distance);

  enableNextIfPriced();
}

async function berekenAfstand(pickup, stop, destination) {
  if (!(window.google && google.maps && google.maps.DistanceMatrixService)) {
    await new Promise(r => setTimeout(r, 200));
    if (!(window.google && google.maps && google.maps.DistanceMatrixService)) {
      await new Promise(r => setTimeout(r, 400));
    }
  }
  try {
    const service = new google.maps.DistanceMatrixService();
    const response = await new Promise((resolve, reject) => {
      service.getDistanceMatrix({
        origins: [pickup],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC
      }, (res, status) => {
        if (status !== "OK") reject(status);
        else resolve(res);
      });
    });
    return response.rows[0].elements[0].distance.value / 1000;
  } catch (e) {
    console.error("❌ Fout bij afstand berekening:", e);
    return null;
  }
}

// ---------- Opslaan & verder ----------
function opslaanEnVerder() {
  if (!geselecteerdVoertuig) { alert("Selecteer een voertuigtype."); return; }
  const prijs = sessionStorage.getItem("price-" + geselecteerdVoertuig);
  if (!prijs) { alert("Prijzen worden nog berekend. Een ogenblikje en probeer opnieuw."); return; }

  const geselecteerde = [...document.querySelectorAll('#extraOptionsList input:checked')]
    .map(x => x.value);
  const extras = geselecteerde.length ? geselecteerde : ["Geen"];

  const vipExtraSel = document.getElementById("vipExtraPersons");
  const vipExtra = vipExtraSel ? Number(vipExtraSel.value || 0) : 0;

  sessionStorage.setItem("vehicleType", geselecteerdVoertuig);
  sessionStorage.setItem("totalPrice", prijs);
  sessionStorage.setItem("extraOptions", JSON.stringify(extras));
  sessionStorage.setItem("vipExtraPersons", String(vipExtra));

  window.location.href = "https://alltaxisnelthuis.com/contact-gegevens";
}

// ---------- Auto-init ----------
function safeAutoInit() {
  if (!geselecteerdVoertuig) berekenPrijs();
}
document.addEventListener("visibilitychange", () => { if (!document.hidden) berekenPrijs(); });
window.addEventListener("focus", berekenPrijs);
window.addEventListener("orientationchange", () => setTimeout(berekenPrijs, 300));
document.addEventListener("DOMContentLoaded", safeAutoInit);
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
body {background: radial-gradient(circle at center,#0a0a0a,#1a1a1a);color:#fff;font-family:'Poppins',sans-serif;text-align:center;margin:0;padding:0;}
.vehicle-wrapper {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:15px;min-height:100vh;padding:40px 20px;}
.logo-container img {max-width:200px;border-radius:12px;filter:drop-shadow(0 0 25px rgba(255,215,0,0.5));}
.vehicle-container {max-width:600px;width:100%;background:linear-gradient(180deg,rgba(30,30,30,0.95),rgba(0,0,0,0.98));padding:35px;border-radius:20px;box-shadow:0 0 40px rgba(255,215,0,0.25);border:1px solid rgba(255,215,0,0.3);margin-top:-30px;}
.vehicle-container h2 {color:gold;font-size:1.8rem;}
.vehicle-container p {font-size:1rem;color:#f2f2f2;}
.spoed-info {font-size:0.95em;color:gold;margin-top:10px;border-top:1px solid gold;padding-top:8px;line-height:1.5;}
.vehicle {background:rgba(40,40,40,0.8);margin:15px 0;padding:20px;border-radius:10px;cursor:pointer;transition:0.3s;}
.vehicle:hover {background:rgba(255,215,0,0.15);transform:translateY(-3px);}
.vehicle.selected {border:2px solid gold;background:rgba(255,215,0,0.2);box-shadow:0 0 20px rgba(255,215,0,0.3);}
.vehicle .icon {font-size:2rem;display:block;}
.vehicle h3 {color:gold;margin:8px 0 5px;}
.vehicle p {font-size:1.1rem;margin:0;}
#volgende-knop {margin-top:25px;padding:15px 25px;border:none;border-radius:10px;background:linear-gradient(90deg,gold,#ffb700);color:#000;font-weight:600;font-size:1.05rem;cursor:pointer;transition:0.3s;box-shadow:0 0 15px rgba(255,215,0,0.3);}
#volgende-knop:hover {background:#000;color:gold;border:1px solid gold;transform:scale(1.03);}
#volgende-knop:disabled {opacity:0.5;cursor:not-allowed;}

.extra-options {margin-top:15px;text-align:left;border-top:1px solid gold;padding-top:10px;}
.extra-options h4 {color:gold;margin-bottom:10px;}
.checkbox-option {display:block;margin:6px 0;color:#fff;font-size:0.95rem;cursor:pointer;}
.checkbox-option input {margin-right:8px;transform:scale(1.2);}

/* --- Alleen dropdown styling (VIP extra personen) --- */
.select-label {display:block;color:#fff;margin:8px 0 10px;}
.select-label select{
  width:100%;
  background:#0b0b0b !important;
  color:#ffd700 !important;
  border:1px solid rgba(255,215,0,0.6);
  border-radius:8px;
  padding:10px 12px;
  font-family:'Poppins',sans-serif;
  -webkit-appearance:none !important;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  box-shadow: inset 0 0 0 1000px #0b0b0b;
}
.select-label select:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,215,0,0.35);
}
.select-label option{
  background:#0b0b0b !important;
  color:#ffffff !important;
}

/* iOS fallback */
@supports (-webkit-touch-callout: none) {
  .select-label select{ background-color:#0b0b0b !important; color:#ffd700 !important; }
  .select-label option{ background-color:#0b0b0b !important; color:#ffffff !important; }
}
</style>

TaxiSnelThuis

TaxiSnelThuis is a newly launched taxi service based in Rijen, Netherlands, offering an online booking platform that automatically calculates travel distance between pickup locations and final destinations. As a startup, the company focuses on providing convenient, distance‑aware ride scheduling for local customers.