{"id":132,"date":"2025-09-24T14:24:04","date_gmt":"2025-09-24T14:24:04","guid":{"rendered":"https:\/\/park-app.imaginecreativeagency.nl\/?page_id=132"},"modified":"2025-11-12T14:08:05","modified_gmt":"2025-11-12T14:08:05","slug":"meer","status":"publish","type":"page","link":"https:\/\/park-app.imaginecreativeagency.nl\/?page_id=132","title":{"rendered":"Meer"},"content":{"rendered":"<div class=\"row w-100 lazyblock-teksttitel-1Jhz7L wp-block-lazyblock-teksttitel\">\n\t<div class=\"col p-4\" >\n  \t<h2 class=\"h1\">Meer informatie<\/h2>\t  \n\t  <p>Om uw verblijf op ons park zo aangenaam mogelijk te maken, hebben wij een aantal pagina&#8217;s samengesteld met handige informatie.<\/p>\n\t<\/div>\n<\/div>\n\n<style>\n.wp-block-lazyblock-titletext {\n\tbackground-color: var(--wp--preset--color--pat-default);\n\tpadding: 20px;\n}\n<\/style>\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <div class=\"lazyblock-formulier-1nJ0Ha wp-block-lazyblock-formulier\">\n        <h2>Reservering Rondleiding Mottekasteel aanvragen<\/h2>\n        <p id=\"response\"><\/p>\n        <form id=\"1nJ0Ha\">\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('1nJ0Ha').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: \"Park X\",\n        smtp_bcc_addresses: [\"d.marcelissen@imaginecreativeagency.nl\"],\n        recipient: document.getElementById('emailAddress').value,\n        subject: \"Reserveringsaanvraag tour Mottekasteel,\",\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('1nJ0Ha').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: \"<p><strong>Let op:\u00a0<\/strong>Dit bericht bevestigt dat de inzending van een formulier vanuit de app succesvol is verlopen en bij de juiste partij is aangekomen. Echter is het geen garantie dat er daadwerkelijk plaats beschikbaar is op de gewenste faciliteit. De inzender wordt binnen aanzienbare tijd gecontacteerd d.m.v. de door zijn of haar ingevulde contactgegevens door het parkbeheer en medegedeeld of de reservering daadwerkelijk kan doorgaan.<\/p>\"\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>\n\n\n<p><\/p>\n","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-132","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/132","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=132"}],"version-history":[{"count":10,"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/132\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/132\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/park-app.imaginecreativeagency.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}