703 lines
31 KiB
HTML
703 lines
31 KiB
HTML
{{/* Drop-in shortcode: quote.html – offerteformulier met items, optional, quantities, en herhaalbare secties (Websites/Cloud/Netwerk) */}}
|
||
|
||
{{/* Bronproducten uit page front matter of fallback site data */}}
|
||
{{ $products := slice }}
|
||
{{ if .Page.Params.products }}
|
||
{{ $products = .Page.Params.products }}
|
||
{{ else if site.Data.products }}
|
||
{{ $products = site.Data.products }}
|
||
{{ end }}
|
||
|
||
{{/* Optioneel: filteren op categorie via page param `productFilter` (string of array) */}}
|
||
{{ $filter := .Page.Params.productFilter }}
|
||
{{ if $filter }}
|
||
{{ $typeStr := printf "%T" $filter }}
|
||
{{ $filters := cond (eq $typeStr "[]interface {}") $filter (slice $filter) }}
|
||
{{ $products = where $products "categorie" "in" $filters }}
|
||
{{ end }}
|
||
|
||
<section class="section pt-0 mt-0">
|
||
<div class="container col-lg-10 bg-light p-4 rounded-sm">
|
||
<div class="row">
|
||
<div class="col-lg-12 px-lg-6 px-md-5 px-sm-4 mx-auto">
|
||
<form id="quote-form" class="row" novalidate>
|
||
|
||
<!-- Product-secties -->
|
||
<div class="col-lg-12 mb-3">
|
||
<h2>Stel je diensten samen</h2>
|
||
<p>Maak hieronder je keuze per dienst die wij aanbieden.</p>
|
||
{{ range $i, $p := $products }}
|
||
{{ $idx := printf "%d" $i }}
|
||
{{ $items := cond (isset $p "items") $p.items (slice) }}
|
||
{{ $optList := cond (isset $p "optional") $p.optional (slice) }}
|
||
{{ $qtyList := cond (isset $p "quantity") $p.quantity (slice) }}
|
||
|
||
<div class="product-wrap mb-4" data-wrap-idx="{{ $idx }}" data-key="{{ $p.key }}" data-base="{{ with $p.prijs }}{{ . }}{{ else }}0{{ end }}" data-categorie="{{ $p.categorie }}">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="form-check">
|
||
<input class="form-check-input me-2 prod-checkbox" type="checkbox" id="prod-{{ $idx }}" name="prod-{{ $p.key }}" data-item="item-{{ $idx }}" data-base="{{ with $p.prijs }}{{ . }}{{ else }}0{{ end }}">
|
||
<label class="form-check-label" for="prod-{{ $idx }}"><b>{{ $p.naam }}</b></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-sections d-none">
|
||
<div class="row g-3">
|
||
<div class="col-lg-8 pt-4">
|
||
|
||
{{ if $p.omschrijving }}<p class="text-muted small mb-2">{{ $p.omschrijving | markdownify }}</p>{{ end }}
|
||
|
||
{{ if gt (len $items) 0 }}
|
||
<!-- <h4 class="form-label mt-1" for="item-{{ $idx }}">Stel je <span style="text-transform: lowercase;">{{ $p.naam }}</span> samen</h4> -->
|
||
<select id="item-{{ $idx }}" name="item-{{ $p.key }}" class="form-select mt-1 item-select" data-idx="{{ $idx }}">
|
||
<option class="text-light" value="" disabled selected>{{ i18n "form-select-option" }}</option>
|
||
{{ range $j, $d := $items }}
|
||
<option value="{{ with $d.prijs }}{{ . }}{{ else }}0{{ end }}"
|
||
data-code="{{ $d.code }}"
|
||
data-service="{{ with $d.prijsService }}{{ . }}{{ else }}0{{ end }}"
|
||
data-periode="{{ with $d.prijsServicePeriode }}{{ . }}{{ else }}maand{{ end }}">
|
||
{{ if and (isset $d "prijs") (ne $d.prijs 0) }}€{{ $d.prijs }} — {{ end }}{{ $d.label }}
|
||
</option>
|
||
|
||
{{ end }}
|
||
</select>
|
||
{{ end }}
|
||
|
||
{{ if gt (len $optList) 0 }}
|
||
<div class="mt-3 optional-block">
|
||
<h6 class="d-block my-2">Optioneel:</h6>
|
||
{{ range $k, $opt := $optList }}
|
||
<div class="form-check">
|
||
<input class="form-check-input calc-extra optional-item" type="checkbox" id="opt-{{ $idx }}-{{ $k }}" name="opt-{{ $p.key }}-{{ $k }}" value="{{ with $opt.prijs }}{{ . }}{{ else }}0{{ end }}" data-service="{{ with $opt.prijsService }}{{ . }}{{ else }}0{{ end }}" data-periode="{{ with $opt.prijsServicePeriode }}{{ . }}{{ else }}maand{{ end }}" data-required-for='{{ if isset $opt "requiredFor" }}{{ $opt.requiredFor | jsonify }}{{ else }}[]{{ end }}'>
|
||
<input type="hidden" id="opt-{{ $idx }}-{{ $k }}-hidden" name="opt-{{ $p.key }}-{{ $k }}-hidden" value="0">
|
||
<label class="form-check-label pb-2" for="opt-{{ $idx }}-{{ $k }}"><b>{{ $opt.label }}</b> - {{ if and (isset $opt "prijs") (ne $opt.prijs 0) }} €{{ $opt.prijs }}{{ end }}{{ if $opt.omschrijving }} <br><small class="text-muted">{{ $opt.omschrijving | markdownify }}</small>{{ end }}</label>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
{{ end }}
|
||
|
||
{{ if gt (len $qtyList) 0 }}
|
||
<div class="mt-3 qty-block" data-idx="{{ $idx }}">
|
||
{{ range $q, $qty := $qtyList }}
|
||
<label class="form-label d-block my-2" for="qty-{{ $idx }}-{{ $q }}">
|
||
<b>{{ $qty.label }} {{ if and (isset $qty "prijs") (ne $qty.prijs 0) }} €{{ $qty.prijs }}{{ end }}</b>{{ if $qty.omschrijving }} <br><small class="text-muted">{{ $qty.omschrijving | markdownify }}</small>{{ end }}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
step="1"
|
||
value="0"
|
||
class="form-control qty-item mb-2"
|
||
data-unit="{{ with $qty.prijs }}{{ . }}{{ else }}0{{ end }}"
|
||
data-unit-service="{{ with $qty.prijsService }}{{ . }}{{ else }}0{{ end }}"
|
||
data-periode="{{ with $qty.prijsServicePeriode }}{{ . }}{{ else }}maand{{ end }}"
|
||
data-idx="{{ $idx }}"
|
||
id="qty-{{ $idx }}-{{ $q }}"
|
||
name="qty-{{ $p.key }}-{{ $q }}"
|
||
>
|
||
{{ end }}
|
||
</div>
|
||
{{ end }}
|
||
<hr class="mt-4 mb-0">
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h6 class="card-title mb-2">{{ or $p.infoTitle (printf "%s info" $p.naam) }}</h6>
|
||
{{ if isset $p "infobox" }}
|
||
<span class="text-muted small mb-0">{{ $p.infobox | markdownify }}</span>
|
||
{{ else if $p.omschrijving }}
|
||
<span class="text-muted small mb-0">{{ $p.omschrijving | markdownify }}</span>
|
||
{{ else }}
|
||
<span class="text-muted small mb-0">Selecteer opties en vul aantallen in.</span>
|
||
{{ end }}
|
||
|
||
<!-- SUBTOTAAL: sticky onderin de infobox -->
|
||
<div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center subtot-sticky">
|
||
<div class="w-100">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="text-muted small">Kosten eenmalig</span>
|
||
<strong>€<span class="product-subtotal-once" data-idx="{{ $idx }}">0</span></strong>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="text-muted small">Kosten per maand</span>
|
||
<strong>€<span class="product-subtotal-service" data-idx="{{ $idx }}">0</span></strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
|
||
<div class="col-12 my-3 d-flex align-items-center">
|
||
<p class="mb-0 h4">
|
||
Totaal eenmalig: <strong>€<span id="total-once">0</span></strong><br>
|
||
<small>Kosten per maand: <strong>€<span id="total-service">0</span></strong></small>
|
||
</p>
|
||
</div>
|
||
|
||
<hr>
|
||
<h4>Ontvang berekening en een persoonlijke offerte</h4>
|
||
<p>Laat jouw gegevens achter om de berekening met aanvullende informatie te ontvangen per mail. Ook zullen wij in contact met je komen over jouw nieuwe IT project. Wij nemen binnen 3 werkdagen contact op om alles door te nemen en een offerte op maat te maken.</p>
|
||
<p><b>In de tussentijd nog vragen?</b><br>Bel dan naar <a href="tel:+31657969491">+31 6 5796 9491</a> of stuur een email naar <a href="mailto:info@start-it.nl">info@start-it.nl</a></p>
|
||
|
||
<input type="hidden" name="estimatedTotal" id="estimatedTotal" value="0">
|
||
|
||
<!-- Honeypot tegen bots -->
|
||
<input type="text" id="company" name="company" class="d-none" tabindex="-1" autocomplete="off">
|
||
|
||
<!-- Contact -->
|
||
<div class="col-lg-6"><input type="text" name="firstName" class="form-control mb-4" placeholder="Voornaam"></div>
|
||
<div class="col-lg-6"><input type="text" name="lastName" class="form-control mb-4" placeholder="Achternaam *" required></div>
|
||
<div class="col-lg-6"><input type="email" name="email" class="form-control mb-4" placeholder="E-mail" required></div>
|
||
<div class="col-lg-6"><input type="tel" name="phone" class="form-control mb-4" placeholder="Telefoon *" required></div>
|
||
<div class="col-lg-12"><textarea name="description" class="form-control mb-4" placeholder="Aanvullende informatie over jouw project..."></textarea></div>
|
||
<div class="col-lg-12"><input type="checkbox" name="agree"><label style="padding-left: 4px;" for="agree" required>Akkoord met voorwaarden & privacybeleid</label></div>
|
||
|
||
<div class="col-12 mt-4"><button type="submit" class="btn btn-primary">Ontvang offerte</button></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<script>
|
||
(function () {
|
||
// === ESPOCRM LeadCapture endpoint ===
|
||
const ESPO_ENDPOINT = 'https://crm.start-it.nl/api/v1/LeadCapture/231344ae2852d65f41e98d99da418af8';
|
||
|
||
// --- ELEMENTS ---
|
||
const totalEl = document.getElementById('total'); // bestaand totaal (blijft bestaan)
|
||
const hiddenTotalEl = document.getElementById('estimatedTotal');
|
||
const calculateBtn = document.getElementById('calculate');
|
||
const form = document.getElementById('quote-form');
|
||
const prodCheckboxes = document.querySelectorAll('.prod-checkbox');
|
||
const extrasEls = document.querySelectorAll('.calc-extra:not(.optional-item)');
|
||
const optionalEls = document.querySelectorAll('.optional-item');
|
||
|
||
// === DECIMAAL-VEILIG PARSEN ===
|
||
function toNumberSafe(value) {
|
||
if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
|
||
let s = String(value || '').trim();
|
||
if (!s) return 0;
|
||
s = s.replace(/\s/g, '');
|
||
const hasComma = s.includes(',');
|
||
const hasDot = s.includes('.');
|
||
if (hasComma && hasDot) {
|
||
const lastComma = s.lastIndexOf(',');
|
||
const lastDot = s.lastIndexOf('.');
|
||
if (lastComma > lastDot) { s = s.replace(/\./g, ''); s = s.replace(',', '.'); }
|
||
else { s = s.replace(/,/g, ''); }
|
||
} else if (hasComma) { s = s.replace(/\./g, ''); s = s.replace(',', '.'); }
|
||
else { s = s.replace(/,/g, ''); }
|
||
const n = Number(s);
|
||
return Number.isFinite(n) ? n : 0;
|
||
}
|
||
function toQtySafe(value) { return Math.max(0, Math.floor(toNumberSafe(value))); }
|
||
|
||
// === HELPERS ===
|
||
function toIntSafe(value) { const s = String(value).replace(/[^\d\-]/g, ''); const n = parseInt(s, 10); return Number.isNaN(n) ? 0 : n; }
|
||
function getIdxFromCb(cb) { const id = cb.dataset.item; if (!id) return null; const m = id.match(/^item-(\d+)$/); return m ? m[1] : null; }
|
||
|
||
// === UI UPGRADE: voeg service-totaal bovenaan toe als die ontbreekt ===
|
||
// Bestaand totaal (id="total") blijft de "eenmalig" tonen; we voegen "per maand" eronder.
|
||
(function ensureHeaderTotals(){
|
||
if (!totalEl) return;
|
||
const parent = totalEl.closest('p') || totalEl.parentElement;
|
||
if (!parent) return;
|
||
if (!document.getElementById('total-once')) {
|
||
// Wrap het bestaande getal in een ID 'total-once' zonder de layout te breken
|
||
totalEl.id = 'total-once';
|
||
}
|
||
if (!document.getElementById('total-service')) {
|
||
const small = document.createElement('small');
|
||
small.innerHTML = 'Kosten per maand: <strong>€<span id="total-service">0</span></strong>';
|
||
parent.appendChild(document.createElement('br'));
|
||
parent.appendChild(small);
|
||
}
|
||
})();
|
||
|
||
const totalOnceEl = document.getElementById('total-once');
|
||
const totalServiceEl = document.getElementById('total-service');
|
||
|
||
// === UI UPGRADE: vervang subtotaalblok in infobox ON-THE-FLY (niet in template) ===
|
||
// We laten de bestaande container staan, maar tonen daarbinnen 2 regels.
|
||
function upgradeSubtotalsDOM() {
|
||
document.querySelectorAll('.subtot-sticky').forEach(box => {
|
||
// al geüpgraded?
|
||
if (box.querySelector('.product-subtotal-once') || box.querySelector('.product-subtotal-service')) return;
|
||
|
||
// Haal idx via een van de bestaande elementen in de buurt
|
||
const idxEl = box.closest('.product-wrap');
|
||
const idx = idxEl ? idxEl.getAttribute('data-wrap-idx') : null;
|
||
if (!idx) return;
|
||
|
||
// Maak twee regels (eenmalig + per maand)
|
||
const wrapper = document.createElement('div');
|
||
wrapper.className = 'w-100';
|
||
|
||
const row1 = document.createElement('div');
|
||
row1.className = 'd-flex justify-content-between align-items-center';
|
||
row1.innerHTML = '<span class="text-muted small">Kosten eenmalig</span><strong>€<span class="product-subtotal-once" data-idx="'+idx+'">0</span></strong>';
|
||
|
||
const row2 = document.createElement('div');
|
||
row2.className = 'd-flex justify-content-between align-items-center';
|
||
row2.innerHTML = '<span class="text-muted small">Kosten per maand</span><strong>€<span class="product-subtotal-service" data-idx="'+idx+'">0</span></strong>';
|
||
|
||
// Opruimen oude single-subtotal, maar laat de rest van de layout intact
|
||
box.innerHTML = '';
|
||
box.appendChild(wrapper);
|
||
wrapper.appendChild(row1);
|
||
wrapper.appendChild(row2);
|
||
});
|
||
}
|
||
upgradeSubtotalsDOM();
|
||
|
||
// === COLLAPSIBLE ANIMATIE: zonder d-none races ===
|
||
function prepareCollapsibles() {
|
||
document.querySelectorAll('.product-sections').forEach(sec => {
|
||
sec.classList.remove('d-none'); // niet met display:none werken
|
||
sec.classList.remove('open'); // start dicht
|
||
sec.style.maxHeight = '0px';
|
||
sec.dataset.animating = '0';
|
||
});
|
||
}
|
||
prepareCollapsibles();
|
||
|
||
function toggleSection(checkbox) {
|
||
const idx = getIdxFromCb(checkbox);
|
||
if (!idx) return;
|
||
|
||
const wrap = document.querySelector(`.product-wrap[data-wrap-idx="${idx}"]`);
|
||
const sections = wrap ? wrap.querySelector('.product-sections') : null;
|
||
const selectEl = document.getElementById(`item-${idx}`);
|
||
const qtyInputs = wrap ? wrap.querySelectorAll('.qty-item') : [];
|
||
const optChecks = wrap ? wrap.querySelectorAll('.optional-item') : [];
|
||
if (!sections) return;
|
||
|
||
if (sections.dataset.animating === '1') return;
|
||
const forceReflow = el => el.offsetHeight;
|
||
|
||
if (checkbox.checked) {
|
||
if (sections.classList.contains('open')) return;
|
||
sections.dataset.animating = '1';
|
||
|
||
sections.style.maxHeight = '0px';
|
||
sections.style.removeProperty('opacity');
|
||
forceReflow(sections);
|
||
|
||
const target = sections.scrollHeight;
|
||
sections.classList.add('open'); // opacity -> 1 via CSS
|
||
sections.style.maxHeight = target + 'px';
|
||
|
||
const onEndOpen = (e) => {
|
||
if (e.propertyName !== 'max-height') return;
|
||
sections.style.maxHeight = 'auto';
|
||
sections.dataset.animating = '0';
|
||
sections.removeEventListener('transitionend', onEndOpen);
|
||
};
|
||
sections.addEventListener('transitionend', onEndOpen);
|
||
|
||
} else {
|
||
const isClosedNow = (!sections.classList.contains('open') && (sections.style.maxHeight === '0px' || !sections.style.maxHeight));
|
||
if (isClosedNow) return;
|
||
|
||
sections.dataset.animating = '1';
|
||
|
||
const current = sections.scrollHeight;
|
||
sections.style.maxHeight = current + 'px';
|
||
sections.style.removeProperty('opacity');
|
||
forceReflow(sections);
|
||
|
||
sections.classList.remove('open');
|
||
sections.style.maxHeight = '0px';
|
||
|
||
const onEndClose = (e) => {
|
||
if (e.propertyName !== 'max-height') return;
|
||
sections.dataset.animating = '0';
|
||
sections.removeEventListener('transitionend', onEndClose);
|
||
sections.style.maxHeight = '0px';
|
||
// Reset velden
|
||
if (selectEl) selectEl.value = '0';
|
||
qtyInputs.forEach(inp => inp.value = '0');
|
||
optChecks.forEach(opt => {
|
||
opt.checked = false;
|
||
const hidden = document.getElementById(opt.id + '-hidden');
|
||
if (hidden) hidden.value = '0';
|
||
});
|
||
updateUI(); // na reset opnieuw rekenen
|
||
};
|
||
sections.addEventListener('transitionend', onEndClose);
|
||
}
|
||
}
|
||
|
||
function computeTotals() {
|
||
let once = 0; // eenmalig
|
||
let service = 0; // per maand
|
||
|
||
// extras (globaal) → eenmalig
|
||
extrasEls.forEach(el => {
|
||
if (!el.checked) return;
|
||
// globale extras tellen we als eenmalig (pas aan als je hier ook service wilt)
|
||
once += toNumberSafe(el.value);
|
||
});
|
||
|
||
// producten
|
||
prodCheckboxes.forEach(cb => {
|
||
if (!cb.checked) return;
|
||
|
||
const idx = getIdxFromCb(cb);
|
||
const baseVal = toNumberSafe(cb.dataset.base || 0);
|
||
|
||
let itemOnce = 0;
|
||
let itemSvc = 0;
|
||
|
||
if (idx) {
|
||
const selectEl = document.getElementById(`item-${idx}`);
|
||
if (selectEl) {
|
||
const sel = selectEl.options[selectEl.selectedIndex];
|
||
itemOnce = toNumberSafe(selectEl.value || 0);
|
||
itemSvc = sel ? toNumberSafe(sel.dataset.service || 0) : 0;
|
||
}
|
||
|
||
// Base en item zijn *alternatief*: als er een itemprijs is, laat base weg.
|
||
once += (itemOnce > 0 ? itemOnce : baseVal);
|
||
service += itemSvc;
|
||
|
||
const wrap = document.querySelector(`.product-wrap[data-wrap-idx="${idx}"]`);
|
||
if (wrap) {
|
||
// quantities → eenmalig + (optioneel) per maand
|
||
wrap.querySelectorAll('.qty-item').forEach(inp => {
|
||
const qty = toQtySafe(inp.value);
|
||
if (!qty) return;
|
||
const unitOnce = toNumberSafe(inp.dataset.unit || 0);
|
||
const unitSvc = toNumberSafe(inp.dataset.unitService || 0);
|
||
once += qty * unitOnce;
|
||
service += qty * unitSvc;
|
||
});
|
||
|
||
// optionals → eenmalig (uitgezonderd inbegrepen)
|
||
// optionals (eenmalig + service)
|
||
wrap.querySelectorAll('.optional-item').forEach(opt => {
|
||
if (!opt.checked) return;
|
||
|
||
const sel = selectEl ? selectEl.options[selectEl.selectedIndex] : null;
|
||
const selectedCode = sel ? sel.dataset.code : '';
|
||
let requiredFor = [];
|
||
try { requiredFor = JSON.parse(opt.dataset.requiredFor || '[]'); } catch (e) { requiredFor = []; }
|
||
|
||
if (requiredFor.indexOf(selectedCode) !== -1) return; // inbegrepen → niet rekenen
|
||
|
||
const onceVal = toNumberSafe(opt.value || 0);
|
||
const svcVal = toNumberSafe(opt.dataset.service || 0);
|
||
|
||
once += onceVal;
|
||
service += svcVal;
|
||
});
|
||
|
||
}
|
||
} else {
|
||
// Geen idx/select → alleen base
|
||
once += baseVal;
|
||
}
|
||
});
|
||
|
||
return { once, service };
|
||
}
|
||
|
||
|
||
function computeProductSubtotalPair(idx) {
|
||
let once = 0;
|
||
let service = 0;
|
||
|
||
const wrap = document.querySelector(`.product-wrap[data-wrap-idx="${idx}"]`);
|
||
if (!wrap) return { once: 0, service: 0 };
|
||
|
||
const cb = wrap.querySelector(`#prod-${idx}`);
|
||
if (!cb || !cb.checked) return { once: 0, service: 0 };
|
||
|
||
const baseVal = toNumberSafe(cb.dataset.base || 0);
|
||
|
||
// item-select
|
||
const selectEl = document.getElementById(`item-${idx}`);
|
||
let itemOnce = 0;
|
||
let itemSvc = 0;
|
||
if (selectEl) {
|
||
const sel = selectEl.options[selectEl.selectedIndex];
|
||
itemOnce = toNumberSafe(selectEl.value || 0);
|
||
itemSvc = sel ? toNumberSafe(sel.dataset.service || 0) : 0;
|
||
}
|
||
|
||
// Base en item zijn *alternatief*: als er een itemprijs is, geen base tellen.
|
||
once += (itemOnce > 0 ? itemOnce : baseVal);
|
||
service += itemSvc;
|
||
|
||
// optionals (eenmalig, behalve inbegrepen)
|
||
// optionals (eenmalig + service)
|
||
wrap.querySelectorAll('.optional-item').forEach(opt => {
|
||
if (!opt.checked) return;
|
||
|
||
const sel = selectEl ? selectEl.options[selectEl.selectedIndex] : null;
|
||
const selectedCode = sel ? sel.dataset.code : '';
|
||
let requiredFor = [];
|
||
try { requiredFor = JSON.parse(opt.dataset.requiredFor || '[]'); } catch (e) { requiredFor = []; }
|
||
|
||
if (requiredFor.indexOf(selectedCode) !== -1) return; // inbegrepen → niet rekenen
|
||
|
||
const onceVal = toNumberSafe(opt.value || 0);
|
||
const svcVal = toNumberSafe(opt.dataset.service || 0);
|
||
|
||
once += onceVal;
|
||
service += svcVal;
|
||
});
|
||
|
||
|
||
// quantities (eenmalig + periodiek)
|
||
wrap.querySelectorAll('.qty-item').forEach(inp => {
|
||
const qty = toQtySafe(inp.value);
|
||
if (!qty) return;
|
||
const unitOnce = toNumberSafe(inp.dataset.unit || 0);
|
||
const unitSvc = toNumberSafe(inp.dataset.unitService || 0);
|
||
once += qty * unitOnce;
|
||
service += qty * unitSvc;
|
||
});
|
||
|
||
return { once, service };
|
||
}
|
||
|
||
|
||
function updateProductSubtotals(idx) {
|
||
const pair = computeProductSubtotalPair(idx);
|
||
const onceSpan = document.querySelector(`.product-subtotal-once[data-idx="${idx}"]`);
|
||
const svcSpan = document.querySelector(`.product-subtotal-service[data-idx="${idx}"]`);
|
||
if (onceSpan) onceSpan.textContent = pair.once.toLocaleString('nl-NL');
|
||
if (svcSpan) svcSpan.textContent = pair.service.toLocaleString('nl-NL');
|
||
}
|
||
|
||
function updateAllProductSubtotals() {
|
||
document.querySelectorAll('.product-subtotal-once').forEach(span => {
|
||
const idx = span.getAttribute('data-idx');
|
||
updateProductSubtotals(idx);
|
||
});
|
||
}
|
||
|
||
// === UI UPDATE ===
|
||
function updateUI() {
|
||
// header totals
|
||
const { once, service } = computeTotals();
|
||
if (totalOnceEl) totalOnceEl.textContent = once.toLocaleString('nl-NL');
|
||
if (totalServiceEl) totalServiceEl.textContent = service.toLocaleString('nl-NL');
|
||
if (hiddenTotalEl) hiddenTotalEl.value = once; // hidden bewaart eenmalig (compatibel met bestaande verwerkingen)
|
||
|
||
// per product
|
||
updateAllProductSubtotals();
|
||
}
|
||
|
||
// === BINDINGS ===
|
||
prodCheckboxes.forEach(cb => {
|
||
toggleSection(cb); // initial state
|
||
cb.addEventListener('change', () => { toggleSection(cb); updateUI(); });
|
||
const idx = getIdxFromCb(cb);
|
||
if (idx) {
|
||
const selectEl = document.getElementById(`item-${idx}`);
|
||
if (selectEl) selectEl.addEventListener('change', () => updateUI());
|
||
}
|
||
});
|
||
|
||
extrasEls.forEach(el => {
|
||
const hidden = document.getElementById(el.id + '-hidden');
|
||
const sync = () => {
|
||
if (hidden) hidden.value = el.checked ? el.value : '0';
|
||
updateUI();
|
||
};
|
||
el.addEventListener('change', sync);
|
||
sync(); // init
|
||
});
|
||
|
||
optionalEls.forEach(el => {
|
||
const hidden = document.getElementById(el.id + '-hidden');
|
||
const sync = () => {
|
||
if (hidden) hidden.value = el.checked ? el.value : '0';
|
||
updateUI(); // triggert totals + subtotals
|
||
};
|
||
el.addEventListener('change', sync);
|
||
sync(); // init
|
||
});
|
||
|
||
document.querySelectorAll('.qty-item').forEach(inp => {
|
||
inp.addEventListener('input', () => {
|
||
updateUI();
|
||
const w = inp.closest('.product-wrap');
|
||
if (w) updateProductSubtotals(w.getAttribute('data-wrap-idx'));
|
||
});
|
||
});
|
||
|
||
if (calculateBtn) calculateBtn.addEventListener('click', () => updateUI());
|
||
|
||
document.querySelectorAll('.item-select').forEach(select => {
|
||
const idx = select.dataset.idx || (select.id.match(/^item-(\d+)$/) || [])[1];
|
||
if (!idx) return;
|
||
const wrap = document.querySelector(`.product-wrap[data-wrap-idx="${idx}"]`);
|
||
const optionals = wrap ? Array.from(wrap.querySelectorAll('.optional-item')) : [];
|
||
const applyState = () => {
|
||
const selectedOption = select.options[select.selectedIndex];
|
||
const selectedCode = selectedOption ? selectedOption.dataset.code : '';
|
||
optionals.forEach(opt => {
|
||
const raw = opt.dataset.requiredFor || '[]'; let requiredFor = [];
|
||
try { requiredFor = JSON.parse(raw); } catch (e) { requiredFor = []; }
|
||
const must = requiredFor.indexOf(selectedCode) !== -1;
|
||
const hidden = document.getElementById(opt.id + '-hidden');
|
||
if (must) { opt.checked = true; opt.disabled = true; if (hidden) hidden.value = '0'; }
|
||
else { opt.disabled = false; if (hidden) hidden.value = opt.checked ? opt.value : '0'; }
|
||
});
|
||
updateUI();
|
||
};
|
||
select.addEventListener('change', applyState);
|
||
applyState();
|
||
});
|
||
|
||
// Init (UI + subtotals)
|
||
updateUI();
|
||
|
||
// === SUBMIT ===
|
||
form.addEventListener('submit', async function (ev) {
|
||
ev.preventDefault();
|
||
ev.stopPropagation();
|
||
if (typeof ev.stopImmediatePropagation === 'function') ev.stopImmediatePropagation();
|
||
|
||
if (!form.checkValidity()) { form.reportValidity(); return; }
|
||
|
||
const honeypot = document.getElementById('company');
|
||
if (honeypot && honeypot.value && honeypot.value.trim() !== '') { alert('Bot detectie: formulier niet verzonden.'); return; }
|
||
|
||
const totals = computeTotals();
|
||
hiddenTotalEl.value = totals.once; // compatibel
|
||
|
||
const firstName = (form.querySelector('[name="firstName"]')?.value || '').trim();
|
||
const lastName = (form.querySelector('[name="lastName"]')?.value || '').trim();
|
||
const email = (form.querySelector('[name="email"]')?.value || '').trim();
|
||
const phone = (form.querySelector('[name="phone"]')?.value || '').trim();
|
||
const descFree = (form.querySelector('[name="description"]')?.value || '').trim();
|
||
|
||
const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
|
||
if (!emailOk) {
|
||
const emailEl = form.querySelector('[name="email"]');
|
||
if (emailEl) { emailEl.setCustomValidity('Vul een geldig e-mailadres in.'); form.reportValidity(); emailEl.setCustomValidity(''); }
|
||
return;
|
||
}
|
||
|
||
// Beschrijving multiline
|
||
const lines = [];
|
||
lines.push('Ingediend via offerteformulier');
|
||
lines.push('Voornaam: ' + firstName);
|
||
lines.push('Achternaam: ' + lastName);
|
||
lines.push('E-mail: ' + email);
|
||
lines.push('Telefoon: ' + phone);
|
||
if (descFree) lines.push('Aanvullende info: ' + descFree);
|
||
|
||
document.querySelectorAll('.product-wrap').forEach(wrap => {
|
||
const idx = wrap.getAttribute('data-wrap-idx');
|
||
const cb = wrap.querySelector('#prod-' + idx);
|
||
if (!cb || !cb.checked) return;
|
||
|
||
const titleLabel = wrap.querySelector('label[for="prod-' + idx + '"]');
|
||
const title = titleLabel ? titleLabel.textContent.trim() : ('Onderdeel #' + idx);
|
||
|
||
lines.push('');
|
||
lines.push('[' + title + ']');
|
||
|
||
// basis (eenmalig)
|
||
const base = toNumberSafe(cb.dataset.base || 0);
|
||
if (base) lines.push(' Basis: €' + base.toLocaleString('nl-NL'));
|
||
|
||
// gekozen item: toon label + service
|
||
const selectEl = document.getElementById('item-' + idx);
|
||
let serviceForThis = 0;
|
||
if (selectEl && selectEl.options && selectEl.selectedIndex >= 0) {
|
||
const opt = selectEl.options[selectEl.selectedIndex];
|
||
const txt = (opt && opt.textContent ? opt.textContent : '').trim();
|
||
if (txt) lines.push(' Keuze: ' + txt);
|
||
serviceForThis = toNumberSafe(opt?.dataset?.service || 0);
|
||
}
|
||
|
||
// optionals (eenmalig; inbegrepen overslaan)
|
||
wrap.querySelectorAll('.optional-item').forEach(optEl => {
|
||
if (!optEl.checked) return;
|
||
const lbl = wrap.querySelector('label[for="' + optEl.id + '"]');
|
||
const optTxt = lbl ? lbl.textContent.replace(/\s+/g,' ').trim() : 'Optie';
|
||
|
||
const sel = (selectEl && selectEl.options && selectEl.selectedIndex >= 0) ? selectEl.options[selectEl.selectedIndex] : null;
|
||
const selectedCode = sel && sel.dataset ? sel.dataset.code : '';
|
||
|
||
let requiredFor = [];
|
||
try { requiredFor = JSON.parse(optEl.dataset.requiredFor || '[]'); } catch(e) { requiredFor = []; }
|
||
const isIncluded = requiredFor.indexOf(selectedCode) !== -1;
|
||
|
||
const priceShown = toNumberSafe(optEl.value || 0);
|
||
lines.push(' Optioneel: ' + optTxt + (isIncluded ? ' (inbegrepen)' : (priceShown ? ' (€' + priceShown.toLocaleString('nl-NL') + ')' : '')));
|
||
});
|
||
|
||
// quantities (eenmalig)
|
||
wrap.querySelectorAll('.qty-item').forEach(q => {
|
||
const qty = toQtySafe(q.value);
|
||
if (!qty) return;
|
||
const qLab = wrap.querySelector('label[for="' + q.id + '"]');
|
||
const qTxt = qLab ? qLab.textContent.replace(/\s+/g,' ').trim() : 'Aantal-item';
|
||
const unit = toNumberSafe(q.dataset.unit || 0);
|
||
lines.push(' ' + qTxt + ': ' + qty + ' × €' + unit.toLocaleString('nl-NL') + ' = €' + (qty * unit).toLocaleString('nl-NL'));
|
||
});
|
||
|
||
// per-onderdeel subtotals
|
||
const pair = computeProductSubtotalPair(idx);
|
||
lines.push(' Kosten eenmalig: €' + pair.once.toLocaleString('nl-NL'));
|
||
lines.push(' Kosten per maand: €' + pair.service.toLocaleString('nl-NL'));
|
||
});
|
||
|
||
lines.push('');
|
||
lines.push('Totaal eenmalig: €' + totals.once.toLocaleString('nl-NL'));
|
||
lines.push('Totaal per maand: €' + totals.service.toLocaleString('nl-NL'));
|
||
|
||
const payload = {
|
||
salutationName: '',
|
||
firstName,
|
||
lastName,
|
||
middleName: '',
|
||
emailAddress: email,
|
||
phoneNumber: phone,
|
||
description: lines.join('\n')
|
||
};
|
||
|
||
try {
|
||
const res = await fetch(ESPO_ENDPOINT, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
const text = await res.text().catch(() => '');
|
||
if (!res.ok) {
|
||
if (res.status === 409 || res.status === 422 || /duplicate/i.test(text)) {
|
||
alert('We hebben dit e-mailadres al in het systeem. We koppelen je inzending aan het bestaande contact en nemen contact op.');
|
||
return;
|
||
}
|
||
throw new Error(`LeadCapture HTTP ${res.status} ${res.statusText} — ${text}`);
|
||
}
|
||
|
||
alert('Bedankt! Je aanvraag is ontvangen. We nemen zo spoedig mogelijk contact op.');
|
||
form.reset();
|
||
updateUI();
|
||
} catch (e) {
|
||
console.error('[LeadCapture] Fout:', e);
|
||
alert('Er ging iets mis bij het versturen. Probeer het later opnieuw of neem contact op.');
|
||
}
|
||
});
|
||
|
||
})();
|
||
</script>
|