{"id":26183,"date":"2026-03-09T09:24:17","date_gmt":"2026-03-09T09:24:17","guid":{"rendered":"https:\/\/joost.spiderhunts-coworkingspace.com\/?page_id=26183"},"modified":"2026-05-13T12:44:03","modified_gmt":"2026-05-13T12:44:03","slug":"price-indicator","status":"publish","type":"page","link":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/price-indicator\/","title":{"rendered":"Price indicator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26183\" class=\"elementor elementor-26183\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fd26b0e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"2fd26b0e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2875535d elementor-widget elementor-widget-heading\" data-id=\"2875535d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Prijsindicator<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78a35e26 elementor-widget elementor-widget-text-editor\" data-id=\"78a35e26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Bekijk wat het u zou kosten<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b4944cc e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"b4944cc\" 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-fe0c760 elementor-widget elementor-widget-shortcode\" data-id=\"fe0c760\" 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\">    <style>\n    .beam-calc{max-width:700px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;position:relative}\n    .beam-calc *{box-sizing:border-box}\n\n    \/* \u2500\u2500 Restart icon (top-right) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .beam-restart-icon{\n        position:absolute;top:20px;right:20px;\n        width:40px;height:40px;border-radius:50%;\n        background:transparent;\n        border:2px solid #d0d0d0;\n        cursor:pointer;\n        display:none; \/* shown via JS when step > 1 *\/\n        align-items:center;justify-content:center;\n        transition:all .25s ease;\n        padding:0;\n        color:#aaa;\n    }\n    .beam-restart-icon:hover{\n        background:#F5A624;\n        border-color:#F5A624;\n        color:#fff;\n        transform:rotate(-30deg);\n    }\n    .beam-restart-icon svg{width:18px;height:18px;display:block}\n\n    \/* \u2500\u2500 Steps indicator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .beam-steps{display:flex;justify-content:center;align-items:flex-start;margin-bottom:35px;padding:0 10px}\n    .beam-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;max-width:140px}\n    .beam-step:not(:last-child)::after{content:'';position:absolute;top:20px;left:calc(50% + 25px);width:calc(100% - 50px);height:3px;background:#e0e0e0;transition:background .4s ease}\n    .beam-step.completed:not(:last-child)::after{background:#28a745}\n    .beam-step-circle{width:44px;height:44px;border-radius:50%;background:#f5f5f5;border:3px solid #e0e0e0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#999;transition:all .3s ease;position:relative;z-index:1}\n    .beam-step.active .beam-step-circle{background:#058490;border-color:#058490;color:#fff;box-shadow:0 0 0 4px rgba(5,132,144,0.2);transform:scale(1.05)}\n    .beam-step.completed .beam-step-circle{background:#28a745;border-color:#28a745;color:#fff}\n    .beam-step.completed .beam-step-circle .beam-step-num{display:none}\n    .beam-step.completed .beam-step-circle::before{content:'\u2713';font-size:20px;animation:checkPop .3s ease}\n    @keyframes checkPop{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}\n    .beam-step-label{margin-top:12px;font-size:13px;color:#888;text-align:center;font-weight:500;transition:all .3s}\n    .beam-step.active .beam-step-label{color:#058490;font-weight:600}\n    .beam-step.completed .beam-step-label{color:#28a745}\n\n    \/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .beam-panel{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.08);display:none}\n    .beam-panel.active{display:block;animation:fadeIn .3s ease}\n    @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n    .beam-panel h2{margin:0 0 25px;text-align:center;color:#333;font-size:22px}\n\n    \/* \u2500\u2500 Housing type cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .beam-housing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}\n    .beam-housing-card{\n        border:2px solid #e8e8e8;border-radius:10px;padding:18px;\n        cursor:pointer;transition:all .2s;text-align:center;\n        background:transparent;\n    }\n    .beam-housing-card:hover{\n        border-color:#00848ED4;\n        box-shadow:0 4px 15px rgba(0,132,142,0.831);\n        background:transparent;\n    }\n    .beam-housing-card.selected{\n        border-color:#F5A624;\n        background:rgba(245,166,36,0.08);\n    }\n    .beam-housing-card .type-letter{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#058490;color:#fff;font-size:20px;font-weight:bold;margin-bottom:10px}\n    .beam-housing-card .type-name{font-weight:600;color:#333;margin-bottom:4px}\n    .beam-housing-card .type-desc{font-size:12px;color:#666}\n\n    \/* \u2500\u2500 Hose type cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .beam-hose-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}\n    .beam-hose-card{\n        border:2px solid #e8e8e8;border-radius:10px;padding:20px;\n        cursor:pointer;transition:all .2s;\n        background:transparent;\n    }\n    .beam-hose-card:hover{\n        border-color:#00848ED4;\n        box-shadow:0 4px 15px rgba(0,132,142,0.831);\n        background:transparent;\n    }\n    .beam-hose-card.selected{\n        border-color:#F5A624;\n        background:rgba(245,166,36,0.08);\n    }\n    .beam-hose-card .hose-name{font-weight:600;color:#333;font-size:16px;margin-bottom:8px}\n    .beam-hose-card .hose-desc{font-size:13px;color:#666;line-height:1.5}\n    .beam-hose-card .hose-tag{display:inline-block;background:#e8f5e9;color:#2e7d32;font-size:11px;padding:3px 8px;border-radius:4px;margin-top:10px}\n    .beam-hose-card.retraflex .hose-tag{background:#fff3e0;color:#e65100}\n\n    \/* \u2500\u2500 Result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .beam-result-header{background:linear-gradient(135deg,#058490,#046670);color:#fff;padding:25px;border-radius:10px;text-align:center;margin-bottom:20px}\n    .beam-result-header .housing-badge{display:inline-block;background:rgba(255,255,255,.2);padding:5px 15px;border-radius:20px;font-size:13px;margin-bottom:10px}\n    .beam-result-header .total-price{font-size:36px;font-weight:bold}\n    .beam-result-header .total-label{font-size:14px;opacity:.9}\n\n    .beam-price-table{background:#f8f9fa;border-radius:10px;overflow:hidden}\n    .beam-price-row{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #e8e8e8}\n    .beam-price-row:last-child{border-bottom:none}\n    .beam-price-row .item-name{color:#333}\n    .beam-price-row .item-detail{font-size:12px;color:#888}\n    .beam-price-row .item-price{font-weight:600;color:#058490}\n\n    .beam-disclaimer{font-size:12px;color:#888;text-align:center;margin-top:20px;font-style:italic}\n\n    \/* \u2500\u2500 Navigation buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    .beam-nav{display:flex;justify-content:space-between;gap:10px;margin-top:25px}\n    .beam-btn{padding:14px 28px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}\n\n    \/* Back button \u2014 subtle outline style *\/\n    .beam-btn-back{\n        background:transparent;\n        color:#F5A624;\n        border:2px solid #F5A624;\n    }\n    .beam-btn-back:hover{\n        background:#F5A624;\n        color:#fff;\n    }\n\n    \/* Next \/ primary action buttons *\/\n    .beam-btn-next{\n        background:#F5A624;\n        color:#fff;\n        margin-left:auto;\n        border:2px solid #F5A624;\n    }\n    .beam-btn-next:hover:not(:disabled){\n        background:rgba(0,132,142,0.831);\n        border-color:rgba(0,132,142,0.831);\n    }\n    .beam-btn-next:disabled{background:#ccc;border-color:#ccc;cursor:not-allowed}\n\n    \/* Offerte aanvragen *\/\n    .beam-nav-final{justify-content:space-between}\n    .beam-btn-quote{\n        background:#F5A624;\n        color:#fff;\n        text-decoration:none;\n        text-align:center;\n        flex:1;max-width:250px;\n        padding:14px 28px;\n        border-radius:8px;\n        font-size:15px;font-weight:600;\n        border:2px solid #F5A624;\n        transition:all .2s;\n        display:inline-block;\n    }\n    .beam-btn-quote:hover{\n        background:rgba(0,132,142,0.831);\n        border-color:rgba(0,132,142,0.831);\n        color:#fff;\n    }\n\n    \/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n    @media(max-width:600px){\n        .beam-calc{padding:15px}\n        .beam-steps{margin-bottom:25px}\n        .beam-step-circle{width:38px;height:38px;font-size:14px}\n        .beam-step:not(:last-child)::after{top:19px;left:calc(50% + 24px);width:calc(100% - 48px)}\n        .beam-step-label{font-size:11px;margin-top:8px}\n        .beam-panel{padding:20px}\n        .beam-housing-grid,.beam-hose-grid{grid-template-columns:1fr}\n        .beam-result-header .total-price{font-size:28px}\n        .beam-nav{flex-direction:column}\n        .beam-btn{width:100%}\n        .beam-btn-next{margin-left:0}\n        .beam-nav-final{flex-direction:column-reverse}\n        .beam-btn-quote{max-width:100%}\n    }\n    @media(max-width:420px){\n        .beam-step-label{font-size:10px}\n        .beam-step-circle{width:34px;height:34px;font-size:13px}\n        .beam-step:not(:last-child)::after{top:17px;left:calc(50% + 21px);width:calc(100% - 42px)}\n        .beam-step.completed .beam-step-circle::before{font-size:16px}\n    }\n    <\/style>\n\n    <div class=\"beam-calc\" id=\"beamCalc\">\n\n        <!-- Restart icon \u2014 top right, visible from step 2 onward -->\n        <button class=\"beam-restart-icon\" id=\"beamRestartIcon\" title=\"Opnieuw beginnen\" aria-label=\"Opnieuw beginnen\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"1 4 1 10 7 10\"><\/polyline>\n                <path d=\"M3.51 15a9 9 0 1 0 .49-3.5\"><\/path>\n            <\/svg>\n        <\/button>\n\n        <!-- Steps indicator -->\n        <div class=\"beam-steps\">\n            <div class=\"beam-step active\" data-step=\"1\">\n                <div class=\"beam-step-circle\"><span class=\"beam-step-num\">1<\/span><\/div>\n                <div class=\"beam-step-label\">Woningtype<\/div>\n            <\/div>\n            <div class=\"beam-step\" data-step=\"2\">\n                <div class=\"beam-step-circle\"><span class=\"beam-step-num\">2<\/span><\/div>\n                <div class=\"beam-step-label\">Slangsysteem<\/div>\n            <\/div>\n            <div class=\"beam-step\" data-step=\"3\">\n                <div class=\"beam-step-circle\"><span class=\"beam-step-num\">3<\/span><\/div>\n                <div class=\"beam-step-label\">Prijsindicatie<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Step 1: Housing Type -->\n        <div class=\"beam-panel active\" data-panel=\"1\">\n            <h2>Selecteer uw type woning<\/h2>\n            <div class=\"beam-housing-grid\">\n                                <div class=\"beam-housing-card\" data-type=\"A\">\n                    <div class=\"type-letter\">A<\/div>\n                    <div class=\"type-name\">Woning type A<\/div>\n                    <div class=\"type-desc\">Appartement, Rijtjeshuis, 2-onder-1-kap<\/div>\n                <\/div>\n                                <div class=\"beam-housing-card\" data-type=\"B\">\n                    <div class=\"type-letter\">B<\/div>\n                    <div class=\"type-name\">Woning type B<\/div>\n                    <div class=\"type-desc\">Vrijstaande woning, Hoekwoning<\/div>\n                <\/div>\n                                <div class=\"beam-housing-card\" data-type=\"C\">\n                    <div class=\"type-letter\">C<\/div>\n                    <div class=\"type-name\">Woning type C<\/div>\n                    <div class=\"type-desc\">Grote vrijstaande woning, Villa<\/div>\n                <\/div>\n                                <div class=\"beam-housing-card\" data-type=\"D\">\n                    <div class=\"type-letter\">D<\/div>\n                    <div class=\"type-name\">Woning type D<\/div>\n                    <div class=\"type-desc\">Landhuis, Woonboerderij, Bedrijfspand<\/div>\n                <\/div>\n                            <\/div>\n            <div class=\"beam-nav\">\n                <button class=\"beam-btn beam-btn-next\" disabled>Verder<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Step 2: Hose System -->\n        <div class=\"beam-panel\" data-panel=\"2\">\n            <h2>Selecteer uw slangsysteem<\/h2>\n            <div class=\"beam-hose-grid\">\n                <div class=\"beam-hose-card\" data-hose=\"standaard\">\n                    <div class=\"hose-name\">Standaard Slangsysteem<\/div>\n                    <div class=\"hose-desc\">Losse slang die u uit de kast haalt en aansluit op het zuigpunt.<\/div>\n                    <div class=\"hose-tag\">Voordeligste optie<\/div>\n                <\/div>\n                <div class=\"beam-hose-card retraflex\" data-hose=\"retraflex\">\n                    <div class=\"hose-name\">Retraflex Slangsysteem<\/div>\n                    <div class=\"hose-desc\">Slang zit verborgen in de wand en is direct binnen handbereik.<\/div>\n                    <div class=\"hose-tag\">Premium optie<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"beam-nav\">\n                <button class=\"beam-btn beam-btn-back\">Terug<\/button>\n                <button class=\"beam-btn beam-btn-next\" disabled>Verder<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Step 3: Result -->\n        <div class=\"beam-panel\" data-panel=\"3\">\n            <h2>Uw prijsindicatie<\/h2>\n            <div class=\"beam-result-header\">\n                <div class=\"housing-badge\" id=\"resultBadge\">Woning type A - Standaard<\/div>\n                <div class=\"total-label\">Prijsindicatie<\/div>\n                <div class=\"total-price\" id=\"resultTotal\">\u20ac0,00<\/div>\n            <\/div>\n            <div class=\"beam-price-table\" id=\"resultTable\">\n                <!-- Filled by JS -->\n            <\/div>\n            <p class=\"beam-disclaimer\">* Dit is een indicatie. De werkelijke prijs kan afwijken afhankelijk van de specifieke situatie.<\/p>\n            <div class=\"beam-nav beam-nav-final\">\n                <button class=\"beam-btn beam-btn-back\">Terug<\/button>\n                <a href=\"https:\/\/joost.spiderhunts-coworkingspace.com\/quotation-request\/\" class=\"beam-btn beam-btn-quote\">Offerte aanvragen \u2192<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    (function(){\n        var pricing = {\"A\":{\"standaard\":{\"stofzuiger\":{\"name\":\"BEAM Experia 345E\",\"price\":\"868\"},\"aansluitingen\":{\"name\":\"3x Eurostyle\",\"price\":\"86.7\"},\"installatie\":{\"name\":\"30m leidingwerk\",\"price\":\"334.45\"},\"slang\":{\"name\":\"10m Comfort slang & borstelset\",\"price\":\"185\"},\"totaal\":\"1474.15\"},\"retraflex\":{\"stofzuiger\":{\"name\":\"BEAM Experia 345E\",\"price\":\"868\"},\"aansluitingen\":{\"name\":\"2x Retraflex (incl. 12m slangen)\",\"price\":\"818\"},\"installatie\":{\"name\":\"30m leidingwerk\",\"price\":\"311.65\"},\"slang\":{\"name\":\"Borstelset & Basis handgreep\",\"price\":\"175.95\"},\"totaal\":\"2173.60\"}},\"B\":{\"standaard\":{\"stofzuiger\":{\"name\":\"BEAM Experia 360E\",\"price\":\"1029\"},\"aansluitingen\":{\"name\":\"5x Eurostyle\",\"price\":\"144.5\"},\"installatie\":{\"name\":\"51m leidingwerk\",\"price\":\"506.45\"},\"slang\":{\"name\":\"10m Comfort slang & borstelset\",\"price\":\"185\"},\"totaal\":\"1864.95\"},\"retraflex\":{\"stofzuiger\":{\"name\":\"BEAM Experia 360E\",\"price\":\"1029\"},\"aansluitingen\":{\"name\":\"3x Retraflex (incl. 12m slangen)\",\"price\":\"1227\"},\"installatie\":{\"name\":\"48m leidingwerk\",\"price\":\"453.85\"},\"slang\":{\"name\":\"Borstelset & Basis handgreep\",\"price\":\"175.95\"},\"totaal\":\"2885.80\"}},\"C\":{\"standaard\":{\"stofzuiger\":{\"name\":\"BEAM Experia 475E\",\"price\":\"1249\"},\"aansluitingen\":{\"name\":\"8x Eurostyle\",\"price\":\"231.2\"},\"installatie\":{\"name\":\"75m leidingwerk\",\"price\":\"729.65\"},\"slang\":{\"name\":\"10m Comfort slang & borstelset\",\"price\":\"185\"},\"totaal\":\"2394.85\"},\"retraflex\":{\"stofzuiger\":{\"name\":\"BEAM Experia 475E\",\"price\":\"1249\"},\"aansluitingen\":{\"name\":\"5x Retraflex (incl. 12m slangen)\",\"price\":\"2045\"},\"installatie\":{\"name\":\"72m leidingwerk\",\"price\":\"654.65\"},\"slang\":{\"name\":\"Borstelset & Basis handgreep\",\"price\":\"175.95\"},\"totaal\":\"4124.60\"}},\"D\":{\"standaard\":{\"stofzuiger\":{\"name\":\"BEAM Experia 3600E\",\"price\":\"1595\"},\"aansluitingen\":{\"name\":\"12x Eurostyle\",\"price\":\"346.8\"},\"installatie\":{\"name\":\"99m leidingwerk\",\"price\":\"1025.60\"},\"slang\":{\"name\":\"10m Comfort slang & borstelset\",\"price\":\"185\"},\"totaal\":\"3152.40\"},\"retraflex\":{\"stofzuiger\":{\"name\":\"BEAM Experia 3600E\",\"price\":\"1595\"},\"aansluitingen\":{\"name\":\"8x Retraflex (incl. 12m slangen)\",\"price\":\"3272\"},\"installatie\":{\"name\":\"111m leidingwerk\",\"price\":\"937.40\"},\"slang\":{\"name\":\"Borstelset & Basis handgreep\",\"price\":\"175.95\"},\"totaal\":\"5980.35\"}}};\n        var housing = {\"A\":{\"name\":\"Woning type A\",\"description\":\"Appartement, Rijtjeshuis, 2-onder-1-kap\",\"icon\":\"apartment\"},\"B\":{\"name\":\"Woning type B\",\"description\":\"Vrijstaande woning, Hoekwoning\",\"icon\":\"house\"},\"C\":{\"name\":\"Woning type C\",\"description\":\"Grote vrijstaande woning, Villa\",\"icon\":\"villa\"},\"D\":{\"name\":\"Woning type D\",\"description\":\"Landhuis, Woonboerderij, Bedrijfspand\",\"icon\":\"mansion\"}};\n        var currentStep = 1;\n        var selectedType = null;\n        var selectedHose = null;\n\n        var calc    = document.getElementById('beamCalc');\n        var restartIcon = document.getElementById('beamRestartIcon');\n\n        \/\/ \u2500\u2500 Housing selection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        calc.querySelectorAll('.beam-housing-card').forEach(function(card){\n            card.addEventListener('click', function(){\n                calc.querySelectorAll('.beam-housing-card').forEach(function(c){ c.classList.remove('selected'); });\n                this.classList.add('selected');\n                selectedType = this.dataset.type;\n                updateNextButton(1);\n            });\n        });\n\n        \/\/ \u2500\u2500 Hose selection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        calc.querySelectorAll('.beam-hose-card').forEach(function(card){\n            card.addEventListener('click', function(){\n                calc.querySelectorAll('.beam-hose-card').forEach(function(c){ c.classList.remove('selected'); });\n                this.classList.add('selected');\n                selectedHose = this.dataset.hose;\n                updateNextButton(2);\n            });\n        });\n\n        \/\/ \u2500\u2500 Next buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        calc.querySelectorAll('.beam-btn-next').forEach(function(btn){\n            btn.addEventListener('click', function(){\n                if(currentStep < 3){ goToStep(currentStep + 1); }\n            });\n        });\n\n        \/\/ \u2500\u2500 Back buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        calc.querySelectorAll('.beam-btn-back').forEach(function(btn){\n            btn.addEventListener('click', function(){\n                if(currentStep > 1){ goToStep(currentStep - 1); }\n            });\n        });\n\n        \/\/ \u2500\u2500 Restart icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        restartIcon.addEventListener('click', function(){\n            doRestart();\n        });\n\n        \/\/ \u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        function doRestart(){\n            selectedType = null;\n            selectedHose = null;\n            calc.querySelectorAll('.beam-housing-card, .beam-hose-card').forEach(function(c){\n                c.classList.remove('selected');\n            });\n            goToStep(1);\n        }\n\n        function updateNextButton(step){\n            var panel = calc.querySelector('.beam-panel[data-panel=\"'+step+'\"]');\n            var btn   = panel.querySelector('.beam-btn-next');\n            if(step === 1) btn.disabled = !selectedType;\n            if(step === 2) btn.disabled = !selectedHose;\n        }\n\n        function updateRestartIcon(step){\n            if(step > 1){\n                restartIcon.style.display = 'flex';\n            } else {\n                restartIcon.style.display = 'none';\n            }\n        }\n\n        function goToStep(step){\n            \/\/ Update panels\n            calc.querySelectorAll('.beam-panel').forEach(function(p){ p.classList.remove('active'); });\n            calc.querySelector('.beam-panel[data-panel=\"'+step+'\"]').classList.add('active');\n\n            \/\/ Update step indicators\n            calc.querySelectorAll('.beam-step').forEach(function(d){\n                var s = parseInt(d.dataset.step);\n                d.classList.remove('active','completed');\n                if(s < step)  d.classList.add('completed');\n                if(s === step) d.classList.add('active');\n            });\n\n            currentStep = step;\n            updateRestartIcon(step);\n\n            if(step === 3) showResult();\n        }\n\n        function showResult(){\n            var data     = pricing[selectedType][selectedHose];\n            var typeName = housing[selectedType].name;\n            var hoseName = selectedHose === 'retraflex' ? 'Retraflex' : 'Standaard';\n\n            document.getElementById('resultBadge').textContent = typeName + ' - ' + hoseName;\n            document.getElementById('resultTotal').textContent = formatPrice(data.totaal);\n\n            var html = '';\n            html += priceRow('Stofzuiger',           data.stofzuiger.name,    data.stofzuiger.price);\n            html += priceRow('Aansluitingen',         data.aansluitingen.name, data.aansluitingen.price);\n            html += priceRow('Installatiemateriaal',  data.installatie.name,   data.installatie.price);\n            html += priceRow('Slang & Borstelset',    data.slang.name,         data.slang.price);\n\n            document.getElementById('resultTable').innerHTML = html;\n        }\n\n        function priceRow(label, detail, price){\n            return '<div class=\"beam-price-row\">' +\n                '<div><div class=\"item-name\">' + label + '<\/div>' +\n                '<div class=\"item-detail\">' + detail + '<\/div><\/div>' +\n                '<div class=\"item-price\">' + formatPrice(price) + '<\/div>' +\n                '<\/div>';\n        }\n\n        function formatPrice(n){\n            return '\u20ac' + parseFloat(n).toFixed(2)\n                .replace('.', ',')\n                .replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, '.');\n        }\n    })();\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<div class=\"elementor-element elementor-element-60ee95d1 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"60ee95d1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59bbf8dc elementor-widget elementor-widget-heading\" data-id=\"59bbf8dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gebruik kortingscode 'Prijsindicator' voor 10% korting!<\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0a52af5 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"0a52af5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dbabc4 elementor-widget elementor-widget-button\" data-id=\"8dbabc4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-bob\" href=\"https:\/\/joost.spiderhunts-coworkingspace.com\/shop\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Naar de webshop<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-079f60e elementor-widget elementor-widget-button\" data-id=\"079f60e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-bob\" href=\"https:\/\/joost.spiderhunts-coworkingspace.com\/contact\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Meer informatie<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\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":"<p>Prijsindicator Bekijk wat het u zou kosten Gebruik kortingscode &#8216;Prijsindicator&#8217; voor 10% korting! Naar de webshop Meer informatie<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_angie_page":false,"_uag_custom_page_level_css":"","postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-26183","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Prijsindicator Bekijk wat het u zou kosten Gebruik kortingscode &#8216;Prijsindicator&#8217; voor 10% korting! Naar de webshop Meer informatie","_links":{"self":[{"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/pages\/26183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/comments?post=26183"}],"version-history":[{"count":22,"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/pages\/26183\/revisions"}],"predecessor-version":[{"id":45249,"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/pages\/26183\/revisions\/45249"}],"wp:attachment":[{"href":"https:\/\/joost.spiderhunts-coworkingspace.com\/fr\/wp-json\/wp\/v2\/media?parent=26183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}