{"id":2007,"date":"2024-10-04T19:58:40","date_gmt":"2024-10-04T19:58:40","guid":{"rendered":"https:\/\/corkandbean.ca\/oshawa\/?page_id=2007"},"modified":"2025-01-13T03:53:48","modified_gmt":"2025-01-13T03:53:48","slug":"booking","status":"publish","type":"page","link":"https:\/\/corkandbean.ca\/oshawa\/booking\/","title":{"rendered":"Booking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2007\" class=\"elementor elementor-2007\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8aa9868 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"8aa9868\" 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-1e91b9f\" data-id=\"1e91b9f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2249c30 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"2249c30\" 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-17f13d9\" data-id=\"17f13d9\" 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-1dcfb4c elementor-widget elementor-widget-shortcode\" data-id=\"1dcfb4c\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\">\n<style>\n    \/* Cart Container Styling *\/\n#cart-container {\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 8px;\n    background-color: #ffffff;\n    padding: 20px;\n    margin: 20px;\n    font-family: 'Arial', sans-serif;\n    top:25% !important;\n    width:25% !important;\n    right:0 !important;\n}\n\n\/* Cart Header *\/\n.cart-header h3 {\n    font-size: 1.5rem;\n    margin-bottom: 15px;\n    color: #333333;\n    text-align: center;\n    border-bottom: 1px solid #e0e0e0;\n    padding-bottom: 10px;\n}\n\n\/* Cart Section *\/\n.cart-section {\n    margin-bottom: 15px;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n\/* Cart Item *\/\n.cart-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 10px;\n    font-size:1.25em !important;\n}\n\n.cart-item span{\n    text-align:left;\n}\n\n.cart-item:last-child {\n    margin-bottom: 0;\n}\n\n\/* Item Name *\/\n.cart-item-name {\n    font-size: 1rem;\n    font-weight: 600;\n    color: #555555;\n}\n\n\/* Item Price *\/\n.cart-item-price {\n    font-size: 1rem;\n    font-weight: 600;\n    color: #333333;\n}\n\n\/* Discount Section *\/\n.cart-discount {\n    text-align: center;\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: #4caf50;\n    margin: 10px 0;\n}\n\n\/* Total Section *\/\n.cart-total {\n    margin-top: 15px;\n    padding-top: 10px;\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: #000000;\n    text-align: center;\n    border-top: 2px solid #333333;\n}\n\n#event_details{\n    display:none;\n}\n\n#event_details.active{\n    display:block;\n}\n\n\/* Custom Date Picker Styles *\/\n.custom-datepicker {\n    position: absolute;\n    background: white;\n    border: 1px solid #ccc;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    z-index: 10000;\n    padding: 10px;\n    display: none;\n    width: 250px;\n    background-color: #fff;\n}\n\n.flatpickr-months {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 2.5rem;\n}\n\n.flatpickr-month {\n    font-size: 1.5rem;\n    font-weight: bold;\n    margin: 0;\n    line-height: 2rem;\n    white-space: nowrap;\n    position: relative;\n}\n\n.flatpickr-current-month {\n    display: inline-block;\n    vertical-align: middle;\n}\n\n.flatpickr-prev-month, .flatpickr-next-month {\n    font-size: 1.5rem;\n    width: 2rem;\n    height: 2rem;\n    background-color: #f5f5f5;\n    border-radius: 50%;\n    cursor: pointer;\n    margin: 0 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.flatpickr-prev-month:hover, .flatpickr-next-month:hover {\n    background-color: #e0e0e0;\n}\n\n.flatpickr-months .flatpickr-next-month,\n.flatpickr-months .flatpickr-prev-month {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n}\n\n.flatpickr-prev-month {\n    left: 0;\n}\n\n.flatpickr-next-month {\n    right: 0;\n}\n\n.flatpickr-days {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    gap: 1px;\n    width: 100%;\n}\n\n.dayContainer {\n    display: contents;\n}\n\n.flatpickr-day {\n    text-align: center;\n    padding: 5px;\n    border: 1px solid #e6e6e6;\n    cursor: pointer;\n}\n\n.flatpickr-day:hover {\n    background-color: #f0f0f0;\n}\n\n.flatpickr-day.selected {\n    background-color: #000;\n    color: white;\n}\n\n.flatpickr-day.disabled {\n    color: #ccc;\n    cursor: not-allowed;\n}\n\n.flatpickr-weekdays {\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n    text-align: center;\n    font-weight: bold;\n    margin-bottom: 5px;\n}\n\n.flatpickr-weekday {\n    padding: 5px;\n}\n\n\/* Ensure parent elements don\u2019t interfere *\/\n.cork-glance {\n    background: #fff;\n    border: 1px solid #e3e3e3;\n    border-left: 4px solid #111;\n    border-radius: 10px;\n    padding: 18px 20px;\n    margin: 0 0 26px;\n}\n.cork-glance-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n    gap: 14px 26px;\n}\n.cork-glance-grid > div { display: flex; flex-direction: column; gap: 3px; }\n.cork-glance-grid span {\n    font-size: 11px;\n    letter-spacing: .06em;\n    text-transform: uppercase;\n    color: #8a8a8a;\n}\n.cork-glance-grid strong { font-size: 15px; color: #111; font-weight: 600; }\n.cork-glance-flag { color: #b3261e !important; }\n.cork-glance-note {\n    margin-top: 16px;\n    padding-top: 14px;\n    border-top: 1px solid #eee;\n}\n.cork-glance-note span {\n    font-size: 11px;\n    letter-spacing: .06em;\n    text-transform: uppercase;\n    color: #8a8a8a;\n}\n.cork-glance-note p { margin: 6px 0 0; font-size: 15px; color: #222; line-height: 1.5; }\n\n.booking-container, .section-group, .name-email {\n    position: relative;\n    overflow: visible !important;\n    z-index: 1;\n}\n\n<\/style>\n\n<div class=\"booking-container\">\n    <form id=\"cork-bean-booking-form\" method=\"post\">\n        <h1><\/h1>\n        <h2 style=\"font-family:Roboto;color:#656565;font-weight:400\">\n            Get an instant estimate and secure your booking in just a few steps!        <\/h2>\n\n        <input type=\"hidden\" id=\"cork_bean_nonce\" name=\"cork_bean_nonce\" value=\"d1c02297cf\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/oshawa\/wp-json\/wp\/v2\/pages\/2007\" \/>        \n\n        <!-- User Details -->\n        <div class=\"section-group name-email active\">\n            <label for=\"name\">Your Name:<\/label>\n            <input  type=\"text\" id=\"name\" name=\"name\" placeholder=\"Enter your name\" required value=\"\">\n\n            <label for=\"email\">Your Email:<\/label>\n            <input  type=\"email\" id=\"email\" name=\"email\" placeholder=\"Enter your email\" required value=\"\">\n            \n            <h2>When would you like to book?<\/h2>\n            <input type=\"text\" id=\"booking_date\" name=\"booking_date\" placeholder=\"Select a date\" required value=\"\" readonly>\n            <!-- Custom date picker container -->\n            <div id=\"custom-datepicker\" class=\"custom-datepicker\"><\/div>\n\n            <!-- Time Slots -->\n            <div id=\"time-slots\" class=\"form-group\">\n                <label>Select a start time:<\/label>\n                <div id=\"time-options\"><\/div>\n                <input id=\"start_time\" type=\"hidden\" name=\"start_time\" value=\"\">\n            <\/div>\n\n            <!-- Duration -->\n            <div id=\"duration-selection\" class=\"form-group\" style=\"display: none;\">\n                <label>For how many hours?<\/label>\n                <div id=\"duration-options\"><\/div>\n                <input id=\"minutes_rental\" type=\"hidden\" name=\"minutes_rental\" value=\"\">\n                <h3 class=\"booking-hint\"><\/h3>\n            <\/div>    \n        <\/div>\n\n        <!-- Rental Options -->\n        <div class=\"section-group rental-type\">\n            <h2>What would you like to rent?<\/h2>\n            <label>\n                <input type=\"radio\" name=\"rental_option\" value=\"full_store\" >\n                I want to rent the full store (required if you have more than 25 people)\n            <\/label>\n            <label>\n                <input type=\"radio\" name=\"rental_option\" value=\"party_room\" >\n                I just want to rent the party room (basement)\n            <\/label>\n\n            <!-- Host Event Checkbox -->\n            <label style=\"display:none\">\n                <input type=\"checkbox\" id=\"host_event_checkbox\" name=\"host_event_checkbox\" >\n                I plan on hosting a ticketed event\/workshop\n            <\/label>\n            <textarea id=\"event_details\" name=\"event_details\" placeholder=\"Provide event details here\"><\/textarea>\n        <\/div>\n\n        <div class=\"section-group preorder-details\">\n            <!-- Pre-order Food -->\n            <h2>Pre-order your food! <a style=\"font-size:.8em\" href=\"\/oshawa\/menu\" target=\"_blank\">(Click here to view our full menu)<\/a><\/h2>\n            <h3>Select any items you would like to pre-order:<\/h3>\n            <div class=\"preorder-options\">\n                <div class=\"inputwrapper\"><label><input type=\"checkbox\" id=\"sandwiches_group\"> Sandwiches<\/label><\/div>\n                <div class=\"inputwrapper\"><label><input type=\"checkbox\" id=\"charcuterie_group\"> Charcuterie<\/label><\/div>\n                <div class=\"inputwrapper\"><label><input type=\"checkbox\" id=\"nachos_group\"> Nachos<\/label><\/div>\n                <div class=\"inputwrapper\"><label><input type=\"checkbox\" id=\"pizza_group\"> Flatbread Pizza<\/label><\/div>\n            <\/div>\n\n            <!-- Food Options -->\n            <div class=\"preorder-option\" id=\"sandwiches-options\" style=\"display: none;\">\n                <h3>Sandwiches<\/h3>\n                <label>Turkey Apple Brie: <input type=\"number\" name=\"turkey_apple_brie\" min=\"0\" value=\"0\"><\/label>\n                <label>Turkey Crunch: <input type=\"number\" name=\"turkey_crunch\" min=\"0\" value=\"0\"><\/label>\n                <label>Italian: <input type=\"number\" name=\"italian\" min=\"0\" value=\"0\"><\/label>\n                <label>Charcuterie Wrap: <input type=\"number\" name=\"charcuterie_wrap\" min=\"0\" value=\"0\"><\/label>\n                <label>Cubano: <input type=\"number\" name=\"cubano\" min=\"0\" value=\"0\"><\/label>\n                <label>Vegan Falafel Wrap: <input type=\"number\" name=\"vegan_falafel_wrap\" min=\"0\" value=\"0\"><\/label>\n            <\/div>\n\n            <div class=\"preorder-option\" id=\"charcuterie-options\" style=\"display: none;\">\n                <h3>Charcuterie<\/h3>\n                <label>How many people in your group want Charcuterie?<input placeholder=\"How many people do you want Charcuterie for?\" type=\"number\" name=\"charcuterie_board\" min=\"0\" value=\"0\"><\/label>\n                <label>How many Baked Brie's would you like to pre-order?<input placeholder=\"How many people do you want Baked Brie's for?\" type=\"number\" name=\"baked_brie\" min=\"0\" value=\"0\"><\/label>\n                <label>How many Cheeseboard's would you like to pre-order?<input placeholder=\"\" type=\"number\" name=\"cheeseboard\" min=\"0\" value=\"0\"><\/label>\n            <\/div>\n\n            <div class=\"preorder-option\" id=\"nachos-options\" style=\"display: none;\">\n                <h3>Nachos<\/h3>\n                <label>How many Nachos would you like to order? <input type=\"number\" name=\"nachos\" min=\"0\" value=\"0\"><\/label>\n            <\/div>\n\n            <div class=\"preorder-option\" id=\"pizza-options\" style=\"display: none;\">\n                <h3>Flatbread Pizza<\/h3>\n                <label>How many Flatbread Pizza's would you like to order?<input type=\"number\" name=\"flatbread\" min=\"0\" value=\"0\"><\/label>\n            <\/div>\n\n            <label style=\"clear:both\">\n                <input type=\"checkbox\" id=\"outside_food\" name=\"outside_food\" value=\"yes\" >\n                I am planning on bringing outside food\n            <\/label>\n\n            <h3 style=\"clear:both\">Additional Details<\/h3>\n            <textarea id=\"additional_details\" name=\"additional_details\" placeholder=\"If you have any additional details, please provide them here\"><\/textarea>\n        <\/div>\n\n        <!-- Estimated Cost -->\n        <div class=\"estimated-cost-wrapper\"><h2>Estimated Cost: <span id=\"estimated_cost\">$0<\/span><\/h2><\/div>\n\n        <input class=\"submit-btn\" type=\"submit\" value=\"Submit Booking\">\n        <div id=\"cart-container\" style=\"position: fixed; top: 100px; right: 20px; width: 300px; background: #f9f9f9; padding: 15px; border: 1px solid #ccc; border-radius: 5px;\">\n            <h3>Your Cart<\/h3>\n        <\/div>\n    <\/form>\n\n    <div id=\"success-message\" style=\"display:none;\">\n        <h2>Your booking has been submitted successfully! We will be in touch within 48h<\/h2>\n        <p>Thank you for choosing Cork & Bean.<\/p>\n    <\/div>\n<\/div>\n\n<style>\n    .submit-btn.update{\n        display:none;\n    }\n    .time-slot-btn,.duration-btn{\n        cursor:pointer;\n    }\n    input.submit-btn{\n        background:#eee !important;\n        cursor: default;\n    }\n    input.submit-btn.active{\n        background:black !important;\n        cursor:pointer;\n    }\n    #sandwiches-options label{\n        width:50%;\n        float:left;\n        display:inline-block;\n    }\n    .preorder-options{\n        clear:both;\n    }\n    .preorder-options .inputwrapper{\n        float:left;\n        width:50%;\n        display:inline-block;\n    }\n    .preorder-options .inputwrapper:last-child{\n        margin-bottom:2em;\n    }\n    .preorder-option{\n        clear:both;\n    }\n    .preorder-option h3{\n        font-size:1.5em;\n        margin:1.5em 0;\n    }\n    .estimated-cost-wrapper{\n        clear:both;\n    }\n    \/* Time Slot & Duration Styles *\/\n    #time-options button, #duration-options button {\n        display: inline-block;\n        padding: 10px 15px;\n        margin: 5px;\n        border: 1px solid #ccc;\n        background-color: #f5f5f5;\n        border-radius: 20px;\n        transition: 0.1s ease-out;\n    }\n    #time-options button:hover, #duration-options button:hover {\n        background-color: #ddd;\n    }\n    #time-options button.active, #duration-options button.active {\n        background-color: #000;\n        color: white;\n        transition: 0.1s ease-in;\n    }\n    #duration-selection {\n        margin-top: 1em;\n    }\n    #success-message {\n        text-align: center;\n        margin-top: 20px;\n    }\n    #success-message h2, #success-message p{\n        color:#fff;\n    }\n    .checkmark-circle {\n        width: 100px;\n        height: 100px;\n        border-radius: 50%;\n        background-color: #4caf50;\n        position: relative;\n        margin: 0 auto 20px;\n    }\n    .checkmark-circle .checkmark {\n        width: 40px;\n        height: 20px;\n        border-left: 6px solid white;\n        border-bottom: 6px solid white;\n        position: absolute;\n        left: 30px;\n        top: 50px;\n        transform: rotate(-45deg);\n    }\n    .section-group{\n        display:none;\n    }\n    .section-group.active{\n        display:block;\n    }\n<\/style>\n\n<script>\njQuery(document).ready(function ($) {\n    \/\/ Store the initial value of the input\n    let previousHoursRentalVal = $('#minutes_rental').val();\n    let previousBookingDateVal = $('#booking_date').val();\n\n    const requiredFields = {};\n\n    \/\/ Use setInterval to periodically check for changes to the input value\n    setInterval(function () {\n        const currentHoursRentalVal = $('#minutes_rental').val();\n        const currentBookingDateVal = $('#booking_date').val();\n\n        \/\/ If the value has changed, handle the change\n        if (currentHoursRentalVal && currentHoursRentalVal !== previousHoursRentalVal) {\n            if (!$(\".section-group.rental-type\").hasClass(\"active\")) {\n                $(\".section-group.rental-type\").addClass(\"active\");\n            }\n            previousHoursRentalVal = currentHoursRentalVal;\n        }\n\n        if (currentBookingDateVal && currentBookingDateVal !== previousBookingDateVal) {\n            $(\"#time-slots\").show();\n            previousBookingDateVal = currentHoursRentalVal;\n        }\n\n        let btnEnabled = true;\n        let rentalChecked = $('input[name=\"rental_option\"]').get(0).checked || $('input[name=\"rental_option\"]').get(1).checked;\n        if(!$('#name').val() || !$(\"#email\").val() || !$(\"#booking_date\").val() || !$(\"#minutes_rental\").val() || !$(\"#start_time\").val() || !rentalChecked){\n            btnEnabled = false;\n        }\n        \n        if(!btnEnabled){\n            if($('.submit-btn').hasClass('active')){\n                $('.submit-btn').removeClass(\"active\");\n            }\n        }\n        else{\n            if(!$('.submit-btn').hasClass('active')){\n                $('.submit-btn').addClass(\"active\");\n            }\n        }\n\n        if(rentalChecked){\n            if(!$(\".preorder-details\").hasClass(\"active\")){\n                $(\".preorder-details\").addClass(\"active\");\n            }\n        }\n\n        if($(\"#minutes_rental\").val()){\n            if(!$(\".rental-type\").hasClass(\"active\")){\n                $(\".rental-type\").addClass(\"active\");\n            }\n        }\n    }, 100); \/\/ Check every 100ms\n\n    });\n<\/script>\n\n<!-- Google tag (gtag.js) -->\n<script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-T0HECSG2RX\"><\/script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n  gtag('config', 'G-T0HECSG2RX');\n<\/script>\n\n<script>\njQuery(document).ready(function ($) {\n    $('#email').on('input', function () {\n        const email = $(this).val();\n        const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n\n        if (emailRegex.test(email)) {\n            const currentPageUrl = window.location.href;\n            console.log(\"Firing to\", currentPageUrl);\n\n            $.post(currentPageUrl, {\n                action: 'email_capture',\n                email: email,\n            })\n                .done(function (response) {\n                    console.log('Email sent to server:', response);\n                })\n                .fail(function (xhr, status, error) {\n                    console.error('Error sending email to server:', error);\n                });\n        }\n    });\n});\n<\/script>\n\n<\/div>\n\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2007","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/pages\/2007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/comments?post=2007"}],"version-history":[{"count":16,"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/pages\/2007\/revisions"}],"predecessor-version":[{"id":2126,"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/pages\/2007\/revisions\/2126"}],"wp:attachment":[{"href":"https:\/\/corkandbean.ca\/oshawa\/wp-json\/wp\/v2\/media?parent=2007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}