{"id":7,"date":"2024-01-04T10:05:30","date_gmt":"2024-01-04T10:05:30","guid":{"rendered":"https:\/\/nicolescott.weddingessentials.pro\/?page_id=7"},"modified":"2024-01-05T08:09:22","modified_gmt":"2024-01-05T08:09:22","slug":"wedding-page","status":"publish","type":"page","link":"https:\/\/nicolescott.weddingessentials.pro\/","title":{"rendered":"Wedding Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-75f83c3e elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"75f83c3e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7911173a\" data-id=\"7911173a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2d479b68 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"2d479b68\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-9-1024x1024.png\" class=\"attachment-large size-large wp-image-141\" alt=\"\" srcset=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-9-1024x1024.png 1024w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-9-300x300.png 300w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-9-150x150.png 150w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-9-768x768.png 768w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-9-1536x1536.png 1536w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-1-9.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac59351 elementor-widget elementor-widget-text-editor\" data-id=\"ac59351\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>invite you to the ceremony and celebration of their marriage<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7989d432 elementor-widget elementor-widget-image\" data-id=\"7989d432\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-28-1024x576.png\" class=\"attachment-large size-large wp-image-156\" alt=\"\" srcset=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-28-1024x576.png 1024w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-28-300x169.png 300w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-28-768x432.png 768w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-28-1536x864.png 1536w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-28.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d4784f7 elementor-widget elementor-widget-text-editor\" data-id=\"5d4784f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p class=\"_04xlpA direction-ltr align-center para-style-body\"><a href=\"https:\/\/maps.app.goo.gl\/1NmVGtkhwLHJDcWR7\">Abbey House Hotel &#8211; Barrow In Furness<\/a><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-cdc2c72 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"cdc2c72\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc02597 elementor-widget elementor-widget-menu-anchor\" data-id=\"bc02597\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\nbody.elementor-page .elementor-widget-menu-anchor{margin-bottom:0}<\/style>\t\t<div id=\"rsvp\" class=\"elementor-menu-anchor\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-797968d elementor-widget elementor-widget-image\" data-id=\"797968d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-27-1024x576.png\" class=\"attachment-large size-large wp-image-149\" alt=\"\" srcset=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-27-1024x576.png 1024w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-27-300x169.png 300w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-27-768x432.png 768w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-27-1536x864.png 1536w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-27.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d76320 elementor-widget elementor-widget-text-editor\" data-id=\"7d76320\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>RSVP<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d9bb2a elementor-widget elementor-widget-html\" data-id=\"0d9bb2a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t  <!-- Initial Step -->\r\n  <div id=\"step-1\" class=\"step\">\r\n    <div class=\"acceptance-icons-container\">\r\n        <div class=\"acceptance-icons\" title=\"Accept\" onclick=\"toggleIcon('accept')\">\r\n            <div class=\"icon\" id='icon-accept'>\r\n                <img decoding=\"async\" src=\"http:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/heart.png\">\r\n            <\/div>\r\n            <div class=\"acceptance-label\">JOYFULLY <br> ATTEND<\/div>\r\n        <\/div>\r\n        <div class=\"acceptance-icons\" title=\"Decline\" onclick=\"toggleIcon('deny')\">\r\n            <div class=\"icon\" id='icon-deny'>\r\n                <img decoding=\"async\" src=\"http:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/broken-heart.png\">\r\n            <\/div>\r\n            <div class=\"acceptance-label\">REGRETFULLY <br>DECLINE<\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <label for=\"name\">Name:<\/label>\r\n    <input type=\"text\" id=\"name\">\r\n    <label for=\"guests\">Number of Guests:<\/label>\r\n    <input type=\"number\" id=\"guests\" min=\"1\" value=\"1\">\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(1, 2)\">NEXT<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n  <!-- Guest Step -->\r\n<div id=\"step-2\" class=\"step\" style=\"display: none;\">\r\n    <div id=\"guestsInfo\"><\/div>\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(2, 1)\">BACK<\/button>\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(2, 3)\">NEXT<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n  <!-- Review Step -->\r\n<div id=\"step-3\" class=\"step\" style=\"display: none;\">\r\n    <div id=\"review\"><\/div>\r\n    <div id=\"error-message\" style=\"color: red;\"><\/div>\r\n    <div class=\"button-container\">\r\n        <button class=\"nextPrev-btn\" onclick=\"changeStep(3, 2)\">BACK<\/button>\r\n        <button id=\"submit-btn\" onclick=\"submitForm()\">SUBMIT<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n  <!-- Loading Step -->\r\n<div id=\"step-loading\" style=\"display: none;\">\r\n  <div class=\"loading\">\r\n    <div class=\"loader\"><\/div>\r\n  <\/div>\r\n  <p>Loading, please wait...<\/p>\r\n<\/div>\r\n\r\n\r\n <!-- Step Success: Display when the data has been sent successfully -->\r\n<div id=\"step-success\" style=\"display: none;\">\r\n  <h1>Thank you!<\/h1>\r\n  <p>Your information was successfully submitted.<\/p>\r\n<\/div>\r\n\r\n<!-- Step Failure: Display when there was an error sending the data -->\r\n<div id=\"step-failure\" style=\"display: none;\">\r\n  <h1>Oops!<\/h1>\r\n  <p>An error has occured. Please disable your AdBlockers and try again.<\/p>\r\n<\/div>\r\n\r\n\r\n<style>\r\n.button-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 10px; \/* Adds space between buttons *\/\r\n    margin: 15px auto; \/* Centers the container horizontally *\/\r\n}\r\n\r\n.nextPrev-btn {\r\n    width:50%;\r\n    background-color: #8C987D;\r\n    border: none;\r\n    color: white;\r\n    font-family: 'Playfair Display';\r\n    border-radius: 24px;\r\n}\r\n\r\n#submit-btn {\r\n    width: 80%;\r\n    background-color: #8C987D;\r\n    border: none;\r\n    color: white;\r\n    font-weight: bold;\r\n    font-family: 'Playfair Display';\r\n    border-radius: 24px;\r\n}\r\n\r\n\r\n.acceptance-icons-container {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.acceptance-icons {\r\n    display: flex;\r\n    width: 50%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    margin-right: 20px;\r\n    cursor: pointer;\r\n}\r\n\r\n.icon {\r\n    width: 64px;\r\n}\r\n\r\n.icon img {\r\n    max-width: 100%;\r\n}\r\n\r\n.acceptance-label {\r\n    text-align: center;\r\n    font-family: 20px;\r\n    font-weight: bold;\r\n    margin-top: 10px;\r\n    font-family: 'Playfair Display';\r\n}\r\n\r\n.guest-collapsible {\r\n    cursor: pointer;\r\n    border: 1px solid #f1f1f1;\r\n    margin: 10px 0;\r\n}\r\n\r\n.guest-content {\r\n    display: block;\r\n    padding: 10px;\r\n}\r\n\r\n\/* Styles for all input fields *\/\r\n.guest-content input {\r\n    width: 100%;                  \/* Make input take the full width of the container *\/\r\n    padding: 10px 15px;           \/* Add padding for better appearance *\/\r\n    border: 1px solid #ccc;       \/* Define a border *\/\r\n    border-radius: 4px;           \/* Round the corners slightly *\/\r\n    font-size: 16px;              \/* Font size *\/\r\n    background-color: white;      \/* Background color *\/\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); \/* Add a subtle inner shadow for depth *\/\r\n    margin-bottom: 10px;          \/* Space between input fields *\/\r\n    appearance: none;             \/* Remove browser default styling *\/\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    transition: border-color 0.2s; \/* Transition for a smooth effect on focus *\/\r\n    height: 40px;\r\n}\r\n\r\n\/* Hover state *\/\r\n.guest-content input:hover {\r\n    border-color: #aaa;           \/* Slightly darken border on hover *\/\r\n}\r\n\r\n\/* Focus state *\/\r\n.guest-content input:focus {\r\n    border-color: #007BFF;        \/* Highlight border color when input is focused *\/\r\n    outline: none;                \/* Remove the default browser outline *\/\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 123, 255, 0.5); \/* Enhance shadow on focus *\/\r\n}\r\n\r\n\/* Remove the default clear 'x' in IE and Edge *\/\r\n.guest-content input::-ms-clear {\r\n    display: none;\r\n}\r\n\r\n\/* Remove default spin buttons on number inputs for Firefox *\/\r\n.guest-content input[type=\"number\"]::-webkit-inner-spin-button,\r\n.guest-content input[type=\"number\"]::-webkit-outer-spin-button {\r\n    appearance: none;\r\n    margin: 0;\r\n}\r\n\r\n\/* Remove default spin buttons on number inputs for Firefox *\/\r\n.guest-content input[type=\"number\"] {\r\n    -moz-appearance: textfield;\r\n}\r\n\r\n\/* Handle styles for date pickers in Webkit browsers *\/\r\n.guest-content input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n    background-color: rgba(0, 123, 255, 0.3);\r\n    border-radius: 4px;\r\n    padding: 5px;\r\n    color: transparent;         \/* Transparent color for the default icon *\/\r\n    cursor: pointer;            \/* Cursor style *\/\r\n}\r\n\r\n\r\n\/* CSS for reviewDiv *\/\r\n#review {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center; \/* Centers items horizontally *\/\r\n    width: 100%;\r\n    max-width: 600px; \/* Limiting the maximum width to ensure readability *\/\r\n    margin: 20px auto; \/* 20px vertical margin and auto horizontal margin to center the div *\/\r\n    padding: 20px;\r\n    border: 1px solid #e0e0e0;\r\n    border-radius: 8px;\r\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); \/* Optional subtle shadow for some depth *\/\r\n    background-color: #ffffff;\r\n}\r\n\r\n#review p {\r\n    width: 100%;\r\n    text-align: left; \/* Content aligned to left within each paragraph *\/\r\n    margin-bottom: 15px;\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n}\r\n\r\n#review h3 {\r\n    width: 100%;\r\n    margin-bottom: 10px; \/* Add some spacing below the headers *\/\r\n    font-size: 18px; \/* Adjust the font size as needed *\/\r\n    \/* Additional styling for headers as needed *\/\r\n}\r\n\r\n#step-loading, #step-success, #step-failure {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center; \/* Centers items horizontally *\/\r\n  justify-content: center; \/* Centers items vertically *\/\r\n  width: 50%; \/* Set the width to 50% *\/\r\n  margin: 0 auto; \/* Center the div on the page *\/\r\n  padding: 20px;\r\n  text-align: center; \/* Center-align the text *\/\r\n}\r\n\r\n#step-success, #step-failure {\r\n  text-align: center;\r\n  color: #333;\r\n  font-size: 18px;\r\n}\r\n\r\n#step-success h1,\r\n#step-failure h1 {\r\n  color: #aec5b3;\r\n  font-size: 24px;\r\n}\r\n\r\n.loading {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n#step-loading p {\r\n    text-align: center;\r\n    margin-top: 25px;\r\n}\r\n\r\n.loader {\r\n  border: 5px solid #f3f3f3;\r\n  border-radius: 50%;\r\n  border-top: 5px solid #3498db;\r\n  width: 50px;\r\n  height: 50px;\r\n  animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n\r\n.error-message {\r\n  font-size: 16px; \r\n  color: red; \r\n  margin-top: 10px; \r\n  font-weight: bold; \r\n  display: none; \r\n}\r\n\r\nlabel {\r\n    text-transform: uppercase;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n    function toggleIcon(selectedIconType) {\r\n        \/\/ Elements for both icons\r\n        const acceptIcon = document.getElementById('icon-accept');\r\n        const denyIcon = document.getElementById('icon-deny');\r\n\r\n        \/\/ Determine which icon is clicked and which is the other icon\r\n        const clickedIcon = selectedIconType === 'accept' ? acceptIcon : denyIcon;\r\n        const otherIcon = selectedIconType === 'accept' ? denyIcon : acceptIcon;\r\n\r\n        \/\/ Toggle the 'selected' class and update the image for the clicked icon\r\n        if (clickedIcon.classList.contains('selected')) {\r\n            clickedIcon.classList.remove('selected');\r\n            clickedIcon.querySelector('img').src = clickedIcon.querySelector('img').src.replace('-selected1.png', '.png');\r\n        } else {\r\n            clickedIcon.classList.add('selected');\r\n            clickedIcon.querySelector('img').src = clickedIcon.querySelector('img').src.replace('.png', '-selected1.png');\r\n        }\r\n\r\n        \/\/ Ensure the other icon is not selected and its image is the default one\r\n        if (otherIcon.classList.contains('selected')) {\r\n            otherIcon.classList.remove('selected');\r\n            otherIcon.querySelector('img').src = otherIcon.querySelector('img').src.replace('-selected1.png', '.png');\r\n        }\r\n    } \r\n\r\n\r\n    function hideAllSteps() {\r\n        const stepDivs = document.querySelectorAll('[id^=\"step-\"]');\r\n        stepDivs.forEach(div => div.style.display = 'none');\r\n    }\r\n\r\n    function changeStep(currentStep, targetStep) {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n\r\n        if (targetStep === 1) {}\r\n\r\n        if (targetStep === 2) {\r\n            if(currentStep === 1) {\r\n                if (!verifyStep1()) {\r\n                    return;\r\n                }\r\n                else if (!isAccepted) {\r\n                    targetStep = 3;\r\n                }\r\n                else {\r\n                    createGuestInfo();\r\n                }\r\n            }\r\n\r\n            if(currentStep === 3) {\r\n                if (!isAccepted) {\r\n                    targetStep = 1;\r\n                }\r\n            }\r\n        }\r\n\r\n        if (targetStep === 3) {\r\n            if (!verifyStep2()) {\r\n                return;\r\n            }\r\n\r\n            createReview();\r\n        }\r\n\r\n        hideAllSteps();\r\n        document.getElementById('step-' + targetStep).style.display = 'block';\r\n    }\r\n\r\n\r\n    function createGuestInfo() {\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value);\r\n        const guestsInfoDiv = document.getElementById('guestsInfo');\r\n        guestsInfoDiv.innerHTML = ''; \/\/ Clear previous content\r\n\r\n        \/\/ Create options for guests\r\n        for (let j = 1; j <= numberOfGuests; j++) {\r\n            guestsInfoDiv.innerHTML += `\r\n                <div class=\"guest\">\r\n                    <h3>Guest #${j}<\/h3>\r\n                    <label>Name:<\/label>\r\n                    <input type=\"text\" class=\"guest-name\" oninput=\"updateGuestTitle(this, 'Guest', ${j})\">\r\n\r\n                    <!-- New line for further guest options  -->\r\n                    <div class=\"guest-options\">\r\n                        <label>Starter choice:<\/label>\r\n                        <select name=\"starter\">\r\n                            <option disabled selected value> -- Select your starter -- <\/option>\r\n                            <option value=\"starter1\">Leek & Potato Soup<\/option>\r\n                            <option value=\"starter2\">Pressing of Slow Cooked Pork<\/option>\r\n                            <option value=\"starter3\">Mushroom Arancini<\/option>\r\n                        <\/select>\r\n                        <label>Starter choice:<\/label>\r\n                        <select name=\"main\">\r\n                            <option disabled selected value> -- Select your main course-- <\/option>\r\n                            <option value=\"main1\">Roast Breast of Cumbrian Chicken<\/option>\r\n                            <option value=\"main2\">Roast Sirlion of Cumbrian Beef<\/option>\r\n                            <option value=\"main3\">Mushroom & Leek Wellington<\/option>\r\n                        <\/select>\r\n                        <label>Starter choice:<\/label>\r\n                        <select name=\"dessert\">\r\n                            <option disabled selected value> -- Select your dessert -- <\/option>\r\n                            <option value=\"dessert1\">Sticky Toffee Pudding<\/option>\r\n                            <option value=\"dessert2\">Apple Crumble<\/option>\r\n                            <option value=\"dessert3\">Steamed Chocolate Pudding<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n        }\r\n    }\r\n\r\n\r\n    function updateGuestTitle(inputElement, guestType, guestNumber) {\r\n        const guestName = inputElement.value;\r\n        const guestSection = inputElement.closest('.guest');\r\n        const titleElement = guestSection.querySelector('h3');\r\n\r\n        titleElement.textContent = guestName || `${guestType} #${guestNumber}`;\r\n    }\r\n\r\n\r\n    function verifyStep1() {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const isDenied = document.getElementById('icon-deny').classList.contains('selected');\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value);\r\n        const name = document.getElementById('name').value;\r\n        const step1Div = document.getElementById('step-1');\r\n        const errorMessageDiv = step1Div.querySelector('#error-message');\r\n        errorMessageDiv.textContent = '';\r\n\r\n        \/\/ Check if either accepted or denied is selected\r\n        if (!isAccepted && !isDenied) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Please either accept or decline';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n\r\n        if(numberOfGuests < 1) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Number of Guests must be at least 1';\r\n            return false; \/\/ Return false indicating verification failed \r\n        }\r\n\r\n        if(!name) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Please fill out your name';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n\r\n        errorMessageDiv.style.display = 'none';\r\n        errorMessageDiv.textContent = '';\r\n        return true; \/\/ Return true indicating successful verification\r\n    }\r\n\r\n\r\n    function verifyStep2() {\r\n    const step2Div = document.getElementById('step-2');\r\n    const errorMessageDiv = step2Div.querySelector('#error-message');\r\n    errorMessageDiv.textContent = '';\r\n    \r\n    \/\/ Function to check if input or select is empty\r\n    const isEmpty = (element) => {\r\n        if (element.tagName === 'INPUT') {\r\n            return element.value.trim() === '';\r\n        } else if (element.tagName === 'SELECT') {\r\n            return element.options[element.selectedIndex].disabled;\r\n        }\r\n        return false;\r\n    };\r\n    \r\n    \/\/ Check if any guest names are empty\r\n    const guestElements = document.querySelectorAll('.guest-name, .guest-options select');\r\n    for (const element of guestElements) {\r\n        if (isEmpty(element)) {\r\n            errorMessageDiv.style.display = 'block';\r\n            errorMessageDiv.textContent = 'Please fill out all fields correctly';\r\n            return false; \/\/ Return false indicating verification failed\r\n        }\r\n    }\r\n\r\n    \/\/ If all inputs have values\r\n    errorMessageDiv.style.display = 'none';\r\n    errorMessageDiv.textContent = '';\r\n    return true; \/\/ Return true indicating successful verification\r\n}\r\n\r\n\r\n\r\n    function createReview() {\r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const acceptanceStatus = isAccepted ? 'Joyfully attend' : 'Regretfully decline';\r\n        const numberOfGuests = document.getElementById('guests').value;\r\n        const name = document.getElementById('name').value;\r\n\r\n        const reviewDiv = document.getElementById('review');\r\n        reviewDiv.innerHTML = `<h2>Review Your Information<\/h2>`;\r\n        reviewDiv.innerHTML += `<p>Acceptance Status: ${acceptanceStatus}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Name: ${name}<\/p>`;\r\n        reviewDiv.innerHTML += `<p>Number of Guests: ${numberOfGuests}<\/p>`;\r\n\r\n        if(isAccepted) {\r\n            const guestNames = document.querySelectorAll('.guest-name');\r\n            const guestSections = document.querySelectorAll('.guest-options');\r\n            \r\n            reviewDiv.innerHTML += `<h3>Guests:<\/h3>`;\r\n            guestNames.forEach((input, index) => {\r\n                const guestSection = guestSections[index];\r\n                const starter = guestSection.querySelector('select[name=\"starter\"] option:checked').text;\r\n                const main = guestSection.querySelector('select[name=\"main\"] option:checked').text;\r\n                const dessert = guestSection.querySelector('select[name=\"dessert\"] option:checked').text;\r\n\r\n                reviewDiv.innerHTML += `<p>Guest #${index + 1}: ${input.value} - Starter: ${starter} - Main: ${main} - Dessert: ${dessert}<\/p>`;\r\n            });\r\n        }\r\n    }\r\n\r\n\r\n\r\n    function submitForm() {\r\n        changeStep(3, 'loading')\r\n        \r\n        const isAccepted = document.getElementById('icon-accept').classList.contains('selected');\r\n        const acceptanceStatus = isAccepted ? 'Accepted' : 'Declined';\r\n        const name = document.getElementById('name').value;\r\n        const numberOfGuests = parseInt(document.getElementById('guests').value, 10);\r\n    \r\n\r\n        \/\/ Gathering guest details\r\n        const guests = [];\r\n        if (isAccepted) {\r\n            const guestSections = document.querySelectorAll('.guest-options');\r\n            guestSections.forEach((guestSection, index) => {\r\n                const guestName = guestSection.parentElement.querySelector('.guest-name').value;\r\n                \r\n                \/\/ Get the selected option's text for starter, main, and dessert\r\n                const starter = guestSection.querySelector('select[name=\"starter\"] option:checked').text;\r\n                const main = guestSection.querySelector('select[name=\"main\"] option:checked').text;\r\n                const dessert = guestSection.querySelector('select[name=\"dessert\"] option:checked').text;\r\n    \r\n                guests.push({\r\n                    id: index + 1,\r\n                    name: guestName,\r\n                    starter: starter,\r\n                    main: main,\r\n                    dessert: dessert\r\n                });\r\n            });\r\n        }\r\n\r\n        const payload = {\r\n            acceptanceStatus,\r\n            name,\r\n            numberOfGuests,\r\n            guests\r\n        };\r\n\r\n\r\n\r\n        const url = 'https:\/\/europe-west4-wedding-rsvp-385418.cloudfunctions.net\/rsvp-nicolescott';\r\n\r\n        fetch(url, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify(payload)\r\n        })\r\n        .then(response => {\r\n            \/\/ Wait for at least 1 second before switching steps\r\n            setTimeout(() => {\r\n                if (response.ok) {\r\n                    \/\/ Received 200\r\n                    changeStep(3, 'success');\r\n                } else {\r\n                    console.log('Backend error');\r\n                    changeStep(3, 'failure');\r\n                }\r\n            }, 500);  \/\/ 1000 milliseconds = 1 second\r\n        })\r\n        .catch(error => {\r\n            \/\/ Wait for at least 1 second before switching steps\r\n            setTimeout(() => {\r\n                \/\/ Error sending data\r\n                changeStep(3, 'failure');\r\n            }, 500);  \/\/ 1000 milliseconds = 1 second\r\n        });\r\n        \r\n        \r\n        const rsvpElement = document.getElementById('rsvp');\r\n        if (rsvpElement) {\r\n            rsvpElement.scrollIntoView({ behavior: 'smooth' });\r\n        }\r\n    }\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-67a70a17 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"67a70a17\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-270515ae\" data-id=\"270515ae\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-697cc772 elementor-widget elementor-widget-image\" data-id=\"697cc772\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-23-1024x576.png\" class=\"attachment-large size-large wp-image-29\" alt=\"\" srcset=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-23-1024x576.png 1024w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-23-300x169.png 300w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-23-768x432.png 768w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-23-1536x864.png 1536w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-23.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12816fdf elementor-widget elementor-widget-text-editor\" data-id=\"12816fdf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Schedule<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e2ca568 elementor-widget elementor-widget-image\" data-id=\"3e2ca568\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"1024\" src=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-24-512x1024.png\" class=\"attachment-large size-large wp-image-30\" alt=\"\" srcset=\"https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-24-512x1024.png 512w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-24-150x300.png 150w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-24-768x1536.png 768w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-24-1024x2048.png 1024w, https:\/\/nicolescott.weddingessentials.pro\/wp-content\/uploads\/2024\/01\/RSVP-Website-Elements-24.png 1500w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/>\t\t\t\t\t\t\t\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<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>invite you to the ceremony and celebration of their marriage Abbey House Hotel &#8211; Barrow In Furness RSVP JOYFULLY ATTEND REGRETFULLY DECLINE Name: Number of Guests: NEXT BACK NEXT BACK SUBMIT Loading, please wait&#8230; Thank you! Your information was successfully submitted. Oops! An error has occured. Please disable your AdBlockers and try again. Schedule<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/7"}],"collection":[{"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":109,"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/nicolescott.weddingessentials.pro\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}