Latymer

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); const f = d.getElementsByTagName(s)[0]; const j = d.createElement(s); const dl = l !== 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-ML2PSX'); </script>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/img/2138/favicon.ico" rel="shortcut icon" id="favicon" type="image/x-icon" /> <link href="/Content/reset.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" /> <link rel="stylesheet" href="/Content/bootstrap.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common-material.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.material.min.css"> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.3/themes/south-street/jquery-ui.css" rel="stylesheet"> <link href="/Content/sm/sm-core-css.css" rel="stylesheet" /> <link href="/Content/sm/sm-blue/sm-blue.css" rel="stylesheet" /> <link href="/Content/Site.css" rel="stylesheet" /> <link href="/Content/NewEngine.css" rel="stylesheet" /> <script src="/Scripts/jquery-3.6.0.min.js"></script> <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script> <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js" integrity="sha384-PFsLCo0nGgBGkfghRPZu8SkrNERlxVYjhddxA+cOkD5lrQPSeh5342dnrf60JihR" crossorigin="anonymous"></script> <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.aspnetmvc.min.js" integrity="sha384-CzzANPWMmKSwx+6zViJ/bcjbw208VHoJVSKabNxkNIfuJjBLQhUif9NFTiZscxZb" crossorigin="anonymous"></script> <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js" integrity="sha384-/uIBVG1oH4Tb9OcLLxfroAlKUcnoOIEjpv8jPC8YM4QzWRTuc9/VSQdrs+iFkWN1" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" integrity="sha384-bPV3mA2eo3edoq56VzcPBmG1N1QVUfjYMxVIJPPzyFJyFZ8GFfN7Npt06Zr23qts" crossorigin="anonymous"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" integrity="sha384-4S362H5TJ5sbNLart9BYtkgYKl2kTPlMMHE/WW4g2pehwDvn+LGdCio8PlS5fKRZ" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js" integrity="sha384-oVpH0DXO9nadZxTmPSQo3YwWqfN/Up9aRDHCxLrw8A2LjkFNcM/XILw4KGMaL95z" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js" integrity="sha384-MI/QivrbkVVJ89UOOdqJK/w6TLx0MllO/LsQi9KvvJFuRHGbYtsBvbGSM8JHKCS0" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/33aa0bd64e.js" crossorigin="anonymous"></script> <script src="/Scripts/sm/jquery.smartmenus.min.js"></script> <script src="/Scripts/bootbox.min.js"></script> <script src="/Scripts/bootstrap.min.js"></script> <script src="/Scripts/js.cookie.js"></script> <script src="/Scripts/hart.js"></script> <script src="/Scripts/WBE.js?v=49"></script> <script src="/Scripts/kendo/cultures/kendo.culture.en-GB.min.js"></script> <script src="/Scripts/moment.js"></script> <title>Latymer</title> <script src="https://getaddress-cdn.azureedge.net/scripts/jquery.getAddress-4.0.0.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <script> function ShowHide() { const options = $("#options").data('kendoDropDownList'); if (options.dataSource.data().length > 0) { $(".optionSelect").attr("style", "display: block"); } else { $(".optionSelect").attr("style", "display: none"); } } function SelectService(e) { if (e) { if (0 > 0) { const dropdown = e.sender; var select = 0; $(dropdown.dataItems()).each(function () { if (this.dummy_id == 0) { dropdown.value(this.dummy_id); select = dropdown.select(); } }); dropdown.select(select); dropdown.trigger("change"); } } } function enableDropdown(e) { if (e) { let enabled = true; const dropdown = e.sender; const date = JsDate($("#arrival").val()); if (!checkServiceAvailable(date, monthlyAvailability)) { dropdown.enable(false); enabled = false; } SelectFirstPeople(); } } function SelectFirstPeople() { var peopleDropDown = $("#adults").data("kendoDropDownList"); var select = 0; $(peopleDropDown.dataItems()).each(function() { if (this.Value == 0) { peopleDropDown.value(this.Value); select = peopleDropDown.select(); } }); peopleDropDown.select(select); } function TableServiceData() { return { restID: $("#restID").val(), arrival: $("#arrival").val(), customerID: $("#customerID").val(), all: $("#all").val() }; } function getServiceData() { return { dummyID: $("#services").val(), maxPeople: 4 } } function getWServiceData() { return { dummyID: $("#wservices").val(), maxPeople: 4 } } function getServiceInfo() { return { serviceID: $("#services").val(), date: $("#arrival").val(), restaurantID: $("#restID").val() }; } function changeArrival() { $("#all").val(0); const date = kendo.toString(this.value(), 'd'); $("#arrival").val(date); /* ****************************************************************** Unsure why this was needed, but it's now causing double availability checks unnecessarily. - 05/08/22 var people = $("#adults").data("kendoDropDownList").value(); if (people > 0) { var times = $("#onTime").data("kendoDropDownList"); times.dataSource.read(); } * ****************************************************************** */ const serviceList = $("#services").data("kendoDropDownList"); if (!checkServiceAvailable(this.value(), monthlyAvailability)) { unavailMessage(); } else { if (window.matchMedia('screen and (max-width: 768px)').matches) { $('html, body').animate({ scrollTop: $("#services_label").offset().top }, 1000); } else { if ($("#services").val() === "") { serviceList.open(); } } } if (serviceList.value() == 0) { serviceList.dataSource.read(); } serviceList.trigger("cascade"); } function onDateChange(date) { $("#all").val(0); /* ****************************************************************** Unsure why this was needed, but it's now causing double availability checks unnecessarily. - 05/08/22 var people = $("#adults").data("kendoDropDownList").value(); if (people > 0) { var times = $("#onTime").data("kendoDropDownList"); times.dataSource.read(); } * ****************************************************************** */ const serviceList = $("#services").data("kendoDropDownList"); const calendarElement = document.querySelector(".fp-selected"); const calendarInstance = calendarElement._flatpickr; getCalendarAvailability(calendarInstance); date = calendarInstance.parseDate($("#arrival").val(), "d/m/Y"); let firstDate = calendarInstance.parseDate(firstAvailable, "d/m/Y"); if (date < firstDate) { date = firstDate calendarInstance.jumpToDate(firstDate, false); calendarInstance.setDate(firstAvailable, false, "d/M/Y"); } if (!checkServiceAvailable(date, monthlyAvailability)) { unavailMessage(); } else { if (window.matchMedia('screen and (max-width: 768px)').matches) { $('html, body').animate({ scrollTop: $("#services_label").offset().top }, 1000); } else { if ($("#services").val() === "") { serviceList.open(); } } } if (serviceList.value() == 0) { serviceList.dataSource.read(); } serviceList.trigger("cascade"); } function backToStart() { window.location.reload(); } function unavailMessage() { const serviceList = $("#services").data("kendoDropDownList"); let msg = ""; let title = ""; if (serviceList.value() == 0) { msg = "There is no availability on this day."; title = "No Availability"; } else { const service = $("#selectedServiceName").text(); msg = `There is no availability for ${service} on this day.`; title = `${service} is Unavailable`; } if (lastDateStatus == 'W') { msg += "<br\><br\>Would you like to join the wait list?"; bootbox.confirm({ title: title, message: msg, buttons: { confirm: { label: "Yes" }, cancel: { label: "No" } }, callback: function(result) { if (result) { const waitList = $("#window").data("kendoWindow"); waitList.open(); waitList.center(); } } }); } else { msg += ' We have selected the first available date.'; bootbox.alert({ title: "Unavailable", message: msg, callback: function () { const calendarElement = document.querySelector(".fp-selected"); const calendarInstance = calendarElement._flatpickr; getCalendarAvailability(calendarInstance); calendarInstance.jumpToDate(firstAvailable, false); calendarInstance.setDate(firstAvailable, true, "d/m/Y"); } }); } } function back() { $("#checkout").hide(); $("#dateInformationContainer").css("display", "none"); $(".child3Parent1").show(); $(".stayContainer").show(); $('html, body').animate({ scrollTop: 0 }, 1000); } var lastDateStatus = 'O'; function checkServiceAvailable(date, dateArray) { for (let r = 0; r < monthlyAvailability.length; r++) { const content = monthlyAvailability[r]; const onDate = new Date(content.on_date); if (compareDate(date, onDate)) { if (content.status !== "O") { lastDateStatus = content.status; return false; } return true; } } return true; } function avail(data) { for (let r = 0; r < monthlyAvailability.length; r++) { const content = monthlyAvailability[r]; const onDate = new Date(content.on_date); if (compareDate(data.date, onDate)) { if (content.status === "O") { return `${data.value} <span><i class='fal fa-check-circle fa-xs'></i></span>`; } if (content.status === "B" || content.status === "U") { return `${data.value} <span><i class='fas fa-times'></i></span>`; } if (content.status === "W") { return `${data.value} <span>W</span>`; } return `${data.value}`; } } return `${data.value}`; } function disableDates(date) { const dates = closedDates.map(cd => new Date(cd)); if (date && compareDates(date, dates)) { return true; } else { return false; } } function compareDates(date, dateArray) { if (date) { const dates = dateArray; for (let i = 0; i < dates.length; i++) { if (dates[i].getDate() == date.getDate() && dates[i].getMonth() == date.getMonth() && dates[i].getYear() == date.getYear()) { return true; } } } } function compareDate(date1, date2) { if (date1) { if (date1.getDate() == date2.getDate() && date1.getMonth() == date2.getMonth() && date1.getYear() == date2.getYear()) { return true; } } } function FetchDisabledDates() { let service = 0; if ($("#services").val() !== "" && $("#services").val() !== undefined) { service = parseInt($("#services").val()); } $.ajax("/BookTable/CalendarClosedDates", { async: false, data: { hotelID: $("#hotelID").val(), restID: $("#restID").val(), dateFrom: $("#arrival").val(), serviceID: service }, success: function(data) { closedDates = data; } }); } function FetchAvailability() { let service = 0; if ($("#services").val() !== "" && $("#services").val() !== undefined) { service = parseInt($("#services").val()); } $.ajax("/BookTable/CalendarAvailability", { async: false, data: { hotelID: $("#hotelID").val(), restID: $("#restID").val(), serviceID: service, dateFrom: $("#arrival").val(), member: $("#member").val(), customerID: $("#customerID").val() }, success: function(data) { monthlyAvailability = data.availability; firstAvailable = data.firstDate; closedDates = data.closed; } }); } function getCalendarAvailability(instance) { console.log("inside getCalendarAvailability start"); const dates = Array.prototype.map.call(instance.days.childNodes, d => d.dateObj); let firstDate = dates[0]; const currentDate = new Date(); let tomorrowDate = new Date(currentDate); tomorrowDate.setDate(currentDate.getDate() + 1); if (firstDate < tomorrowDate) { firstDate = tomorrowDate; } const lastDate = dates[dates.length - 1]; const dateFromStr = firstDate.toISOString(); const dateToStr = lastDate.toISOString(); const calendarContainer = instance.calendarContainer; const loadingDotsContainer = document.createElement('div'); loadingDotsContainer.className = 'lds-grid-container'; const loadingDotsParentDiv = document.createElement('div'); loadingDotsParentDiv.classList.add('lds-grid'); for (let i = 0; i < 9; i++) { const dotDiv = document.createElement("div"); loadingDotsParentDiv.appendChild(dotDiv); } loadingDotsContainer.appendChild(loadingDotsParentDiv); calendarContainer.appendChild(loadingDotsContainer); hotelID = $("#hotelID").val(); restID = $("#restID").val(); let serviceID = 0; if ($("#services").val() !== "" && $("#services").val() !== undefined) { serviceID = parseInt($("#services").val()); } member = $("#member").val(); customerID = $("#customerID").val(); $.ajax({ async: false, url: "/BookTable/GetCalendarAvailability", data: { hotelID, restID, serviceID, dateFromStr, dateToStr, member, customerID }, success: function (unavail) { if (unavail) { if (unavail.availability !== "") { unavailDates = JSON.parse(unavail.availability); } monthlyAvailability = unavailDates; firstAvailable = unavail.firstDate; closedDates = unavail.closed; console.log("dates updated"); Array.prototype.forEach.call(instance.days.childNodes, dayElement => { ['unavail', 'waitlist', 'disabled-day'].forEach(className => dayElement.classList.remove(className)); const dateToCheck = +dayElement.dateObj; const matchingDate = unavailDates.filter(item => item.on_date === dateToCheck); if (matchingDate.length > 0) { const notAvailable = matchingDate.some(item => (item.status === "U" || item.status === "B" || item.status === "S")); const waitList = matchingDate.some(item => item.status === "W"); const closed = matchingDate.some(item => item.status === "C"); const lead = matchingDate.some(item => item.status === "L"); if (notAvailable) { dayElement.classList.add("unavail","disabled-day"); } else if (waitList) { dayElement.classList.add("waitlist"); } else if (closed) { dayElement.classList.add("disabled-day"); } else if (lead) { dayElement.classList.add("disabled-day"); } } dayElement.classList.remove("hidden"); }); loadingDotsContainer.classList.add('hidden'); calendarContainer.removeChild(loadingDotsContainer); } //instance.redraw(); }, error: function () { loadingDotsContainer.classList.add('hidden'); calendarContainer.removeChild(loadingDotsContainer); Array.prototype.forEach.call(instance.days.childNodes, dayElement => { dayElement.className += " unavail flatpickr-disabled"; dayElement.classList.remove("hidden"); }); } }) console.log("inside getCalendarAvailability end"); } var firstAvailable = new Date(); var monthlyAvailability = []; var closedDates = []; $(document).ready(function () { ClearRestaurantCart(); dataLayer.push({ 'event': 'VirtualPageView', 'HotelID': $("#hotelID").val(), 'VirtualPage': '/restaurant-booking/check-availability' }); FetchDisabledDates(); let todayDate = new Date(); let minDate = new Date(todayDate); minDate.setUTCDate(todayDate.getUTCDate() + 1); defaultDate = new Date('2024-12-18'); let maxDate = new Date(todayDate) maxDate.setUTCFullYear(todayDate.getUTCFullYear() + 3); $("#arrival").val(minDate.toLocaleDateString("en-gb")); let calendar = flatpickr(".fp-selected", { dateFormat: 'd/m/Y', animate: true, minDate: minDate, maxDate: maxDate, defaultDate: defaultDate, prevArrow: '<i class="fa-regular fa-arrow-left"></i>', nextArrow: '<i class="fa-regular fa-arrow-right"></i>', disableMobile: true, inline: true, disable: closedDates, locale: { firstDayOfWeek: 1 }, onChange: function (selectedDates, dateStr, instance) { onDateChange(selectedDates[0]); }, onMonthChange: function (selectedDates, dateStr, instance) { let calendarContainer = instance.calendarContainer; let loadingDotsContainer = document.getElementsByClassName('lds-grid-container')[0]; if (loadingDotsContainer !== undefined && loadingDotsContainer !== null) { calendarContainer.removeChild(loadingDotsContainer); } getCalendarAvailability(instance); }, onReady: function (selectedDates, dateStr, instance) { if (0 == 0) { getCalendarAvailability(instance); } } }); GetCart(); }); var interval; function sessionCountdown() { var endTime = moment(new Date()).add(10, 'm').toDate().getTime(); var warningTime = moment(new Date()).add(8, 'm').toDate(); if (!interval) { interval = setInterval(function () { const now = new Date(); const t = endTime - now.getTime(); if (t >= 0) { const mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); const secs = Math.floor((t % (1000 * 60)) / 1000); document.getElementById("timer-mins").innerHTML = `Session Expires: ${(`0${mins}`).slice(-2)}<span class='label'> :</span>`; document.getElementById("timer-secs").innerHTML = (`0${secs}`).slice(-2); const nowCompare = now.setMinutes(now.getMinutes(), now.getSeconds(), 00); const warnCompare = warningTime.setMinutes(warningTime.getMinutes(), warningTime.getSeconds(), 00); if (nowCompare == warnCompare) { bootbox.confirm({ title: "Session about to expire", message: "Your session is about to expire.<br/><br/>If you need more time to finalise your booking, please click continue to extend by 5 minutes.<br/><br/>Otherwise, this page will refresh in 2 minutes.", onEscape: false, closeButton: false, buttons: { confirm: { label: "Continue", className: "btn btn-outline-primary" } }, callback: function (result) { if (result) { clearTimeout(timer); endTime = moment(endTime).add(5, 'm').toDate().getTime(); } } }); } } else { clearInterval(interval); clearCart(); bootbox.hideAll(); bootbox.alert({ title: "Session has expired", message: "Your session has expired, this page will refresh in 1 minute.", onEscape: false, closeButton: false, callback: function () { clearCart(); window.location.reload(); } }); var x = setTimeout(function () { clearCart(); window.location.reload(); }, 60000); } }, 1000); } } function GetCartPromise() { $("#totalCost").text("0.00"); $("#totalCostCart").text("0.00"); return new Promise((resolve, reject) => { const cartID = GetRestaurantCart(); const hotelID = $("#hotelID").val(); $.ajax({ url: "/BookTable/GetCart", async: true, data: { cartID: cartID, hotelID: hotelID }, success: function (r) { $(".sub-cart-container").html(r); resolve(r); }, error: function (error) { reject(error); } }); }); } function GetCart() { const cartID = GetRestaurantCart(); const hotelID = $("#hotelID").val(); $("#totalCost").text("0.00"); $("#totalCostCart").text("0.00"); $.ajax({ url: "/BookTable/GetCart", async: true, data: { cartID: cartID, hotelID: hotelID }, success: function (r) { $(".sub-cart-container").html(r); } }); } function addToCartSuccess(r) { var cartID = GetRestaurantCart(); if (r.cartID <= 0) { bootbox.dialog({ message: "Sorry, it looks like an error occurred whilst adding your reservation to the cart. Please refresh your page and try again.", title: "Oops...", buttons: { danger: { label: "OK", className: "btn btn-danger" } }, callback: function () { if (cartID < 0) { CreateRestaurantCart(0); } window.location.reload(); } }); return; } if (cartID <= 0 && r.cartID > 0) { CreateRestaurantCart(r.cartID); } bootbox.hideAll(); $.ajax({ async: false, url: "/BookTable/GetServiceOptions", data: { serviceID: $("#services").val(), restaurantID: $("#restID").val(), onDate: $("#arrival").val(), pax: $("#adults").val(), cartID: r.cartID, pmsBookingID: r.pmsBookingID }, success: function (r) { if (r != 0) { bootbox.dialog({ closeButton: false, onEscape: false, message: r }); } else { $("#adults").data("kendoDropDownList").trigger("cascade"); GetCartPromise() .then((result) => { toggleCart(); }) .catch(error => { GetCart(); var notification = $("#addedToCartNotification").data("kendoNotification"); notification.show({ title: "Added to Cart!" }, "success"); }); sessionCountdown(); } } }); } function addToCartFailure(r) { bootbox.dialog({ message: "We are sorry, but an error has occurred while we were adding this reservation to your cart. Please refresh the page and try again.", title: "Oops...", buttons: { danger: { label: "OK", className: "btn btn-danger" } } }); } function addToCart(e) { showLoadingOverlay(); $.ajax({ url: "/BookTable/AddTableToCart", method: "POST", data: { __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(), hotelID: $("#hotelID").val(), cartID: GetRestaurantCart(), restaurantID: $("#restID").val(), serviceID: $("#services").val(), onTime: $("#onTime").val(), onDate: $("#arrival").val(), pax: $("#adults").val(), roomReservationID: $("#roomReservationID").val(), guestID: $("#guestID").val(), nresID: $("#nresID").val() }, success: function (r) { addToCartSuccess(r); }, error: function (r) { addToCartFailure(r); }, complete: function () { hideLoadingOverlay(); } }); } function showLoadingOverlay() { $("#cartAddOverlay").removeClass("hidden"); } // Hide the loading overlay function hideLoadingOverlay() { $("#cartAddOverlay").addClass("hidden"); } function deleteFromCart(item) { let id = $(item).data("id"); $.ajax({ async: true, url: "/BookTable/DeleteCartItem", data: { dummy_id: id, cartID: GetRestaurantCart() }, closeButton: true, success: function (items) { bootbox.dialog({ title: "Item Removed", message: "The item has been removed from your cart", closeButton: true }); if (items <= 0) { window.location.reload(); return; } GetCart(); }, error: function () { bootbox.dialog({ title: "Error", message: "An error occured while trying to remove the item. Please try again", closeButton: true }); } }); } function clearCart() { const cartID = GetRestaurantCart(); const hotelID = $("#hotelID").val(); $.ajax({ url: "/BookTable/ClearCart", data: { cartID }, success: function (r) { ClearRestaurantCart(); GetCart(); if (interval) { clearInterval(interval); } window.location.reload(); } }); } </script> <style> .lds-grid-container { position: absolute; width: 100%; height: 100%; transform: translateY(-100%); display: grid; grid-template-columns: max-content; justify-content: center; align-items: center; background: rgba(0,0,0,0.25); } .lds-grid { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-grid div { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #000; animation: lds-grid 1.2s linear infinite; } .lds-grid div:nth-child(1) { top: 8px; left: 8px; animation-delay: 0s; } .lds-grid div:nth-child(2) { top: 8px; left: 32px; animation-delay: -0.4s; } .lds-grid div:nth-child(3) { top: 8px; left: 56px; animation-delay: -0.8s; } .lds-grid div:nth-child(4) { top: 32px; left: 8px; animation-delay: -0.4s; } .lds-grid div:nth-child(5) { top: 32px; left: 32px; animation-delay: -0.8s; } .lds-grid div:nth-child(6) { top: 32px; left: 56px; animation-delay: -1.2s; } .lds-grid div:nth-child(7) { top: 56px; left: 8px; animation-delay: -0.8s; } .lds-grid div:nth-child(8) { top: 56px; left: 32px; animation-delay: -1.2s; } .lds-grid div:nth-child(9) { top: 56px; left: 56px; animation-delay: -1.6s; } @keyframes lds-grid { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(3rem, 0); } } *, p { margin: 0; padding: 0; font-family: 'Nanum Gothic', sans-serif; } .cartItems { display: grid; grid-template-columns: 1fr auto auto; grid-column-gap: 0.5rem; } .itemsmall { margin-top: -5px; padding-left: 0.5rem; } .itemCost, .itemDelete, .overviewTotalInfo { justify-self: end; } .itemDelete { cursor: pointer; } .restaurantItem { padding-bottom: 5px; padding-left: 1rem; } .floatOverviewInfo { background-color: #ffffff; color: #000000; } .floatOverviewSummary { background-color: #000000; color: #ffffff; } .cart-icon-container { color: #ffffff; } .cart-count-badge:after { color: #000000; background: #ffffff; } .cart-count-badge { position: relative; } .cart-count-badge:after { content: attr(value); font-size: 12px; font-weight: bold; border-radius: 20%; padding: 10px 5px; position: absolute; left: 22px; top: -25px; color: #000000; background: #ffffff; } .checkout-button-container { background-color: #ffffff; color: #000000; display: grid; padding: 1rem; text-align: center; grid-row-gap: 1rem; } .checkout-button { width: 100%; padding: 0.2rem; } .cart-content { display: grid; position: fixed; border: 1px solid #ccc; border-radius: 0 0 0 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 10; width: 100%; right: 0; top: 5rem; background-color: #ffffff; color: #000000; } .cartHeader { display: grid; grid-template-columns: auto auto; grid-column-gap: 3rem; } .itemCost, .itemDelete, .overviewTotalInfo { justify-self: end; } .floatOverviewInfo { padding: 15px; } .floatOverviewSummary { padding: 15px; background-color: #000000; color: #ffffff; } .overlay { height: 100%; width: 100%; position: fixed; background: RGBA(0,0,0,0.5); z-index: 9; top: 0; } #childContainer { background: white; color: #282828; text-align: center; } #the-count { float: right; padding: 0.1rem 0 0 0; font-size: 0.875rem; } .btnContainer { grid-area: bookButton; } .stayContainer { text-align: center; } #calendarFooter { text-align: left; border: 1px solid lightgrey; padding-left: 1rem; } #calendar { width: fit-content; } .limited { border: #c6cfcc 1px solid; } .termsconsent { padding-top: 1rem; } .checkout,.rateDetails,.extras { color: #282828; } .error { border: 1px solid red; } .checkoutContainer, .takeawayContainer { display: grid; grid-template-columns: auto; background: white; padding: 1rem; grid-row-gap: 1rem; } .cart-icon-container { display: grid; grid-template-columns: 2.4em min-content; align-items: center; font-weight: bold; padding: 1rem 0; cursor: pointer; } .guestDetails { display: grid; grid-template-columns: auto; grid-row-gap: 5px; } .titleDiv { width: 6rem; } .titleInput { width: 100% } .titleInput > .k-dropdown-wrap { border-radius: 0px; } .countryInput { width: 100% } .countryInput > .k-dropdown-wrap { border-radius: 0px; } .guestDetailHeader { text-align: center; display: grid; grid-template-columns: auto 1fr; padding-bottom: 1rem; } label { margin-bottom: 0; } #postcode_lookup { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 5px; grid-row-gap: 5px; } #postcode_lookup button { border-radius: 0px; } .addressList { grid-column: 1 / 3; } .guestEmailContainer { display: grid; grid-template-columns: auto; } .cardDetails { padding-top: 20px; } .cardLogo { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 5px; } .cardSecurity { width: 100px; } .cardInfo { display: grid; grid-template-columns: auto 1fr; grid-column-gap: 5px; } .expiryDate { display: grid; grid-template-columns: 55px 55px; grid-column-gap: 5px; } .expiry { text-align: center; } .logo { width: auto; } .checkoutText { padding: 10px 5px; } .checkoutText li { list-style-type: '\2013'; } .bookingOverview { display: grid; grid-template-columns: auto; grid-template-rows: 1fr min-content auto; height: 100%; } .overviewInfoCheckout { background-color: #c6cfcc; color: #282828; min-height: 24rem; padding: 2rem; } .k-calendar td.k-state-selected .k-link, .selected, span.flatpickr-day.selected { background-color: #c6cfcc; color: #ffffff; border-color: #c6cfccaf; } .selected:hover, span.flatpickr-day.selected:hover { background-color: #c6cfccaf; border-color: #c6cfcc; } .overviewCheckin { padding-bottom: 10px; } .overviewInfoPadding { padding: 10px 0; } .font-bold { font-weight: bold; } #overviewArrival, #overviewDeparture, #overviewAdults, #overviewChildren, #overviewNights, #overviewRate, #overviewRoom{ font-size: smaller; } .overviewRateSummary { padding-left: 0.5rem; font-size: 0.8rem; } .overviewRateSummary ul { column-count: 1 !important; } .overviewBookingButton input { border-radius: 0px; width: 100%; background-color: #203540; color: #ffffff; } .overviewBookingButton { padding-top: 10px; padding-bottom: 20px; justify-self: center; width: 100%; } .backButton a { background-color: #c6cfcc; color: #282828 } .overviewTotalInfo { justify-self: unset; } .listGridItem { display: grid; grid-template-columns: auto auto } .listGridItem .cost { justify-self: end; font-size: small; } .serviceList { padding-bottom: 10px; } .overviewBookingDatesContainer { display: grid; grid-template-columns: 50% 50%; padding-left: 1rem; } .overviewBookingDetailsContainer { padding-left: 1rem; } .rotateIcon { -moz-transition: all .5s linear; -webkit-transition: all .5s linear; transition: all .5s linear; } .rotateIcon.down { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .checkoutRoomHeader { display: grid; grid-template-columns: min-content max-content auto; align-items: baseline; } .roomPrice { justify-self: end; font-weight: bold; } .rateTextHeader,.rateTermsHeader { font-weight: bold; } .rateTextHeader { padding-left: 0.5rem; } .rateCheckoutText { padding-left: 1rem; } @media only screen and (min-width: 600px) { .detailsContainer { justify-content: unset; padding: 0 5%; } .guestNameContainer { display: grid; grid-template-columns: 6rem auto; grid-column-gap: 10px; } .nameDiv { display: grid; grid-template-columns: auto auto; grid-column-gap: 5px; } } @media only screen and (min-width: 768px) { .cart-content { width: 50%; } .checkoutContainer, .takeawayContainer { grid-template-columns: auto 30%; grid-column-gap: 10px; } .guestEmailContainer { grid-template-columns: auto auto; grid-column-gap: 10px; } .bookingOverview { grid-row: 1/3; grid-column: 2; grid-template-rows: max-content min-content max-content; } .addressList { grid-column: unset; } #postcode_lookup { grid-template-columns: 100px 100px auto; } #manualAddress { grid-column: 1; grid-row: 2; } #calendar { justify-self: right; } .address { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; padding-top: 5px; } .address1 { grid-column: 1 / 4; } .guestPhoneContainer { width: 40%; } } @media only screen and (min-width: 992px) { .cart-content { width: 33%; max-width: 400px; } } /**************************************** * CSS GRID CLASSES * ****************************************/ #parent { display: grid; grid-template-columns: auto; } .child1{ cursor: pointer; } .child2Parent1 { display: grid; grid-template-columns: auto; } .child3Parent1 { display: grid; grid-template-columns: 1fr; } .child4Parent1 { display: grid; grid-template-columns: auto; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-areas: "calendar" "services" "info" "bookButton"; } #infoSelection { display: grid; grid-row-gap: 1rem; align-content: start; grid-area: services; } .serviceSelect,.partySelect,.timeSelect { display: grid; grid-template-columns: 100%; justify-content: center; } .child5parent1 { display: grid; padding: 10px; } .dateInformation { display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: repeat(4, auto); grid-template-areas: "restaurant service . " "restaurantName serviceName serviceName" "date time party" "resDate timeSelected pax"; padding: 10px 0; grid-row-gap: 10px; } .restaurant { grid-area: restaurant; font-size: small; } .restaurantName { grid-area: restaurantName; font-size: small; text-transform: uppercase; font-weight: bold; } .service { grid-area: service; font-size: small; text-transform: uppercase; } .serviceName { grid-area: serviceName; font-size: small; text-transform: uppercase; font-weight: bold; } .date { grid-area: date; font-size: small; text-transform: uppercase; } .resDate { grid-area: resDate; font-weight: bold; font-size: small; text-transform: uppercase; } .time { grid-area: time; font-size: small; text-transform: uppercase; } .timeSelected { grid-area: timeSelected; font-weight: bold; font-size: small; text-transform: uppercase; } .party { grid-area: party; font-size: small; text-transform: uppercase; } .pax { grid-area: pax; font-weight: bold; font-size: small; text-align: center; } .occupancyInfo { display: grid; grid-template-columns: auto auto auto; border-top: 1px solid black; border-bottom: 1px solid black; text-align: center; padding: 5px; margin: 10px; } .roomsOccupancyContainer { display: grid; padding: 0 1.4rem; } .roomsOccupancy { display: grid; grid-row: 2; grid-column: span 2; padding: 10px; border-radius: 2px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0px 0px 10px 0px rgba(0, 0, 0, 0.22); } .resetSubmitContainer { display: grid; grid-template-columns: 30% auto; grid-column-gap: 2rem; } .restaurantDetailContainer { display: grid; background: #c6cfcc; color: ; grid-template-rows: min-content; padding: 1rem; grid-row: 2; grid-area: info; } /**************************************** * GENERAL CSS CLASSES * ****************************************/ html { height: 100%; } body { background: #eef1f0; color: #282828; } .bookingText { padding-top: 1rem; font-size: 75%; } /* a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }*/ .cpc1 { z-index: 0; padding-bottom: 20px } .cpc2 ul { column-count: 2; -webkit-columns: 2; -moz-columns: 2; font-size: 4vw; } .cpc2 ul > li { display: inline-block; width: 100% } #dateInformationContainer { display: none; } #logoBreadcrumbContainer { background: #c6cfcc; padding: 10px; text-align: center; display: grid; grid-template-columns: auto auto; } .calendarContainer { display: grid; justify-content: center; grid-area: calendar; } .divider { border-top: #c6cfcc 1px solid; width: 75%; margin: 1rem 2rem; height: 0px; } .serviceDivider { border-top: #ffffff 1px solid; margin: 1rem 2rem; height: 0px; } #mapPhoneContainer { background: #e9e7db; color: #282828; padding: 10px; } .k-window-titlebar { background: #e9e7db; color: #282828; } .resetButton { background-color: #c6cfcc; color: #282828; } .toCheckout, .cta { background-color: #203540; color: #ffffff; } .viewMenuContainer a { background-color: #203540; color: #ffffff; } .infoSelection { display: grid; } .child4 { padding: 10px 10px 10px 10px; align-content: center; text-align: center; } .child5 { background: #eef1f0; color: #282828; } .c5p1child { padding-left: 10px; padding-right: 10px; } .child6 { background: white; padding: 10px; text-align: center; } .promo { text-align: center; } .promo a { color: inherit; text-decoration: none; } .datesInput { padding: 0; border: solid transparent; border-width: 1px 0; font-size: small; text-align: center; width: 25%; /* Make Inputs unselectable */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; cursor: pointer; } .selectBorder { border-radius: 0; text-align: center; } .serviceDetails { padding: 1rem; } .birthdate,.anniversary,.car-reg { width: 11rem; } /**************************************** * ANIMATIONS * ****************************************/ .anim-grow { -webkit-transform: perspective(1px) translateZ(0); -webkit-transition-duration: 0.3s; -webkit-transition-property: transform; transform: perspective(1px) translateZ(0); transition-duration: 0.3s; transition-property: transform; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .anim-grow:hover, .anim-grow:focus, .anim-grow:active { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .icon-shake-hover:hover { animation: shake 0.2s ease-in-out 0.1s infinite alternate; } @keyframes shake { from { transform: rotate(25deg); } to { transform-origin: center center; transform: rotate(-25deg); } } @-webkit-keyframes shake { from { -webkit-transform: rotate(25deg); } to { -webkit-transform-origin:center center; -webkit-transform: rotate(-25deg); } } /**************************************** * MEDIA QUERIES * ****************************************/ @media only screen and (min-width: 600px) { .cpc2 ul { font-size: inherit; } .cpc2 ul > li { display: list-item; width: 100% } } @media only screen and (min-width: 768px) { .logoBreadcrumb { width: 768px; } .c3p1 { padding-right: 10px; } .child3Parent1 { grid-template-columns: auto 1fr; } .desktopParent { display: grid; grid-template-columns: 1.85fr 1.15fr; align-items: end; grid-row-gap: 10px; } .roomNumber { border-right: 1px solid rgba(0,0,0,0.2); } .child4Parent1 { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-areas: "calendar info" "calendar info" "services services" "bookButton bookButton"; } } @media only screen and (min-width: 992px) { h1,h2,h3,h4,h5 { font-weight: 700; } .cpc2 ul { column-count: 4; } .logoBreadcrumb { width: 992px; } .stayContainer { display: grid; justify-content: center; color: #282828; } .checkoutContainer { padding: 1rem; } .stayContainer h3 { text-align: center; padding-top: 1rem; } .checkout, .takeaway { display: grid; justify-content: center; } .checkoutContainer, .takeawayContainer { display: grid; width: 992px; } #childContainer { display: grid; grid-template-columns: auto; grid-template-rows: auto auto; align-items: baseline; justify-content: center; overflow-y: visible; height: unset; /*width: 992px;*/ padding-bottom: 10px; } .restaurantDetailContainer { padding: 2rem; } .child4Parent1 { display: grid; grid-template-columns: auto 33% auto; grid-template-areas: "calendar services info" "calendar bookButton info"; grid-template-rows: 18rem; } #logoBreadcrumbContainer { display: grid; justify-content: center; } #mapPhoneContainer { display: grid; justify-content: center; } .child3 { width: 992px; } .rateDetails { width: 992px; justify-self: center; } .extras { width: 992px; justify-self: center; grid-template-columns: auto 18rem; grid-column-gap: 10px; } .dateInformation { grid-template-columns: repeat(6, auto); grid-template-areas: "date restaurant service party time" "resDate restaurantName serviceName pax timeSelected"; width: 992px; grid-row-gap: 0px; text-align: center; } /* #dateInformationContainer { justify-content: center; }*/ .restaurantName, .serviceName, .pax, .timeSelected, .resDate { border-top: 1px solid #282828; border-bottom: 1px solid #282828; padding: 6px; font-size: unset; font-weight: unset; text-align: center; } .promo { grid-column: 2; text-align: center; margin: -10px; grid-row: 2; align-self: normal; } .child6 { grid-row: 1; grid-column: 2; } .roomsOccupancyContainer { display: grid; padding-left: 1.4rem; } .roomsOccupancy { display: grid; grid-row: 2; grid-column: span 2; padding: 10px; border-radius: 2px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0px 0px 10px 0px rgba(0, 0, 0, 0.22); } } @media only screen and (min-width: 1200px) { .child2Parent1 { grid-template-columns: 350px 1fr; align-items: center; grid-auto-rows: 80px; } .child3, .logoBreadcrumb, #productContainerGrid, #childContainer, .checkoutContainer { width: 1200px; } } .unavail, span.flatpickr-day.unavail, .flatpickr-day.unavail:hover { background-color: #efefef; color: #ccc; border: 1px solid #ccc; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='lightgrey' stroke-width='4'/><path d='M0 0 L100 100 ' stroke='lightgrey' stroke-width='4'/></svg>"); border-radius: 4px; } .waitlist { background-color: rgba(255, 165, 0, 0.2); color: rgba(255, 165, 0, 0.7); border: 1px solid rgba(255, 165, 0, 0.7); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='orange' stroke-width='4' stroke-dasharray='4,4'/></svg>"); cursor: pointer; opacity: 0.8; border-radius: 4px; } .disabled-day, span.flatpickr-day.disabled-day, .disabled-day:hover, .flatpickr-day.disabled-day:hover { color: rgba(57, 57, 57, 0.1); cursor: not-allowed; background: transparent; border-color: transparent; } .legend { display: grid; grid-template-columns: max-content auto; grid-column-gap: 5px; align-items: center; } .legend-icon { margin-top: 1px; height: 26px; width: 26px; cursor: pointer; pointer-events: none; line-height: 26px; } div.flatpickr-calendar { border-radius: 0; box-shadow: inherit; border: 1px solid #ccc; border-bottom: dotted 1px #ccc; } span.flatpickr-day { border-radius: 4px; } /* Overlay background */ #cartAddOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); /* Greyed-out background */ display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; opacity: 1; transition: visibility 0.2s, opacity 0.2s; } .overlay-text { margin-top: 16px; color: #fff; font-size: 1.3rem; font-weight: bold; text-align: center; } .overlay-text::after { content: "Adding your reservation..." } /* Hide the overlay by default */ .hidden { visibility: hidden; opacity: 0; } /* Bouncing bars container */ .bouncing-bars { display: flex; gap: 8px; } /* Individual bars */ .bar { width: 10px; height: 40px; background-color: #fff; border-radius: 4px; animation: bounce 1.2s infinite ease-in-out; } /* Bar bounce animation */ @keyframes bounce { 0%, 80%, 100% { transform: scaleY(1); } 40% { transform: scaleY(1.5); } } /* Staggered animation for each bar */ .bar:nth-child(1) { animation-delay: 0s; } .bar:nth-child(2) { animation-delay: 0.2s; } .bar:nth-child(3) { animation-delay: 0.4s; } </style> </head> <body> <div id="overlay" style="display: none;" onclick="toggleCart()"></div> <div id="cartAddOverlay" class="hidden"> <div class="bouncing-bars"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> <div class="overlay-text"></div> </div> <div id="parent"> <input name="unavailable" value="<p>There is no availability on your chosen date.&nbsp;</p><p>Please select 'OK' to choose an alternative dining date.</p><p>Please note that the Latymer is open for Dinner Wednesday to Sunday and lunch on Saturdays and Sundays&nbsp;</p><p>If you are a hotel resident or looking to book a table for more than 4 persons, please email the hotel direct at <a href="mailto:pennyhillpark@exclusive.co.uk">pennyhillpark@exclusive.co.uk</a> to allow us to check availability. </p><strong><span lang="EN-IE" style="font-family:'Times New Roman', serif;font-size:12pt;"></span></strong>" id="unavailable" hidden /> <input name="waitlist" value="0" id="waitlist" hidden /> <input name="tcurl" value="/BookTable/GetTerms" id="tcurl" hidden /> <input name="customerID" value="" id="customerID" hidden /> <input name="takeAway" value="0" id="takeAway" hidden /> <input name="menuURL" value=" " id="menuURL" hidden /> <input name="delivery" value="0" id="delivery" hidden /> <input name="deliveryZip" value="" id="deliveryZip" hidden /> <input name="returnUrl" type="text" value="https://www.exclusive.co.uk/pennyhill-park/thank-you/" id="returnUrl" hidden /> <input name="serviceFrom" id="serviceFrom" hidden /> <input name="serviceTo" id="serviceTo" hidden /> <input id="hostedPage" name="hostedPage" value="1" hidden /> <input id="all" value="1" hidden /> <input id="member" value="0" hidden /> <input id="optionDeposit" value="0" hidden /> <form action="/booktable/BookTableCart?Length=9" data-ajax="true" data-ajax-failure="bookingFailed" data-ajax-method="GET" data-ajax-success="bookingMade" id="bookFormID" method="post" role="form"><input name="__RequestVerificationToken" type="hidden" value="nsKjOnWp0jskuSPKiBnIASgVtIOgRt5eMaYYzC5064qtCp9TFcS4Yfk_c9V29QJY_rzEryGNX9-J_32y22u4XiGe3MvaGH3qCkW5KHU9woM1" /> <input id="hotelID" name="hotelID" hidden value="2138" /> <input id="restID" name="restaurantID" hidden value="76" /> <input id="cartID" name="cartID" hidden value="" /> <input name="facilityName" value="Latymer" id="facilityName" hidden /> <input name="roomReservationID" value="0" id="roomReservationID" hidden /> <input name="nonResID" value="0" id="nonResID" hidden /> <input name="deposit" value="" id="deposit" hidden /> <input name="paymentSystemID" value="900" id="paymentSystemID" hidden /> <input name="people" value="" id="people" hidden /> <input name="restDate" type="text" value="" id="restDate" hidden /> <input name="addToEmails" id="addToEmails" value="" hidden /> <input id="paymentMethodID" name="paymentMethodID" value="" hidden /> <input id="paymentIntent" name="paymentIntent" value="" hidden /> <input name="serviceName" type="text" value="" id="serviceName" hidden /> <input name="policy" type="text" value="" id="policy" hidden /> <div id="window" style="display:none">Loading Waiting List Form...</div><script> kendo.syncReady(function(){jQuery("#window").kendoWindow({"iframe":false,"scrollable":true,"pinned":false,"title":"Add to the Waiting List","resizable":false,"actions":["Close"],"content":{"url":"/Generic/WaitListRegistration"}});}); </script> <div class="cart-content" style="display: none;"> <div class="floatOverviewInfo"> <div class="countdownContainer"> <p id="timer"> <span id="timer-mins"></span> <span id="timer-secs"></span> </p> </div> <div class="cartHeader"> <h6>YOUR CART SUMMARY</h6> <small><a href="javascript:void(0);" id="reset" onclick="clearCart()">Clear Cart</a></small> </div> <div class="sub-cart-container"> </div> </div> <div class="floatOverviewSummary"> <div class="overviewTotalInfo"> <div id="cartPayments"></div> <div>Deposit Due: <h5 style="display: inline">£</h5><h5 id="totalCost" style="display: inline">0.00</h5></div> </div> </div> <div class="checkout-button-container"> <button type="button" class="cta checkout-button" id="checkoutBtn" onclick="goToCheckout()">CHECK OUT</button> <a href="javascript:void(0);" style="color:inherit; text-decoration: inherit;" onclick="toggleCart()">Continue Shopping</a> </div> </div> <div class="header"> <div id="logoBreadcrumbContainer"> <div class="logoBreadcrumb"> <div class="child1" onclick="backToStart()"> <img src="/img/2138/Latymer.png" alt="Restaurant Logo" /> </div> </div> <div class="cart-container" onclick="toggleCart()"> <div class="cart-icon-container"> <i class="fa-light fa-cart-shopping fa-2xl cart-count-badge cart-icon" value="0"></i><div>£<span id="totalCostCart"></span></div> </div> </div> </div> <div id="mapPhoneContainer"> <div class="child3"> <div class="child3Parent1"> <div class="c3p1"> <span><i class="fas fa-map-marker-alt"></i> <a href="https://www.google.co.uk/maps/place/Pennyhill+Park/@51.3562697,-0.7116817,17z/data=!3m1!4b1!4m8!3m7!1s0x48767f6d888b4477:0x42bad2c4fdb9ef80!5m2!4m1!1i2!8m2!3d51.3562664!4d-0.709493" target="_blank" style="text-decoration: none; color: inherit">London Rd, Bagshot, GU19 5EU</a></span> </div> <div class="c3p2"> <span><i class="fas fa-phone"></i> <a href="tel:01276 478300" style="text-decoration: none; color: inherit">01276 478300</a></span> </div> </div> </div> </div> </div> <div class="stayContainer"> <div id="childContainer"> <h3>Latymer</h3> <div class="child4"> <div class="child4Parent1"> <div class="calendarContainer"> <div id="calendar"> <div id="flatpickr" class="flatpickr"> <input id="arrival" class="form-control fp-selected" data-input /> </div> <div id="calendarFooter"> <div> <small> <span class="legend"><span class="unavail legend-icon flatpickr-day">18</span> - No availability</span> </small> </div> <div> <small> <span class="legend"><span class="disabled-day legend-icon flatpickr-day">18</span> - Closed/Service unavailable on this day</span> </small> </div> </div> </div> </div> <div id="infoSelection"> <div> <div class="serviceSelect"> <label for="services"><i class="fal fa-utensils-alt"></i> I Want To Book</label> <input class="form-control" id="services" name="services" style="width: 100%" type="text" /><script> kendo.syncReady(function(){jQuery("#services").kendoDropDownList({"dataBound":SelectService,"change":changeDetails,"dataSource":{"transport":{"read":{"url":"/BookTable/GetAvailableServices","data":TableServiceData},"prefix":""},"schema":{"errors":"Errors"}},"dataTextField":"service_name","autoBind":false,"dataValueField":"dummy_id","optionLabel":"Select Service..."});}); </script> </div> </div> <div class="partySelect"> <label for="adults"><i class="fal fa-user"></i> Party Size</label> <input class="form-control" data-val="true" data-val-number="The field Int32 must be a number." data-val-required="The Int32 field is required." disabled="disabled" id="adults" name="adults" style="width: 100%" type="text" value="0" /><script> kendo.syncReady(function(){jQuery("#adults").kendoDropDownList({"dataBound":enableDropdown,"dataSource":{"transport":{"read":{"url":"/BookTable/GetMinMaxPeople","data":getServiceData},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":false,"dataValueField":"Value","optionLabel":"Select Party Size...","cascadeFrom":"services"});}); </script> </div> <div class="timeSelect"> <label for="times"><i class="fal fa-clock"></i> Available Times</label> <input class="form-control" disabled="disabled" id="onTime" name="onTime" style="width: 100%" type="text" /><script> kendo.syncReady(function(){jQuery("#onTime").kendoDropDownList({"change":enableBook,"dataBound":availableTimes,"dataSource":{"transport":{"read":{"url":"/BookTable/TableAvailability","data":rateQueryDataTimes},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"on_time","autoBind":false,"dataValueField":"on_time","optionLabel":"Select Time...","cascadeFrom":"adults"});}); </script> </div> </div> <div class="restaurantDetailContainer"> <div class="restaurantDetails" style="padding-bottom: 1rem;"> <div class="restaurantHeader" style="padding-bottom: 0rem;">   </div> <div class="restaurantDescription"> Awarded a Michelin star and 5 AA Rosettes, Head Chef Steve Smith and his talented team deliver a menu that is all about flavour, using the very best sustainably sourced produce to create dishes that delight. Please note: Latymer is an adult only environment to retain a calm atmosphere. Family dining is available in Hillfield restaurant for children under the age of 12. </div> <div class="bookingText"> To book using a gift voucher, please contact us on 01276 486150. Alternatively you can email us at pennyhillpark@exclusive.co.uk. </div> </div> <div class="serviceDivider"> </div> <div class="serviceDetails" style="display: grid;"> <div class="detailHeader"> <h5 id="selectedServiceName">Select a Service</h5> </div> <div id="selectedServiceDesc" class="serviceDescription"> Please select a service to see details </div> <div class="viewMenuContainer" style="width: 70%; justify-self: center; padding-top: 1rem;"> <a class="btn button btn-secondary form-control" style="display: none" href="" target="_blank" id="viewMenu">View Menu</a> </div> </div> </div> <div class="btnContainer"> <div class="resetSubmitContainer"> <button type="button" id="resetFormButton" class="btn form-control resetButton" onclick="resetForm(this)">Reset</button> <button type="button" id="toCheckout" class="btn form-control toCheckout" onclick="addToCart(this)" disabled>Add to Cart</button> </div> </div> </div> </div> </div> </div> <div id="takeaway"> </div> <div id="checkout" class="checkout" style="display: none"> <div class="checkoutContainer"> <div class="guestDetails"> <div class="guestDetailsContainer"> <div class="guestDetailHeader"> <div class="backButton"> <a class="btn button backButton form-control" onclick="back()"><i class="fas fa-arrow-left"></i> BACK</a> </div> <h3>YOUR DETAILS</h3> </div> <div class="guestNameContainer"> <div class="titleDiv"> <label for="title">Title*</label> <input class="titleInput" id="guest_title" name="guest_title" required="required" type="text" /><script> kendo.syncReady(function(){jQuery("#guest_title").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/Generic/GuestTitles"},"prefix":""},"schema":{"errors":"Errors"}},"dataTextField":"guest_title","dataValueField":"guest_title","optionLabel":"Select Title..."});}); </script> </div> <div class="nameDiv"> <div class="firstName"> <label for="initial">First Name*</label> <input id="guest_initial" name="guest_initial" class="form-control" style="border-radius: 0px;" value="" required /> </div> <div class="LastName"> <label for="name">Last Name*</label> <input id="guest_name" name="guest_name" class="form-control" style="border-radius: 0px;" value="" required /> </div> </div> </div> <div class="guestEmailContainer"> <div class="guestEmail"> <label for="email">Email Address*</label> <input id="email" name="email" class="form-control" style="border-radius: 0px;" value="" required /> </div> <div class="guestEmailConfirm"> <label for="emailConfirm">Confirm Email Address*</label> <input id="emailConfirm" class="form-control" style="border-radius: 0px;" value="" required /> <span><small style="color: red" id="emailError"></small></span> </div> </div> <div class="addressContainer"> <label for="zip_fa">Find Address:</label> <div class="postCodeLookUp"> <div id="postcode_lookup"></div> <div id="manualAddress"><small><a href="javascript:void(0);" onclick="toggleAddressDetails(true)">Enter address manually</a></small></div> </div> <div id="addressDetailsContainer" style="display: none"> <div class="address"> <div class="address1"> <label for="address">Address*</label> <input id="line1" name="address" class="form-control" style="border-radius: 0px;" value="" required /> </div> <div class="towncity"> <label for="town">Town/City*</label> <input id="town" name="city" class="form-control" style="border-radius: 0px;" value="" required /> </div> <div class="county"> <label for="county">County</label> <input id="county" name="state" class="form-control" style="border-radius: 0px;" value="" /> </div> <div class="country"> <label for="countryCode">Country*</label> <input class="countryInput" id="countryCode" name="countryCode" required="required" type="text" /><script> kendo.syncReady(function(){jQuery("#countryCode").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/Generic/CountryCodes","data":getHotelID},"prefix":""},"schema":{"errors":"Errors"}},"dataTextField":"country_name","height":200,"dataValueField":"country_code"});}); </script> </div> <div class="postcode"> <label for="zip">Post Code*</label> <input id="zip" class="form-control" style="border-radius: 0px;" value="" name="zip" required /> </div> </div> </div> </div> <div class="guestPhoneContainer"> <div class="guestPhone"> <label for="phone">Phone*</label> <input id="mobilePhone" name="mobilePhone" class="form-control" value="" required /> </div> </div> <div class="requestsContainer"> <div class="requests"> <label for="request">Additional Requests and Dietary Requirements</label> <textarea class="form-control" id="sprequests" name="sprequests" style="resize: none; height: 5rem;" maxlength="60"></textarea> <div id="the-count"> <span id="current">0</span> <span id="maximum">/ 60</span> </div> </div> </div> </div> <div id="cardDetails" class="cardDetails"> </div> </div> <div class="overviewDepositInfo"> <h5>Terms & Conditions</h5> <div class="termsconsent"> <div class="termsCheck"> <label for="terms"> <input name="terms" id="terms" type="checkbox" onchange="document.getElementById('bookNow').disabled = !this.checked;" /> I agree to the terms and conditions shown below. </label> </div> </div> <span id="deposittext"></span> <span id="termstext"><p>- A deposit is required to secure your booking, and the remaining balance will be due on the day </p><p>- Free cancellation within 48 hours of your reservation. </p><p>- Any cancellation after this time will incur a cancellation fee of £175.00 per person for dinner, or £95.00 per person for lunch.</p><p>- The Latymer is an adult only environment to retain a calm and private atmosphere children need to be aged 12 years and over to dine.</p><p>For information on how we process your information during a booking, please view our <a href="https://www.exclusive.co.uk/policies/" target="_blank">Privacy Policy</a> here.<br /></p></span> </div> <div class="bookingOverview"> <div class="overviewInfoCheckout"> <div class="checkout-cart"> <div class="cartHeader"> <h6>YOUR BOOKING SUMMARY</h6> </div> <div id="checkoutCart"> </div> </div> <div id="amountDueContainer"> <div class="divider"> </div> <div class="overviewDueInfo"> <div>Amount due: <h5 style="display: inline" id="amountCurrency">£</h5> <h5 id="amountDue" style="display: inline"></h5></div> </div> </div> </div> <div class="overviewSummary"> </div> <div class="overviewBookingButton"> <input type="button" id="bookNow" class="btn" onclick="OnBookClick(this)" disabled value="BOOK NOW" /> </div> </div> </div> </div> </form> </div> </body> </html> <script> function toggleCart() { var options = { duration: 1000, easing: "easeOutBounce" } $(".cart-content").toggle(options); if ($(".cart-content").is(":visible")) { $("#overlay").toggleClass("overlay").show(); } else { $("#overlay").toggleClass("overlay").hide(); } } $('#sprequests').keyup(function() { var characterCount = $(this).val().length, current = $('#current'), maximum = $('#maximum'), theCount = $('#the-count'); current.text(characterCount); if (characterCount < 50) { current.css('color', '#666'); } if (characterCount > 50 && characterCount < 70) { current.css('color', '#793535'); } if (characterCount > 80 && characterCount < 90) { current.css('color', '#841c1c'); } if (characterCount > 90 && characterCount < 100) { current.css('color', '#8f0001'); } if (characterCount == 100) { maximum.css('color', '#8f0001'); current.css('color', '#8f0001'); theCount.css('font-weight', 'bold'); } else { maximum.css('color', '#666'); theCount.css('font-weight', 'normal'); } }); $(window).on("load", function () { if ($("#roomReservationID").val() != "0" || $("#nonResID").val() != "0") { } else { const services = $("#services").data("kendoDropDownList"); services.dataSource.read(); } if (window.matchMedia('screen and (min-width: 600px)').matches) { SetBackground(1); } if (false) { bootbox.alert(''); } }); var stripe, elements, cardElement; var style = { base: { color: "#32325d", fontFamily: 'Arial, sans-serif', fontSmoothing: "antialiased", fontSize: "16px", "::placeholder": { color: "#32325d" } }, invalid: { fontFamily: 'Arial, sans-serif', color: "#fa755a", iconColor: "#fa755a" } }; function ShowMenu() { const restaurantID = $("#restID").val(); const services = $("#services").val(); $.ajax({ url: "/BookTable/GetMenu", data: { restaurantID, services }, success: function(response) { $("#takeaway").html(response); } }); } function availableTimes() { if ($("#onSearch").val() === "0" || $("#services").val() == '') { return; } const times = $("#onTime").data("kendoDropDownList"); if (times.dataSource.data().length === 0) { const title = "Sorry..."; let message = "Sorry there is no availability for the date chosen."; if ($("#unavailable").val().length > 5) { message = $("#unavailable").val(); } if ($("#waitlist").val() !== "0") { message += "<br\><br\>Would you like to join the wait list?"; bootbox.confirm({ title: title, message: message, buttons: { confirm: { label: "Yes" }, cancel: { label: "No" } }, callback: function(result) { if (result) { const waitList = $("#window").data("kendoWindow"); waitList.open(); waitList.center(); } } }); } else { bootbox.alert(message); } } else { $("#onSearch").val("0"); } hideProgress(); } function toggleAddressDetails(show) { $("#addressDetailsContainer").toggle(show); $("#manualAddress").hide(); } function changeDetails(e) { console.log("changeDetails start"); if (e) { const dataItem = e.sender.dataItem(); var maxLeadDays = 0; if ($("#member").val() == "1") { if (dataItem.max_lead_member != null) { maxLeadDays = dataItem.max_lead_member; } } if (maxLeadDays == 0) { maxLeadDays = dataItem.max_lead; } var maxDate = new Date(); var minDate = new Date(); if ($("#roomReservationID").val() != '' || $("#nonresID").val() != '') { minDate = convertDateFromString('18/12/2024'); maxDate = convertDateFromString('16/06/2025'); } else { maxDate.setDate(new Date().getDate() + maxLeadDays); } const serviceList = $("#services").data("kendoDropDownList"); $("#serviceFrom").val(dataItem.from_time); $("#serviceTo").val(dataItem.to_time); if (dataItem.dummy_id !== "") { $("#selectedServiceName").text(dataItem.service_name) /*.css("text-transform", "uppercase");*/; } if (dataItem.service_desc !== null) { $("#selectedServiceDesc").text(dataItem.service_desc); } else { $("#selectedServiceDesc").text(""); } if (dataItem.menu_url !== null) { $("#viewMenu").show(); $("#viewMenu").attr("href", dataItem.menu_url); } else { $("#viewMenu").hide(); } const calendarElement = document.querySelector(".fp-selected"); const calendarInstance = calendarElement._flatpickr; console.log("getCalendarAvailability start"); getCalendarAvailability(calendarInstance); console.log("getCalendarAvailability end"); date = calendarInstance.parseDate($("#arrival").val(), "d/m/Y"); let firstDate = calendarInstance.parseDate(firstAvailable, "d/m/Y"); if (date < firstDate) { date = firstDate; calendarInstance.setDate(firstDate, true, "d/M/Y"); } if (!checkServiceAvailable(date, monthlyAvailability)) { unavailMessage(); } else { serviceList.trigger("cascade"); } } console.log("changeDetails end"); } function sleep(milliseconds) { return new Promise((resolve) => setTimeout(resolve, milliseconds)); } function changeServiceOption(e) { if (e) { const dataItem = e.sender.dataItem(); if (dataItem.deposit) { $("#optionDeposit").val(dataItem.deposit); } else { $("#optionDeposit").val(0); } } } function MarkEmail() { if (document.getElementById('optIn').checked) { $("#addToEmails").val("3"); } else { $("#addToEmails").val(""); } } function changeTimes(e) { if (e) { const dataItem = e.sender.dataItem(); const picker = $("#wtimepicker").data("kendoTimePicker"); if (picker) { picker.destroy(); } $("#wtimepicker").removeClass("form-control-plaintext"); $("#wtimepicker").addClass("form-control"); $("#wtimepicker").kendoTimePicker({ format: "HH:mm", min: dataItem.from_time, max: dataItem.to_time, interval: "15", value: dataItem.from_time, strictMode: "true" }).data("kendoTimePicker"); } } function resetForm(e) { $("#all").val(1); const serviceList = $("#services").data("kendoDropDownList"); serviceList.dataSource.read(); serviceList.select(0); serviceList.trigger("change"); } function goToCheckout() { const hotelID = $("#hotelID").val(); const restaurantID = $("#restID").val(); const customerID = $("#customerID").val(); const cartID = GetRestaurantCart(); $.ajax({ url: "/BookTable/GetCheckoutCart", data: { hotelID, restaurantID, customerID, cartID }, async: false, success: function (data) { $("#checkoutCart").html(data); $("#checkout").show(); $("#dateInformationContainer").css("display", "grid"); $(".stayContainer").hide(); toggleCart(); $("#checkout")[0].scrollIntoView({ block: 'start' }); } }); } function bookTable(e) { var deposit = 0; var policy = 0; if ($("#customerID").val() == "") { let textID = 0; let serviceID = $("#services").val(); $.ajax({ url: "/BookTable/GetDeposits", data: { onDate: $("#arrival").val(), restID: $("#restID").val(), onTime: $("#onTime").val(), serviceID: serviceID, pax: $("#adults").val() }, async: false, success: function (response) { let amount = response.amount; policy = response.policy; if (amount == -1) { bootbox.alert("An error occurred while proceeding to checkout. Please try again"); return; } const optionCharge = parseFloat($("#optionDeposit").val()); if (optionCharge > 0) { amount = optionCharge; } let buttonText = "BOOK NOW"; if ($("#takeAway").val() === "1") { amount = parseFloat($("#totalValue").html()); } if (policy === 0 || policy === NaN) { $("#amountDueContainer").hide(); $(".addressContainer").hide(); $("#line1").attr("required", false); $("#town").attr("required", false); $("#countryCode").attr("required", false); $("#zip").attr("required", false); } else { $("#amountDueContainer").show(); $(".addressContainer").show(); $("#line1").attr("required", true); $("#town").attr("required", true); $("#countryCode").attr("required", true); $("#zip").attr("required", true); if (policy === 1) { textID = 19; $("#deposit").val(0); if ($("#hostedPage").val() == "1") { buttonText = "PROCEED"; } } if (policy === 2) { textID = 18; deposit = amount * $("#adults").val(); if ($("#takeAway").val() === "1") { deposit = amount; } $("#deposit").val(deposit); if ($("#hostedPage").val() == "1") { buttonText = "PROCEED TO PAYMENT"; } } $("#bookNow").val(buttonText); if (textID > 0) { $.ajax({ url: "/BookTable/GetText", data: { restID: $("#restID").val(), textID: textID, serviceID: serviceID }, async: false, success: function (response) { $("#deposittext").html(response); } }); }if ($("#hostedPage").val() == "0") { $.ajax({ url: "/BookTable/GetCard", data: { paymentSystemID: $("#paymentSystemID").val(), hotelID: $("#hotelID").val() }, async: false, success: function (response) { $("#cardDetails").html(response); if ($("#paymentSystemID").val() == 8) { stripe = Stripe(""); elements = stripe.elements(); cardElement = elements.create('card', { style: style }); cardElement.mount('#card-element'); var cardholderName = document.getElementById('cardholder-name'); var cardButton = document.getElementById('card-button'); var clientSecret = $("#publicKey").val(); } } }); } } }, error: function (error) { bootbox.alert("An error occurred whilst proceeding to checkout. Please try again and if it continues, please contact us.") return; } }); } else { $("#amountDueContainer").hide(); $(".addressContainer").hide(); $("#line1").attr("required", false); $("#town").attr("required", false); $("#countryCode").attr("required", false); $("#zip").attr("required", false); } $("#checkout").show(); $("#dateInformationContainer").css("display", "grid"); $(".stayContainer").hide(); const date = $("#arrival").val(); const resDate = convertDateFromString(date); $(".resDate").text(moment(resDate).format("ddd DD MMM")); const serviceName = $("#services").data("kendoDropDownList").text(); $(".serviceName").text(serviceName); $("#serviceName").val(serviceName); $(".pax").text($("#adults").val()); $("#people").val($("#adults").val()); $(".timeSelected").text($("#onTime").val()); $("#restDate").val($("#arrival").val()); deposit = deposit.toFixed(2); $("#policy").val(policy); $("#amountDue").val(deposit); $("#amountDue").text(deposit); $("#amount").val(deposit); $("#amount").text(deposit); $('html, body').animate({ scrollTop: 0 }, 1000); } function enableBook() { const times = $("#onTime").val(); const checkoutButton = $("#toCheckout"); if (times !== "") { checkoutButton.prop("disabled", false); } else { checkoutButton.prop("disabled", true); } } function rateQueryDataTimes() { return { arrival: $('#arrival').val(), hotelID: $("#hotelID").val(), restID: $('#restID').val(), services: $('#services').val(), pax: $('#adults').val(), member: $("#member").val() }; } function OnBookClick(e) { if (!checkEmail()) { return; } toggleAddressDetails(true); if ($("#bookFormID")[0].reportValidity()) { $("#bookNow").attr("disabled", true); bootbox.dialog({ message: '<p class="text-center mb-0"><i class="fal fa-spin fa-cog"></i> Processing your booking...</p>', closeButton: false, onShown: function() { const policy = parseInt($("#policy").val()); const paymentSystem = parseInt($("#paymentSystemID").val()); const cartID = GetRestaurantCart(); $("#cartID").val(cartID); if (paymentSystem === NaN || policy === 0 || paymentSystem == 2) { $("#bookFormID").submit(); return; } if (paymentSystem === 8) { const hotelID = $("#hotelID").val(); const guestName = $("#guest_name").val(); const email = $("#email").val(); const cardHolderName = $("#cardholder-name").val(); const formID = $("#bookFormID"); const description = "Table Booking for " + $("#arrival").val(); const amount = $("#amount").val(); switch (policy) { case 1: stripeToken(hotelID, guestName, email, cardHolderName, formID); break; case 2: stripePayment(hotelID, guestName, email, cardHolderName, formID, description, amount); break; } } else { $("#bookFormID").attr('action', '/BookTable/BookTableHosted'); $("#bookFormID").submit(); } } }); } else { bootbox.alert({ title: "Required information is missing", message: "Please ensure all required (*) fields have the correct information entered." }); } } function bookingFailed() { error("Error", "There was an error processing your booking. Please try again or contact us."); bootbox.hideAll(); $("#bookNow").prop("disabled", false); } function bookingMade(data) { if (data.message === "OK") { var returnUrl = $("#returnUrl").val(); dataLayer.push({ 'event': 'VirtualPageView', 'VirtualPage': '/restaurant-booking/booking-confirmation', 'peopleQty': $("#people").val(), 'restaurantName': 'Latymer', 'bookedService': $("#serviceName").val(), 'arrival': $("#restDate").val(), 'hotelID': $("#hotelID").val() }); const paySystemID = $("#paymentSystemID").val() if ($("#policy").val() > 0 && paySystemID != "8" && paySystemID != "2") { switch (paySystemID) { case "900": window.location.href = `/BookTable/FiServHosted?hotelID=${$("#hotelID").val()}&restID=${$("#restID").val()}&cartID=${$("#cartID").val()}&email=${$("#email").val()}&title=${$("#guest_title").val()}&initial=${$("#guest_initial").val()}&surname=${$("#guest_name").val()}&deposit=${$("#deposit").val()}`; break; case "901": window.location.href = `/BookTable/VerifoneHosted?hotelID=${$("#hotelID").val()}&restaurantID=${$("#restID").val()}&dummyID=${data.dummyID}&email=${$("#email").val()}&guestInitial=${$("#guest_initial").val()}&guestName=${$("#guest_name").val()}&toPay=${$("#deposit").val()}&address=${$("#line1").val()}&zip=${$("#zip").val()}&phone=${$("#mobilePhone").val()}&city=${$("#town").val()}&country=${$("#countryCode").val()}`; break; case "902": window.location.href = `/Tables/Stripe/${$("#hotelID").val()}/${$("#restID").val()}/${$("#cartID").val()}` break; case "903": window.location.href = `/BookTable/Adyen/${$("#hotelID").val()}/${$("#restID").val()}/${$("#cartID").val()}` break; default: displayWarning("We cannot proceed with this reservation as we cannot contact the payment providers. Please contact us to continue your reservation.") break; } } else { bootbox.alert({ message: "Thank you for reservation. We are looking forward to welcoming you.<br/>An email confirmation has been sent. If you do not receive it, please check your spam folder and update your safe sender list.", callback: function() { window.location.assign(returnUrl); } }); } } else { bootbox.alert({ title: "An Error occurred", message: data.message, callback: function () { bootbox.hideAll(); $("#bookNow").prop("disabled", false); } }); } } function checkEmail() { if ($("#emailConfirm")) { const email = $("#email").val(); const confEmail = $("#emailConfirm").val(); if (email !== confEmail) { $("#emailError").text("Email addresses do not match."); $("#email").addClass("error"); $("#emailConfirm").addClass("error"); $("#email").focus(); return false; } $("#email").removeClass("error"); $("#emailConfirm").removeClass("error"); $("#emailError").text(""); return true; } } $(document).on('focusout', '#emailConfirm', function() { checkEmail(); }); $('#postcode_lookup').getAddress( { api_key: 'uNa7HrEwh0yechVgu7wYWQ3518', output_fields: { line_1: '#line1', line_2: '#line2', line_3: '#line3', post_town: '#town', county: '#county', postcode: '#zip' }, input_label: 'Post Code', input_class: 'form-control', input_id: "zip_fa", button_label: '<i class="fas fa-search-location"></i> Search', button_class: 'btn btn-outline-secondary', dropdown_class: 'form-control addressList' }); </script>

CINXE.COM

Latymer