{"id":544,"date":"2018-11-27T09:17:56","date_gmt":"2018-11-27T09:17:56","guid":{"rendered":"http:\/\/35.183.62.90\/contact\/"},"modified":"2024-03-01T06:15:35","modified_gmt":"2024-03-01T06:15:35","slug":"book-a-table","status":"publish","type":"page","link":"http:\/\/www.thechinabowls.com\/zh\/book-a-table\/","title":{"rendered":"Book A Table"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"544\" class=\"elementor elementor-544\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6b0a486 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6b0a486\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\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-c981cfd hi\" data-id=\"c981cfd\" 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-fd4d218 elementor-widget elementor-widget-heading\" data-id=\"fd4d218\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.12.0 - 29-03-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">\u7acb\u5373\u8ba2\u5ea7<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-3a379cb elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"3a379cb\" data-element_type=\"section\" id=\"block1\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\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-inner-column elementor-element elementor-element-d295c8f\" data-id=\"d295c8f\" 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-d2802a7 elementor-widget elementor-widget-html\" data-id=\"d2802a7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.3.1\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\r\n    <link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\r\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.js\"><\/script>\r\n    <script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n     \r\n         <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flatpickr\/4.5.7\/flatpickr.min.css\">\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flatpickr\/4.5.7\/flatpickr.min.js\"><\/script>\r\n  \r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.4\/jquery.min.js\"><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\"><\/script>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\"  crossorigin=\"anonymous\">\r\n \r\n  \r\n    <style>\r\n    .hide{\r\n        display: none;\r\n    }\r\n      .desktop-cont{\r\n          width: 90%;\r\n          margin: auto;\r\n          margin-top: 50px;\r\n          margin-bottom: 50px;\r\n         font-family: 'Noto Sans';\r\n\r\n      }\r\n        .row.options .col{\r\n          \r\n            border: 1px solid black;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            height: 80px;\r\n            background-color: white;\r\n            font-size: 21px;\r\n        }\r\n        .time, .people, .date{\r\n             color: black !important;\r\n            width: 100%;\r\n            padding-left: 0px;\r\n            border: none;\r\n            height: 100%;\r\n            background-color: transparent;\r\n            display: flex;\r\n        }\r\n        .row.info{\r\n            border-bottom: 1px solid black;\r\n            margin-bottom: 25px;\r\n        }\r\n        .row.info .col{\r\n            padding: 0px;\r\n        }\r\n        .col.t{\r\n            border-top-left-radius: 8px;\r\n            border-bottom-left-radius: 8px;\r\n            border-right: none !important;\r\n            margin-right: -8px;\r\n            padding: 0px\r\n        }\r\n        .col.p{\r\n            border-top-left-radius: 8px;\r\n            border-bottom-left-radius: 8px;\r\n            border-right: none !important;\r\n            margin-right: -8px;\r\n             padding: 0px;\r\n        }\r\n        .col.d{\r\n            border-radius: 8px;\r\n            margin-right: -8px;\r\n            z-index: 1;\r\n            border-right: none !important;\r\n             padding: 0px;\r\n        }\r\n        .col.b{\r\n            margin-left: -15px;\r\n            border-top-right-radius: 8px;\r\n            border-bottom-right-radius: 8px;\r\n            border: none !important;\r\n            z-index: 0;\r\n            background-color: white;\r\n            padding-right: 0px;\r\n        }\r\n\r\n        .desk_search_btn, .desk_bookatable_btn{\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: #BE3030;\r\n            color: white;\r\n            border: none;\r\n            border-top-right-radius: 8px;\r\n            border-bottom-right-radius: 8px;\r\n            border-top-left-radius: -8px;\r\n            z-index: 0;\r\n            font-size: 21px;\r\n            font-weight: 700;\r\n        }\r\n        .desk_search_btn:hover , .desk_bookatable_btn:hover,\r\n        .desk_search_btn:focus , .desk_bookatable_btn:focus{\r\n        background-color: #b41f1f !important;\r\n        border: none !important;\r\n        outline: none !important;\r\n        }\r\n        .spanFindATable, .span_your_deatils{\r\n            font-size: 21px;\r\n            font-weight: 400;\r\n            line-height: 29px;\r\n            display: inline-block;\r\n            margin-bottom: 15px;\r\n            cursor: pointer;\r\n        }\r\n        .spanFindATable{\r\n            margin-right: 50px;\r\n           \r\n        }\r\n        .span-active{\r\n            font-weight: 700;\r\n            color: #B8281C;\r\n        }\r\n        .date{\r\n            border: none !important;\r\n            background-color: white !important;\r\n        }\r\n        .date:focus{\r\n            border: none !important;\r\n            outline: none !important;\r\n        }\r\n        .desk-time-span{\r\n            width: 100%;\r\n            display: flex;\r\n            margin-top: 20px;\r\n        }\r\n        .people:focus, .time:focus{\r\n            outline: none;\r\n            border: none;\r\n        }\r\n        .flatpickr-calendar:after,  .flatpickr-calendar:before{\r\n            border: none !important;\r\n        }\r\n        .flatpickr-calendar.open, .flatpickr-calendar.inline {\r\n            \r\n   width: 255px !important;\r\n}\r\n\r\n\r\n\r\n        input.date_picker.form-control.input {\r\n           font-size: 21px;\r\n           font-weight: 400;\r\n           border: none;\r\n           background-color: transparent;\r\n           color: black !important;\r\n           cursor: pointer;\r\n           width: 100%;\r\n              height: 100%;\r\n             background-image: url(https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1682457847\/angle-down-solid_awxxyj.svg);\r\n             background-repeat: no-repeat;\r\n             background-size: 13px;\r\n             background-position: 85%;\r\n                cursor: pointer !important;\r\n                padding-left: 26px;\r\n        }\r\n.dropDownImage{\r\n    position: absolute;\r\n    left: 200px;\r\n    \r\n}\r\n.desk-notime-msg, .desk-time-msg, .desk-closed-msg, .desk-error-msg{\r\n    font-size: 18px;\r\n    margin-top: 5px;\r\n}\r\n.desk-notime-msg p, .desk-time-msg p, .desk-closed-msg p, .desk-error-msg p{\r\n    margin-bottom: 0px !important;\r\n}\r\n\r\n.desk-time-span{\r\n    margin-top: 10px !important;\r\n}\r\n\r\n\r\n\t.dropbtn, .dropbtnT {\r\n\t\t  background-color: transparent;\r\n\t\t  color: black;\r\n\t\t  padding: 26px;\r\n\t\t  border: none;\r\n\t\t  cursor: pointer;\r\n          display: flex;\r\n         justify-content: space-between;\r\n         align-items: center;\r\n         width: 100%;\r\n         font-size: 21px;\r\n         background-image: url(https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1682457847\/angle-down-solid_awxxyj.svg);\r\n            background-repeat: no-repeat;\r\n            background-size: 13px;\r\n           background-position: 85%;\r\n        \r\n\t\t}\r\n        .fas.fa-angle-down{\r\n            font-size: 16px !important;\r\n        }\r\n\t\t\/* Style the dropdown content (hidden by default) *\/\r\n\t\t.dropdown-content, .dropdown-contentT {\r\n\t\t  display: none;\r\n\t\t  position: absolute;\r\n\t\t  z-index: 1;\r\n          margin-top: 80px;\r\n          margin-left: 0px;\r\n          padding: 0;\r\n          width: 255px;\r\n          border-radius: 5px;\r\n          border: 1px solid #cccccc;\r\n            background-color: white ;\r\n            padding:  0px;\r\n            max-height: 250px;\r\n            overflow-y: auto;\r\n\t\t}\r\n\r\n\t\t\/* Style the links inside the dropdown *\/\r\n\t\t.dropdown-content li, .dropdown-contentT li{\r\n\t\t  color: black;\r\n\t\t  text-decoration: none;\r\n\t\t  display: block;\r\n\t\t  cursor: pointer;\r\n          padding: 5px;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          font-size: 18px;\r\n\t\t}\r\n\r\n\t\t\/* Change color of dropdown links on hover *\/\r\n\t\t.dropdown-content li:hover, .dropdown-contentT li:hover {\r\n\t\t  background-color: #cccccc;\r\n\t\t}\r\n\t\t\r\n\t\t.dropdown-content li:active, .dropdown-contentT li:active {\r\n\t\t  background-color: rgb(86,159,247);\r\n\t\t  color: white\r\n\t\t}\r\n\t\t\r\n\t\t.flatpickr-months .flatpickr-month {\r\n   \r\n        height: 38px !important;\r\n         }\r\n         .arrowDown, .arrowUp{\r\n             display: none !important;\r\n         }\r\n         .numInputWrapper:hover ,.cur-month:hover{\r\n    background: transparent !important;\r\n}\r\n.disabledDiv {\r\n    cursor: default !important;\r\n    pointer-events: none !important;\r\n    opacity: 0.6;\r\n    color: grey;\r\n    \r\n}\r\n.disabledBtn{\r\n    background-color: grey;\r\n    pointer-events: none !important;\r\n    opacity: 0.6;\r\n}\r\n\r\n.desk-error-msg{\r\n    color: red;\r\n    font-weight: bold;\r\n    font-weight: 20px\r\n}\r\n.active {\r\n    background-color: rgb(86, 159, 247);\r\n    color: white;\r\n}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"desktop-cont\">\r\n    <div class=\"container\">\r\n\r\n        <div class=\"row info\">\r\n            <div class=\"col\">\r\n                <div class=\"spanFindATable span-active\">1.\u8ba2\u5ea7<\/div>\r\n                <div class=\"span_your_deatils\">2.\u8ba2\u5ea7\u8be6\u60c5<\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row options\">\r\n            \r\n            <div class=\"col p\">\r\n                   <div class=\"people\" >\r\n                    <div class=\"dropbtn\" onclick=\"toggleDropdown()\" id=\"dropdownButton\" >   \r\n         \r\n                                 <span class=\"peopleCont\"><\/span>\r\n                           <\/div>\r\n    \r\n                           <ul id=\"myDropdown\" class=\"dropdown-content\">\r\n                          <\/ul>\r\n                  <\/div>\r\n            <\/div>\r\n            <div class=\"col t\">\r\n\r\n                  <input type=\"text\" class=\"date_picker\" onchange=\r\n                  'dateTimeAdjustmentDeskCal()' hidden>\r\n                 \r\n\r\n            <\/div>\r\n\r\n            <div class=\"col d\">\r\n           <div  class=\"time\">\r\n                          <div class=\"dropbtnT\" onclick=\"toggleDropdownTime()\" id=\"dropdownButtonTime\" >   \r\n         \r\n                                 <span class=\"timeCont\"><\/span>\r\n                           <\/div>\r\n    \r\n                           <ul id=\"myDropdownTime\" class=\"dropdown-contentT\">\r\n                                 \r\n                                    \r\n                          <\/ul>\r\n                 <\/div>\r\n                  \r\n            <\/div>\r\n            <div class=\"col b\">\r\n                 <button type=\"button\" onclick = \"desktop_search_btn()\" id=\"desk_search_btn\" class=\"desk_search_btn\" >\u8ba2\u5ea7<\/button> \r\n                <button type=\"button\"  onclick =\"desktop_bookatable_btn()\" id =\"desk_bookatable_btn\" class=\"desk_bookatable_btn\">\u7acb\u5373\u8ba2\u5ea7<\/button>\r\n                \r\n                \r\n               \r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"row\">\r\n            <div class=\"desk-notime-msg hide\">\r\n           <p>\u8be5\u65f6\u6bb5\u4e0d\u53ef\u7528\uff01 \u8bf7\u9009\u62e9\u5176\u4ed6\u65e5\u671f\u3002<\/p>\r\n            <\/div>\r\n            <div class=\"desk-time-msg hide\">\r\n           <p>\u8be5\u65f6\u6bb5\u5df2\u7ecf\u6ee1\u5ea7\uff01\u8bf7\u9009\u62e9\u4ee5\u4e0b\u65f6\u6bb5\u3002<\/p>\r\n            <\/div>\r\n            <div class=\"desk-closed-msg hide\">\r\n           <p>\u8be5\u65f6\u6bb5\u4e0d\u53ef\u7528\uff01 \u8bf7\u9009\u62e9\u5176\u4ed6\u65e5\u671f\u3002<\/p>\r\n            <\/div>\r\n             <div class=\"desk-error-msg hide\">\r\n           <p>Oops, something went wrong. Please try again later.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"row\">\r\n            <div class=\"desk-time-span\">\r\n           \r\n            <\/div>\r\n\r\n            \r\n        <\/div>\r\n        \r\n        <\/div>\r\n\r\n    <\/div>\r\n    \r\n<script>\r\n\r\nvar desk_notime_msg = document.querySelector('.desk-notime-msg');\r\nvar desk_closed_msg = document.querySelector('.desk-closed-msg');\r\nvar desk_error_msg = document.querySelector('.desk-error-msg');\r\n\r\nvar datePicker = flatpickr(\".date_picker\", {\r\n    altInput: true,\r\n    altFormat: \"F j\",\r\n    dateFormat: \"m,d,Y\",\r\n    minDate: \"today\",\r\n    defaultDate: new Date(new Date().toLocaleString(\"en-US\", { timeZone: \"America\/New_York\" })),\r\n    disableMobile: true,\r\n    position: 'below',\r\n    maxDate: new Date().fp_incr(365),\r\n    disable: [\r\n        \r\n    ]\r\n    \r\n});\r\n\r\n\r\nlet list = document.querySelectorAll(\".numInput.cur-year\");\r\nfor (const element of list) {\r\n    element.readonly=true;\r\n}\r\n\r\nvar deskGetHourError = false;\r\nvar deskFetchError = false;\r\n\r\nvar nextAvailableDate = \"\";\r\n\r\n\r\nvar timeDropDown = document.querySelector(\".dropbtnT\");\r\nvar desk_search_btn = document.querySelector('.desk_search_btn');\r\n\r\nlet ul_time_desk = document.querySelector('#myDropdownTime');\r\nlet ul_people_desk = document.querySelector('#myDropdown');\r\n\r\nvar inforContact ;\r\nvar inforLocation, diningInstructionTitle, diningInstructionContent ;\r\n\r\n    var stringDate = document.querySelector(\".date_picker\").value;\r\n    \r\n    var selectedDate = new Date(stringDate);\r\n    var dayOfWeek = selectedDate.getDay()-1;\r\n    \r\n    \r\n    \r\n    getBusinessHours()\r\n    .then(businessHours => {\r\n         getDataFromURL(stringDate);\r\n        \r\n        getDataFromURLMobile(stringDate);\r\n    })\r\n\r\n    async function getBusinessHours () {\r\n            var method = 'GET';\r\n            var url = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/getBusinessHours?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2`;\r\n            \r\n            \r\n            await fetch(url)\r\n        .then(res => res.json())\r\n        .then(data => {\r\n            \r\n        \r\n        var holiday = []; var closedDay= [];\r\n        var holi = []\r\n            \r\n             \r\n        if (data.isHolidayHoursEnabled) {\r\n            data.holidayOpenCloseTimes.forEach(timeSlot => {\r\n            if (timeSlot.isClosed) {\r\n                let from = formatDate(timeSlot.start);\r\n                let to = formatDate(timeSlot.end);\r\n                holi.push({\r\n               from: from,\r\n               to: to\r\n               });\r\n              }\r\n            });\r\n        }\r\n\r\n        data.openCloseTimes.forEach(timeSlot => {\r\n            if (timeSlot.hours.length == 0) {\r\n                 closedDay.push(timeSlot.day);\r\n            }\r\n        });\r\n        \r\n        const currentDayOfThisWeek = new Date().getDay();\r\n        let firstOpenDay = null;\r\n        var currentDate = new Date();\r\n\r\n         const currentDay = new Date().getDay();\r\n        \/\/ Iterate over the openCloseTimes array starting from the current day\r\n        for (let i = currentDayOfThisWeek; i < 7; i++) {\r\n            const timeSlot = data.openCloseTimes[i];\r\n            if (i !== currentDay && timeSlot && timeSlot.hours.length > 0) {\r\n                firstOpenDay = timeSlot.day;\r\n                \r\n                break; \/\/ Exit the loop after finding the first open day\r\n            }\r\n        }\r\n        \r\n        var daysToAdd = firstOpenDay - currentDate.getDay();\r\n        \r\n        if(daysToAdd < 0){\r\n            daysToAdd = daysToAdd + 7;\r\n        }\r\n\r\n        var targetDate = new Date(currentDate);\r\n        targetDate.setDate(currentDate.getDate() + daysToAdd);\r\n        \r\n\r\n        var year = targetDate.getFullYear();\r\n        var month = String(targetDate.getMonth() + 1).padStart(2, '0');\r\n        var day = String(targetDate.getDate()).padStart(2, '0');\r\n\r\n        nextAvailableDate = `${month},${day},${year}`;\r\n\r\n\r\n        datePicker.set('disable', [\r\n            function (date) {\r\n            return closedDay.indexOf(date.getDay()) !== -1 ||\r\n               holi.some(range => isDateInRange(formatDate(date), range));\r\n            }\r\n       ]);\r\n     \r\n\r\n        datePickerMob.set('disable', [\r\n            function (date) {\r\n            return closedDay.indexOf(date.getDay()) !== -1 ||\r\n              holi.some(range => isDateInRange(formatDate(date), range));\r\n            }\r\n        ]);\r\n\r\n        });\r\n\r\n}\r\n\r\n    var url = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/fetchstoreinformation?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&day=${dayOfWeek}`;\r\n    fetch(url)\r\n        .then(res => res.json())\r\n        .then(data => {\r\n\r\n                inforContact= window.location.href.includes(\"\/zh\/\") ? \"\u8054\u7edc\u53f7\u7801: (\" + data.phone.slice(0, 3) + \") \" + data.phone.slice(3, 6) + \"-\" + data.phone.slice(6) : \"Mobile: (\" + data.phone.slice(0, 3) + \") \" + data.phone.slice(3, 6) + \"-\" + data.phone.slice(6);\r\n                \r\n                inforLocation = window.location.href.includes(\"\/zh\/\") ? \"\u5730\u5740: \"+ data.address : \"Address: \"+ data.address;\r\n                \r\n                const maxPeople = data.maxPeople;\r\n             \r\n                  for(var j = 1; j <= maxPeople+1; j++ ){\r\n                            var listItem = document.createElement('li');\r\n                            \r\n                            listItem.innerHTML= j + \" \"+pp  ;\r\n                            \r\n                                listItem.setAttribute('onclick', \"selectItem(this)\");\r\n                                listItem.setAttribute('data-item', j + \" \"+pp );\r\n                                listItem.setAttribute('id', j);\r\n                                \r\n                                if(j==1){\r\n                                listItem.innerHTML= j +\" \"+ person  ;\r\n                                document.querySelector('.peopleCont').innerHTML= j +\" \"+ person ;\r\n                                }\r\n                            \r\n                            \r\n\r\n                            if(j == maxPeople+1){\r\n                                listItem.setAttribute('onclick',\"viewView()\");\r\n                                listItem.innerHTML= j + \"+ \"+pp  ;\r\n                            }\r\n                            \r\n                            ul_people_desk.appendChild(listItem);\r\n                    }\r\n        \r\n        })\r\n        .catch(err=>{\r\n            deskFetchError = true;\r\n            errorHandlingDesk();\r\n        });\r\n         \r\n    \r\n    \r\n \r\n async function dateTimeAdjustmentDeskCal(){\r\n\r\n     clear();\r\n    ul_time_desk.innerHTML=\"\";\r\n     await getDataFromURL(document.querySelector(\".date_picker\").value);\r\n    selectedItem=null;\r\n}\r\n\r\n\r\n\r\n\r\nfunction toggleDropdown() {\r\n    \r\n    closeSlots();\r\n    \r\n  if(document.querySelector('.dropdown-content').style.display == 'block')\r\n  {\r\n    document.querySelector('.dropdown-content').style.display = 'none';\r\n\r\n  }\r\n  else \r\n  {\r\n      document.querySelector('.dropdown-content').style.display = 'block';\r\n      \r\n      var value = selectedItemPeople.split(\" \")[0]; \r\n      var selectedValue = document.getElementById(`${value}`);\r\n\r\n        if (selectedValue){\r\n            selectedValue.scrollIntoView({block: \"end\"});\r\n        }\r\n    \r\n\r\n  }\r\n \r\n}\r\n\r\nfunction toggleDropdownTime() {\r\n    \r\n     closeSlots();\r\n\r\n  if(document.querySelector('#myDropdownTime').style.display == 'block')\r\n  {\r\n    document.querySelector('#myDropdownTime').style.display = 'none';\r\n  }\r\n  else \r\n  {    \r\n    document.querySelector('#myDropdownTime').style.display = 'block';\r\n    \r\n    \r\n        var selectedTimeInput = document.getElementById(`${selectedItem}`);\r\n        if (selectedTimeInput) {\r\n            selectedTimeInput.scrollIntoView({block: \"end\"});\r\n        }else{\r\n            first_li_time.scrollIntoView({block: \"end\"});\r\n        }\r\n  }\r\n \r\n}\r\n\r\n\r\n\r\nvar listDeskP = ul_people_desk.children;\r\nlet selectedItemPeople = \"\";\r\n\r\nfunction selectItem(item) {\r\n   selectedItemPeople = item.innerHTML;\r\n  \r\n   for(let i = 0; i< listDeskP.length; i++ ){\r\n      if(listDeskP[i].style.backgroundColor == \"rgb(86, 159, 247)\"){\r\n          \r\n        \/\/   listDeskP[i].style.backgroundColor = \"white\";\r\n        \/\/   listDeskP[i].style.color='black';\r\n      }\r\n  }\r\n\/\/   item.style.backgroundColor = \"rgb(86,159,247)\";\r\n\/\/   item.style.color='white';\r\n  \r\n  document.getElementById(\"dropdownButton\").innerHTML =\"<span class='peopleCont'>\"+ selectedItemPeople+\"<\/span>\";\r\n  toggleDropdown();\r\n}\r\n\r\n\r\n\r\nvar listDesk = ul_time_desk.children;\r\nvar selectedItem;\r\nfunction selectItemTime(item) {\r\n  selectedItem = item.innerHTML;\r\n  \r\n  for(let i = 0; i< listDesk.length; i++ ){\r\n      if(listDesk[i].style.backgroundColor == \"rgb(86, 159, 247)\"){\r\n          \r\n        \/\/   listDesk[i].style.backgroundColor = \"white\";\r\n        \/\/   listDesk[i].style.color='black';\r\n      }\r\n  }\r\n\r\n \r\n  document.getElementById(\"dropdownButtonTime\").innerHTML =\"<span class='timeCont'>\"+ selectedItem+\"<\/span>\";\r\n  toggleDropdownTime();\r\n}\r\n\r\n\r\n\r\n\r\n\r\nfunction closeSlots(){\r\n     \r\n     if(document.querySelector('.desk_bookatable_btn') != null ){\r\n        document.querySelector('.desk_bookatable_btn').classList.remove('showBtn');\r\n    document.querySelector('.desk_bookatable_btn').classList.add('hide'); \r\n    document.querySelector('.desk_search_btn').classList.remove('hide'); \r\n    document.querySelector('.desk_search_btn').classList.add('showBtn'); \r\n    }\r\n     \r\n        if(desk_time_msg.classList.contains('show')){\r\n            desk_time_msg.classList.add('hide');\r\n            desk_time_msg.classList.remove('show');\r\n            document.querySelector(\".desk-time-span\").classList.add('hide');\r\n            document.querySelector(\".desk-time-span\").classList.remove('show');\r\n        }\r\n        \r\n      \r\n    }  \r\n\r\n\r\n\r\n  function clear(){\r\n        if(desk_notime_msg.classList.contains('show')){\r\n            desk_notime_msg.classList.remove('hide');\r\n            desk_notime_msg.classList.add('hide');\r\n        }\r\n        \r\n         if(desk_notime_msg.classList.contains('show')){\r\n        desk_time_msg.classList.remove(\"show\");\r\n         desk_time_msg.classList.add(\"hide\");\r\n          desk_time_span.classList.remove(\"show-flex\");\r\n           desk_time_span.classList.add(\"hide\");\r\n           \r\n          desk_bookatable_btn.classList.remove(\"show\");\r\n          desk_bookatable_btn.classList.add(\"hide\");\r\n           desk_search_btn.classList.remove(\"hide\");\r\n            desk_search_btn.classList.add(\"show\");\r\n    }\r\n    \r\n    if(desk_closed_msg.classList.contains('show')){\r\n            desk_closed_msg.classList.remove('hide');\r\n            desk_closed_msg.classList.add('hide');\r\n            ul_time_desk.style.display = \"block\";\r\n            timeDropDown.classList.remove('disabled');\r\n            desk_search_btn.classList.remove('disabledBtn');\r\n        }\r\n    }  \r\n\r\n\r\n\r\n\r\n\r\nfunction isCurrentDateSelected(selectedDate) {\r\n  const currentDate = new Date();\r\n  const [month, day, year] = selectedDate.split(',');\r\n\r\n return (\r\n    currentDate.getFullYear() === parseInt(year) &&\r\n    currentDate.getMonth() === parseInt(month) - 1 &&\r\n    currentDate.getDate() === parseInt(day)\r\n  );\r\n}\r\n\r\n\r\n\r\nfunction isAfterTime(timeString) {\r\n const currentTime = new Date();\r\n  const comparisonTime = new Date(timeString);\r\n  \r\n  currentTime.setMilliseconds(0);\r\n  currentTime.setSeconds(0);\r\n\r\n  comparisonTime.setMilliseconds(0);\r\n  comparisonTime.setSeconds(0);\r\n\r\n  return currentTime < comparisonTime;\r\n}\r\n    \r\nvar first_li_time;\r\nasync function getDataFromURL(date){\r\n            var dateParts = date.split(',');\r\n            var month = dateParts[0];\r\n            var day = parseInt(dateParts[1]);\r\n            var year = dateParts[2];\r\n\r\n        var datetimeString = year + '-' + month + '-' + day + 'T00:00:00';\r\n     \r\n      var url = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/GetAvailableHours?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&date=${datetimeString}`;\r\n     const currentTime = new Date();\r\n     \r\n     const options = {\r\n                 hour: \"numeric\",\r\n                 minute: \"numeric\",\r\n                 hour12: false,\r\n            };\r\n\r\n     await fetch(url)\r\n        .then(res => res.json())\r\n        .then(data => {\r\n            if(data.length > 0){\r\n            \r\n            if(desk_closed_msg.classList.contains('show')){\r\n                desk_closed_msg.classList.remove('hide');\r\n                desk_closed_msg.classList.add('hide');\r\n                ul_time_desk.style.display = \"block\";\r\n                document.querySelector(\".dropbtnT\").classList.remove('disabledDiv');\r\n                desk_search_btn.classList.remove('disabledBtn');\r\n                document.querySelector(\".dropbtn\").classList.remove('disabledDiv');\r\n            }  \r\n             if(!deskFetchError && !deskGetHourError){\r\n                removeErrorHandlingDesk();\r\n            }  \r\n            \r\n            for(i=0; i< data.length; i++){\r\n                var utcDate = new Date(data[i]);\r\n                var localTimeString = utcDate.toLocaleTimeString(undefined, options);\r\n                \r\n                localTimeString = localTimeString.replace(\/^24\/, '00');\r\n                \r\n                var listItem = document.createElement('li');\r\n                listItem.innerHTML= localTimeString;\r\n                listItem.setAttribute('onclick', \"selectItemTime(this)\");\r\n                listItem.setAttribute('id', localTimeString);\r\n                if(i==0 ){\r\n                    first_li_time = listItem;\r\n                    document.querySelector(\".timeCont\").innerHTML=localTimeString;\r\n                }\r\n                    ul_time_desk.appendChild(listItem);\r\n            \r\n            }\r\n\r\n            }else{\r\n                \/\/ if(nextAvailableDate != \"\"){\r\n                \/\/      getDataFromURL(nextAvailableDate);\r\n                \/\/ }else{\r\n                    document.querySelector(\".timeCont\").innerHTML=\"\";\r\n                desk_closed_msg.classList.remove(\"hide\");\r\n                desk_closed_msg.classList.add(\"show\");\r\n                ul_time_desk.style.display = \"none\";\r\n                document.querySelector(\".dropbtnT\").classList.add('disabledDiv');\r\n                desk_search_btn.classList.add('disabledBtn');\r\n                \/\/ }\r\n               \r\n            }\r\n            \r\n            })\r\n            .catch(err =>{\r\n                deskGetHourError = true;\r\n                errorHandlingDesk();\r\n            });\r\n \r\n\r\n             \r\n }\r\n \r\n function errorHandlingDesk(){\r\n      document.querySelector(\".timeCont\").innerHTML=\"\";\r\n                desk_error_msg.classList.remove(\"hide\");\r\n                desk_error_msg.classList.add(\"show\");\r\n                ul_time_desk.style.display = \"none\";\r\n                document.querySelector(\".dropbtnT\").classList.add('disabledDiv');\r\n                document.querySelector(\".dropbtn\").classList.add('disabledDiv');\r\n                desk_search_btn.classList.add('disabledBtn');\r\n }\r\n \r\n  function removeErrorHandlingDesk(){\r\n     \r\n                desk_error_msg.classList.add(\"hide\");\r\n                desk_error_msg.classList.remove(\"show\");\r\n                document.querySelector(\".dropbtnT\").classList.remove('disabledDiv');\r\n                desk_search_btn.classList.remove('disabledBtn');\r\n                document.querySelector(\".dropbtn\").classList.remove('disabledDiv');\r\n }\r\n\r\n\r\n\r\n\r\n\r\n        \r\n        \r\n        \r\n        \r\n        \r\nfunction formatDate(dateString) {\r\n    const date = new Date(dateString);\r\n    const mm = (date.getMonth() + 1).toString().padStart(2, '0');\r\n    const dd = date.getDate().toString().padStart(2, '0');\r\n    const yyyy = date.getFullYear();\r\n    return `${mm},${dd},${yyyy}`;\r\n}\r\n\r\n\r\nfunction isDateInRange(dateToCheck, range) {\r\n    const currentDate = new Date(dateToCheck);\r\n    const startDate = new Date(range.from);\r\n    const endDate = new Date(range.to);\r\n\r\n    return currentDate >= startDate && currentDate <= endDate;\r\n}\r\n \r\n \r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-ab0fc4d elementor-section-full_width hide elementor-section-height-default elementor-section-height-default\" data-id=\"ab0fc4d\" data-element_type=\"section\" id=\"block2\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\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-inner-column elementor-element elementor-element-ff2a529\" data-id=\"ff2a529\" data-element_type=\"column\" id=\"block2\">\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-87c8b9a elementor-widget elementor-widget-html\" data-id=\"87c8b9a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t \r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n   \r\n    <style>\r\n    \r\n    .formDataWrapper{\r\n        background-color: white;\r\n         padding-top: 50px;\r\n         width: 95%;\r\n         margin: auto;\r\n          font-family: 'Noto Sans';\r\n    }\r\n\r\n    .row.data{\r\n         border-bottom: 1px solid black;\r\n            margin-bottom: 25px;\r\n            margin-left: 15px;\r\n    margin-right: 15px;\r\n    }\r\n    .row.data .col{\r\n        padding-left: 0px\r\n    }\r\n    \r\n    \r\n      .dataContainer{\r\n        \r\n        \r\n      }\r\n      .infoCont{\r\n          width: 100% !Important;\r\n      }\r\n     \r\n        #firstName, #lastName, #email, #mobile, #specialRequest{\r\n            background-color: white;\r\n            height: 45px;\r\n            width: 90%;\r\n            margin-bottom: 5px;\r\n            border: 1px solid black;\r\n            border-radius: 5px\r\n        }\r\n        #firstName:focus,  #lastName:focus, #email:focus, #mobile:focus, #specialRequest:focus{\r\n            border: 1px solid black;\r\n            background-color: white;\r\n        }\r\n        #specialRequest{\r\n            height: 150px;\r\n            resize: none;\r\n        }\r\n        \r\n        #specialRequest:focus{\r\n            box-shadow: none !Important;\r\n           \r\n         \r\n        }\r\n      \r\n      .confirmBooking{\r\n        padding: 15px 60px !Important;\r\n        font-size: 21px !Important;\r\n        font-style: normal !Important;\r\n        color: white !Important;\r\n        background: #BE3030 !Important;\r\n        font-weight: 700 ;\r\n        border: none !Important;\r\n        border-radius: 8px !Important;\r\n        text-transform: capitalize !Important;\r\n        box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15) !important;\r\n      }\r\n      .confirmBooking:focus, .confirmBooking:hover{\r\n           background-color: #b41f1f !important;\r\n        border: none !important;\r\n        outline: none !important;\r\n      }\r\n    .diningInstruction{\r\n                margin-top: 20px;\r\n            }\r\n      .diningInstruction h4{\r\n       font-family: 'Noto Sans';\r\n       font-style: normal;\r\n       font-weight: 700;\r\n       font-size: 21px;\r\n       line-height: 29px;\r\n      }\r\n      .diningInstruction p{\r\n          font-family: 'Noto Sans';\r\n            font-style: normal;\r\n        font-weight: 400;\r\n        font-size: 21px;\r\n        line-height: 30px;\r\n      }\r\n       .diningDetails h4{\r\n         font-family: 'Noto Sans';\r\n       font-style: normal;\r\n       font-weight: 700;\r\n       font-size: 21px;\r\n       line-height: 20px;         \r\n       }\r\n       .diningDetails div{\r\n           font-family: 'Noto Sans';\r\n           font-style: normal;\r\n           font-weight: 400;\r\n           font-size: 21px;\r\n           line-height: 36px;\r\n       }\r\n      .edit{\r\n          color: #1B72E8;\r\n          font-weight: 400;\r\n          font-size: 21px;\r\n          cursor: pointer;\r\n      }\r\n      .col-6 form label{\r\n          font-size: 21px;\r\n      }\r\n    .content{\r\n        display: flex;\r\n        justify-content: space-between;\r\n    }\r\n    .contRight{\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        margin-top: -15px;\r\n      \r\n    }\r\n    #timerCounter{\r\n        font-family: 'Noto Sans';\r\nfont-style: normal;\r\nfont-weight: 400;\r\n        font-size: 21px;\r\n        padding-top: 1px;\r\n    }\r\n    .imgCounter{\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n          padding-right: 10px;\r\n    }\r\n    \r\n    .error{\r\n        margin-bottom: 10px;\r\n        display: none;\r\n        color: red;\r\n    }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"formDataWrapper\">\r\n  <div class=\"container\">\r\n    <div class=\"row data\">\r\n              <div class=\"col\">\r\n                  <div class=\"content\">\r\n                  <div class=\"contLeft\">\r\n                        <div class=\"spanFindATable a\" >1.\u8ba2\u5ea7<\/div>\r\n                        <div class=\"span_your_deatils span-active\">2.\u8ba2\u5ea7\u8be6\u60c5<\/div>\r\n                  <\/div>\r\n             \r\n                \r\n                <div class=\"contRight\">\r\n                    <div class=\"imgCounter\">\r\n                        <img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1681947038\/Vector_1_hk2jze.png\" >\r\n                    <\/div>\r\n                    \r\n                    <div id=\"timerCounter\">05:00<\/div>\r\n                <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <div class=\"infoCont\">\r\n        \r\n        <div class=\"container\">\r\n            <div class=\"row reverse\">\r\n                \r\n          <div class=\"col-6 mt-3\">\r\n   <form onsubmit=\"getConfirmBooking(); return false;\" action=\"\">\r\n  <div class=\"form-group mb-4\">\r\n    <label for=\"exampleInputEmail1\">\u540d\u5b57<\/label>\r\n    <input type=\"text\" class=\"form-control\" id=\"firstName\" oninput=\"validateFirstName(this, document.querySelector('.error.firstname') )\" onkeypress=\"return onlyLetters(event)\" placeholder=\"\u6021\u60e0\">\r\n    <span class=\"error firstname\">Please enter a valid first name<\/span>\r\n\r\n  <\/div>\r\n  <div class=\"form-group mb-4\">\r\n    <label for=\"exampleInputPassword1\">\u59d3\u6c0f<\/label>\r\n    <input class=\"form-control\" type=\"text\" id=\"lastName\" oninput=\"validateLastName(this,document.querySelector('.error.lastname') )\" placeholder=\"\u6797\" onkeypress=\"return onlyLetters(event)\">\r\n        <span class=\"error lastname\">Please enter a valid last name<\/span>\r\n  <\/div>\r\n  \r\n    <div class=\"form-group mb-4\">\r\n    <label for=\"exampleInputEmail1\">\u7535\u90ae<\/label>\r\n    <input type=\"email\" class=\"form-control\" id=\"email\" placeholder=\"zinglui@example.com\" oninput=\"emailValidation(this, document.querySelector('.error.email'))\" >\r\n        <span class=\"error email\">Please enter a valid email address<\/span>\r\n  <\/div>\r\n  \r\n  <div class=\"form-group mb-4\">\r\n    <label for=\"exampleInputEmail1\">\u624b\u673a\u53f7\u7801<\/label>\r\n    <input type=\"text\" class=\"form-control\" id=\"mobile\" placeholder=\"(222) 222-2222\" oninput=\"phoneMobValidation(this, document.querySelector('.error.mob'))\" >\r\n        <span class=\"error mob\">Please enter a valid mobile number<\/span>\r\n  <\/div>\r\n  \r\n  <div class=\"form-group mb-4\">\r\n  <label for=\"exampleFormControlTextarea3\">\u7279\u6b8a\u8981\u6c42<\/label>\r\n  <textarea type=\"text\" class=\"form-control\" id=\"specialRequest\" rows=\"7\" placeholder=\"\u7279\u6b8a\u573a\u5408\u3001\u8fc7\u654f\u3001\u9996\u9009\u5ea7\u4f4d\u7b49\u3002\"><\/textarea>\r\n<\/div>\r\n  \r\n \r\n  \r\n      <div class=\"input\">\r\n    <input type=\"submit\" class=\"confirmBooking\" value=\"\u786e\u8ba4\u9884\u8ba2\">\r\n     <\/div>\r\n      \r\n      <input type=\"hidden\" name=\"trp-form-language\" value=\"zh\"\/><\/form>    \r\n\r\n<\/div>\r\n\r\n      \r\n    \r\n\r\n    <div class=\"col-6\">\r\n      <div class=\"diningDetails mt-4\">\r\n        <h4>\u8ba2\u5ea7\u7ec6\u8282 <span class=\"edit\"> \u7f16\u8f91<\/span><\/h4>\r\n        <div ><span>\u65e5\u671f: <\/span><span class=\"inforDate\"><\/span><\/div>\r\n        <div ><span>\u65f6\u95f4: <\/span><span class=\"inforTime\"><\/span><\/div>\r\n        <div ><span>\u5ba2\u4eba\uff1a <\/span><span class=\"inforGuest\" ><\/span><\/div>\r\n        <div class=\"inforLocation\">\u5730\u70b9 : 258 King St N, Waterloo, ON<\/div>\r\n        <div class=\"inforContact\">\r\n            Contact : +1 (519) 954-6477\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n        <div class=\"diningInstruction\">\r\n          <h4>\u91cd\u8981\u9884\u8ba2\u4fe1\u606f<\/h4>\r\n          <p>\u9700\u8981\u5c11\u63d0\u524d\u81f3 1 \u5929\u9884\u8ba2\u3002 \u5982\u60a8\u9700\u5373\u65e5\u9884\u8ba2,\u8bf7\u81f4\u7535\n(519) 954-6477\u3002\u60a8\u7684\u9884\u8ba2\u5c06\u4f1a\u4fdd\u755915\u5206\u949f\u3002 \u5982\u60a8\u4f1a\n\u665a\u4e8e\u9884\u8ba2\u65f6\u95f4\u540e\u768415\u5206\u949f\u5230\u8fbe,\u8bf7\u5148\u81f4\u7535\u7ed9\u6211\u4eec\u3002 \u6211\n\u4eec\u6216\u4f1a\u63d0\u65e9\u4e0e\u60a8\u8054\u7cfb,\u8bf7\u786e\u4fdd\u60a8\u7684\u7535\u5b50\u90ae\u4ef6\u548c\u7535\u8bdd\u53f7\u7801\n\u6b63\u786e\u65e0\u8bef\u3002\u6bcf\u4e2a\u7528\u9910\u65f6\u6bb5\u4e3a 2 \u5c0f\u65f6\u3002<\/p>\r\n        <\/div>\r\n\r\n    <\/div>\r\n    \r\n      <\/div>\r\n        <\/div>\r\n\r\n  <\/div>\r\n  <\/div>\r\n  \r\n\r\n\r\n\r\n\r\n       <script >\r\n\r\n  const phoneInput = document.querySelector('#mobile');\r\n\/\/ phoneInput.addEventListener('input', maskPhone);\r\n\/\/ phoneInput.addEventListener('keydown', handleBackspaceDesk);\r\n\r\n\r\nphoneInput.addEventListener('input', function (e) {\r\n  var x = e.target.value.replace(\/\\D\/g, '').match(\/(\\d{0,3})(\\d{0,3})(\\d{0,4})\/);\r\n  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');\r\n  \r\n  phoneMobValidation(phoneInput, document.querySelector('.error.mob'));\r\n});\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n  function onlyLetters(event) {\r\n     var charCode = event.charCode;\r\n    if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || charCode === 32) {\r\n      return true; \r\n    }\r\n    return false; \r\n   \r\n  }\r\n  \r\n    function validateFirstName(input, error) {\r\n    var NameInput = input.value;\r\n    var errorName = error;\r\n    var inputValue = NameInput.trim();\r\n    var regex = \/^(?=(?:\\S*\\s){0,3}\\S*$)[a-zA-Z\\s]*$\/;\r\n        \r\n    if (inputValue === \"\" || !regex.test(inputValue)) {\r\n      errorName.style.display = \"block\";\r\n       return false;\r\n    } else {\r\n      errorName.style.display = \"none\";\r\n      return true;\r\n    }\r\n  }\r\n  \r\n  function validateLastName(input, error) {\r\n    var NameInput = input.value;\r\n    var errorName = error;\r\n    var inputValue = NameInput.trim();\r\n    var regex = \/^(?=(?:\\S*\\s){0,3}\\S*$)[a-zA-Z\\s]*$\/;\r\n    if (inputValue === \"\" || !regex.test(inputValue)) {\r\n      errorName.style.display = \"block\";\r\n       return false;\r\n      \r\n    } else {\r\n      errorName.style.display = \"none\";\r\n      return true;\r\n    }\r\n  }\r\n  \r\n    function emailValidation(emailInput, emailError) {\r\n    var email = emailInput.value;\r\n    if(email.trim()== \"\"){\r\n        emailError.style.display = 'block';\r\n        return false;\r\n    }\r\n    var emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n    if (!emailRegex.test(email)) {\r\n      emailError.style.display = 'block';\r\n      return false;\r\n    } else {\r\n      emailError.style.display = 'none';\r\n      return true;\r\n    }\r\n  }\r\n  \r\n  \r\n  function phoneMobValidation(phoneInput, phoneError) {\r\n      \r\n    var phone = phoneInput.value;\r\n    if(phone.length == 0){\r\n        document.querySelector('.error.mob').style.display='block';\r\n        phoneError.style.display = 'block';\r\n        return false;\r\n    }\r\n    if (phone.length < 14 ) {\r\n      phoneError.style.display = 'block';\r\n      return false;\r\n    } else {\r\n      phoneError.style.display = 'none';\r\n      return true;\r\n    }\r\n  }\r\n  \r\n \r\n\r\n        <\/script>\r\n        <\/div>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-534173d elementor-widget elementor-widget-spacer\" data-id=\"534173d\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.12.0 - 29-03-2023 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-0301366 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"0301366\" data-element_type=\"section\" id=\"block3\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\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-inner-column elementor-element elementor-element-4040f42\" data-id=\"4040f42\" 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-c1e8595 elementor-widget elementor-widget-spacer\" data-id=\"c1e8595\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-954698d elementor-widget elementor-widget-heading\" data-id=\"954698d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u9884\u8ba2\u786e\u8ba4 <\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7e0ff0 elementor-widget elementor-widget-heading\" data-id=\"f7e0ff0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">\u6211\u4eec\u5df2\u5c06\u60a8\u7684\u9884\u7ea6\u9884\u7ea6\u786e\u8ba4\u4fe1\u5bc4\u81f3\u60a8\u7684\u4fe1\u7bb1\u3002\u6211\u4eec\u671f\u5f85\u60a8\u7684\u5149\u4e34\u3002<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1104146 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"1104146\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a href=\"\/zh\/home\/\" class=\"elementor-button-link elementor-button elementor-size-sm\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">\u8fd4\u56de\u9996\u9875<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a15c488 elementor-widget elementor-widget-spacer\" data-id=\"a15c488\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-30b5b38 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"30b5b38\" data-element_type=\"section\" id=\"mobile_block1\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\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-inner-column elementor-element elementor-element-827f1a7\" data-id=\"827f1a7\" 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-2bbd62b elementor-widget elementor-widget-html\" data-id=\"2bbd62b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    \r\n  \r\n   <script>\r\n  \r\n  <\/script>\r\n  \r\n    <title>Document<\/title>\r\n    <style>\r\n        .mobile-container{\r\n            width: 90%;\r\n            font-family: 'Noto Sans';\r\n            margin: auto;\r\n         font-size: 16px;\r\n\r\n        }\r\n         .mobile-date{\r\n               font-size: 18px !important;\r\n             background-color: white !important;\r\n             border: none !important;\r\n             padding: 0px !important;\r\n              border: none;\r\n            width: 90%;\r\n            \r\n            \r\n         }\r\n        .mobile-form{\r\n            \/*width: 100%;*\/\r\n            \/*max-width: 280px;*\/\r\n            \/*margin: auto;*\/\r\n            margin-top: 30px;\r\n            margin-bottom: 30px;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n        .form-input{\r\n            display: flex;\r\n        }\r\n        .select-two{\r\n            width: 100%;\r\n            height: 50px !important;\r\n            background-color: white;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            border: 1px solid black;\r\n            margin-bottom: 20px;\r\n            \r\n        }\r\n        .select-two.st{\r\n            border-top-left-radius: 3px;\r\n            border-bottom-left-radius: 3px;\r\n            border-right: none !important;\r\n        }\r\n        \r\n        .select-two.st2{\r\n            border-top-right-radius: 3px;\r\n            border-bottom-right-radius: 3px;\r\n        }\r\n     \r\n        .select-one{\r\n            width: 100%;\r\n            height: 50px !important;\r\n            background-color: white;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            border: 1px solid black;\r\n            margin-bottom: 20px;\r\n            border-radius: 3px;\r\n        }\r\n         .mobile-time, .mobile-people{\r\n\r\n            padding: 5px 20px !important;\r\n            border: none;\r\n            width: 90%;\r\n            height: auto;\r\n            background-color: white;\r\n            color: black;\r\n            \r\n        }\r\n        .mobile-date:focus, .mobile-time:focus, .mobile-people:focus{\r\n             border: none;\r\n            outline: none;\r\n            background-color: white !important;\r\n        }\r\n         .mobile-people{\r\n             width: 95%;\r\n         }\r\n        \r\n         \r\n       \r\n        .search_btn, .bookatable_btn, .mob_confirm_booking{\r\n            width: 100% !important;\r\n            height: 50px !important;\r\n            background-color: #B8281C ! important;\r\n            color: white !important;\r\n            border: none !important;\r\n            padding: 0px;\r\n            border-radius: 8px !important;\r\n            text-transform: capitalize !important;\r\n            font-size: 16px !important;\r\n            font-weight: 400 !important;\r\n            box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15) !important;\r\n        }\r\n         .search_btn:hover, .bookatable_btn:hover, .mob_confirm_booking:hover{\r\n              background-color: #b41f1f !important;\r\n        border: none !important;\r\n        outline: none !important;\r\n         }\r\n        .p{\r\n            width: 100%;\r\n             border-bottom: 1px solid black;\r\n             margin-bottom: 20px\r\n        }\r\n        div.p-details{\r\n            \r\n            \r\n            font-weight: 700;\r\n            color : #B8281C;\r\n            font-size: 18px;\r\n            margin-bottom: 10px;\r\n            \r\n\r\n        }\r\n       .mobile-notime-msg,  .mobile-time-msg, .mobile-closed-msg, .mobile-error-msg{\r\n               font-weight: 400;\r\n             font-size: 16px;\r\n            line-height: 23px;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n         .date_picker_mob{\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: white !important;\r\n            border: none !important;\r\n            padding-left: 24px !important;\r\n            color: black !important;\r\n            cursor: pointer;\r\n        }\r\n        .select-two.st{\r\n            position: relative;\r\n        }\r\n        .dropDownImage_mob{\r\n            position: absolute;\r\n            left:88%;\r\n            top: 39%;\r\n            cursor: pointer;\r\n            \r\n        }\r\n        \r\n        \t.dropbtnTM, .dropbtnPM {\r\n\t\t  background-color: white;\r\n\t\t  color: black;\r\n\t\t  \r\n\t\t  \r\n\t\t  border: none;\r\n\t\t  cursor: pointer;\r\n         align-items: center;\r\n         width: 100%;\r\n         font-size: 17px;\r\n             background-image: url(https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1682457847\/angle-down-solid_awxxyj.svg);\r\n    background-repeat: no-repeat;\r\n    background-size: 13px;\r\n    background-position: 90%;\r\n         padding: 10px;\r\n\t\t}\r\n        .fa-solid.fa-angle-down{\r\n            font-size: 14px !important;\r\n        }\r\n\t.dropbtnPM{\r\n\t    background-position: 95%;\r\n\t}\r\n        .fa-solid.fa-angle-down{\r\n            font-size: 14px !important;\r\n        }\r\n\t\r\n\t\t.dropdown-contentTM, .dropdown-contentPM {\r\n\t\t  display: none;\r\n\t\t  position: absolute;\r\n\t\t  z-index: 1;\r\n          margin-top: 50px;\r\n          margin-left: 0px;\r\n          width: 200px;\r\n          border-radius: 5px;\r\n            background-color: white ;\r\n            padding: 0px;\r\n            max-height: 250px;\r\n            overflow-y: auto;\r\n            border: 1px solid #cccccc;\r\n\t\t}\r\n\t\t.dropdown-contentTM{\r\n\t\t    width: 45%;\r\n\t\t}\r\n        .dropdown-contentPM{\r\n            width: 90%;\r\n        }\r\n        \r\n        \t.dropdown-contentTM li, .dropdown-contentPM li{\r\n\t\t  color: black;\r\n          \r\n\t\t  text-decoration: none;\r\n\t\t  display: block;\r\n\t\t  cursor: pointer;\r\n          padding: 5px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 17px;\r\n    \r\n    \r\n\t\t}\r\n\r\n\t\t.dropdown-contentTM li:hover, .dropdown-contentPM li:hover {\r\n\t\t  \r\n\t\t  background-color: #cccccc;\r\n\t\t}\r\n\t\t\t.dropdown-contentTM li:focus, .dropdown-contentPM li:focus{\r\n\t\t\t    background-color: blue;\r\n\t\t\t}\r\n     .time, .people{\r\n        height: 95%\r\n     }\r\n  \r\n  input.date_picker_date.form-control.input, .date_picker_date {\r\n    background-color: white;\r\n    height: 90%;\r\n    padding-left: 10px;\r\n    font-size: 17px;\r\n    color: black;\r\n    border: none;\r\n    width: 100%;\r\n    background-image: url(https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1682457847\/angle-down-solid_awxxyj.svg);\r\n    background-repeat: no-repeat;\r\n    background-size: 13px;\r\n    background-position: 90%;\r\n    cursor: pointer !important;\r\n}\r\n\r\n\r\n\r\n::-webkit-scrollbar {\r\n      width: 7px;\r\n    }\r\n  ::-webkit-scrollbar-thumb {\r\n      background-color: rgba(0,0,1,0.4);\r\n      border-radius: 10rem;\r\n      border: 1px solid #fff;\r\n    }\r\n\r\n\r\n   ::-webkit-scrollbar-track-piece:start {\r\n      background: transparent;\r\n    }\r\n\r\n    ::-webkit-scrollbar-track-piece:end {\r\n      background: transparent;\r\n    }\r\n        \r\n           .mobile-nonhighlighted{\r\n      width: 48%;\r\n      border: 1px solid grey;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 48px;\r\n      color: grey;\r\n      background-color: white;\r\n      border-radius: 5px;\r\n      cursor: pointer;\r\n  }\r\n  \r\n    .mobile-highlighted{\r\n      width: 48%;\r\n      border: none;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 49px;\r\n      color: white;\r\n      background-color: #B8281C;\r\n      border-radius: 8px;\r\n      cursor: pointer;\r\n  }\r\n  .mobile-error-msg{\r\n      color: red;\r\n      font-weight: bold;\r\n  }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n    <div class=\"mobile-container\">\r\n        <div class=\"mobile-form\">\r\n            <div class=\"form-input\">\r\n                <div class=\"p\">\r\n                    <div class=\"p-details\">1.\u8ba2\u5ea7<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"form-input\">\r\n                \r\n                   <div class=\"select-two st\">\r\n                \r\n                     <input type=\"text\" class=\"date_picker_date\" onchange=\"dateTimeAdjustment()\" hidden>\r\n                  <\/div>\r\n                  \r\n                  \r\n                <div class=\"select-two st2\">\r\n\r\n               \r\n                  <div class=\"time\" >\r\n                    <div class=\"dropbtnTM\" onclick=\"toggleDropdownTM()\" id=\"dropdownButtonTM\" >   \r\n         \r\n                                 <span class=\"timeContTM\">11:30<\/span> \r\n                           <\/div>\r\n    \r\n                           <ul id=\"myDropdownTM\" class=\"dropdown-contentTM\">\r\n                          <\/ul>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n             \r\n            <\/div>\r\n            <div class=\"form-input\">\r\n                <div class=\"select-one\">\r\n\r\n                \r\n               <div class=\"people\" >\r\n                    <div class=\"dropbtnPM\" onclick=\"toggleDropdownPM()\" id=\"dropdownButtonPM\" >   \r\n         \r\n                                 <span class=\"peopleContPM\">1 \u4eba<\/span>\r\n                           <\/div>\r\n    \r\n                           <ul id=\"myDropdownPM\" class=\"dropdown-contentPM\">\r\n                          <\/ul>\r\n                  <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"form-\">\r\n                <div class=\"mobile-notime-msg\">\r\n                     That timeslot isn\u2019t available! Please select a different date.\r\n                <\/div>\r\n                <div class=\"mobile-time-msg\">\r\n                     That timeslot isn\u2019t available! Here are the closest available options.\r\n                <\/div>\r\n                <div class=\"mobile-closed-msg\">\r\n                      \u8be5\u65f6\u6bb5\u4e0d\u53ef\u7528\uff01 \u8bf7\u9009\u62e9\u5176\u4ed6\u65e5\u671f\u3002\r\n                <\/div>\r\n                <div class=\"mobile-error-msg\">\r\n                      Oops, something went wrong. Please try again later.\r\n                <\/div>\r\n                <\/div>\r\n            <div class=\"form-\">\r\n                <div class=\"mobile-time-span\">\r\n                     <div class=\"alignment1\">\r\n                         <span class=\"mobile-nonhighlighted\" id='mobile_span0' onclick=\"getDataFromMobile(0)\"><\/span>\r\n                         <span class=\"mobile-nonhighlighted\" id='mobile_span1' onclick=\"getDataFromMobile(1)\"><\/span>\r\n                        \r\n                     <\/div>\r\n                     <div class=\"alignment3\">\r\n                          <span class=\"mobile-nonhighlighted\" id='mobile_span2' onclick=\"getDataFromMobile(2)\"><\/span>\r\n                         <span class=\"mobile-nonhighlighted\" id='mobile_span3' onclick=\"getDataFromMobile(3)\"><\/span>\r\n                     <\/div>\r\n                <\/div>\r\n                <\/div>\r\n            \r\n            \r\n            <div class=\"form-input\">\r\n                <input type=\"button\" onclick=\"mobile_search_btn()\" class=\"search_btn\" id=\"btn\" value=\"\u8ba2\u5ea7\">\r\n                <input type=\"button\" onclick=\"mobile_bookatable_btn()\" class=\"bookatable_btn\" id=\"btn\" value=\"\u7acb\u5373\u8ba2\u5ea7\">\r\n                <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<script>\r\n\r\nvar mobileFetchError = false;\r\nvar mobileGetHourError = false;\r\n\r\nvar datePickerMob =  flatpickr(\".date_picker_date\", {\r\n    altInput: true,\r\n    altFormat: \"M j\",\r\n    dateFormat: \"m,d,Y\",\r\n    minDate: \"today\", \r\n    defaultDate: new Date(new Date().toLocaleString(\"en-US\", {timeZone: \"America\/New_York\"})),\r\n     disableMobile: \"true\",\r\n     enableTime: false,\r\n     position: 'below',\r\n     maxDate: new Date().fp_incr(365),\r\n      timeZone: \"America\/New_York\",\r\n      disable: []\r\n});\r\n\r\n\r\nlet lis = document.querySelectorAll(\".numInput.cur-year\");\r\nfor (var element of lis) {\r\n    element.readonly=true;\r\n    element.disabled=true;\r\n}\r\n\r\n var mobile_closed_msg =document.querySelector(\".mobile-closed-msg\");\r\n mobile_closed_msg.classList.add(\"hide\");\r\n \r\n var timeDropDown = document.querySelector(\".dropbtnTM\");\r\n\r\ndocument.querySelector('#mobile_span0').style.display = 'none';\r\ndocument.querySelector('#mobile_span1').style.display = 'none';\r\ndocument.querySelector('#mobile_span2').style.display = 'none';\r\ndocument.querySelector('#mobile_span3').style.display = 'none';\r\ndocument.querySelector('.alignment1').style.display = 'none';\r\ndocument.querySelector('.alignment3').style.display = 'none';\r\n\r\n\r\n let ul_time_mob = document.querySelector('#myDropdownTM');\r\n let ul_people_mob = document.querySelector('#myDropdownPM');\r\n \r\n var mobile_notime_msg =document.querySelector(\".mobile-notime-msg\");\r\n mobile_notime_msg.classList.add(\"hide\");\r\n \r\n var mobile_error_msg =document.querySelector(\".mobile-error-msg\");\r\n mobile_error_msg.classList.add(\"hide\");\r\n\r\nlet mob_search_btn = document.querySelector('.search_btn');\r\n\r\n  var stringDateMobile = document.querySelector(\".date_picker_date\").value;\r\n  \r\n    var selectedDateMobile = new Date(stringDateMobile);\r\n    var dayOfWeekMobile = selectedDateMobile.getDay()-1;\r\n\r\n    var url = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/fetchstoreinformation?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&day=${dayOfWeekMobile}`;\r\n    \r\n    \r\n    fetch(url)\r\n        .then(res => res.json())\r\n        .then(data => {\r\n             \r\n            if(data.closed == false){\r\n             \r\n                const maxPeople = data.maxPeople;\r\n             \r\n                  for(var j = 1; j <= maxPeople+1; j++ ){\r\n                            var listItem = document.createElement('li');\r\n                            listItem.innerHTML= j + \" \"+pp  ;\r\n                            \r\n                                listItem.setAttribute('onclick', \"selectItemPM(this)\");\r\n                                listItem.setAttribute('id', j+\"P\");\r\n                                \r\n                                if(j==1){\r\n                                    document.querySelector(\".peopleContPM\").innerHTML = j +\" \"+ person; \r\n                                \/\/ listItem.style.backgroundColor='rgb(86, 159, 247)';\r\n                                \/\/ listItem.style.color='white';\r\n                                listItem.innerHTML= j +\" \"+ person; \r\n                                }\r\n                            \r\n                            \r\n                            if(j == maxPeople+1){\r\n                                listItem.setAttribute('onclick',\"viewView()\");\r\n                                listItem.innerHTML= j + \"+ \"+pp;\r\n                            }\r\n                            ul_people_mob.appendChild(listItem);\r\n                    \r\n                }\r\n                \r\n            }\r\n \r\n        })\r\n        .catch(error=>{\r\n            mobileFetchError = true;\r\n            errorHandlingMobile();\r\n            \r\n        });\r\n        \r\n\r\nasync function dateTimeAdjustment(){\r\n   \r\n    clearMob();\r\n    \r\n    ul_time_mob.innerHTML=\"\";\r\n    await getDataFromURLMobile(document.querySelector(\".date_picker_date\").value);\r\n    \r\n    selectedItemTime = null;\r\n  \r\n}\r\n\r\n\r\n\r\nfunction toggleDropdownPM() {\r\n    \r\n  if(document.querySelector('#myDropdownPM').style.display == 'block')\r\n  {\r\n    document.querySelector('#myDropdownPM').style.display = 'none';\r\n  }\r\n  else \r\n  {\r\n    document.querySelector('#myDropdownPM').style.display = 'block';\r\n    \r\n   \r\n     var selected = document.getElementById(`${selectPeopleId}`);\r\n        if (selected) {\r\n            selected.scrollIntoView({block: \"end\"});\r\n        }\r\n  }\r\n \r\n}\r\n\r\n\r\nfunction toggleDropdownTM() {\r\n    \r\n    clearMob();\r\n    \r\n  if(document.querySelector('#myDropdownTM').style.display == 'block')\r\n  {\r\n    document.querySelector('#myDropdownTM').style.display = 'none';\r\n  }\r\n  else \r\n  {\r\n    document.querySelector('#myDropdownTM').style.display = 'block';\r\n    \r\n     var selectedTime = document.getElementById(`${selectedItemTime}`);\r\n        if (selectedTime) {\r\n            selectedTime.scrollIntoView({block: \"end\"});\r\n        }else{\r\n            first_li_mob.scrollIntoView({block: \"end\"});\r\n        }\r\n  }\r\n \r\n}\r\n\r\n\r\nvar listValues = ul_people_mob.children;\r\nvar selectPeople, selectedItemTime, selectPeopleId;\r\n\r\nfunction selectItemPM(item) {\r\n   selectPeople = item.innerHTML;\r\n   selectPeopleId = item.id;\r\n  \r\n   for(let i = 0; i< listValues.length; i++ ){\r\n      if(listValues[i].style.backgroundColor == \"rgb(86, 159, 247)\"){\r\n          \r\n        \/\/   listValues[i].style.backgroundColor = \"white\";\r\n        \/\/   listValues[i].style.color='black';\r\n      }\r\n  }\r\n\/\/   item.style.backgroundColor = \"rgb(86,159,247)\";\r\n\/\/   item.style.color='white';\r\n  \r\n  document.getElementById(\"dropdownButtonPM\").innerHTML =\"<span class='peopleContPM'>\"+ selectPeople+\"<\/span>\";\r\n  toggleDropdownPM();\r\n}\r\n\r\n\r\n\r\nvar listValuesT = ul_time_mob.children;\r\n\r\nfunction selectItemTM(item) {\r\n   selectedItemTime = item.innerHTML;\r\n  \r\n  for(let i = 0; i< listValuesT.length; i++ ){\r\n      if(listValuesT[i].style.backgroundColor == \"rgb(86, 159, 247)\"){\r\n          \r\n        \/\/   listValuesT[i].style.backgroundColor = \"white\";\r\n        \/\/   listValuesT[i].style.color='black';\r\n      }\r\n  }\r\n\/\/   item.style.backgroundColor = \"rgb(86,159,247)\";\r\n\/\/     item.style.color='white';\r\n  \r\n \r\n  document.getElementById(\"dropdownButtonTM\").innerHTML =\"<span class='timeContTM'>\"+ selectedItemTime+\"<\/span>\";\r\n  toggleDropdownTM();;\r\n}\r\n\r\nfunction isCurrentDateSelectedMob(selectedDate) {\r\n  const currentDate = new Date();\r\n  const [month, day, year] = selectedDate.split(',');\r\n\r\n return (\r\n    currentDate.getFullYear() === parseInt(year) &&\r\n    currentDate.getMonth() === parseInt(month) - 1 &&\r\n    currentDate.getDate() === parseInt(day)\r\n  );\r\n}\r\n\r\n\r\n\r\nfunction isAfterTimeMob(timeString) {\r\n const currentTime = new Date();\r\n  const comparisonTime = new Date(timeString);\r\n  \r\n  currentTime.setMilliseconds(0);\r\n  currentTime.setSeconds(0);\r\n\r\n  comparisonTime.setMilliseconds(0);\r\n  comparisonTime.setSeconds(0);\r\n\r\n  return currentTime < comparisonTime;\r\n}\r\n\r\n\r\n\r\nvar first_li_mob;\r\nasync function getDataFromURLMobile(date){\r\n     \r\n            var dateParts = date.split(',');\r\n            var month = dateParts[0];\r\n            var day = parseInt(dateParts[1]);\r\n            var year = dateParts[2];\r\n\r\n        var datetimeString = year + '-' + month + '-' + day + 'T00:00:00';\r\n    \r\n     var url = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/GetAvailableHours?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&date=`+datetimeString;\r\n     \r\n          \r\n     const options = {\r\n                 hour: \"numeric\",\r\n                 minute: \"numeric\",\r\n                 hour12: false\r\n            };\r\n\r\n await fetch(url)\r\n        .then(res => res.json())\r\n        .then(data => {\r\n            \r\n            if(data.length > 0){\r\n                \r\n                if(mobile_closed_msg.classList.contains('show')){\r\n                    mobile_closed_msg.classList.remove('hide');\r\n                    mobile_closed_msg.classList.add('hide');\r\n                    ul_time_mob.style.display = \"block\";\r\n                    document.querySelector(\".dropbtnTM\").classList.remove('disabledDiv');\r\n                    document.querySelector(\".dropbtnPM\").classList.remove('disabledDiv');\r\n                    mob_search_btn.classList.remove('disabledBtn');\r\n                }\r\n                \r\n                 if(!mobileFetchError && !mobileGetHourError){\r\n                   removeErrorHandlingMobile();\r\n                }\r\n                \r\n                for(i=0; i< data.length; i++){\r\n                var utcDate = new Date(data[i]);\r\n                var localTimeString = utcDate.toLocaleTimeString(undefined, options);\r\n                \r\n                localTimeString = localTimeString.replace(\/^24\/, '00');\r\n                \r\n                var listItem = document.createElement('li');\r\n                listItem.innerHTML= localTimeString;\r\n                listItem.setAttribute('onclick', \"selectItemTM(this)\");\r\n                listItem.setAttribute('id', localTimeString);\r\n                if(i==0 ){\r\n                    first_li_mob= listItem;\r\n                    document.querySelector(\".timeContTM\").innerHTML=localTimeString;\r\n                    \/\/ listItem.style.backgroundColor='rgb(86, 159, 247)';\r\n                    \/\/  listItem.style.color='white';\r\n                }\r\n                    ul_time_mob.appendChild(listItem);\r\n            \r\n            }\r\n            \r\n            }else{\r\n                \r\n                \/\/ if(nextAvailableDate != \"\"){\r\n                \/\/     console.log(nextAvailableDate);\r\n                \/\/      getDataFromURLMobile(nextAvailableDate);\r\n                     \r\n                \/\/ }else{\r\n                     document.querySelector(\".timeContTM\").innerHTML=\"\";\r\n                 \/\/document.querySelector(\".peopleContPM\").innerHTML=\"\";\r\n                mobile_closed_msg.classList.remove(\"hide\");\r\n                mobile_closed_msg.classList.add(\"show\");\r\n                ul_time_mob.style.display = \"none\";\r\n                document.querySelector(\".dropbtnTM\").classList.add('disabledDiv');\r\n                document.querySelector(\".dropbtnPM\").classList.add('disabledDiv');\r\n                mob_search_btn.classList.add('disabledBtn');\r\n                \/\/ }\r\n               \r\n                \r\n                \r\n            }\r\n           \r\n        }).catch(err =>{\r\n            mobileGetHourError = true;\r\n            errorHandlingMobile();\r\n        });\r\n        \r\n       \/\/ first_li_mob.scrollIntoView({block: \"end\"});\r\n }    \r\n \r\n \r\n  function errorHandlingMobile(){\r\n     \r\n      document.querySelector(\".timeContTM\").innerHTML=\"\";\r\n      \/\/document.querySelector(\".peopleContPM\").innerHTML=\"\";\r\n                mobile_error_msg.classList.remove(\"hide\");\r\n                mobile_error_msg.classList.add(\"show\");\r\n                ul_time_mob.style.display = \"none\";\r\n                document.querySelector(\".dropbtnTM\").classList.add('disabledDiv');\r\n                mob_search_btn.classList.add('disabledBtn');\r\n                \r\n                \/\/  document.querySelector(\".dropbtnPM\").classList.add('disabledDiv');\r\n }\r\n\r\n\r\n  function removeErrorHandlingMobile(){\r\n     \r\n                mobile_error_msg.classList.add(\"hide\");\r\n                mobile_error_msg.classList.remove(\"show\");\r\n               \r\n                document.querySelector(\".dropbtnTM\").classList.remove('disabledDiv');\r\n                mob_search_btn.classList.remove('disabledBtn');\r\n                \/\/ document.querySelector(\".dropbtnPM\").classList.remove('disabledDiv');\r\n }\r\n \r\n \r\n \r\n<\/script>\r\n    \r\n\r\n \r\n<\/body>\r\n<\/html>\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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-625c830 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"625c830\" data-element_type=\"section\" id=\"mobile_block2\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\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-inner-column elementor-element elementor-element-b5025d5\" data-id=\"b5025d5\" 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-d5f7920 elementor-widget elementor-widget-html\" data-id=\"d5f7920\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.3.1\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\r\n    \r\n     <link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\r\n  <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.js\"><\/script>\r\n  <script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\r\n  \r\n   <script>\r\n  \r\n  <\/script>\r\n  \r\n    <title>Document<\/title>\r\n    <style>\r\n  \r\n  .mobile-date-show, .mobile-people-show, .mobile-time-show{\r\n      margin-bottom: 0.10rem !important;\r\n       padding-left: 10px;\r\n  }\r\n \r\n  .select-one, .select-two{\r\n      justify-content: flex-start !important;\r\n  }\r\n  \r\n  #mobile-firstName, #mobile-lastName, #mobile-email, #mobile-mobile, #mobile-specialRequest{\r\n      background-color: white;\r\n    height: 42px;\r\n    margin-bottom: 5px;\r\n    border: 1px solid black;\r\n    border-radius: 5px;\r\n  }\r\n  \r\n   textarea#mobile-specialRequest {\r\n    width: 100% !important;\r\n    height: 100px;\r\n    border-radius: 3px !important;\r\n}\r\n        textarea#mobile-specialRequest:focus{\r\n            box-shadow: none !Important;\r\n            \r\n         \r\n        }\r\n        \r\n        .directionChange{\r\n            display: block;\r\n            font-size: 16px !Important;\r\n            font-family: 'Noto Sans' !Important;\r\n        }\r\n  .mobile-form-details{\r\n      font-family: 'Noto Sans';\r\n    font-style: normal;\r\n    font-size: 16px;\r\n    line-height: 20px;\r\n  }\r\n  \r\n  .mobile-form-details h4{\r\n      font-family: 'Noto Sans';\r\n    font-style: normal;\r\n    font-size: 18px;\r\n    line-height: 20px;\r\n  }\r\n  .mobile-form-details div, .mobile-form-details p{\r\n      font-size: 16px;\r\n    line-height: 23px;\r\n  }\r\n  #mob_edit{\r\n           color: #1B72E8;\r\n         font-weight: 400;\r\n          font-size: 18px;\r\n          cursor: pointer;\r\n  }\r\n  .textCont_mob{\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n  }\r\n  .textCont_mob_right{\r\n           display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n        margin-bottom: 10px;\r\n  }\r\n  .mob-time-img{\r\n      padding-right: 10px;\r\n  }\r\n  #timerCounterMob{\r\n      font-size: 18px;\r\n  }\r\n  \r\n  .mobError{\r\n      color: red;\r\n      font-size: 14px;\r\n      margin-bottom: 10px;\r\n      display: none;\r\n  }\r\n\r\n  \r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n   \r\n\r\n    <div class=\"mobile-container\">\r\n          <div class=\"mobile-form\">\r\n              \r\n            <div class=\"form-input\">\r\n                <div class=\"p\">\r\n                    <div class=\"textCont_mob\">\r\n                    <div class=\"p-details\">2.\u8ba2\u5ea7\u8be6\u60c5<\/div>\r\n                    <div class=\"textCont_mob_right\">\r\n                       <img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1681947038\/Vector_1_hk2jze.png\" class=\"mob-time-img\" >\r\n                    \r\n                    \r\n                    <div id=\"timerCounterMob\">05:00<\/div>\r\n                    <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n           \r\n             \r\n            <div class=\"mobile-form-details mt-2\" >\r\n                  <h4>\u8ba2\u5ea7\u7ec6\u8282 <span id=\"mob_edit\" onclick=\"backToOne()\"> \u7f16\u8f91<\/span><\/h4> \r\n                  <div ><span>\u65e5\u671f: <\/span><span class=\"mobile-inforDate\"><\/span><\/div>\r\n        <div ><span>\u65f6\u95f4: <\/span><span class=\"mobile-inforTime\"><\/span><\/div>\r\n        <div ><span>\u5ba2\u4eba\uff1a <\/span><span class=\"mobile-inforGuest\" ><\/span><\/div>\r\n                  <div class=\"mobile-inforLocation\">\u5730\u70b9 : 258 King St N, Waterloo, ON<\/div>\r\n                 <div class=\"mobile-inforContact\">\r\n                     Contact : +1 (519) 954-6477\r\n                     <\/div>\r\n\r\n            <\/div>\r\n            \r\n             <div id=\"details_head\" class=\"mobile-form-details mt-3\">\r\n                <h4>\u91cd\u8981\u9884\u8ba2\u4fe1\u606f<\/h4>\r\n                <p>\u9700\u8981\u5c11\u63d0\u524d\u81f3 1 \u5929\u9884\u8ba2\u3002 \u5982\u60a8\u9700\u5373\u65e5\u9884\u8ba2,\u8bf7\u81f4\u7535\n(519) 954-6477\u3002\u60a8\u7684\u9884\u8ba2\u5c06\u4f1a\u4fdd\u755915\u5206\u949f\u3002 \u5982\u60a8\u4f1a\n\u665a\u4e8e\u9884\u8ba2\u65f6\u95f4\u540e\u768415\u5206\u949f\u5230\u8fbe,\u8bf7\u5148\u81f4\u7535\u7ed9\u6211\u4eec\u3002 \u6211\n\u4eec\u6216\u4f1a\u63d0\u65e9\u4e0e\u60a8\u8054\u7cfb,\u8bf7\u786e\u4fdd\u60a8\u7684\u7535\u5b50\u90ae\u4ef6\u548c\u7535\u8bdd\u53f7\u7801\n\u6b63\u786e\u65e0\u8bef\u3002\u6bcf\u4e2a\u7528\u9910\u65f6\u6bb5\u4e3a 2 \u5c0f\u65f6\u3002<\/p>\r\n            <\/div>\r\n\r\n            <form class=\"directionChange\" onsubmit=\"mob_confirm_booking(); return false;\" action=\"\">\r\n             <div class=\"form-details mb-3\">\r\n                 <label for=\"exampleInputEmail1\">\u540d\u5b57<\/label>\r\n                  <input type=\"text\" class=\"form-control\" id=\"mobile-firstName\" placeholder=\"\u6021\u60e0\" oninput=\"validateFirstName(this, document.querySelector('.error.firstnamemob'))\"  onkeypress=\"return onlyLetters(event)\" >\r\n                <span class=\"error firstnamemob\">\u8bf7\u8f93\u5165\u4e00\u4e2a\u6709\u6548\u7684\u540d\u5b57<\/span>\r\n            <\/div>\r\n            <div class=\"form-details mb-3\">\r\n                 <label for=\"exampleInputPassword1\">Last Name<\/label>\r\n                 <input class=\"form-control\" type=\"text\" id=\"mobile-lastName\" placeholder=\"\u6797\"  oninput=\"validateLastName(this, document.querySelector('.error.lastnamemob'))\" >\r\n                 <span class=\"error lastnamemob\">\u8bf7\u8f93\u5165\u6709\u6548\u7684\u59d3\u6c0f<\/span>\r\n            <\/div>\r\n  \r\n            <div class=\"form-details mb-3\">\r\n                <label for=\"exampleInputEmail1\">\u7535\u90ae<\/label>\r\n                <input type=\"email\" class=\"form-control\" id=\"mobile-email\" placeholder=\"zinglui@example.com\" oninput=\"emailValidation(this, document.querySelector('.error.emailmob'))\">\r\n                <span class=\"error emailmob\" id=\"\">Please enter a valid Email Address<\/span>\r\n\r\n            <\/div>\r\n  \r\n            <div class=\"form-details mb-3\">\r\n                  <label for=\"exampleInputEmail1\">\u624b\u673a\u53f7\u7801<\/label>\r\n                 <input type=\"text\" class=\"form-control\" id=\"mobile-mobile\" placeholder=\"(222) 222-2222\" oninput=\"phoneMobValidation(this, document.querySelector('.error.mobilemob'))\">\r\n                  <span class=\"error mobilemob\" id=\"phone\">\u8bf7\u8f93\u5165\u6709\u6548\u7684\u624b\u673a\u53f7\u7801<\/span>\r\n            <\/div>\r\n  \r\n             <div class=\"form-details mb-4\">\r\n                <label for=\"exampleFormControlTextarea3\">\u7279\u6b8a\u8981\u6c42<\/label>\r\n                <textarea type=\"text\" class=\"form-control\" id=\"mobile-specialRequest\" rows=\"7\" placeholder=\"\u7279\u6b8a\u573a\u5408\u3001\u8fc7\u654f\u3001\u9996\u9009\u5ea7\u4f4d\u7b49\u3002\"><\/textarea>\r\n            <\/div>\r\n            \r\n          \r\n            <div class=\"form-input\">\r\n                <input type=\"submit\" class=\"mob_confirm_booking\" id=\"btn2\" value=\"\u786e\u8ba4\u9884\u8ba2\">\r\n            <\/div>\r\n            \r\n              <input type=\"hidden\" name=\"trp-form-language\" value=\"zh\"\/><\/form>\r\n        <\/div>\r\n    <\/div>\r\n\r\n\r\n       <script type=\"text\/javascript\">\r\n\r\n          const phoneInputMob = document.querySelector('#mobile-mobile');\r\n          \r\n          phoneInputMob.addEventListener('input', function (e) {\r\n  var x = e.target.value.replace(\/\\D\/g, '').match(\/(\\d{0,3})(\\d{0,3})(\\d{0,4})\/);\r\n  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');\r\n\r\n  phoneMobValidation(phoneInputMob, document.querySelector('.error.mobilemob'));\r\n});\r\n\r\n\r\n\r\n\r\n  \r\n        <\/script>\r\n    \r\n\r\n \r\n<\/body>\r\n<\/html>\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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7bf4c09 hide elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7bf4c09\" data-element_type=\"section\" id=\"timeOut\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-inner-column elementor-element elementor-element-231e1cf\" data-id=\"231e1cf\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-bc640fc elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-image\" data-id=\"bc640fc\" data-element_type=\"widget\" id=\"imageClock\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.12.0 - 29-03-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 decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1681164184\/Group_237646_er3kzo.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\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-6913277 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-image\" data-id=\"6913277\" data-element_type=\"widget\" id=\"crossIcon\" 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\t<a href=\"http:\/\/35.183.62.90\/home\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1686170795\/cross_zwlpk7.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t<\/a>\n\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-4951352 elementor-widget elementor-widget-spacer\" data-id=\"4951352\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c269cd9 elementor-widget elementor-widget-heading\" data-id=\"c269cd9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">\u54ce\u5440\uff01 \u4f60\u7684\u65f6\u4ee3\u5df2\u7ecf\u8fc7\u53bb\u4e86\u3002<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9235d24 elementor-widget elementor-widget-text-editor\" data-id=\"9235d24\" 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.12.0 - 29-03-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><span style=\"white-space-collapse: preserve;\">\u8bf7\u8f93\u5165\u6240\u9700\u4fe1\u606f\u4ee5\u5b8c\u6210\u9884\u8ba2<\/span><\/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-f64f7e0 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"f64f7e0\" data-element_type=\"widget\" id=\"backButton\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a href=\"\/zh\/book-a-table\/\" class=\"elementor-button-link elementor-button elementor-size-md\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">\u8fd4\u56de\u9884\u8ba2<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-9fbe779 hide elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9fbe779\" data-element_type=\"section\" id=\"largeGroup\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-inner-column elementor-element elementor-element-505341e\" data-id=\"505341e\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-bd04aee elementor-widget elementor-widget-spacer\" data-id=\"bd04aee\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad31148 closeButtonLargeGroup elementor-widget elementor-widget-image\" data-id=\"ad31148\" 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\" src=\"https:\/\/res.cloudinary.com\/dkymqubrg\/image\/upload\/v1686170795\/cross_zwlpk7.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\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-d85bf79 elementor-widget__width-inherit largeGroupText elementor-widget elementor-widget-text-editor\" data-id=\"d85bf79\" 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>\u5bf9\u4e8e\u8f83\u5927\u7684\u56e2\u4f53\uff0c\u8bf7\u76f4\u63a5\u8054\u7cfb\u9910\u5385\u8fdb\u884c\u9884\u8ba2\u3002<\/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-cc8b4b7 elementor-align-center callUsButton elementor-widget elementor-widget-button\" data-id=\"cc8b4b7\" data-element_type=\"widget\" id=\"callUsButton\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a href=\"tel:16047251852\" class=\"elementor-button-link elementor-button elementor-size-sm\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Call Us<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-616466e elementor-widget elementor-widget-spacer\" data-id=\"616466e\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-62f7e59 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"62f7e59\" data-element_type=\"section\" id=\"mobile_block3\">\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-inner-column elementor-element elementor-element-2272dac\" data-id=\"2272dac\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-7f1d218 elementor-widget elementor-widget-spacer\" data-id=\"7f1d218\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49f21c2 elementor-widget elementor-widget-heading\" data-id=\"49f21c2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Your Booking is Confirmed. <\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3492a40 elementor-widget elementor-widget-heading\" data-id=\"3492a40\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">\u6211\u4eec\u5df2\u5c06\u60a8\u7684\u9884\u7ea6\u9884\u7ea6\u786e\u8ba4\u4fe1\u5bc4\u81f3\u60a8\u7684\u4fe1\u7bb1\u3002\u6211\u4eec\u671f\u5f85\u60a8\u7684\u5149\u4e34\u3002<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e31afd3 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"e31afd3\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a href=\"\/zh\/home\/\" class=\"elementor-button-link elementor-button elementor-size-sm\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">\u8fd4\u56de\u9996\u9875<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b6b653 elementor-widget elementor-widget-spacer\" data-id=\"4b6b653\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-978a93f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"978a93f\" 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-inner-column elementor-element elementor-element-03f52f5\" data-id=\"03f52f5\" 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-4f6a31b elementor-widget elementor-widget-html\" data-id=\"4f6a31b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\n    \n        <style>\n            .hide{\n                display: none;\n            }\n            .show{\n                display: block;\n                width: 100%;\n            }\n            .showBtn{\n                display: block;\n            }\n            .showTime{\n                display: flex;\n                margin: auto;\n                width: 50%;\n                \n            }\n            .non-highlight{\n            \n            width: 130px;\n            height: 45px;\n            border-radius: 8px;\n            color: rgb(66, 64, 64);\n            border: 1px solid rgb(69, 69, 69);\n            background-color: white;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            margin-right: 30px;\n              cursor: pointer;\n        }\n        .highlight{\n            \n            width: 130.5px;\n            height: 45.5px;\n            border-radius: 8px;\n            color: white;\n            border: none;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            margin-right: 30px;\n             background-color: #BE3030;\n               cursor: pointer;\n        }\n        <\/style>\n   \n    \n        <body>\n        <script>\n        \n        \n        let people, date, estimatedTiming;\n        let intervalId = 0;\n        let display = document.querySelector(\"#timerCounter\");\n        \n        var tabView =  document.querySelector(\".spanFindATable.a\");\n     \n\n     var desk_block1= document.querySelector(\"#block1\");\n      desk_block1.classList.add(\"hide\");\n      \n     \n   \n   var desk_block2= document.querySelector(\"#block2\");\n desk_block2.classList.add(\"hide\");\n  \n   \n   var desk_block3= document.querySelector(\"#block3\");\n   desk_block3.classList.add(\"hide\");\n  \n   var desk_search_btn = document.querySelector(\".desk_search_btn\");\n   desk_search_btn.classList.add(\"showBtn\");\n   \n   var desk_bookatable_btn = document.querySelector(\".desk_bookatable_btn\");\n   desk_bookatable_btn.classList.add(\"hide\");\n   \n   var desk_time_msg = document.querySelector(\".desk-time-msg\");\n   desk_time_msg.classList.add('hide');\n   \n   var desk_time_span = document.querySelector(\".desk-time-span\");\n  desk_time_span.classList.add('hide');\n   \n\n     \n     document.querySelector(\"#timeOut\").classList.add(\"hide\");\n     \n     var noPeople;\n     var timeOption= [];\n    \n    var tempId =0;\n    var tempGuid = null\n    let datetimeString;\n       \n    \n    if(localStorage.getItem('NO_OF_PEOPLE')){\n        \n        people = localStorage.getItem(\"NO_OF_PEOPLE\");\n        date = localStorage.getItem(\"DATE\");\n        estimatedTiming = localStorage.getItem(\"TIME\");\n        tempId = localStorage.getItem(\"TEMP_ID\");\n        tempGuid = localStorage.getItem(\"TEMP_GUID\");\n \n        \n        localStorage.removeItem(\"NO_OF_PEOPLE\");\n        localStorage.removeItem(\"DATE\");\n        localStorage.removeItem(\"TIME\");\n        localStorage.removeItem(\"TEMP_ID\");\n        localStorage.removeItem(\"TEMP_GUID\");\n        \n         document.querySelector(\".peopleCont\").innerHTML = people;\n         document.querySelector(\"input.date_picker.form-control.input\").value = getCustomDateForField(date);\n         document.querySelector(\".timeCont\").innerHTML = estimatedTiming;    \n         \n        \n         desk_block1.classList.remove(\"show\");\n            desk_block1.classList.add(\"hide\");\n                \n\n          intervalId = StartTimerNow(299, display);\n                  \n        desk_block2.classList.remove(\"hide\");\n        desk_block2.classList.add(\"show\");\n    \n    console.log(desk_block1, desk_block2);\n     \n      var desk_inforDate = document.querySelector(\".inforDate\");\n                     var desk_inforTime = document.querySelector(\".inforTime\");\n                     var desk_inforGuest = document.querySelector(\".inforGuest\");\n                     console.log(date);\n                     desk_inforDate.innerHTML = (window.location.href.includes(\"\/zh\/\")?  getCustomDateInChinese(date):getCustomDate(date)) ;\n                     desk_inforGuest.innerHTML =people;\n                     desk_inforTime.innerHTML= estimatedTiming;\n     \n    }else{\n         desk_block1.classList.remove(\"hide\");\n        desk_block1.classList.add(\"show\");\n        \n        console.log(desk_block1, desk_block2, \"HI\");\n    }\n    \n        if(localStorage.NO_OF_PEOPLE_MOB > 0){\n          desk_block1.classList.remove(\"show\");\n            desk_block1.classList.add(\"hide\");\n    }\n    \n    \n   \n            \n    function desktop_search_btn(){\n        \n        clear();\n        if(checkTime() == true){\n         dateTimeAdjustmentDesk();\n         return;\n     }\n        \n        document.querySelector(\".inforContact\").innerHTML = inforContact;\n     document.querySelector(\".inforLocation\").innerHTML = inforLocation;\n      \n            clearError();\n            \n                 people = document.querySelector(\".peopleCont\").innerHTML;\n                date = document.querySelector(\".date_picker\").value;\n                estimatedTiming = document.querySelector(\".timeCont\").innerHTML; \n                \n                \n                if(document.querySelector(\".timeCont\").innerHTML == \"\"){\n                     desk_notime_msg.classList.add('show');\n            desk_notime_msg.classList.remove('hide');\n            \n            return;\n                }\n             \n            var peopleList = people.split(' ');\n             noPeople = peopleList[0];\n            \n            var dateFormat = date;\n            var timeFormat = estimatedTiming;\n            \n             var timeParts = timeFormat.split(':');\n           var hours = timeParts[0];\n           var minutes = timeParts[1];\n           \n            if (hours.length === 1) {\n                  hours = '0' + hours;\n            }\n            \n            var dateParts = date.split(',');\n            var month = dateParts[0];\n            var day = dateParts[1];\n            var year = dateParts[2];\n\n         datetimeString = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':00';\n        \n            var dateTime = new Date(datetimeString);\n            \n  \n            var url_time = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/getavailabletime?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&numofpeople=${noPeople}&datetime=${datetimeString}`;\n\n            \n        desk_search_btn.classList.add(\"disabledBtn\");\n        \n        fetch(url_time)\n        .then(res => res.json())\n        .then(data => {\n            \n        \n            if(data.success == true){\n                \n                desk_block1.classList.remove(\"show\");\n                desk_block1.classList.add(\"hide\");\n                \n                intervalId =  StartTimerNow(299, display);\n              \n                tempId = data.tempReservationID;\n                tempGuid = data.tempReservationGuid;\n                 \n                desk_block2.classList.remove(\"hide\");\n                desk_block2.classList.add(\"show\");\n                 \n                 \n                 if(desk_block2){\n                     \n                     var desk_inforDate = document.querySelector(\".inforDate\");\n                     var desk_inforTime = document.querySelector(\".inforTime\");\n                     var desk_inforGuest = document.querySelector(\".inforGuest\");\n                     \n                     desk_inforDate.innerHTML = (window.location.href.includes(\"\/zh\/\")?  getCustomDateInChinese(date):getCustomDate(date))\n                     desk_inforGuest.innerHTML = people;\n                     desk_inforTime.innerHTML = estimatedTiming;\n                 }\n                 \n            }\n            \n            if(data.success != true){\n                \n                timeOption = data.option;\n\n                                \n                                timeOption = data.altTimes.map(function(datetimeStr) {\n                                   var datetimeObj = new Date(datetimeStr);\n                                   var hours = datetimeObj.getHours();\n                                  var minutes = datetimeObj.getMinutes();\n                                 var timeStr = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');\n                                    return timeStr;\n                                 });\n         \n                            if(timeOption.length > 0){\n                \n                                 desk_time_msg.classList.remove('hide');\n                            desk_time_msg.classList.add(\"show\");\n                \n                                desk_time_span.classList.remove('hide');\n                                desk_time_span.innerHTML = \"\";\n                                \n                                for(var i = 0; i < timeOption.length; i++){\n                                    const span = document.createElement(\"span\");\n                                    span.innerHTML = timeOption[i];\n                                     span.className=\"non-highlight\";\n                                    span.id= \"span\"+i;\n                                    span.addEventListener(\"click\", getData, false);\n                                    span.myParam = i;\n                                    document.querySelector(\".desk-time-span\").appendChild(span);\n                                };\n                            }else{\n                                desk_notime_msg.classList.remove(\"hide\");\n                                desk_notime_msg.classList.add('show');\n                            }\n                                \n                \n            }\n        })\n        .catch(console.error)\n        .finally(() => {\n            desk_search_btn.classList.remove(\"disabledBtn\");\n        });\n    }\n    \n    \n  \n    function desktop_bookatable_btn(){\n         \n         clear();\n     if(checkTime() == true){\n         dateTimeAdjustmentDesk();\n         return;\n     }\n     \n        clearError();\n        \n     document.querySelector(\".inforContact\").innerHTML = inforContact;\n     document.querySelector(\".inforLocation\").innerHTML = inforLocation;\n    \/\/  document.querySelector(\".diningInstruction p\").innerHTML = diningInstructionContent;\n    \/\/  document.querySelector(\".diningInstruction h4\").innerHTML = diningInstructionTitle;\n        \n        if(timeOption.includes(updatedTime)){\n            \n              var timeFormat = updatedTime;\n        }\n        \n    \n                people = document.querySelector(\".peopleCont\").innerHTML;\n                date = document.querySelector(\".date_picker\").value;\n                    \n            var peopleList = people.split(' ');\n             noPeople = peopleList[0];\n            \n            var timeParts = timeFormat.split(':');\n            var hours = timeParts[0];\n            var minutes = timeParts[1];\n           \n            if (hours.length === 1) {\n                  hours = '0' + hours;\n            }\n            \n            var dateParts = date.split(',');\n            var month = dateParts[0];\n            var day = dateParts[1];\n            var year = dateParts[2];\n\n         datetimeString = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':00';\n            \n        var dateTime = new Date(datetimeString);\n  \n         var url_time = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/getavailabletime?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&numofpeople=${noPeople}&datetime=${datetimeString}`;\n         \n        desk_bookatable_btn.classList.add(\"disabledBtn\");\n        \n         fetch(url_time)\n        .then(res => res.json())\n        .then(data => {\n  \n        \n            if(data.success == true){\n                \n                 tempId = data.tempReservationID;\n                \n                desk_block1.classList.remove(\"show\");\n                desk_block1.classList.add(\"hide\");\n                \n                intervalId =  StartTimerNow(299, display);\n               \n                 desk_block2.classList.remove(\"hide\");\n                 desk_block2.classList.add(\"show\");\n                 \n                 \n                 if(desk_block2){\n                     \n                     var desk_inforDate = document.querySelector(\".inforDate\");\n                     var desk_inforTime = document.querySelector(\".inforTime\");\n                     var desk_inforGuest = document.querySelector(\".inforGuest\");\n                     \n                     desk_inforDate.innerHTML = (window.location.href.includes(\"\/zh\/\")?  getCustomDateInChinese(date):getCustomDate(date));\n                     desk_inforGuest.innerHTML = people;\n                   \n                     desk_inforTime.innerHTML = updatedTime;\n                 }\n                 \n            }\n  \n        })\n        .catch(console.error)\n        .finally(() => {\n            desk_bookatable_btn.classList.remove(\"disabledBtn\");\n        });\n        \n    }\n    \n                 \n   async function getConfirmBooking(){\n                            \n            var firstName = document.querySelector(\"#firstName\").value;\n            var lastName = document.querySelector(\"#lastName\").value;\n            var email= document.querySelector(\"#email\").value;\n            var phoneInput = document.querySelector(\"#mobile\");\n            var mobile = phoneInput.value;\n            var specialRequest= document.querySelector(\"#specialRequest\").value;\n              \n            var selectedTime = estimatedTiming = document.querySelector(\".timeCont\").innerHTML;\n            \n            var timeFormat = estimatedTiming;\n            \n            if(timeOption.includes(updatedTime)){\n            \n               var timeFormat = updatedTime;\n        }\n        \n            \n            \n             var timeParts = timeFormat.split(':');\n           var hours = timeParts[0];\n           var minutes = timeParts[1];\n           \n            if (hours.length === 1) {\n                  hours = '0' + hours;\n            }\n            \n            var dateParts = date.split(',');\n            var month = dateParts[0];\n            var day = dateParts[1];\n            var year = dateParts[2];\n\n         datetimeString = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':00';\n         \n         \n                     var dateSelected = document.querySelector(\".inforDate\").innerHTML;\n            \n            var dateOnly = dateSelected.substring(dateSelected.indexOf(\",\") + 2);\n\n            var selectedDate = getDateTime(dateOnly,\n            document.querySelector(\".inforTime\").innerHTML);\n                 \n                 \n             var selectedPeople = document.querySelector(\".inforGuest\").innerHTML.split(\" \")[0];\n\n            if( logicCheck(firstName, lastName, email, mobile) ){\n                   \n                    const reservationData = {\n                         ID: tempId,\n                         FirstName: firstName,\n                         LastName: lastName,\n                         Email: email,\n                         ContactNumber : mobile,\n                         SpecialRequest: specialRequest,\n                         NumberOfPeople: selectedPeople,\n                         StartTime: datetimeString,\n                    };\n\n                    const headers = {\n                      \"Content-Type\": \"application\/json\"\n                    };\n                    \n                     url = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/createreservationrecord?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2`;\n                     \n                    await fetch(url, {\n                           method: \"POST\",\n                           headers: headers,\n                           body: JSON.stringify(reservationData)\n                     })\n                     .then(response => {\n                          if (response.ok) {\n                              return response.json();\n                            } else {\n                                throw new Error(\"Error: \" + response.status);\n                            }\n                     })\n                     .then(data => {\n                         if(data.success){\n                             desk_block2.classList.remove(\"show\");\n                             desk_block2.classList.add(\"hide\")\n                            StopTimer(intervalId, display);\n                            desk_block3.classList.remove('hide'); \n                            desk_block3.classList.add('show'); \n                             window.scrollTo(0, 0); \n                         }\n                     })\n             }\n    }        \n      \n      \n    function failBooking(){\n        \n        deleteTempSlot();\n        \n        \/\/showTimeOut();\n\n      desk_block1.classList.add('hide');  \n      desk_block1.classList.remove(\"show\");\n      desk_block3.classList.remove(\"hide\");\n      desk_block3.classList.add(\"hide\");\n      \n        window.scrollTo(0, 0);\n        document.querySelector(\"#timeOut\").classList.remove(\"hide\");\n        overlay.style.display='block';\n        document.querySelector(\"#timeOut\").classList.add(\"showTime\");\n        document.body.style.overflow  = 'hidden';\n        document.body.setAttribute(\"style\", \"overflow:hidden\")\n        \n    }\n    \n    \n    var updatedTime = 0;\n    function getData(evt){\n\n            id= evt.currentTarget.myParam;\n            for ( i = 0; i < 8; i++) {\n                var obj = document.getElementById( \"span\" + i);\n                if (obj != null)\n                        obj.className = 'non-highlight';\n                }\n        \n                var obj = document.getElementById( \"span\" + id );  \n               \n                updatedTime = obj.innerHTML;\n                if (obj != null)\n                    obj.className = 'highlight';\n                    \n                    \n         document.querySelector(\".timeCont\").innerHTML = obj.innerHTML;      \n        desktop_search_btn();        \n                    \n    }\n      \n      \n    document.querySelector(\".edit\").addEventListener(\"click\", ()=>{\n               \n               deleteTempSlot();\n               \n            document.querySelector(\"#block2\").classList.add(\"hide\");\n            document.querySelector(\"#block2\").classList.remove(\"show\");\n        \n            StopTimer(intervalId, display);\n            \n            desk_time_msg.classList.remove(\"show\");\n            desk_time_msg.classList.add('hide');\n            \n            desk_search_btn.classList.remove(\"hide\");\n            desk_search_btn.classList.add(\"showBtn\");\n                \n            desk_bookatable_btn.classList.remove(\"showBtn\");\n            desk_bookatable_btn.classList.add(\"hide\");\n            \n            desk_time_span.classList.add('hide');\n        \n         \n        document.querySelector(\".peopleCont\").innerHTML = people;\n     datePicker.setDate(date);\n     \n           \n            \n              document.querySelector(\"#block1\").classList.remove(\"hide\");\n            document.querySelector(\"#block1\").classList.add(\"show\");\n            \n           \n           document.querySelector(\".timeCont\").innerHTML = estimatedTiming;\n            \n            removeClosed(date);\n            \n        });      \n        \n        \n    tabView.addEventListener(\"click\", () =>{\n               \n               deleteTempSlot();\n               \n            document.querySelector(\"#block2\").classList.add(\"hide\");\n            document.querySelector(\"#block2\").classList.remove(\"show\");\n            \n            StopTimer(intervalId, display);\n            \n            desk_time_msg.classList.remove(\"show\");\n            desk_time_msg.classList.add('hide');\n            \n            desk_search_btn.classList.remove(\"hide\");\n            desk_search_btn.classList.add(\"showBtn\");\n                \n            desk_bookatable_btn.classList.remove(\"showBtn\");\n            desk_bookatable_btn.classList.add(\"hide\");\n            \n            desk_time_span.classList.add('hide');\n        \n            document.querySelector(\".peopleCont\").innerHTML = people;\n            datePicker.setDate(date);\n\n            document.querySelector(\"#block1\").classList.remove(\"hide\");\n            document.querySelector(\"#block1\").classList.add(\"show\");\n\n            document.querySelector(\".timeCont\").innerHTML = estimatedTiming;\n            \n            removeClosed(date);\n     \n        });\n\n    function deleteTempSlot() {\n        \n    var siteUrl = 'https:\/\/dashboard.hey-mate.ca\/';\n    var guid = tempGuid;\n    \n\n    var postData = {\n        guid: guid,\n        storeGuid: '2b1229b8-63ae-4ed0-a0eb-c211b55efcf2'\n    };\n\n    $.ajax({\n        type: \"POST\",\n        url: `${siteUrl}\/api\/reservations\/DeleteSelectedReservationSlot`,\n        data: postData,\n        success: function (response) {\n\n            }\n        });\n    }\n        \n        \n     function getCustomDateInChinese( estimatedDate){\n        \n        let chineseMonths = [\n          \"\u4e00\u6708\", \"\u4e8c\u6708\", \"\u4e09\u6708\", \"\u56db\u6708\" , \"\u4e94\u6708\", \"\u516d\u6708\",\"\u4e03\u6708\",\"\u516b\u6708\",\"\u4e5d\u6708\", \"\u5341\u6708\", \"\u5341\u4e00\u6708\", \"\u5341\u4e8c\u6708\"\n         ];\n\n        let chineseWeekdays = [\n         \"\u661f\u671f\u65e5\", \"\u661f\u671f\u4e00\", \"\u661f\u671f\u4e8c\",  \"\u661f\u671f\u4e09\", \"\u661f\u671f\u56db\",\"\u661f\u671f\u4e94\", \"\u661f\u671f\u516d\"\n        ];\n\n\n        var newDate = new Date(estimatedDate);\n        var dayName = chineseWeekdays[newDate.getDay()];\n        \n        var monthName = chineseMonths[newDate.getMonth()];\n        var fullYear = newDate.getFullYear();\n        \n        var resultDate = dayName+\", \"+ newDate.getDate()+\" \"+monthName+\", \"+fullYear;\n        return resultDate;\n    } \n                 \n    function getCustomDate( estimatedDate){\n        \n        const weekDays = [\"Sunday\",\"Monday\", \"Tuesday\",\n        \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n        \n         const monthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n\n\n        var newDate = new Date(estimatedDate);\n        var dayName = weekDays[newDate.getDay()];\n        \n        var monthName = monthNames[newDate.getMonth()];\n        var fullYear = newDate.getFullYear();\n        \n        var resultDate = dayName+\", \"+ monthName+\" \" +newDate.getDate()+\", \"+fullYear;\n        return resultDate;\n    } \n    \n    function getCustomDateForField( estimatedDate){\n        \n        const weekDays = [\"Sunday\",\"Monday\", \"Tuesday\",\n        \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n        \n         const monthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n\n        const newDate = new Date(estimatedDate);\n       \n        let monthName = monthNames[newDate.getMonth()];\n       \n        return monthName + \" \" + newDate.getDate();\n    } \n    \n    function startTimer(duration, display) {\n          var timer = duration, minutes, seconds;\n          var intervalId = setInterval(function () {\n          minutes = parseInt(timer \/ 60, 10);\n          seconds = parseInt(timer % 60, 10);\n\n          minutes = minutes < 10 ? \"0\" + minutes : minutes;\n          seconds = seconds < 10 ? \"0\" + seconds : seconds;\n\n          display.textContent = minutes + \":\" + seconds;\n\n    if (--timer < 0) {\n      clearInterval(intervalId);\n      display.textContent= \"00:00\";\n     \n    }\n    if(timer == 0){\n        failBooking();\n        \n    }\n  }, 1000);\n  \n  return intervalId;\n}\n\n    function StartTimerNow(duration, display) {\n  \n   var intervalId = startTimer (duration, display);\n   return intervalId;\n};  \n\n    function StopTimer(intervalId, display){\n    \n    clearInterval(intervalId);\n    display.textContent = \"05:00\";\n    \n};\n\n\nfunction validateEmail(email) {\n \n  var pattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n  return pattern.test(email);\n}\n\n\n  function clear(){\n      \n        if(desk_notime_msg.classList.contains('show')){\n            desk_notime_msg.classList.remove('hide');\n            desk_notime_msg.classList.add('hide');\n        }\n        \n         if(desk_time_msg.classList.contains('show')){\n        desk_time_msg.classList.remove(\"show\");\n         desk_time_msg.classList.add(\"hide\");\n          desk_time_span.classList.remove(\"show-flex\");\n           desk_time_span.classList.add(\"hide\");\n           \n           desk_bookatable_btn.classList.remove(\"show\");\n           desk_bookatable_btn.classList.add(\"hide\");\n           desk_search_btn.classList.remove(\"hide\");\n            desk_search_btn.classList.add(\"show\");\n    }\n    } \n    \n    \n    \nfunction logicCheck(firstName, lastName, email, mobile) {\n\n   var check = true;\n   \n   validateFirstName(document.querySelector('#firstName'), document.querySelector('.error.firstname'));\n   validateLastName(document.querySelector('#lastName'), document.querySelector('.error.lastname'));\n   emailValidation(document.querySelector('#email'),document.querySelector('.error.email'));\n   phoneMobValidation(document.querySelector('#mobile'),document.querySelector('.error.mob'));\n   \n   \n   if(document.querySelector('.error.firstname').style.display=='block'){\n       check = false;\n   }\n   \n   if(document.querySelector('.error.lastname').style.display=='block'){\n       check = false;\n   }\n   \n   if ( document.querySelector('.error.email').style.display=='block') {\n       check = false;\n    }\n    \n   if (document.querySelector('.error.mob').style.display=='block') {\n     check = false;\n    }\n    \n    return check;\n}\n\n\nfunction clearError(){\n    \n    if(document.querySelector('.error.firstname').style.display=='block'){\n        document.querySelector('.error.firstname').style.display='none'  \n      }\n      \n      if(document.querySelector('.error.lastname').style.display=='block'){\n        document.querySelector('.error.lastname').style.display='none'  \n      }\n      \n     if(document.querySelector('.error.mob').style.display=='block'){\n        document.querySelector('.error.mob').style.display='none'  \n      }\n      \n      if(document.querySelector('.error.email').style.display=='block'){\n        document.querySelector('.error.email').style.display='none'  \n      }\n}\n\n\n\n function checkTime(){\n     const options = {\n    timeZone: \"America\/New_York\" \/\/ Eastern Standard Time (EST)\n};\n     const currentDate = new Date().toLocaleString(\"en-US\", options);\n\nvar calender = document.querySelector(\".date_picker\").value;\nvar timeCont = document.querySelector(\".timeCont\").innerHTML;\n\n\nconst dateString = calender +\" \"+ timeCont;\n\nconst [month, day, year, time] = dateString.split(\/[, ]\/);\n\nconst currentYear = new Date().getFullYear();\n\nconst formattedDate = `${month} ${day} ${year} ${time}`;\n\nconst dateObj = new Date(formattedDate).toLocaleString(\"en-US\", options);\n\n\nif( new Date(currentDate) >= new Date(dateObj)){\n        return true;\n    }\n\n    return false;\n }  \n \n \n \n function removeClosed(date){\n     if(desk_closed_msg.classList.contains('show')){\n                desk_closed_msg.classList.remove('hide');\n                desk_closed_msg.classList.add('hide');\n                ul_time_desk.style.display = \"block\";\n                document.querySelector(\".dropbtnT\").classList.remove('disabledDiv');\n                desk_search_btn.classList.remove('disabledBtn');\n                document.querySelector(\".dropbtn\").classList.remove('disabledDiv');\n                \n                getDataFromURL(date);\n            }\n }\n \n     \n     <\/script>   \n     <\/body>\n  \n    \t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11ccfb4 elementor-widget elementor-widget-html\" data-id=\"11ccfb4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<html>\n    \n    <style>\n        .mobile-hide{\n                display: none;\n            }\n            .mobile-show{\n                display: block;\n                width: 100%;\n            }\n            \n            \n  .alignment1, .alignment3{\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: 20px;\n      width: 100%\n  }\n  \n  \n  \n  \n    <\/style>\n    <body>\n\n           <script> \n              \n        let intervalId_Mob = 0;\n        let display_Mob = document.querySelector(\"#timerCounterMob\");\n        var tempId ;\n           \n            var mobile_block1 = document.querySelector(\"#mobile_block1\");\n mobile_block1.classList.add(\"mobile-hide\");\n var mobile_block2 = document.querySelector(\"#mobile_block2\");\n mobile_block2.classList.add(\"mobile-hide\");\n \n\n \n \n var search_btn = document.querySelector(\".search_btn\");\n search_btn.classList.add(\"mobile-show\");\n\nvar bookatable_btn = document.querySelector(\".bookatable_btn\");\nbookatable_btn.classList.add(\"mobile-hide\");\n\nvar mobile_block3 = document.querySelector(\"#mobile_block3\");\nmobile_block3.classList.add(\"mobile-hide\");\n\nvar mobile_msg = document.querySelector(\".mobile-time-msg\");\nmobile_msg.classList.add(\"hide\");\n\nvar mobile_time_span = document.querySelector(\".mobile-time-span\");\nmobile_time_span.classList.add(\"hide\");\n\n\n    var screenSize = localStorage.SCREEN;\n          if(screen.width <= 1200){\n              mobile_block1.classList.remove(\"mobile-hide\");\n              mobile_block1.classList.add(\"mobile-show\");\n              \n                desk_block1.classList.add(\"hide\");\n                desk_block1.classList.remove(\"show\");\n                \n                localStorage.removeItem(\"SCREEN\");\n     }\n           \n           \n           \n  if(localStorage.NO_OF_PEOPLE_MOB){\n        \n        \n        people = localStorage.getItem(\"NO_OF_PEOPLE_MOB\");\n        date = localStorage.getItem(\"DATE_MOB\");\n        estimatedTiming = localStorage.getItem(\"TIME_MOB\");\n        tempId = localStorage.getItem(\"TEMP_MOB\");\n        tempGuid = localStorage.getItem(\"TEMP_MOB_GUID\");\n  \n        document.querySelector(\".peopleContPM\").innerHTML = people;\n        document.querySelector(\".date_picker_date\").value = getCustomDateForField(date);\n        document.querySelector(\".timeContTM\").innerHTML = estimatedTiming;\n\n        localStorage.removeItem(\"NO_OF_PEOPLE_MOB\");\n        localStorage.removeItem(\"DATE_MOB\");\n        localStorage.removeItem(\"TIME_MOB\");\n        localStorage.removeItem(\"TEMP_MOB\");\n        localStorage.removeItem(\"TEMP_MOB_GUID\");\n\n         intervalId_Mob = StartTimerNowMob(299, display_Mob);\n        \n         mobile_block1.classList.remove(\"mobile-show\");\n            mobile_block1.classList.add(\"mobile-hide\");\n                 \n        mobile_block2.classList.remove(\"mobile-hide\");\n        mobile_block2.classList.add(\"mobile-show\");\n    \n     \n      var mob_inforDate = document.querySelector(\".mobile-inforDate\");\n            var mob_inforTime = document.querySelector(\".mobile-inforTime\");\n            var mob_inforGuest = document.querySelector(\".mobile-inforGuest\");\n            \n         mob_inforDate.innerHTML =  getCustomDateMob(date);\n        mob_inforGuest.innerHTML = people;\n         mob_inforTime.innerHTML = estimatedTiming;\n     \n    }\n\n\n\n\nvar timeFromMobile=0; \nvar timeOptionMob =[];\n\nfunction mobile_search_btn(){\n    clearMob();\n        clearMobError();\n        \n         if(estimatedTiming ==\"\"){\n                    mobile_notime_msg.classList.remove(\"hide\");\n                        mobile_notime_msg.classList.add(\"show\");\n                        \n                        return;\n                }\n        \n    document.querySelector(\".mobile-inforContact\").innerHTML = inforContact;\n    document.querySelector(\".mobile-inforLocation\").innerHTML = inforLocation;\n        \n               people = document.querySelector(\".peopleContPM\").innerHTML;\n                date = document.querySelector(\".date_picker_date\").value;\n                estimatedTiming = document.querySelector(\".timeContTM\").innerHTML;\n              \n             \n            var peopleList = people.split(' ');\n            var noPeople = peopleList[0];\n            \n            var dateFormat = date;\n            var timeFormat = estimatedTiming;\n            \n             var timeParts = timeFormat.split(':');\n           var hours = timeParts[0];\n           var minutes = timeParts[1];\n           \n            if (hours.length === 1) {\n                  hours = '0' + hours;\n            }\n            \n            var dateParts = date.split(',');\n            var month = dateParts[0];\n            var day = dateParts[1];\n            var year = dateParts[2];\n\n         datetimeString = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':00';\n        \n            var dateTime = new Date(datetimeString);\n            \n  \n            var url_time = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/getavailabletime?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&numofpeople=${noPeople}&datetime=${datetimeString}`;\n           \n           \n        fetch(url_time)\n        .then(res => res.json())\n        .then(data => {\n\n            if(data.success == true){\n                \n                mobile_block1.classList.remove(\"mobile-show\");\n                mobile_block1.classList.add(\"mobile-hide\");\n                \n                intervalId_Mob = StartTimerNowMob(299, display_Mob);\n\n                tempId = data.tempReservationID;\n                tempGuid = data.tempReservationGuid;\n    \n                 \n                  mobile_block2.classList.remove(\"mobile-hide\");\n                  mobile_block2.classList.add(\"mobile-show\");\n\n             if(mobile_block2){\n                \n            var mob_inforDate = document.querySelector(\".mobile-inforDate\");\n            var mob_inforTime = document.querySelector(\".mobile-inforTime\");\n            var mob_inforGuest = document.querySelector(\".mobile-inforGuest\");\n            \n\n                mob_inforDate.innerHTML = getCustomDateMob(date);\n                mob_inforTime.innerHTML = estimatedTiming;\n                mob_inforGuest.innerHTML = people;\n                    }\n                 }\n                 \n            \n            \n            if(data.success != true){\n\n                \/\/  search_btn.classList.remove(\"mobile-show\");\n                \/\/  search_btn.classList.add(\"mobile-hide\");\n          \n                  timeOptionMob = data.altTimes.map(function(datetimeStr) {\n                      var datetimeObj = new Date(datetimeStr);\n                       var hours = datetimeObj.getHours();\n                      var minutes = datetimeObj.getMinutes();\n                      var timeStr = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');\n                                    return timeStr;\n                                 });\n                        \n                    if(timeOptionMob.length > 0){\n                        \n                \/\/           bookatable_btn.classList.remove(\"mobile-hide\");\n                \/\/  bookatable_btn.classList.add(\"mobile-show\");\n                       \n                 mobile_msg.classList.remove(\"hide\");\n                 mobile_msg.classList.add(\"show\");\n                       \n                 mobile_time_span.classList.remove(\"hide\");\n                                 \n                    for(i=0; i<timeOptionMob.length; i++){\n                        if(i == 0){\n                            document.querySelector('.alignment1').style.display = 'flex';\n                            document.querySelector('#mobile_span0').style.display = 'flex';\n                            document.querySelector('#mobile_span0').className = 'mobile-nonhighlighted';\n                            document.querySelector('#mobile_span0').innerHTML = timeOptionMob[i];\n                        }\n                        if(i == 1){\n                            document.querySelector('#mobile_span1').style.display = 'flex';\n                            document.querySelector('#mobile_span1').className = 'mobile-nonhighlighted';\n                            document.querySelector('#mobile_span1').innerHTML = timeOptionMob[i];\n                        }\n                        if(i == 2){\n                            document.querySelector('.alignment3').style.display = 'flex';\n                            document.querySelector('#mobile_span2').style.display = 'flex';\n                            document.querySelector('#mobile_span2').className = 'mobile-nonhighlighted';\n                            document.querySelector('#mobile_span2').innerHTML = timeOptionMob[i];\n                        }\n                        if(i == 3){\n                            document.querySelector('#mobile_span3').style.display = 'flex';\n                            document.querySelector('#mobile_span3').className = 'mobile-nonhighlighted';\n                            document.querySelector('#mobile_span3').innerHTML = timeOptionMob[i];\n                        }\n                    }\n                    } else{\n                        mobile_notime_msg.classList.remove(\"hide\");\n                        mobile_notime_msg.classList.add(\"show\");\n                        \n                    }\n                  \n                \n            }\n        })\n        .catch(console.error);\n    }\n            \nasync function mob_confirm_booking(){\n      \n           let mob_firstName, mob_lastName, mob_email, mob_mobile, mob_specialRequest;\n           \n            mob_firstName = document.querySelector(\"#mobile-firstName\").value;\n\n             mob_lastName = document.querySelector(\"#mobile-lastName\").value;\n            \n             mob_email= document.querySelector(\"#mobile-email\").value;\n                    \n             mob_mobile = document.querySelector(\"#mobile-mobile\").value;\n            \n             mob_specialRequest= document.querySelector(\"#mobile-specialRequest\").value;\n                            \n             \n            var selectedPeople = document.querySelector(\".mobile-inforGuest\").innerHTML.split(\" \")[0];\n\n            \n            var dateSelected = document.querySelector(\".mobile-inforDate\").innerHTML;\n            \n            var dateOnly = dateSelected.substring(dateSelected.indexOf(\",\") + 2);\n\n            var selectedDate = getDateTime(dateOnly,\n            document.querySelector(\".mobile-inforTime\").innerHTML);\n          \n             if(logicCheckMob(mob_firstName,mob_lastName,  mob_email,mob_mobile )){\n             \n                    const reservationData = {\n                         ID: tempId,\n                         FirstName: mob_firstName,\n                         LastName: mob_lastName,\n                         Email: mob_email,\n                         ContactNumber : mob_mobile,\n                         SpecialRequest: mob_specialRequest,\n                         NumberOfPeople: selectedPeople,\n                         StartTime: datetimeString,\n                    };\n\n                    const headers = {\n                      \"Content-Type\": \"application\/json\"\n                    };\n                    \n                     url = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/createreservationrecord?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2`;\n                     \n                    await fetch(url, {\n                           method: \"POST\",\n                           headers: headers,\n                           body: JSON.stringify(reservationData)\n                     })\n                     .then(response => {\n                          if (response.ok) {\n                              return response.json();\n                            } else {\n                                throw new Error(\"Error: \" + response.status);\n                            }\n                     })\n                     .then(data => {\n                         if(data.success){\n                          mobile_block2.classList.remove(\"mobile-show\");\n                            mobile_block2.classList.add(\"mobile-hide\");\n            \n                             StopTimerMob(intervalId_Mob, display_Mob);\n                \n                            mobile_block3.classList.remove(\"mobile-hide\");\n                            mobile_block3.classList.add(\"mobile-show\");\n                            window.scrollTo(0, 0); \n                         }\n                     })\n              }\n            \n            \n    }\n\nfunction mobile_bookatable_btn(){\n        clearMobError();\n        clearMob();\n         \n          document.querySelector(\".mobile-inforContact\").innerHTML = inforContact;\n     document.querySelector(\".mobile-inforLocation\").innerHTML = inforLocation;\n\n         \n         var timeFormat;\n         if(timeOptionMob.includes(timeFromMobile)){\n            \n                  timeFormat = timeFromMobile;\n         }  \n         \n            people = document.querySelector(\".peopleContPM\").innerHTML;\n                date = document.querySelector(\".date_picker_date\").value;\n                \n                    \n             \n            \n            var peopleList = people.split(' ');\n            var noPeople = peopleList[0];\n            \n            var dateFormat = date;\n       \n            \n             var timeParts = timeFormat.split(':');\n           var hours = timeParts[0];\n           var minutes = timeParts[1];\n           \n            if (hours.length === 1) {\n                  hours = '0' + hours;\n            }\n            \n            var dateParts = date.split(',');\n            var month = dateParts[0];\n            var day = dateParts[1];\n            var year = dateParts[2];\n\n         datetimeString = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':00';\n        \n            var dateTime = new Date(datetimeString); \n               \n            var url_time = `https:\/\/dashboard.hey-mate.ca\/api\/reservations\/getavailabletime?storeGuid=2b1229b8-63ae-4ed0-a0eb-c211b55efcf2&numofpeople=${noPeople}&datetime=${datetimeString}`;  \n               \n               \n               \n                fetch(url_time)\n        .then(res => res.json())\n        .then(data => {\n          \n            if(data.success == true){\n                \n                  mobile_block1.classList.remove(\"mobile-show\");\n                 mobile_block1.classList.add(\"mobile-hide\");\n                \n                intervalId_Mob = StartTimerNowMob(299, display_Mob);\n                tempId = data.tempReservationID;\n    \n                 \n                  mobile_block2.classList.remove(\"mobile-hide\");\n                  mobile_block2.classList.add(\"mobile-show\");\n                 \n            if(mobile_block2){\n                \n            var mob_inforDate = document.querySelector(\".mobile-inforDate\");\n            var mob_inforTime = document.querySelector(\".mobile-inforTime\");\n            var mob_inforGuest = document.querySelector(\".mobile-inforGuest\");\n            \n                mob_inforDate.innerHTML = getCustomDateMob(date);\n                mob_inforTime.innerHTML = timeFromMobile;\n                mob_inforGuest.innerHTML = people;\n                }\n            }\n                 \n            \n        })\n        .catch(console.error);\n           \n    }\n     \nfunction failBookingForMob(){\n \n         deleteTempSlot();\n         \n         \/\/ move to top;\n        document.body.scrollTop = 0;\n        document.documentElement.scrollTop = 0;\n        \n        \n\n      mobile_block1.classList.add('mobile-hide');  \n      mobile_block1.classList.remove(\"mobile-show\");\n      mobile_block3.classList.remove(\"mobile-hide\");\n      mobile_block3.classList.add(\"mobile-hide\");\n\n\ndocument.querySelector(\"#timeOut\").classList.remove(\"hide\");\n        overlay.style.display='block';\n        document.querySelector(\"#timeOut\").classList.add(\"mobile-show\");\n        window.scrollTo(0,0);\n        document.querySelector(\"body\").style.overflow = \"hidden\";\n\n         \n   \n     }\n \nfunction backToOne(){\n               \n               deleteTempSlot();\n               \n            document.querySelector(\"#mobile_block2\").classList.add(\"mobile-hide\");\n            document.querySelector(\"#mobile_block2\").classList.remove(\"mobile-show\");\n            \n             document.querySelector(\"#mobile_block1\").classList.remove(\"mobile-hide\");\n            document.querySelector(\"#mobile_block1\").classList.add(\"mobile-show\");\n            \n            StopTimerMob(intervalId_Mob, display_Mob);\n            \n            mobile_msg.classList.remove(\"show\");\n            mobile_msg.classList.add('hide');\n            \n            search_btn.classList.remove(\"mobile-hide\");\n            search_btn.classList.add(\"mobile-show\");\n                \n            bookatable_btn.classList.remove(\"mobile-show\");\n            bookatable_btn.classList.add(\"mobile-hide\");\n            \n            mobile_time_span.classList.add('hide');\n            document.querySelector(\".peopleContPM\").innerHTML = people;\n            datePickerMob.setDate(date);\n            \n         document.querySelector(\".timeContTM\").innerHTML= document.querySelector(\".mobile-inforTime\").innerHTML;\n         \n        removedClosedMessage(date);\n            \n        }\n   \nfunction getDataFromMobile(value){\n                            \n            id= value;\n             for ( i = 0; i < 8; i++) {\n                var obj = document.getElementById( \"mobile_span\" + i);\n                \n                if (obj != null)\n                 obj.className = 'mobile-nonhighlighted';\n             }\n        \n           obj = document.getElementById( \"mobile_span\" + id );  \n            \n            timeFromMobile = obj.innerHTML;\n            if (obj != null)\n               obj.className = 'mobile-highlighted';\n               \n            mobile_bookatable_btn() ;   \n            document.querySelector(\".timeContTM\").innerHTML = obj.innerHTML;      \n            \n            \n      }\n               \nfunction getCustomDateMob( estimatedDate){\n       const dateString = estimatedDate;\n      const [month, day, year] = dateString.split(\",\").map(Number);\n       const date = new Date(year, month - 1, day);\n       const options = { weekday: 'long',day: 'numeric', month: 'long', year: 'numeric' };\n      const formattedDate = date.toLocaleDateString('en-US', options);\n      return formattedDate;\n    }\n     \nfunction startTimerMob(duration, display) {\n  var timer = duration, minutes, seconds;\n  var intervalId = setInterval(function () {\n    minutes = parseInt(timer \/ 60, 10);\n    seconds = parseInt(timer % 60, 10);\n    minutes = minutes < 10 ? \"0\" + minutes : minutes;\n    seconds = seconds < 10 ? \"0\" + seconds : seconds;\n\n    display.textContent = minutes + \":\" + seconds;\n\n    if (--timer < 0) {\n      clearInterval(intervalId);\n      display.textContent= \"00:00\";\n     \n    }\n    if(timer == 0){\n        \n        failBookingForMob();\n        \n    }\n  }, 1000);\n  \n  return intervalId;\n}\n\nfunction StartTimerNowMob(duration, display) {\n  \n   var intervalId = startTimerMob(duration, display);\n   return intervalId;\n};  \n\nfunction StopTimerMob(intervalId, display){\n    \n    clearInterval(intervalId);\n    display.textContent = \"05:00\";\n    \n}; \n\nfunction clearMobError(){\n    \n    if(document.querySelector('.error.firstnamemob').style.display=='block'){\n        document.querySelector('.error.firstnamemob').style.display='none'  \n      }\n      \n      if(document.querySelector('.error.lastnamemob').style.display=='block'){\n        document.querySelector('.error.lastnamemon').style.display='none'  \n      }\n      \n     if(document.querySelector('.error.mobilemob').style.display=='block'){\n        document.querySelector('.error.mobilemob').style.display='none'  \n      }\n      \n      if(document.querySelector('.error.emailmob').style.display=='block'){\n        document.querySelector('.error.emailmob').style.display='none'  \n      }\n}\n   \nfunction logicCheckMob(firstName, lastName, email, mobile) {\n\n   var check = true;\n   \n    validateFirstName(document.querySelector('#mobile-firstName'), document.querySelector('.error.firstnamemob'));\n   validateLastName(document.querySelector('#mobile-lastName'), document.querySelector('.error.lastnamemob'));\n   emailValidation(document.querySelector('#mobile-email'),document.querySelector('.error.emailmob'));\n   phoneMobValidation(document.querySelector('#mobile-mobile'),document.querySelector('.error.mobilemob'));\n   \n   if(document.querySelector('.error.firstnamemob').style.display=='block'){\n       check = false;\n   }\n   \n   if(document.querySelector('.error.lastnamemob').style.display=='block'){\n       check = false;\n   }\n   \n   if (document.querySelector('.error.emailmob').style.display=='block') {\n       check = false;\n    }\n    \n   if (document.querySelector('.error.mobilemob').style.display=='block') {     \n       check = false;\n    }\n    \n    return check;\n}\n\nfunction clearMob(){\n   \n     if (mobile_notime_msg.classList.contains('show')) {\n         mobile_notime_msg.classList.remove('show');\n  mobile_notime_msg.classList.add('hide');\n}\n    \n       if(mobile_msg.classList.contains('show')){\n           document.querySelector('#mobile_span0').style.display = 'none';\ndocument.querySelector('#mobile_span1').style.display = 'none';\ndocument.querySelector('#mobile_span2').style.display = 'none';\ndocument.querySelector('#mobile_span3').style.display = 'none';\ndocument.querySelector('.alignment1').style.display = 'none';\ndocument.querySelector('.alignment3').style.display = 'none';\n\n       \n        mobile_msg.classList.remove(\"show\");\n         mobile_msg.classList.add(\"hide\");\n          mobile_time_span.classList.remove(\"show\");\n           mobile_time_span.classList.add(\"hide\");\n           \n          bookatable_btn.classList.remove(\"mobile-show\");\n          bookatable_btn.classList.add(\"mobile-hide\");\n          search_btn.classList.remove(\"mobile-hide\");\n        search_btn.classList.add(\"mobile-show\");\n    }\n    \n }   \n \n \n \n function getDateTime(date, time){\n     \n     var dateObject = new Date(date);\n     var options = { month: '2-digit', day: '2-digit', year: 'numeric' };\n     var formattedDate = dateObject.toLocaleDateString('en-US', options);\n     formattedDate = formattedDate.replace(\/\\\/\/g, ',');\n     \n     console.log(formattedDate);\n     \n     var dateFormat = formattedDate;\n            var timeFormat = time;\n            \n             var timeParts = timeFormat.split(':');\n           var hours = timeParts[0];\n           var minutes = timeParts[1];\n           \n            if (hours.length === 1) {\n                  hours = '0' + hours;\n            }\n            \n            var dateParts = formattedDate.split(',');\n            var month = dateParts[0];\n            var day = dateParts[1];\n            var year = dateParts[2];\n\n         datetimeString = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':00';\n        \n            var dateTime = new Date(datetimeString);\n            \n            return dateTime;\n }\n \n \n \n function removedClosedMessage(date){\n     if(mobile_closed_msg.classList.contains('show')){\n                    mobile_closed_msg.classList.remove('hide');\n                    mobile_closed_msg.classList.add('hide');\n                    ul_time_mob.style.display = \"block\";\n                    document.querySelector(\".dropbtnTM\").classList.remove('disabledDiv');\n                    document.querySelector(\".dropbtnPM\").classList.remove('disabledDiv');\n                    mob_search_btn.classList.remove('disabledBtn');\n                    \n                   getDataFromURLMobile(date);\n                    \n                }\n                \n }\n        <\/script>\n    <\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9914152 elementor-widget elementor-widget-html\" data-id=\"9914152\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n<script>\r\nwindow.onclick = function(event) {\r\n    \r\n \r\n     if(checkTime() == true){\r\n         dateTimeAdjustmentDeskCal();\r\n     }\r\n     \r\n    const options = {\r\n    timeZone: \"America\/New_York\" \/\/ Eastern Standard Time (EST\r\n};\r\n\r\n\r\n    const currentDate = new Date().toLocaleString(\"en-US\", options);\r\n     \r\n var calenderMob = document.querySelector(\".date_picker_date\").value;\r\nvar timeContMob = document.querySelector(\".timeContTM\").innerHTML;\r\nconst currentYear = new Date().getFullYear();\r\nconst dateStringMob = calenderMob +\" \"+ first_li_mob.innerHTML;\r\n\r\nconst [monthM, dayM, yearM, timeM] = dateStringMob.split(\/[, ]\/);\r\n\r\nconst formattedDateM = `${monthM} ${dayM} ${yearM} ${timeM}`;\r\n\r\nconst dateObjM = new Date(formattedDateM).toLocaleString(\"en-US\", options);\r\n\r\nif( new Date(currentDate) >= new Date(dateObjM)){\r\n        dateTimeAdjustment();\r\n    }\r\n     \r\n    \r\n  if (!event.target.matches('.dropbtnT')) {\r\n       document.querySelector('#myDropdownTime').style.display = 'none';\r\n  }\r\n  \r\n  \r\n  if (!event.target.matches('.dropbtn')) {\r\n       document.querySelector('.dropdown-content').style.display = 'none';\r\n  }\r\n  \r\n   if (!event.target.matches('.dropbtnTM')) {\r\n     document.querySelector('#myDropdownTM').style.display = 'none';\r\n  }\r\n    if (!event.target.matches('.dropbtnPM')) {\r\n    \r\n       document.querySelector('#myDropdownPM').style.display = 'none';\r\n    \r\n  }\r\n}\r\n\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-856bbd4 elementor-widget elementor-widget-html\" data-id=\"856bbd4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n<style>\r\n    .show{\r\n        display: block;\r\n    }\r\n    .hide{\r\n        display: none;\r\n    }\r\n    #largeGroup{\r\n        position: fixed;\r\n         top: 50%;\r\n         left: 50%;\r\n         transform: translate(-50%, -50%);\r\n        z-index: 1000;\r\n        transition: opacity 0.3s ease-in-out;\r\n        width: 70%\r\n    }\r\n     .overlay {\r\n     display: none;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.5); \/* Transparent gray background *\/\r\n  z-index: 999;\r\n    }\r\n\r\n\r\n #timeOut{\r\n        position: fixed;\r\n         top: 50%;\r\n         left: 50%;\r\n         transform: translate(-50%, -50%);\r\n        z-index: 1000;\r\n        transition: opacity 0.3s ease-in-out;\r\n        width: 70%\r\n    }\r\n    \r\n<\/style>\r\n<body>\r\n    <div class='overlay'><\/div>\r\n   \r\n<script>\r\n    \r\n    const closeLargeGroupBtn = document.querySelector('.closeButtonLargeGroup');\r\n    \r\n    const overlay = document.querySelector(\".overlay\"); \r\n    \r\n    const viewLargeGroup = document.querySelector('#largeGroup');\r\n   \/\/ viewLargeGroup.setAttribute('tabindex', '-1');\r\n    \r\n   \/\/ viewLargeGroup.setAttribute('aria-hidden', 'true');\r\n   \r\n\r\n    function viewView(){\r\n        window.scrollTo(0, 0);\r\n        viewLargeGroup.classList.remove(\"hide\");\r\n        overlay.style.display='block';\r\n        viewLargeGroup.classList.add(\"show\");\r\n       document.querySelector(\"body\").style.overflow = \"hidden\";\r\n        \r\n    }\r\n    \r\n    function viewViewRRR(){\r\n        document.querySelector(\"#timeOut\").classList.remove(\"hide\");\r\n        overlay.style.display='block';\r\n        timeout.classList.add(\"showTime\");\r\n        console.log(document.body);\r\n        document.body.style.overflow  = 'hidden';\r\n        document.body.setAttribute(\"style\", \"overflow:hidden\")\r\n        \r\n    }\r\n    \r\n    closeLargeGroupBtn.addEventListener('click', function(){\r\n        viewLargeGroup.classList.remove(\"show\");\r\n        overlay.style.display='none';\r\n        viewLargeGroup.classList.add(\"hide\");\r\n        document.querySelector(\"body\").style.overflow = \"scroll\";\r\n    }\r\n        );\r\n\r\n        function hidePopup() {\r\n\r\n viewLargeGroup.classList.remove(\"show\");\r\n        overlay.style.display='none';\r\n        viewLargeGroup.classList.add(\"hide\");\r\n        \r\n}\r\n        \r\n\r\n        \r\n        function showTimeOut(){\r\n        var timeout = document.querySelector(\"#timeOut\");\r\n        console.log(timeout);\r\n        timeout.classList.remove(\"hide\");\r\n        overlay.style.display='block';\r\n        timeout.classList.add(\"show\");\r\n        document.querySelector(\"body\").style.overflow = \"hidden\";\r\n        \r\n    }\r\n    \r\n    \/\/ closeLargeGroupBtn.addEventListener('click', function(){\r\n    \/\/     viewLargeGroup.classList.remove(\"show\");\r\n    \/\/     overlay.style.display='none';\r\n    \/\/     viewLargeGroup.classList.add(\"hide\");\r\n    \/\/     document.querySelector(\"body\").style.overflow = \"scroll\";\r\n    \/\/ }\r\n    \/\/     );\r\n    \r\n<\/script>\r\n<\/body>\r\n\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<\/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>","protected":false},"excerpt":{"rendered":"<p>Book a Table 1. Find a Table 2. Your Details Search Table Book a Table That timeslot isn\u2019t available! Please select a different date. That timeslot isn\u2019t available! Here are the closest available options. That timeslot isn\u2019t available! Please choose another date. Oops, something went wrong. Please try again later. 1. Find a Table 2. [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-544","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/pages\/544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/comments?post=544"}],"version-history":[{"count":3,"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/pages\/544\/revisions"}],"predecessor-version":[{"id":12725,"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/pages\/544\/revisions\/12725"}],"wp:attachment":[{"href":"http:\/\/www.thechinabowls.com\/zh\/wp-json\/wp\/v2\/media?parent=544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}