{"id":193,"date":"2025-10-10T08:39:19","date_gmt":"2025-10-10T08:39:19","guid":{"rendered":"https:\/\/park-app.imaginecreativeagency.nl\/?page_id=193"},"modified":"2025-11-11T12:49:51","modified_gmt":"2025-11-11T12:49:51","slug":"restaurant-de-wiek","status":"publish","type":"page","link":"https:\/\/park-app.imaginecreativeagency.nl\/?page_id=193","title":{"rendered":"Restaurant &#8216;De Wiek&#8217;"},"content":{"rendered":"<div class=\"lazyblock-fototitel-ZrVUMN wp-block-lazyblock-fototitel\"><div class=\"photoTitle\">\n  <div class=\"titleContainer tcva-center \">\n    <span class=\"subTitle\"><\/span>\n    <span class=\"title\" >Restaurant &#8216;De Wiek&#8217;<\/span>\n  <\/div>\n  <div class=\"fadeTransition bottom\"><\/div>\n<\/div>\n<style>\n\/*.wp-block-lazyblock-fototitel {*\/\n\/*\tbackground-color: #f9f9f9;*\/\n\/*\tpadding: 20px;*\/\n\/*}*\/\n\n.photoTitle {\n  background-image: url(\"https:\/\/park-app.imaginecreativeagency.nl\/wp-content\/uploads\/2025\/10\/interieur-restaurant.jpg\");\n  background-size: cover;\n  background-position: center;\n  height: 50vh;\n  width: 100%;\n  background-repeat: no-repeat;\n  position: relative;\n}\n\n.titleContainer {\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.3);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.tcva-center {\n  text-align: center;\n  justify-content: center;\n}\n\n.tcva-bottom {\n  \/* Since the flex-direction of titleContainer is set to column, flex-end stands for the bottom\n  border of the container (and not the right border.*\/\n  justify-content: flex-end;\n}\n\n\/*.tcva-bottom .subtitle, .title {*\/\n\/*  color: var(--wp--preset--color--pat-text-alternative);*\/\n\/*}*\/\n\n\/*Lies above the titleContainer and titleContainer*\/\n.fadeTransition {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 33%;\n  z-index: 1;\n}\n\n.fadeTransition.top{\n  top:-1px;\n  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--wp--preset--color--pat-default) 100%);  \n}\n\n.fadeTransition.bottom{\n  bottom:-1px;\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--wp--preset--color--pat-default) 100%);  \n}\n\n.title {\n  color: var(--wp--preset--color--pat-text-alternative);\n  font-weight: bold;\n  font-size: 3.5rem;\n  z-index: 4;\n}\n\n.subTitle {\n  color: var(--wp--preset--color--pat-text-alternative);\n  font-size: 1.5rem;\n}\n\n<\/style><\/div>\n\n<div class=\"lazyblock-wysiwygblock-Z1Ytlcb wp-block-lazyblock-wysiwygblock\">\n  <div class=\"w-100\" >\n  <p>Restaurant <strong data-start=\"101\" data-end=\"112\">De Wiek<\/strong> is de ideale plek voor families die samen willen genieten van een gezellige maaltijd tijdens hun verblijf op het vakantiepark. Terwijl ouders ontspannen met een drankje, kunnen de kinderen spelen in de speciale speelhoek of op het terras met uitzicht op de speeltuin. De menukaart biedt voor ieder wat wils \u2014 van kindvriendelijke favorieten tot verse, lokale gerechten voor volwassenen. In de ochtend is er een lekker ontbijtbuffet en \u2019s avonds kunnen gezinnen kiezen uit diverse huisgemaakte gerechten. <strong data-start=\"617\" data-end=\"703\">Via het reserveringsformulier op deze pagina kun je eenvoudig een tafel reserveren<\/strong> en zeker zijn van een plekje bij De Wiek.<\/p>  \n  <\/div>\n\t\n<\/div>\n\n<style>\n.wp-block-lazyblock-wysiwygblock {\n\tbackground-color: var(--wp--preset--color--pat-default);\n\tpadding: 20px 20px calc(20px - 1rem) 20px;\n}\n<\/style>\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <div class=\"lazyblock-formulier-Z2rL5ak wp-block-lazyblock-formulier\">\n        <h2>Reserveer een tafel<\/h2>\n        <p id=\"response\"><\/p>\n        <form id=\"Z2rL5ak\">\n          <div class=\"form-floating mb-3\">\n            <input type=\"text\" class=\"form-control\" id=\"senderName\" placeholder=\"John\" required>\n            <label for=\"senderName\">Uw naam<\/label>\n          <\/div>    \n          <div class=\"form-floating mb-3\">\n            <input type=\"email\" class=\"form-control\" id=\"emailAddress\" placeholder=\"name@example.com\" required>\n            <label for=\"emailAddress\">Email address<\/label>\n          <\/div>\n          <div class=\"form-floating mb-3\">\n            <input type=\"tel\" class=\"form-control\" id=\"telNumber\" placeholder=\"+310612345678\" required>\n            <label for=\"telNumber\">Telefoonnummer<\/label>\n          <\/div>\n          <div class=\"form-floating mb-3\">\n            <textarea class=\"form-control h-25\" placeholder=\"Noteer eventuele opmerkingen\" id=\"additionalComments\"><\/textarea>\n            <label for=\"additionalComments\">Overige informatie<\/label>\n          <\/div>\n          <button type=\"submit\" class=\"button d-flex align-items-center gap-3 my-2\">\n            <span>Verzenden<\/span>\n    \t      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-arrow-right-circle\" viewBox=\"0 0 16 16\">\n              <path fill-rule=\"evenodd\" d=\"M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z\"\/>\n            <\/svg>\n          <\/button>\n        <\/form>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<style>\n  .container-fluid{\n    padding: 20px;\n  }\n  \n  .button {\n    background-color: var(--wp--preset--color--pat-background-contrast);\n    padding: 12px;\n    border: none;\n    font-size: large;\n    border-radius: 1rem;\n  }\n  \n  button span {\n    color: var(--wp--preset--color--pat-text-alternative);\n  }\n\n  button svg {\n    fill: var(--wp--preset--color--pat-text-alternative);\n  }\n<\/style>\n<script>\n    document.getElementById('Z2rL5ak').addEventListener('submit', async (e) => {\n      e.preventDefault();\n      const endpoint = \"https:\/\/nodejs.imaginecreativeagency.nl\/park-app\/mailsender\/index.php\";\n      const authToken = \"CAnaXSByzSK@e7un@RWZAU40V%uS0a\";\n      const formData = new FormData();\n\n      \/\/ Build emailContext JSON\n      const emailContext = {\n        sender_name: \"d.marcelissen@imaginecreativeageny.nl\",\n        smtp_bcc_addresses: [\"d.marcelissen@imaginecreativeageny.nl\"],\n        recipient: document.getElementById('emailAddress').value,\n        subject: \"Reservering 'De Wiek',\",\n        body: buildMessageBody().innerHTML,\n      };\n\n      formData.append(\"emailContext\", JSON.stringify(emailContext));\n\n      \/\/ Add files if desired so.\n      \/\/ const files = document.getElementById('attachments').files;\n      \/\/ for (let i = 0; i < files.length; i++) {\n      \/\/   formData.append(\"file\" + i, files[i]);\n      \/\/ }\n      \n      const responseEl = document.getElementById('response')\n      if(responseEl.classList.length > 0) {\n        responseEl.className = \"\"\n      }\n\n      try {\n        const response = await fetch(endpoint, {\n          method: \"POST\",\n          headers: {\n            \"Authorization\": \"Bearer \" + authToken\n            \/\/ GEEN 'Content-Type', fetch zet zelf multipart\/form-data met boundary\n          },\n          body: formData,\n          \/\/ Session & cookies are not needed, token is already present in header.\n          \/\/ Omit also allows us to utilize multiple clients in the PHP script\n          credentials: \"omit\" \n        });\n        \n        const result = await response.json();\n        console.log(\"Server response:\", result);\n        if(result.success == true) {\n          document.getElementById('Z2rL5ak').reset();\n          setResponse(responseEl,true,\"Uw aanvraag is succesvol verzonden. Het parkbeheer neemt binnenkort contact met u op. U ontvangt binnen enkele ogenblikken een e-mail ter bevestiging van uw aanvraag.\")\n        }\n        else {\n          setResponse(responseEl, false,\"Er heeft zich een fout opgedaan bij het verwerken van uw aanvraag. Probeer het alsublieft opnieuw en contacteer het parkbeheer indien een fout als deze zich blijft voordoen.\")\n        }\n        \/\/responseEl.textContent = JSON.stringify(result, null, 2);\n      } catch (err) {\n          console.error(\"Something went wrong whilst sending or processing the e-mail request:\", err);\n          setResponse(responseEl, false,\"Er heeft zich een fout opgedaan bij het verwerken van uw aanvraag. Probeer het alsublieft opnieuw en contacteer het parkbeheer indien een fout als deze zich blijft voordoen.\")\n      }\n    })\n    function setResponse(responseEl, isSuccess,msg) {\n        \/\/ General Bootstrap class to display the alert properly\n        responseEl.classList.add('alert')\n        responseEl.textContent = msg;\n        alertKind = isSuccess ? \"alert-success\" : \"alert-danger\"\n        responseEl.classList.add('alert', alertKind)\n    }\n    \n    function buildMessageBody() {\n      const bodyContainerEl = document.createElement('div')\n      let bodyParts\n      const emailBodyContents = [\n        {\n          key: \"generalEmailComment\",\n          title: \"\",\n          isHTML: true,\n          value: \"\"\n        },\n        {\n          key: \"senderName\",\n          title: \"Naam inzender\",\n          isHTML: false,\n          value: document.getElementById('senderName').value\n        },\n        {\n          key: \"senderEmail\",\n          title: \"E-mail van inzender\",\n          isHTML: false,\n          value: document.getElementById('emailAddress').value\n        },\n        {\n          key: \"senderPhone\",\n          title: \"Telefoonnummer van inzender\",\n          isHTML: false,\n          value: document.getElementById('telNumber').value\n        },\n        {\n          key: \"userComment\",\n          title: \"Opmerking inzender\",\n          isHTML: false,\n          value: document.getElementById('additionalComments').value\n        },\n      ]\n      \n      emailBodyContents.forEach((content) => {\n        const bodyPart = createKeyValueEl(content.title, content.value, content.isHTML)\n        bodyContainerEl.appendChild(bodyPart)\n      })\n      return bodyContainerEl\n    }\n    \n    function createKeyValueEl(title,value,isValHTML) {\n      const keyValContainerEl = document.createElement('span')\n      const keyEl = document.createElement('b')\n      keyEl.innerText = title\n      keyValContainerEl.appendChild(keyEl)\n      const valueEl = document.createElement('p')\n      if(isValHTML == true) {\n        valueEl.innerHTML = value\n      }\n      else {\n          valueEl.innerText = value\n      }\n      keyValContainerEl.appendChild(valueEl)\n      return keyValContainerEl\n    }\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=193"}],"version-history":[{"count":2,"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/193\/revisions\/223"}],"wp:attachment":[{"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}