{"id":224,"date":"2026-08-27T21:27:11","date_gmt":"2026-08-27T21:27:11","guid":{"rendered":"https:\/\/test1.get-in-touch-test.nl\/?page_id=224"},"modified":"2026-08-27T21:30:28","modified_gmt":"2026-08-27T21:30:28","slug":"afspraak-maken","status":"publish","type":"page","link":"https:\/\/test1.get-in-touch-test.nl\/?page_id=224","title":{"rendered":"Afspraak maken"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"224\" class=\"elementor elementor-224\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1658fcb e-flex e-con-boxed e-con e-parent\" data-id=\"1658fcb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68eb2e0 elementor-widget elementor-widget-shortcode\" data-id=\"68eb2e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div id=\"be-booking-756249\" class=\"bef-booker\" data-api=\"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=\/bookingease-public\/v1\" data-nonce=\"ef921b16a7\">\n            <div class=\"bef-head\"><span>ONLINE BOEKEN<\/span><h2>Plan je volgende knipbeurt<\/h2><p>Kies je behandeling, barbier en een vrij moment.<\/p><\/div>\n            <div class=\"bef-progress\"><i class=\"active\">1<\/i><i>2<\/i><i>3<\/i><i>4<\/i><\/div>\n            <div class=\"bef-alert\" hidden><\/div>\n            <section data-step=\"1\"><h3>Kies een behandeling<\/h3><div class=\"bef-options\" data-services><em>Behandelingen laden\u2026<\/em><\/div><\/section>\n            <section data-step=\"2\" hidden><h3>Kies je barbier<\/h3><div class=\"bef-options\" data-staff><\/div><div class=\"bef-nav\"><button type=\"button\" data-back>Terug<\/button><\/div><\/section>\n            <section data-step=\"3\" hidden><h3>Kies datum en tijd<\/h3><label class=\"bef-date\">Datum<input type=\"date\" data-date><\/label><div class=\"bef-slots\" data-slots><em>Kies eerst een datum.<\/em><\/div><div class=\"bef-nav\"><button type=\"button\" data-back>Terug<\/button><\/div><\/section>\n            <section data-step=\"4\" hidden><h3>Jouw gegevens<\/h3><form data-form><div class=\"bef-grid\"><label>Voornaam<input required name=\"firstName\" autocomplete=\"given-name\"><\/label><label>Achternaam<input required name=\"lastName\" autocomplete=\"family-name\"><\/label><label>E-mailadres<input required type=\"email\" name=\"email\" autocomplete=\"email\"><\/label><label>Telefoonnummer<input required type=\"tel\" name=\"phone\" autocomplete=\"tel\"><\/label><\/div><input class=\"bef-hp\" tabindex=\"-1\" autocomplete=\"off\" name=\"website\"><div class=\"bef-summary\" data-summary><\/div><div class=\"bef-nav\"><button type=\"button\" data-back>Terug<\/button><button class=\"bef-primary\" type=\"submit\">Afspraak aanvragen<\/button><\/div><\/form><\/section>\n            <section data-step=\"5\" hidden class=\"bef-success\"><b>\u2713<\/b><h3>Afspraak aangevraagd<\/h3><p data-success><\/p><a class=\"bef-home\" href=\"https:\/\/test1.get-in-touch-test.nl\/\">\u2190 Terug naar de website<\/a><\/section>\n        <\/div>\n        <style>\n        #be-booking-756249{--red:#d71920;--blue:#153e75;--ink:#111827;--muted:#667085;max-width:920px;margin:0 auto;background:#fff;color:var(--ink);border-radius:22px;box-shadow:0 24px 70px rgba(10,25,50,.16);overflow:hidden;font-family:Inter,Arial,sans-serif}.bef-head{padding:38px 42px 30px;background:linear-gradient(120deg,#081b33,var(--blue));color:#fff}.bef-head span{font-size:12px;font-weight:800;letter-spacing:.18em;color:#ff5960}.bef-head h2{margin:8px 0 6px;font-size:clamp(28px,4vw,46px);line-height:1.05;color:#fff}.bef-head p{margin:0;color:#dbe7f5}.bef-progress{display:flex;gap:8px;padding:20px 42px 0}.bef-progress i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edf1f6;color:#718096;font-style:normal;font-weight:800}.bef-progress i.active{background:var(--red);color:#fff}.bef-booker section{padding:26px 42px 38px}.bef-booker h3{margin:0 0 18px;font-size:22px}.bef-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bef-card{appearance:none;text-align:left;border:1px solid #dfe5ec;background:#fff;border-radius:14px;padding:17px;cursor:pointer;transition:.18s}.bef-card:hover,.bef-card.selected{border-color:var(--red);box-shadow:0 7px 22px rgba(215,25,32,.12);transform:translateY(-1px)}.bef-card strong{display:block;font-size:16px}.bef-card small{display:block;margin-top:5px;color:var(--muted)}.bef-date{display:block;max-width:330px;font-weight:700}.bef-date input,.bef-grid input{display:block;width:100%;box-sizing:border-box;margin-top:7px;border:1px solid #ccd4df;border-radius:10px;padding:12px;font:inherit}.bef-slots{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.bef-slot{border:1px solid #cdd6e1;background:#fff;border-radius:9px;padding:10px 14px;font-weight:750;cursor:pointer}.bef-slot:hover{border-color:var(--blue);background:#eff6ff}.bef-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.bef-grid label{font-size:14px;font-weight:700}.bef-nav{display:flex;justify-content:space-between;gap:10px;margin-top:24px}.bef-nav button{border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer}.bef-nav .bef-primary{margin-left:auto;border-color:var(--red);background:var(--red);color:#fff}.bef-summary{margin-top:20px;padding:14px 16px;border-left:4px solid var(--blue);background:#f1f5f9;border-radius:8px}.bef-alert{margin:20px 42px 0;padding:12px 14px;border-radius:10px;background:#fff1f2;color:#a30d14}.bef-hp{position:absolute!important;left:-9999px!important}.bef-success{text-align:center;padding:48px!important}.bef-success b{display:grid;place-items:center;margin:0 auto 18px;width:58px;height:58px;border-radius:50%;background:#dcfce7;color:#15803d;font-size:28px}.bef-home{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;padding:12px 20px;border-radius:10px;background:var(--red);color:#fff!important;font-weight:800;text-decoration:none!important;box-shadow:0 8px 20px rgba(215,25,32,.22);transition:.18s}.bef-home:hover{background:#b81218;transform:translateY(-1px)}@media(max-width:640px){.bef-head,.bef-booker section{padding-left:22px;padding-right:22px}.bef-progress{padding-left:22px}.bef-options,.bef-grid{grid-template-columns:1fr}}\n        <\/style>\n        <script>\n        (()=>{const root=document.getElementById(\"be-booking-756249\");if(!root)return;const api=root.dataset.api,nonce=root.dataset.nonce,state={step:1,service:null,staff:null,date:'',time:'',config:null};const qs=s=>root.querySelector(s),qsa=s=>[...root.querySelectorAll(s)],params=()=>api.includes('?')?'&':'?';const money=n=>new Intl.NumberFormat('nl-NL',{style:'currency',currency:'EUR'}).format(n);function alertMsg(m=''){const a=qs('.bef-alert');a.textContent=m;a.hidden=!m}function step(n){state.step=n;qsa('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==n);qsa('.bef-progress i').forEach((x,i)=>x.classList.toggle('active',i<n));alertMsg('')}root.addEventListener('click',e=>{const back=e.target.closest('[data-back]');if(back)step(Math.max(1,state.step-1))});fetch(api+'\/config').then(r=>r.json()).then(c=>{state.config=c;const services=qs('[data-services]');services.innerHTML=c.services.length?'':'<em>Er zijn nog geen actieve behandelingen ingesteld.<\/em>';c.services.forEach(s=>{const b=document.createElement('button');b.type='button';b.className='bef-card';b.innerHTML='<strong>'+esc(s.name)+'<\/strong><small>'+s.duration+' min \u00b7 '+money(s.price)+'<\/small>';b.onclick=()=>{state.service=s;renderStaff();step(2)};services.appendChild(b)});const d=qs('[data-date]');d.min=c.today;d.max=c.maxDate;d.onchange=()=>{state.date=d.value;loadSlots()}}).catch(()=>alertMsg('De boekingsmodule kon niet worden geladen.'));function renderStaff(){const box=qs('[data-staff]');box.innerHTML='';const people=state.config.staff.filter(p=>!p.services.length||p.services.includes(state.service.id));if(!people.length){box.innerHTML='<em>Er is nog geen medewerker aan deze behandeling gekoppeld.<\/em>';return}people.forEach(p=>{const b=document.createElement('button');b.type='button';b.className='bef-card';b.innerHTML='<strong>'+esc(p.name||'Beschikbare barbier')+'<\/strong><small>Kies deze medewerker<\/small>';b.onclick=()=>{state.staff=p;step(3);if(state.date)loadSlots()};box.appendChild(b)})}function loadSlots(){const box=qs('[data-slots]');if(!state.date||!state.service||!state.staff)return;box.innerHTML='<em>Vrije tijden laden\u2026<\/em>';fetch(api+'\/slots'+params()+'service='+state.service.id+'&staff='+state.staff.id+'&date='+encodeURIComponent(state.date)).then(r=>r.json().then(j=>({ok:r.ok,j}))).then(({ok,j})=>{box.innerHTML='';if(!ok)throw Error(j.message||'Tijden konden niet worden geladen.');if(!j.slots.length){box.innerHTML='<em>Geen vrije tijden op deze datum.<\/em>';return}j.slots.forEach(t=>{const b=document.createElement('button');b.type='button';b.className='bef-slot';b.textContent=t;b.onclick=()=>{state.time=t;qs('[data-summary]').innerHTML='<strong>'+esc(state.service.name)+'<\/strong><br>'+esc(state.staff.name)+' \u00b7 '+esc(state.date)+' om '+esc(t);step(4)};box.appendChild(b)})}).catch(e=>{box.innerHTML='';alertMsg(e.message)})}qs('[data-form]').onsubmit=e=>{e.preventDefault();const btn=e.submitter;btn.disabled=true;btn.textContent='Bezig\u2026';const data=Object.fromEntries(new FormData(e.currentTarget));Object.assign(data,{service:state.service.id,staff:state.staff.id,date:state.date,time:state.time});fetch(api+'\/book',{method:'POST',headers:{'Content-Type':'application\/json','X-WP-Nonce':nonce},body:JSON.stringify(data)}).then(r=>r.json().then(j=>({ok:r.ok,j}))).then(({ok,j})=>{if(!ok)throw Error(j.message||'Boeken is mislukt.');qs('[data-success]').textContent=j.message;step(5)}).catch(err=>alertMsg(err.message)).finally(()=>{btn.disabled=false;btn.textContent='Afspraak aanvragen'})};function esc(v){const d=document.createElement('div');d.textContent=String(v??'');return d.innerHTML}})();\n        <\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-224","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=\/wp\/v2\/pages\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=224"}],"version-history":[{"count":7,"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=\/wp\/v2\/pages\/224\/revisions"}],"predecessor-version":[{"id":232,"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=\/wp\/v2\/pages\/224\/revisions\/232"}],"wp:attachment":[{"href":"https:\/\/test1.get-in-touch-test.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}