{"id":2,"date":"2025-10-20T10:29:30","date_gmt":"2025-10-20T10:29:30","guid":{"rendered":"https:\/\/demo4.kiviisites.nl\/?page_id=2"},"modified":"2025-10-20T10:51:23","modified_gmt":"2025-10-20T10:51:23","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/demo4.kiviisites.nl\/?page_id=2","title":{"rendered":"Sample Page"},"content":{"rendered":"\n<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin&#8217; caught in the rain.)<\/p>\n<\/blockquote>\n\n\n\n<p>&#8230;or something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p>\n<\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/demo4.kiviisites.nl\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\n\n\n    <div class=\"kivii-booking-container\">\n        <!-- Horizontal Progress Bar -->\n        <div class=\"kivii-progress-bar\">\n            <div class=\"kivii-progress-step active\" data-step=\"1\">\n                <span class=\"kivii-step-circle\">1<\/span>\n                <span class=\"kivii-step-label\">Je auto<\/span>\n            <\/div>\n            <div class=\"kivii-progress-line\"><\/div>\n            <div class=\"kivii-progress-step\" data-step=\"2\">\n                <span class=\"kivii-step-circle\">2<\/span>\n                <span class=\"kivii-step-label\">Kies je werkzaamheden<\/span>\n            <\/div>\n            <div class=\"kivii-progress-line\"><\/div>\n            <div class=\"kivii-progress-step\" data-step=\"3\">\n                <span class=\"kivii-step-circle\">3<\/span>\n                <span class=\"kivii-step-label\">Datum en tijd<\/span>\n            <\/div>\n            <div class=\"kivii-progress-line\"><\/div>\n            <div class=\"kivii-progress-step\" data-step=\"4\">\n                <span class=\"kivii-step-circle\">4<\/span>\n                <span class=\"kivii-step-label\">Je gegevens<\/span>\n            <\/div>\n        <\/div>\n        <!-- Content Wrapper -->\n        <div class=\"kivii-content-wrapper\">\n            <!-- Form -->\n            <div class=\"kivii-form-content\">\n                <!-- Step 1: Vehicle Selection -->\n                <div class=\"kivii-step kivii-vehicle-step\" data-step=\"1\">\n                    <h2>Je voertuig<\/h2>\n                    <!-- Number Plate Input (Styled as Dutch License Plate) -->\n                    <div class=\"kivii-vehicle-input kivii-plate-input\">\n                        <label for=\"kivii-license-plate\">Kenteken<\/label>\n                        <!-- <div class=\"kivii-license-plate-wrapper\">\n                            <div class=\"kivii-license-plate-nl\">\n                                <span class=\"kivii-eu-stars\"><\/span>\n                                <span class=\"kivii-nl-text\">NL<\/span>\n                            <\/div>\n                            <input type=\"text\" id=\"kivii-license-plate\" placeholder=\"XX-123-XX\" required>\n                        <\/div> -->\n\n                        <div class=\"kivii-license-plate-wrapper\">\n                            <div class=\"kivii-license-plate-nl\">\n                                <span class=\"kivii-eu-stars\"><\/span>\n                                <span class=\"kivii-nl-text\">NL<\/span>\n                            <\/div>\n                            <input type=\"text\" id=\"kivii-license-plate\" placeholder=\"XX-123-XX\" required>\n                        <\/div>\n\n\n                        <button id=\"kivii-validate-plate\">Controleren<\/button>\n                        <p id=\"kivii-plate-error\" class=\"kivii-error\" style=\"display: none;\">Ongeldig kenteken<\/p>\n                        <p id=\"kivii-plate-success\" class=\"kivii-success\" style=\"display: none;\"><\/p>\n                    <\/div>\n                    <p class=\"kivii-toggle-link\" id=\"kivii-toggle-to-manual\">Ik weet mijn kenteken niet, of ik heb een buitenlands kenteken.<\/p>\n                    <!-- Manual Vehicle Selection (Hidden by Default) -->\n                    <div class=\"kivii-vehicle-manual\" style=\"display: none;\">\n                        <p>Kies je auto handmatig:<\/p>\n                        <select id=\"kivii-car-brand\">\n                            <!-- <option value=\"\">Selecteer Merk<\/option> -->\n                        <\/select>\n                        <select id=\"kivii-car-model\" disabled>\n                            <option value=\"\">Selecteer Model<\/option>\n                        <\/select>\n                        <p class=\"kivii-toggle-link\" id=\"kivii-toggle-to-plate\">Ik wil toch mijn kenteken invoeren<\/p>\n                    <\/div>\n                    <div class=\"kivii-step-buttons\">\n                        <button id=\"kivii-vehicle-next\" disabled>Volgende<\/button>\n                    <\/div>\n                <\/div>\n                <!-- Step 2: Service Selection -->\n                <div class=\"kivii-step kivii-service-step\" data-step=\"2\" style=\"display: none;\">\n                    <h2>Kies je werkzaamheden<\/h2>\n                    <div class=\"kivii-service-list\" id=\"kivii-service-list\">\n                        <!-- Services will be dynamically populated via JavaScript -->\n                    <\/div>\n                    <div class=\"kivii-step-buttons\">\n                        <button id=\"kivii-service-back\">Terug<\/button>\n                        <button id=\"kivii-service-next\" disabled>Volgende<\/button>\n                    <\/div>\n                <\/div>\n                <!-- Step 3: Calendar and Time Slots -->\n                <div class=\"kivii-step kivii-calendar-step\" data-step=\"3\" style=\"display: none;\">\n                    <h2>Datum en tijdstip\n\n                    <\/h2>\n                    <div class=\"kivii-calendar\"><\/div>\n                    <div class=\"kivii-time-slots\"><\/div>\n                    <div class=\"kivii-step-buttons\">\n                        <button id=\"kivii-calendar-back\">Terug<\/button>\n                        <button id=\"kivii-calendar-next\" disabled>Volgende<\/button>\n                    <\/div>\n                <\/div>\n                <!-- Step 4: Booking Form -->\n                <div class=\"kivii-step kivii-form-step\" data-step=\"4\" style=\"display: none;\">\n                    <h2>Je gegevens<\/h2>\n                    <form class=\"kivii-booking-form\">\n                        <label for=\"kivii-client-type\">Type klant <span class=\"kivii-required\">*<\/span><\/label>\n                        <select id=\"kivii-client-type\" name=\"client_type\" required>\n                            <option value=\"Particulier\">Particulier<\/option>\n                            <option value=\"Zakelijk\">Zakelijk<\/option>\n                        <\/select>\n                        <div class=\"kivii-form-row\">\n                            <div class=\"kivii-form-col kivii-personal-fields\">\n                                <label for=\"kivii-name\">Voornaam <span class=\"kivii-required\">*<\/span><\/label>\n                                <input type=\"text\" id=\"kivii-name\" name=\"name\">\n                            <\/div>\n                            <div class=\"kivii-form-col kivii-personal-fields\">\n                                <label for=\"kivii-lastname\">Achternaam <span class=\"kivii-required\">*<\/span><\/label>\n                                <input type=\"text\" id=\"kivii-lastname\" name=\"lastname\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"kivii-form-row\">\n                            <div class=\"kivii-form-col kivii-business-fields\">\n                                <label for=\"kivii-business_name\">Bedrijfsnaam <span class=\"kivii-required\">*<\/span><\/label>\n                                <input type=\"text\" id=\"kivii-business_name\" name=\"business_name\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"kivii-form-row\">\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-street\">Straatnaam<\/label>\n                                <input type=\"text\" id=\"kivii-street\" name=\"street\">\n                            <\/div>\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-no\">Huisnummer<\/label>\n                                <input type=\"text\" id=\"kivii-no\" name=\"no\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"kivii-form-row\">\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-postcode\">Postcode<\/label>\n                                <input type=\"text\" id=\"kivii-postcode\" name=\"postcode\">\n                            <\/div>\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-city\">Stad<\/label>\n                                <input type=\"text\" id=\"kivii-city\" name=\"city\">\n                            <\/div>\n                        <\/div>\n                        <div class=\"kivii-form-row\">\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-email\">E-mail<\/label>\n                                <input type=\"text\" id=\"kivii-email\" name=\"email\">\n                            <\/div>\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-phone\">Telefoonnummer <span class=\"kivii-required\">*<\/span><\/label>\n                                <input type=\"tel\" id=\"kivii-phone\" name=\"phone\" required>\n                            <\/div>\n                        <\/div>\n                        <div class=\"kivii-form-row\">\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-kilometer\">Huidige kilometerstand <span class=\"kivii-required\">*<\/span><\/label>\n                                <input type=\"number\" id=\"kivii-kilometer\" name=\"kilometer\" required>\n                            <\/div>\n                        <\/div>\n                        <div class=\"kivii-form-row\">\n                            <div class=\"kivii-form-col\">\n                                <label for=\"kivii-comments\">Opmerkingen (optioneel)<\/label>\n                                <textarea id=\"kivii-comments\" name=\"comments\" placeholder=\"Eventuele opmerkingen\"><\/textarea>\n                            <\/div>\n                        <\/div>\n                        <input type=\"hidden\" name=\"license_plate\" id=\"kivii-form-license\">\n                        <input type=\"hidden\" name=\"services\" id=\"kivii-form-services\">\n                        <input type=\"hidden\" name=\"location\" id=\"kivii-form-location\">\n                        <input type=\"hidden\" name=\"date\" class=\"kivii-date\">\n                        <input type=\"hidden\" name=\"time\" class=\"kivii-time\">\n                        <div class=\"kivii-step-buttons\">\n                            <button id=\"kivii-form-back\">Terug<\/button>\n                            <button type=\"submit\">Boeking verzenden<\/button>\n                        <\/div>\n                    <\/form>\n                <\/div>\n                <!-- Confirmation -->\n                <div class=\"kivii-confirmation\" style=\"display: none;\">\n                    <h2>Boeking bevestigd!<\/h2>\n                    <p>Je afspraak is gepland. Je ontvangt binnen 2 werkdagen een bevestiging.<\/p>\n                <\/div>\n                <!-- Error Message -->\n                <div class=\"kivii-error-message\" style=\"display: none;\">\n                    <h2>Fout bij het indienen<\/h2>\n                    <p id=\"kivii-submit-error\"><\/p>\n                <\/div>\n            <\/div>\n            <!-- Summary Card -->\n            <div class=\"kivii-summary-card\">\n                <h3>Samenvatting van je afspraak<\/h3>\n                <div class=\"kivii-summary-content\">\n                    <div class=\"kivii-summary-section\">\n                        <div class=\"kivii-section-header\">\n                            <span class=\"kivii-icon kivii-icon-car\"><\/span>\n                            <h4>Je voertuig<\/h4>\n                        <\/div>\n                        <p id=\"summary-vehicle\">Niet geselecteerd<\/p>\n                    <\/div>\n                    <div class=\"kivii-summary-section\">\n                        <div class=\"kivii-section-header\">\n                            <span class=\"kivii-icon kivii-icon-wrench\"><\/span>\n                            <h4>Gekozen werkzaamheden<\/h4>\n                        <\/div>\n                        <p id=\"summary-services\">Geen<\/p>\n                    <\/div>\n                    <div class=\"kivii-summary-section\">\n                        <div class=\"kivii-section-header\">\n                            <span class=\"kivii-icon kivii-icon-calendar\"><\/span>\n                            <h4>Datum & tijd<\/h4>\n                        <\/div>\n                        <div class=\"kivii-sub-section\" id=\"summary-pair-date\">\n                            <strong>Datum<\/strong>\n                            <span id=\"summary-date\">Niet geselecteerd<\/span>\n                        <\/div>\n                        <div class=\"kivii-sub-section\" id=\"summary-pair-time\">\n                            <strong>Tijd<\/strong>\n                            <span id=\"summary-time\">Niet geselecteerd<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"kivii-summary-section\">\n                        <h4 style=\"\n                                    font-family: 'Poppins', sans-serif !important;\n                                    font-size: 24px !important;\n                                    font-weight: 600 !important;\n                                    color: #212529 !important;\n                                \">Je gegevens<\/h4>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-client-type\">\n                            <strong>Type klant<\/strong>\n                            <span id=\"summary-client-type\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-name\">\n                            <strong>Voornaam<\/strong>\n                            <span id=\"summary-name\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-lastname\">\n                            <strong>Achternaam<\/strong>\n                            <span id=\"summary-lastname\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-business_name\">\n                            <strong>Bedrijfsnaam<\/strong>\n                            <span id=\"summary-business_name\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-city\">\n                            <strong>Stad<\/strong>\n                            <span id=\"summary-city\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-postcode\">\n                            <strong>Postcode<\/strong>\n                            <span id=\"summary-postcode\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-email\">\n                            <strong>E-mail<\/strong>\n                            <span id=\"summary-email\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-phone\">\n                            <strong>Telefoon<\/strong>\n                            <span id=\"summary-phone\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-kilometer\">\n                            <strong>Kilometerstand<\/strong>\n                            <span id=\"summary-kilometer\"><\/span>\n                        <\/div>\n                        <div class=\"kivii-summary-pair\" id=\"summary-pair-comments\">\n                            <strong>Opmerkingen<\/strong>\n                            <span id=\"summary-comments\"><\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this: Hi there! I&#8217;m a bike messenger [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":2,"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/demo4.kiviisites.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}