{"id":795,"date":"2026-07-29T10:00:43","date_gmt":"2026-07-29T10:00:43","guid":{"rendered":"https:\/\/villa-garraf.com\/?page_id=795"},"modified":"2026-07-29T11:15:35","modified_gmt":"2026-07-29T11:15:35","slug":"disponibilities-reservation","status":"publish","type":"page","link":"https:\/\/villa-garraf.com\/index.php\/disponibilities-reservation\/","title":{"rendered":"Disponibilities &amp; Reservation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"795\" class=\"elementor elementor-795\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d586091 e-flex e-con-boxed e-con e-parent\" data-id=\"d586091\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6089f74 elementor-widget elementor-widget-shortcode\" data-id=\"6089f74\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t<div class=\"vaa-wrapper\">\n\n\t\t\n\t\t<h3>Check availability &amp; get a price<\/h3>\n\n\t\t<form method=\"post\" action=\"https:\/\/villa-garraf.com\/wp-admin\/admin-post.php\" id=\"vaa-booking-form\">\n\t\t\t<input type=\"hidden\" name=\"action\" value=\"vaa_submit_booking\">\n\t\t\t<input type=\"hidden\" id=\"vaa_nonce\" name=\"vaa_nonce\" value=\"4c7b4d11d3\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/795\" \/>\n\t\t\t<!-- Honeypot (invisible to humans) -->\n\t\t\t<div class=\"vaa-hidden-field\">\n\t\t\t\t<label for=\"vaa_website\">Leave this empty<\/label>\n\t\t\t\t<input type=\"text\" name=\"vaa_website\" id=\"vaa_website\" tabindex=\"-1\" autocomplete=\"off\">\n\t\t\t<\/div>\n\n\t\t\t<div class=\"vaa-field\">\n\t\t\t\t<label for=\"vaa_dates\">Stay dates<\/label>\n\t\t\t\t<input type=\"text\" id=\"vaa_dates\" name=\"vaa_dates\" placeholder=\"Select your dates\" required readonly>\n\t\t\t<\/div>\n\n\t\t\t<div id=\"vaa-price-box\"><\/div>\n\n\t\t\t<div class=\"vaa-field\">\n\t\t\t\t<label for=\"vaa_name\">Full name<\/label>\n\t\t\t\t<input type=\"text\" id=\"vaa_name\" name=\"vaa_name\" required>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"vaa-field\">\n\t\t\t\t<label for=\"vaa_email\">Email<\/label>\n\t\t\t\t<input type=\"email\" id=\"vaa_email\" name=\"vaa_email\" required>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"vaa-field\">\n\t\t\t\t<label for=\"vaa_phone\">Phone <span class=\"vaa-optional\">(optional)<\/span><\/label>\n\t\t\t\t<input type=\"tel\" id=\"vaa_phone\" name=\"vaa_phone\" pattern=\"^[0-9+\\-\\s().]{6,20}$\" title=\"Enter a valid phone number (digits, spaces, +, -, () allowed)\">\n\t\t\t<\/div>\n\n\t\t\t<div class=\"vaa-field\">\n\t\t\t\t<label for=\"vaa_guests\">Number of guests <span class=\"vaa-optional\">(optional)<\/span><\/label>\n\t\t\t\t<input type=\"number\" id=\"vaa_guests\" name=\"vaa_guests\" min=\"1\" max=\"50\">\n\t\t\t<\/div>\n\n\t\t\t<div class=\"vaa-field\">\n\t\t\t\t<label for=\"vaa_message\">Message<\/label>\n\t\t\t\t<textarea id=\"vaa_message\" name=\"vaa_message\" rows=\"5\" required><\/textarea>\n\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<button type=\"submit\" class=\"vaa-submit\" id=\"vaa-submit-btn\" disabled>Select your dates first<\/button>\n\t\t<\/form>\n\t<\/div>\n\n\t<script>\n\tdocument.addEventListener('DOMContentLoaded', function () {\n\t\tvar priceBox  = document.getElementById('vaa-price-box');\n\t\tvar submitBtn = document.getElementById('vaa-submit-btn');\n\n\t\tfunction pad(n){ return n < 10 ? '0'+n : ''+n; }\n\t\tfunction toISO(d){ return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()); }\n\n\t\tfunction renderPrice(data) {\n\t\t\tif (!data) {\n\t\t\t\tpriceBox.innerHTML = '';\n\t\t\t\tsubmitBtn.disabled = true;\n\t\t\t\tsubmitBtn.textContent = 'Select your dates first';\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (data.error) {\n\t\t\t\tvar msg = data.error === 'unavailable'\n\t\t\t\t\t? 'Some of the selected dates are no longer available.'\n\t\t\t\t\t: 'Pricing is not yet configured for these dates. Please contact us directly.';\n\t\t\t\tpriceBox.innerHTML = '<div class=\"vaa-price-box vaa-price-error\">' + msg + '<\/div>';\n\t\t\t\tsubmitBtn.disabled = true;\n\t\t\t\tsubmitBtn.textContent = 'Unavailable for these dates';\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvar html = '<div class=\"vaa-price-box\">';\n\t\t\thtml += '<div class=\"vaa-line\"><span>' + data.nights + ' night(s)<\/span><span>' + vaaCurrency + data.subtotal.toFixed(2) + '<\/span><\/div>';\n\t\t\tif (data.length_discount_percent > 0) {\n\t\t\t\thtml += '<div class=\"vaa-line\"><span>' + data.length_discount_label + ' (' + data.length_discount_percent + '%)<\/span><span class=\"vaa-strike\">' + vaaCurrency + data.subtotal.toFixed(2) + '<\/span><\/div>';\n\t\t\t}\n\t\t\thtml += '<div class=\"vaa-line\"><span>Airbnb reference price<\/span><span class=\"vaa-strike\">' + vaaCurrency + data.airbnb_reference_total.toFixed(2) + '<\/span><\/div>';\n\t\t\thtml += '<div class=\"vaa-line vaa-final\"><span>Direct booking price<\/span><span>' + vaaCurrency + data.final_total.toFixed(2) + '<\/span><\/div>';\n\t\t\tif (data.savings > 0) {\n\t\t\t\thtml += '<div class=\"vaa-savings\">You save ' + vaaCurrency + data.savings.toFixed(2) + ' by booking directly<\/div>';\n\t\t\t}\n\t\t\thtml += '<\/div>';\n\t\t\tpriceBox.innerHTML = html;\n\t\t\tsubmitBtn.disabled = false;\n\t\t\tsubmitBtn.textContent = 'Send my booking request';\n\t\t}\n\n\t\tfunction fetchPrice(startISO, endISO) {\n\t\t\tvar body = new URLSearchParams();\n\t\t\tbody.set('action', 'vaa_get_price');\n\t\t\tbody.set('nonce', vaaPriceNonce);\n\t\t\tbody.set('start', startISO);\n\t\t\tbody.set('end', endISO);\n\n\t\t\tfetch(vaaAjaxUrl, { method: 'POST', body: body })\n\t\t\t\t.then(function (r) { return r.json(); })\n\t\t\t\t.then(function (json) {\n\t\t\t\t\tif (json.success) {\n\t\t\t\t\t\trenderPrice(json.data);\n\t\t\t\t\t} else {\n\t\t\t\t\t\trenderPrice(json.data || { error: 'unavailable' });\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch(function () {\n\t\t\t\t\trenderPrice({ error: 'unavailable' });\n\t\t\t\t});\n\t\t}\n\n\t\tvar selectedRange = { start: null, end: null };\n\n\t\t\/\/ Calendar is initialized first and on its own: nothing below can prevent it from working.\n\t\tflatpickr(\"#vaa_dates\", {\n\t\t\tmode: \"range\",\n\t\t\tminDate: \"today\",\n\t\t\tdateFormat: \"Y-m-d\",\n\t\t\taltInput: true,\n\t\t\taltFormat: \"M j, Y\",\n\t\t\tclickOpens: true,\n\t\t\tshowMonths: 1,\n\t\t\tdisable: vaaBusyDates,\n\t\t\tonDayCreate: function(dObj, dStr, fp, dayElem) {\n\t\t\t\tvar iso = toISO(dayElem.dateObj);\n\t\t\t\tif (vaaBusyDates.indexOf(iso) !== -1) {\n\t\t\t\t\tdayElem.classList.add('vaa-day-unavailable');\n\t\t\t\t}\n\t\t\t},\n\t\t\tonChange: function(selectedDates) {\n\t\t\t\tif (selectedDates.length === 2) {\n\t\t\t\t\tvar startISO = toISO(selectedDates[0]);\n\t\t\t\t\tvar endISO   = toISO(selectedDates[1]);\n\t\t\t\t\tselectedRange.start = selectedDates[0];\n\t\t\t\t\tselectedRange.end   = selectedDates[1];\n\t\t\t\t\tfetchPrice(startISO, endISO);\n\t\t\t\t} else {\n\t\t\t\t\tselectedRange.start = null;\n\t\t\t\t\tselectedRange.end   = null;\n\t\t\t\t\trenderPrice(null);\n\t\t\t\t}\n\t\t\t\ttry { refreshAutoMessage(); } catch (e) { console.error('Villa Booking: message auto-fill error', e); }\n\t\t\t}\n\t\t});\n\n\t\t\/* ---------- Dynamic pre-filled message (isolated, cannot break the calendar above) ---------- *\/\n\n\t\tvar messageAutoGenerated = true; \/\/ stays true until the visitor edits the message by hand\n\n\t\tfunction refreshAutoMessage() {\n\t\t\tvar nameField    = document.getElementById('vaa_name');\n\t\t\tvar emailField   = document.getElementById('vaa_email');\n\t\t\tvar phoneField   = document.getElementById('vaa_phone');\n\t\t\tvar messageField = document.getElementById('vaa_message');\n\t\t\tif (!nameField || !emailField || !phoneField || !messageField || !messageAutoGenerated) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfunction formatDateHuman(d) {\n\t\t\t\treturn d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });\n\t\t\t}\n\n\t\t\tvar lines = [];\n\t\t\tlines.push('Hello,');\n\t\t\tlines.push('');\n\n\t\t\tif (selectedRange.start && selectedRange.end) {\n\t\t\t\tlines.push('We would like to book the villa from ' + formatDateHuman(selectedRange.start) + ' to ' + formatDateHuman(selectedRange.end) + '.');\n\t\t\t} else {\n\t\t\t\tlines.push('We are interested in booking the villa and would like more information.');\n\t\t\t}\n\n\t\t\tvar contactParts = [];\n\t\t\tif (emailField.value.trim()) contactParts.push(emailField.value.trim());\n\t\t\tif (phoneField.value.trim()) contactParts.push(phoneField.value.trim());\n\t\t\tif (contactParts.length) {\n\t\t\t\tlines.push('You can reach us at ' + contactParts.join(' or ') + '.');\n\t\t\t}\n\n\t\t\tlines.push('');\n\t\t\tlines.push('Looking forward to hearing from you.');\n\n\t\t\tif (nameField.value.trim()) {\n\t\t\t\tlines.push('');\n\t\t\t\tlines.push(nameField.value.trim());\n\t\t\t}\n\n\t\t\tmessageField.value = lines.join('\\n');\n\t\t}\n\n\t\ttry {\n\t\t\tvar messageFieldInit = document.getElementById('vaa_message');\n\t\t\tif (messageFieldInit) {\n\t\t\t\tmessageFieldInit.addEventListener('input', function () {\n\t\t\t\t\tmessageAutoGenerated = false;\n\t\t\t\t});\n\t\t\t}\n\t\t\t['vaa_name', 'vaa_email', 'vaa_phone'].forEach(function (id) {\n\t\t\t\tvar field = document.getElementById(id);\n\t\t\t\tif (field) {\n\t\t\t\t\tfield.addEventListener('input', function () {\n\t\t\t\t\t\ttry { refreshAutoMessage(); } catch (e) { console.error('Villa Booking: message auto-fill error', e); }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t\trefreshAutoMessage();\n\t\t} catch (e) {\n\t\t\tconsole.error('Villa Booking: message auto-fill setup error', e);\n\t\t}\n\t});\n\t<\/script>\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","omw_enable_modal_window":"enable","footnotes":""},"class_list":["post-795","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/pages\/795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/comments?post=795"}],"version-history":[{"count":7,"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/pages\/795\/revisions"}],"predecessor-version":[{"id":806,"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/pages\/795\/revisions\/806"}],"wp:attachment":[{"href":"https:\/\/villa-garraf.com\/index.php\/wp-json\/wp\/v2\/media?parent=795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}