{"id":445,"date":"2024-01-23T14:41:10","date_gmt":"2024-01-23T07:41:10","guid":{"rendered":"https:\/\/dichvudulichtaxivienxuyen.com\/?page_id=445"},"modified":"2024-01-23T14:41:10","modified_gmt":"2024-01-23T07:41:10","slug":"dat-xe","status":"publish","type":"page","link":"https:\/\/taxi.123websitedemo.com\/en\/dat-xe\/","title":{"rendered":"Book Now"},"content":{"rendered":"<div class=\"row\"  id=\"row-1768256520\">\n\n\t<div id=\"col-444704222\" class=\"col medium-2 small-12 large-2\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-2127736672\" class=\"col medium-8 small-12 large-8\"  >\n\t\t\t\t<div class=\"col-inner text-center\"  >\n\t\t\t\n\t\t\t\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\">\n    <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?libraries=places&key=AIzaSyC60_Gw6EDpdgXvZojyyl1TaqQTtzL74wU\"><\/script>\n    <link rel=\"stylesheet\" href=\"https:\/\/taxi.123websitedemo.com\/wp-content\/themes\/flatsome-child\/taxi\/jquery.datetimepicker.min.css\">\n    <script src=\"https:\/\/taxi.123websitedemo.com\/wp-content\/themes\/flatsome-child\/taxi\/jquery.datetimepicker.full.min.js\"><\/script>\n    <script src=\"https:\/\/taxi.123websitedemo.com\/wp-content\/themes\/flatsome-child\/taxi\/vn.js\"><\/script>\n    <style>\n\n        #bookcar_form * {\n            box-sizing: border-box;\n        }\n        #bookcar_form form{\n\n            margin-bottom: 2px;\n\n        }\n\n        #bookcar_form{\n            border: 5px solid #D6C201;\n            background-color: #f8f4da;\n\n            border-radius: 8px;\n\n            position: relative;\n\n            display: flex;\n\n            flex-direction: column;\n\n            min-width: 0;\n\n            word-wrap: break-word;\n\n            max-width: 560px;\n\n        }\n\n        #bookcar_form .title_bookcar{\n            text-align: center;\n            background: #F5AA06;\n            border-bottom: 1px solid #ccc;\n\n            font-size: 18px;\n\n            padding: 5px 0 5px 15px;\n\n            color: #fff;\n            text-transform: uppercase;\n            font-weight: bold;\n\n            margin-bottom: 0;\n            z-index: 9999999999999;\n\n        }\n        .input-group-prepend{\n            float:left\n        }\n        #bookcar_form fieldset{\n            border:0;\n            background-color: transparent;\n\n            margin: 0;\n\n            padding: 15px 3px 15px 15px;\n\n        }\n\n        #bookcar_form fieldset .form-group,\n\n        #bookcar_form fieldset .form-row{\n\n            margin-bottom: 6px;\n\n        }\n\n        #bookcar_form fieldset .form-row .col-md-6{\n\n            width: 50%;\n\n            float: left;\n\n        }\n\n        #bookcar_form fieldset .form-group label,\n\n        #bookcar_form fieldset .form-row label{\n            margin-bottom: 10px !important;\n            display: inline-block;\n            margin-top: 5px !important;\n\n            display: inline-block;\n\n            color: #000;\n\n        }\n        .btn-primary-m {\n            color: #fff;\n            background-color: #ffcd00 !important;\n            outline: 0;\n            border:0;\n            border-color: #ffcd00 !important;\n            box-shadow: none;\n        }\n        #bookcar_form fieldset .form-group .input-group{\n\n            border: 1px solid #c6c9d5;\n\n            border-radius: .25rem;\n\n            background-color: #fff;\n\n            box-shadow: inset 0 1px 0 0 rgba(34,34,48,.05);\n\n            -webkit-backface-visibility: hidden;\n\n            backface-visibility: hidden;\n\n            transition: all .2s ease-in-out;\n\n            height: 2.25rem;\n\n            padding: 0 10px;\n\n            overflow: hidden;\n\n            width: 98%;\n\n        }\n\n        #bookcar_form fieldset .form-row input,\n\n        #bookcar_form fieldset .input-group input{\n\n            width: 92%;\n\n            background: #fff;\n\n            height: 2.15rem !important;\n\n            border: none;\n\n            box-shadow: none;\n\n        }\n\n        #bookcar_form fieldset .form-row input{\n\n            border: 1px solid #c6c9d5;\n\n            border-radius: .25rem;\n\n            background-color: #fff;\n\n            box-shadow: inset 0 1px 0 0 rgba(34,34,48,.05);\n\n            height: 2.25rem;\n\n            margin-bottom: 5px;\n\n        }\n\n        #bookcar_form fieldset .form-group .input-group input:focus{\n\n            background: transparent;\n\n            border: none;\n\n            outline: none;\n\n        }\n\n        #bookcar_form input,\n\n        #bookcar_form input:focus{\n\n            outline: none !important;\n\n        }\n\n        #bookcar_form button{\n\n            width: 100%;\n\n            color: #fff;\n\n            background-color: #F5AA06 !important;\n\n            border-color: #ffcd00 !important;\n\n            box-shadow: none;\n\n            padding: 5px 0;\n\n            border-radius: 3px;\n\n            letter-spacing: 0.5px;\n\n            width: 98%;\n\n            z-index: 99;\n            position: relative;\n            display: flex;\n            justify-content: center;\n            float: left;\n\n\n        }\n        #bookcar_form select.form-control{\n            width: 92%;\n            line-height: 33px;\n            border: 0;\n            outline: 0;\n            height: 36px;\n        }\n        #bookcar_form hr{\n\n            margin: 20px 0 15px 0 !important;\n\n            width: 98%;\n\n        }\n        .flatpickr-calendar.open {\n            display: inline-block;\n            z-index: 99999999999;\n        }\n        .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {\n            background: #009355 !important;\n            box-shadow: #009355 0 1px 3px 0 inset !important;\n        }\n        @media screen and (min-width: 767px) {\n            \/*#bookcar_form .title_bookcar {  border-bottom: 1px solid #ed1c24;}*\/\n            \/*#bookcar_form { background: rgba(248, 248, 248, 0.8470588235294118);}*\/\n            #bookcar_form fieldset .form-group, #bookcar_form fieldset .form-row {\n                margin-bottom:0 !important;\n            }\n            #bookcar_form fieldset .form-group label, #bookcar_form fieldset .form-row label {\n                margin-bottom: 0;\n            }\n        }\n        @media screen and (max-width: 600px) {\n            .form-row .col-md-6 {\n                width:100% !important;\n            }\n            .form-group > label {\n                display: none !important;\n            }\n            .hidden-mb{\n                display: none;\n            }\n        }\n    <\/style>\n        <div id=\"bookcar_form\">\n\n        <h3 class=\"title_bookcar\">Book Now<\/h3>\n\n        <form  method=\"post\" action=\"\">\n\n            <fieldset>\n\n                <div class=\"form-group mb-2\">\n\n                    <label for=\"pi1\">Enter the pickup point<\/label>\n\n                    <div class=\"input-group\">\n\n                        <label class=\"input-group-prepend\" for=\"start_address\">\n\n                            <span class=\"input-group-text\" style=\"    background: transparent;                                  border: none;                                  padding-left: 0px; padding-right: 0;\">\n                                <i class=\"fas fa-map-marker-alt\" style=\"color:red\"><\/i>\n                            <\/span>\n\n                        <\/label>\n\n                        <input type=\"text\" class=\"form-control pac-target-input\" id=\"origin-input\" name=\"origin-input\" placeholder=\"Enter the pickup point\" required=\"\" value=\"\" autocomplete=\"off\">\n\n                    <\/div><!-- \/.input-group -->\n\n                <\/div>\n\n                <div class=\"form-group mb-2\">\n\n                    <label for=\"pi2\" class=\"hidden-mb\">Enter pay point<\/label> <!-- .input-group -->\n\n                    <div class=\"input-group\">\n\n                        <label class=\"input-group-prepend\" for=\"end_address\">\n\n                            <span class=\"input-group-text\" style=\"    background: transparent;                                  border: none;                                  padding-left: 0px; padding-right: 0;\"><i class=\"fas fa-map-marker-alt\" style=\"color:blue\"><\/i><\/span>\n\n                        <\/label>\n\n                        <input type=\"text\" class=\"form-control pac-target-input\" name=\"destination-input\" id=\"destination-input\" placeholder=\"Enter pay point\" required=\"\" value=\"\" autocomplete=\"off\">\n\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"form-row mb-2\">\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group mb-2\">\n\n                            <label for=\"pi2\" class=\"hidden-mb\">Service<\/label> <!-- .input-group -->\n\n                            <div class=\"input-group\">\n\n                                <label class=\"input-group-prepend\" for=\"end_address\">\n\n                                    <span class=\"input-group-text\" style=\"    background: transparent;                                          border: none;                                          padding-left: 0px; padding-right: 0;\"><i class=\"fas fa-location-arrow\" style=\"color: green; font-size: 13px;\"><\/i><\/span>\n\n                                <\/label>\n\n                                <select name=\"book_type\" placeholder=\"D\u1ecbch v\u1ee5\" class=\"form-control\" id=\"book_type\" style=\"padding-left: 10px;\">\n                                    <option value=\"one_point\">1 pm<\/option>\n                                    <option value=\"two_point\">2-way car service stays<\/option>\n                                    <option value=\"two_point_than_2days\">2-way pick up and drop off<\/option>\n                                    <!-- <option value=\"4\">2 chi\u1ec1u \u0111\u01b0a \u0111i \u0111\u00f3n v\u1ec1 sau<\/option> -->\n                                <\/select>\n\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group mb-2\">\n\n                            <label for=\"pi2\" class=\"hidden-mb\">Range of vehicle<\/label> <!-- .input-group -->\n\n                            <div class=\"input-group\">\n\n                                <label class=\"input-group-prepend\" for=\"end_address\">\n\n                                    <span class=\"input-group-text\" style=\"    background: transparent;                                          border: none;                                          padding-left: 0px; padding-right: 0;\"><i class=\"fas fa-car\" style=\"color:red\"><\/i><\/span>\n\n                                <\/label>\n\n                                <select name=\"car_type\" class=\"form-control\" id=\"car_type\" style=\"padding-left: 10px;\">\n                                                                            <option value=\"Xe 4 ch\u1ed7\">4 seater car<\/option>\n                                            <option value=\"Xe 7 ch\u1ed7\">7-seat-car<\/option>\n                                            <option value=\"Lo\u1ea1i xe 16 ch\u1ed7\">16-seat car<\/option>\n                                            <option value=\"Lo\u1ea1i xe 29 ch\u1ed7\">29-seat car<\/option>\n                                            <option value=\"Lo\u1ea1i xe 45 ch\u1ed7\">45-seat vehicle<\/option>\n                                    <\/select>\n\n                            <\/div>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"form-row mb-2\">\n\n                    <div class=\"col-md-6\">\n                        <div class=\"form-group mb-2\">\n\n                            <label for=\"pi2\">Date of department<\/label> <!-- .input-group -->\n\n                            <div class=\"input-group\">\n\n                                <label class=\"input-group-prepend\" for=\"end_address\">\n\n                                    <span class=\"input-group-text\" style=\"    background: transparent;                                          border: none;                                          padding-left: 0px; padding-right: 0;\"><i class=\"far fa-calendar-alt\"><\/i><\/span>\n\n                                <\/label>\n\n                                <input id=\"start_date\" placeholder=\"Select travel date\" name=\"start_date\" type=\"text\" class=\"form-control flatpickr-input\"  value=\"\" readonly=\"readonly\" style=\"border:0\">\n\n                            <\/div>\n\n                        <\/div>\n\n\n\n\n\n                    <\/div>\n\n\n\n                    <div class=\"col-md-6 ngay-ve\">\n\n                        <div class=\"form-group mb-2\">\n\n                            <label for=\"pi2\">Return date<\/label> <!-- .input-group -->\n\n                            <div class=\"input-group\">\n\n                                <label class=\"input-group-prepend\" for=\"end_address\">\n\n                                    <span class=\"input-group-text\" style=\"    background: transparent;                                          border: none;                                          padding-left: 0px; padding-right: 0;\"><i class=\"far fa-calendar-alt\"><\/i><\/span>\n\n                                <\/label>\n\n                                <input id=\"end_date\" placeholder=\"Select return date\" name=\"end_date\"  type=\"text\" class=\"form-control flatpickr-input\" value=\"\"  readonly=\"readonly\" style=\"border:0\">\n\n                            <\/div>\n\n                        <\/div>\n\n\n\n                    <\/div>\n\n                <\/div>\n\n\n\n\n\n\n\n\n                <!-- \n                                    <div class=\"form-group\">\n                \n                                        <div class=\"custom-control custom-radio\">\n                \n                                            <input type=\"radio\" id=\"bookType1\" name=\"book_type\" class=\"custom-control-input\" value=\"1\" checked=\"\">\n                \n                                            <label class=\"custom-control-label\" for=\"bookType1\">1 chi\u1ec1u<\/label>\n                \n                                        <\/div>\n                \n                                        <div class=\"custom-control custom-radio\">\n                \n                                            <input type=\"radio\" id=\"bookType2\" name=\"book_type\" class=\"custom-control-input\" value=\"2\">\n                \n                                            <label class=\"custom-control-label\" for=\"bookType2\">2 chi\u1ec1u<\/label>\n                \n                                        <\/div>\n                \n                                    <\/div> -->\n\n                <br>\n\n                <input type=\"hidden\" name=\"start_lat\" id=\"start_lat\" value=\"\">\n\n                <input type=\"hidden\" name=\"start_lng\" id=\"start_lng\" value=\"\">\n\n                <input type=\"hidden\" name=\"end_lat\" id=\"end_lat\" value=\"\">\n\n                <input type=\"hidden\" name=\"end_lng\" id=\"end_lng\" value=\"\">\n\n\n\n                <button class=\"btn-primary-m form-car-btn\" style=\"margin-top: 15px\" type=\"submit\">SEE PRICE<\/button>\n\n            <\/fieldset>\n\n        <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n        \n    <\/div>\n\n    <script>\n        jQuery(document).ready(function ($) {\n            $('.ngay-ve').css('display', 'none');\n            var originPlaceId = null;\n            var destinationPlaceId = null;\n\n            var originInput = document.getElementById('origin-input');\n            var destinationInput = document.getElementById('destination-input');\n\n\n            var originAutocomplete = new google.maps.places.Autocomplete(\n                    originInput, {\n                        placeIdOnly: true\n                    });\n            var destinationAutocomplete = new google.maps.places.Autocomplete(\n                    destinationInput, {\n                        placeIdOnly: true\n                    });\n\n\n            const setupPlaceChangedListener = function (autocomplete, mode) {\n\n\n                autocomplete.addListener('place_changed', function () {\n                    var place = autocomplete.getPlace();\n                    if (!place.place_id) {\n                        console.log(\"Please select an option from the dropdown list.\");\n                        return;\n                    }\n                    if (mode === 'ORIG') {\n                        originPlaceId = place.place_id;\n                    } else {\n                        destinationPlaceId = place.place_id;\n                    }\n\n                });\n\n            };\n\n            setupPlaceChangedListener(originAutocomplete, 'ORIG');\n            setupPlaceChangedListener(destinationAutocomplete, 'DEST');\n            $('#book_type').change(function () {\n                if ($(this).val() == 'one_point')\n                    $('.ngay-ve').css('display', 'none');\n                else\n                    $('.ngay-ve').css('display', 'block');\n            })\n\n            $('.form-car-btn').click(function (event) {\n                event.preventDefault();\n                if (!originPlaceId || !destinationPlaceId)\n                {\n                    alert('Vui l\u00f2ng ch\u1ecdn \u0111\u1ecba \u0111i\u1ec3m kh\u1edfi h\u00e0nh v\u00e0 \u0111i\u1ec3m \u0111\u1ebfn');\n                    return;\n                }\n                if ($('#book_type').val() != 'one_point')\n                {\n                    if ($('#start_date').val() == '' || $('#end_date').val() == '')\n                    {\n                        alert('Vui l\u00f2ng ch\u1ecdn th\u1eddi gian \u0111i v\u00e0 v\u1ec1');\n                        return;\n                    }\n                } else\n                {\n                    if ($('#start_date').val() == '')\n                    {\n                        alert('Vui l\u00f2ng ch\u1ecdn th\u1eddi gian \u0111i');\n                        return;\n                    }\n                }\n\n\n                location.href = `https:\/\/taxi.123websitedemo.com\/en\/chon-xe\/?o=${originPlaceId}&d=${destinationPlaceId}&os=${$('#origin-input').val()}&od=${$('#destination-input').val()}&ed=${$('#start_date').val()}&st=${$('#end_date').val()}&type=${$(\"select[name='book_type']\").val()}&car_type=${$(\"select[name='car_type']\").val()}`;\n            });\n\n\n            jQuery.datetimepicker.setLocale('vi');\n\n            $('#start_date').datetimepicker({\n                format: 'd\/m\/Y H:i',\n                language: 'vi',\n                autoclose: true,\n                todayHighlight: true,\n                timepicker: true,\n                step: 15,\n                focusOnShow: false,\n                ignoreReadonly: true,\n\n            });\n            $('#end_date').datetimepicker({\n                format: 'd\/m\/Y H:i',\n                language: 'vi',\n                autoclose: true,\n                todayHighlight: true,\n                timepicker: true,\n                step: 15,\n                focusOnShow: false,\n                ignoreReadonly: true,\n\n            });\n            \/\/ const startDatePicker = datetimepicker('#start_date', {\n\n            \/\/         });\n\n            \/\/       const endDatePicker = datetimepicker('#end_date', {\n\n            \/\/       });\n\n\n            \/\/ const startTimePicker = flatpickr('#start_time', {\n            \/\/     time_24hr: true,\n            \/\/     noCalendar: true,\n            \/\/     dateFormat: \"Y-m-d H:i\",\n            \/\/     enableTime: true,\n            \/\/     onClose: function (selectedDates, dateStr, instance) {\n            \/\/         if (startDatePicker.input.value == endDatePicker.input.value) {\n            \/\/             endTimePicker.set('minTime', dateStr)\n            \/\/         }\n            \/\/     },\n            \/\/ });\n\n            \/\/ const endTimePicker = flatpickr('#end_time', {\n            \/\/     time_24hr: true,\n            \/\/     noCalendar: true,\n            \/\/     dateFormat: \"Y-m-d H:i\",\n            \/\/     enableTime: true,\n            \/\/     onClose: function (selectedDates, dateStr, instance) {\n            \/\/         if (startDatePicker.input.value == endDatePicker.input.value) {\n            \/\/             startTimePicker.set('maxTime', dateStr)\n            \/\/         }\n            \/\/     },\n            \/\/ });\n        });\n\n    <\/script>\n\n    \n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-695360982\" class=\"col medium-2 small-12 large-2\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/taxi.123websitedemo.com\/en\/wp-json\/wp\/v2\/pages\/445"}],"collection":[{"href":"https:\/\/taxi.123websitedemo.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taxi.123websitedemo.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taxi.123websitedemo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taxi.123websitedemo.com\/en\/wp-json\/wp\/v2\/comments?post=445"}],"version-history":[{"count":0,"href":"https:\/\/taxi.123websitedemo.com\/en\/wp-json\/wp\/v2\/pages\/445\/revisions"}],"wp:attachment":[{"href":"https:\/\/taxi.123websitedemo.com\/en\/wp-json\/wp\/v2\/media?parent=445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}