{"id":14,"date":"2023-08-11T06:47:50","date_gmt":"2023-08-11T13:47:50","guid":{"rendered":"https:\/\/surfingontheroad.com\/?page_id=14"},"modified":"2025-01-23T21:11:33","modified_gmt":"2025-01-24T04:11:33","slug":"surfing-on-the-road","status":"publish","type":"page","link":"https:\/\/surfingontheroad.com\/en_us\/","title":{"rendered":"Surfing On The Road"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"14\" class=\"elementor elementor-14\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60eb20d e-con-full e-flex e-con e-parent\" data-id=\"60eb20d\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-1a2dd34 e-flex e-con-boxed e-con e-child\" data-id=\"1a2dd34\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9b48c54 e-con-full e-flex e-con e-child\" data-id=\"9b48c54\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-c93018b e-con-full e-flex e-con e-child\" data-id=\"c93018b\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46a9722 order-2 noSpace elementor-widget elementor-widget-text-editor\" data-id=\"46a9722\" 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\t\t<p><i class=\"fa fa-shuttle-van\"><\/i><span class=\"dgray\">Private and luxury<\/span><\/p>\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-74fdc5f order-2 noSpace elementor-widget elementor-widget-text-editor\" data-id=\"74fdc5f\" 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\t\tRound Trip <span class=\"dgray\">\u2022<\/span> Hotel <span class=\"dgray\">\u2022<\/span> CUN Airport\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-2bc8823 order-2 noSpace elementor-widget elementor-widget-text-editor\" data-id=\"2bc8823\" 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\t\t<ul><li><b class=\"costosUsd\">PRECIOS\u00a0 EN USD<\/b><\/li><li>Las reservaciones de transporte en nuestra plataforma web, deber\u00e1n realizarse con 12<span style=\"text-decoration: underline;\">\u00a0hrs de anticipaci\u00f3n<\/span>. Cont\u00e1ctanos por WhatsApp para reservaciones express.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d15f291 order-1 e-flex e-con-boxed e-con e-child\" data-id=\"d15f291\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-80594af e-con-full e-flex e-con e-child\" data-id=\"80594af\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e27c2d6 noSpace elementor-widget elementor-widget-text-editor\" data-id=\"e27c2d6\" 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\t\tIf you can't find your hotel in destination \/ origin, please reach us via WhatsApp,<br class=\"d-xl-none\">\nto schedule your reservation.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-87f147c e-con-full e-flex e-con e-child\" data-id=\"87f147c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d29f556 formWhats elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"d29f556\" data-element_type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon elementor-animation-bounce-in\" href=\"https:\/\/wa.me\/5219841388860\" target=\"_blank\">\n\t\t\t<i aria-hidden=\"true\" class=\"fab fa-whatsapp\"><\/i>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\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\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd06c75 order-3 elementor-widget elementor-widget-shortcode\" data-id=\"fd06c75\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n\n<div class=\"container-fluid overflow-visible py-2\">\n        <div class=\"row\">\n            <form id=\"reservation-form\" action=\"#\" method=\"post\" role=\"form\" aria-labelledby=\"reservation-form-heading\" data-trp-original-action=\"#\">\n\n                <div class=\"row mb-3\">\n                    <div class=\"col-md-12\">\n                        <label class=\"titleForm\" for=\"trip-type\">Trip type:<\/label>\n                        <select id=\"trip-type\" name=\"trip-type\" class=\"form-select\" required aria-required=\"true\">\n                            <option class=\"options\" value=\"redondo\">Round Trip<\/option>\n                            <option class=\"options\" value=\"sencillo\">Transfer Hotel<\/option>\n                            <option class=\"options\" value=\"aeropuerto\">Transfer to Airport<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n\n                <div class=\"row mb-3\">\n                    <div class=\"col-md-6 fieldInputtest\">\n                            <label class=\"titleForm\" for=\"origin\">Origin<\/label>\n                            <input class=\"origin readonly-input\" type=\"text\" id=\"origin\" name=\"origin\" value=\"CUN - Aeropuerto Internacional Canc\u00fan\" placeholder=\"CUN - Aeropuerto Internacional Canc\u00fan\" required aria-required=\"true\" aria-autocomplete=\"list\" readonly=\"true\">\n                            <div id=\"origin-autocomplete\" class=\"autocomplete-suggestions\" role=\"listbox\" aria-labelledby=\"origin\"><\/div>\n                        <\/div>\n\n                        <div class=\"col-md-6 fieldInputtest\">\n                            <label class=\"titleForm\" for=\"destination\">Destination:<\/label>\n                            <input class=\"destination\" type=\"text\" id=\"destination\" name=\"destination\" placeholder=\"Search your Hotel . . .\" required aria-required=\"true\" aria-autocomplete=\"list\">\n                            <div id=\"destination-autocomplete\" class=\"autocomplete-suggestions\" role=\"listbox\" aria-labelledby=\"destination\"><\/div>\n                        <\/div>\n\n                   <div class=\"col-md-6\">\n                       <label class=\"titleForm\" for=\"arrival-date\">Arrival date<\/label>\n                       <input type=\"date\" id=\"arrival-date\" name=\"arrival-date\" class=\"form-control\" required aria-required=\"true\" min=\"2026-05-07\" aria-describedby=\"arrival-description\">\n                       <div id=\"arrival-description\" class=\"text-danger d-none\">Arrival date is required, please.<\/div>\n\n                   <\/div>\n                   <div class=\"col-md-6\">\n                       <label class=\"titleForm\" for=\"return-date\">Departure date:<\/label>\n                       <input type=\"date\" id=\"return-date\" name=\"return-date\" class=\"form-control\" min=\"2026-05-08\" aria-describedby=\"return-description\">\n                       <div id=\"return-description\" class=\"text-danger d-none\">For your safe return, please.<\/div>\n                   <\/div>\n                <\/div>\n\n                <div class=\"row mb-3\">\n                    <div class=\"col-md-6\">\n                        <label class=\"titleForm\" for=\"adults\">Adults:<\/label>\n                        <input type=\"number\" id=\"adults\" name=\"adults\" class=\"form-control\" min=\"1\" required aria-required=\"true\">\n                    <\/div>\n\n                    <div class=\"col-md-6\">\n                        <label class=\"titleForm\" for=\"children\">Children:<\/label>\n                        <input type=\"number\" id=\"children\" name=\"children\" class=\"form-control\" min=\"0\" required aria-required=\"true\">\n                    <\/div>\n                <\/div>\n\n                <input type=\"submit\" name=\"submit_reservation\" value=\"Search\" class=\"btn btn-primary\" onclick=\"confirmClearCart()\">\n\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"en_us\"\/><\/form>\n        <\/div>\n    <\/div>\n\n    \n\n    <script>\n        document.addEventListener('DOMContentLoaded', function () {\n            const tripTypeSelect = document.getElementById(\"trip-type\");\n            const destinationInput = document.getElementById(\"destination\");\n            const originInput = document.getElementById(\"origin\");\n            const autocompleteContainer = document.getElementById(\"destination-autocomplete\");\n            const originAutocompleteContainer = document.getElementById(\"origin-autocomplete\");\n\n            let jsonData = []; \/\/ Initialize an empty array to store hotel data\n\n            \/\/ Fetch the hotel data from the API\n            fetch('https:\/\/surfingontheroad.com\/wp-content\/plugins\/transport-reservation\/zonas.json')\n                .then(response => response.json())\n                .then(zonasData => {\n                    jsonData = zonasData; \/\/ Store the fetched data in the jsonData variable\n\n                    \/\/ Event listener for trip type selection changes\n                    tripTypeSelect.addEventListener(\"change\", function () {\n                        const selectedValue = this.value;\n\n                        \/\/ Reset the labels and values for origin and destination\n                        document.querySelector('label[for=\"origin\"]').textContent = \"Origen:\";\n                        originInput.value = \"\";\n                        destinationInput.value = \"\";\n\n                        \/\/ Lock and gray out the origin and destination fields based on selected trip type\n                        if (selectedValue === \"redondo\" || selectedValue === \"sencillo\") {\n                            originInput.readOnly = true;\n                            originInput.placeholder = \"CUN - Aeropuerto Internacional Canc\u00fan\"; \/\/ Reset the placeholder for Origen\n                            originInput.classList.add(\"readonly-input\");\n\n                            destinationInput.readOnly = false; \/\/ Allow searching for hotels\n                            destinationInput.classList.remove(\"readonly-input\");\n                        } else if (selectedValue === \"aeropuerto\") {\n                            originInput.readOnly = false;\n                            originInput.placeholder = \"Busca tu Hotel\"; \/\/ Update the placeholder for Origen\n                            originInput.classList.remove(\"readonly-input\");\n                            destinationInput.readOnly = true;\n                            destinationInput.value = \"CUN - Aeropuerto Internacional Canc\u00fan\"; \/\/ Set default value for Destino\n                            destinationInput.classList.add(\"readonly-input\");\n                        } else {\n                            originInput.readOnly = false;\n                            originInput.placeholder = \"CUN - Aeropuerto Internacional Canc\u00fan\"; \/\/ Reset the placeholder for Origen\n                            originInput.classList.remove(\"readonly-input\");\n                            destinationInput.readOnly = false;\n                            destinationInput.classList.remove(\"readonly-input\");\n                        }\n\n                        \/\/ Hide all description elements\n                        document.querySelectorAll('.text-danger').forEach(function (descriptionElement) {\n                            descriptionElement.classList.add('d-none');\n                        });\n\n                        \/\/ Make both date fields readonly by default\n                        document.getElementById(\"arrival-date\").readOnly = true;\n                        document.getElementById(\"return-date\").readOnly = true;\n\n                        if (selectedValue === \"aeropuerto\") {\n                            \/\/ Show the return date description for \"Transfer Aeropuerto\"\n                            document.getElementById(\"return-description\").classList.remove('d-none');\n                            \/\/ Make the return date field editable\n                            document.getElementById(\"return-date\").readOnly = false;\n                        } else if (selectedValue === \"redondo\") {\n                            \/\/ Show both arrival and return date descriptions for \"Redondo\"\n                            document.getElementById(\"arrival-description\").classList.remove('d-none');\n                            document.getElementById(\"return-description\").classList.remove('d-none');\n                            \/\/ Make both date fields editable for \"Redondo\"\n                            document.getElementById(\"arrival-date\").readOnly = false;\n                            document.getElementById(\"return-date\").readOnly = false;\n                        } else if (selectedValue === \"sencillo\") {\n                            \/\/ Show only the arrival date description for \"Transfer Hotel\"\n                            document.getElementById(\"arrival-description\").classList.remove('d-none');\n                            \/\/ Make the arrival date field editable for \"Transfer Hotel\"\n                            document.getElementById(\"arrival-date\").readOnly = false;\n                        }\n                    });\n\n\n\n                    \/\/ Event listener for input changes\n                    destinationInput.addEventListener(\"input\", function () {\n                        const inputValue = this.value.toLowerCase();\n                        let suggestions = [];\n\n                        if (inputValue.length >= 15) {\n                            \/\/ Show full list as you continue typing\n                            suggestions = jsonData;\n                        } else {\n                            \/\/ Show suggestions that match the first 12 characters\n                            suggestions = jsonData.filter(item => item.nombreHotel.toLowerCase().startsWith(inputValue));\n                        }\n\n                        \/\/ Clear previous suggestions\n                        autocompleteContainer.innerHTML = \"\";\n\n                        \/\/ Add new suggestions to the autocomplete container\n                        suggestions.forEach(item => {\n                            const suggestionElement = document.createElement(\"div\");\n                            suggestionElement.textContent = item.nombreHotel;\n                            suggestionElement.classList.add(\"autocomplete-suggestion\");\n\n                            suggestionElement.addEventListener(\"click\", function () {\n                                \/\/ Set the selected suggestion as the input value\n                                destinationInput.value = item.nombreHotel;\n                                autocompleteContainer.innerHTML = \"\";\n                            });\n\n                            autocompleteContainer.appendChild(suggestionElement);\n                        });\n                    });\n\n                    \/\/ Event listener to close the autocomplete container when clicking elsewhere on the page\n                    document.addEventListener(\"click\", function (event) {\n                        if (event.target !== destinationInput) {\n                            autocompleteContainer.innerHTML = \"\";\n                        }\n                    });\n\n                    \/\/ Event listener for input changes for origin when \"Transfer Aeropuerto\" is selected\n                    originInput.addEventListener(\"input\", function () {\n                        const inputValue = this.value.toLowerCase();\n                        let suggestions = [];\n\n                        if (inputValue.length <= 5) {\n                            \/\/ Show suggestions that match the first two characters\n                            suggestions = jsonData.filter(item => item.nombreHotel.toLowerCase().startsWith(inputValue));\n                        } else {\n                            \/\/ Show full list as you continue typing\n                            suggestions = jsonData;\n                        }\n\n                        \/\/ Clear previous suggestions\n                        originAutocompleteContainer.innerHTML = \"\";\n\n                        \/\/ Add new suggestions to the autocomplete container\n                        suggestions.forEach(item => {\n                            const suggestionElement = document.createElement(\"div\");\n                            suggestionElement.textContent = item.nombreHotel;\n                            suggestionElement.classList.add(\"autocomplete-suggestion\");\n\n                            suggestionElement.addEventListener(\"click\", function () {\n                                \/\/ Set the selected suggestion as the input value\n                                originInput.value = item.nombreHotel;\n                                originAutocompleteContainer.innerHTML = \"\";\n                            });\n\n                            originAutocompleteContainer.appendChild(suggestionElement);\n                        });\n                    });\n\n                    \/\/ Event listener to close the autocomplete container for origin when clicking elsewhere on the page\n                    document.addEventListener(\"click\", function (event) {\n                        if (event.target !== originInput) {\n                            originAutocompleteContainer.innerHTML = \"\";\n                        }\n                    });\n                });\n        });\n    <\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b9edc2 order-4 elementor-widget elementor-widget-shortcode\" data-id=\"3b9edc2\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Transportaci\u00f3n Redondo \u2022 Hotel \u2022 Aeropuerto CUN PRECIOS\u00a0 EN USD Las reservaciones de transporte en nuestra plataforma web, deber\u00e1n realizarse con 12\u00a0hrs de anticipaci\u00f3n. Cont\u00e1ctanos por WhatsApp para reservaciones express. \u00bfNo encuentras tu Hotel, o necesitas un Express Transfer? cont\u00e1ctanos por WhatsApp<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":542,"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":1818,"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/pages\/14\/revisions\/1818"}],"wp:attachment":[{"href":"https:\/\/surfingontheroad.com\/en_us\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}