{"id":3193,"date":"2026-04-28T21:27:23","date_gmt":"2026-04-28T19:27:23","guid":{"rendered":"https:\/\/rentalcarsystem.com\/booking\/booking-process\/"},"modified":"2026-10-01T13:41:29","modified_gmt":"2026-10-01T11:41:29","slug":"booking-process","status":"publish","type":"rk_rental_page","link":"https:\/\/demo.rentoking.com\/es\/booking\/booking-process\/","title":{"rendered":"Booking Process"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3193\" class=\"elementor elementor-3193\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2115565 e-flex e-con-boxed e-con e-parent\" data-id=\"2115565\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-575453c elementor-widget elementor-widget-text-editor\" data-id=\"575453c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h1 class=\"text-white mb-2\">Booking process<\/h1><p>A simple and secure way to get on the road.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-63819a19 e-flex e-con-boxed e-con e-parent\" data-id=\"63819a19\" 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-2b173a77 elementor-widget elementor-widget-shortcode\" data-id=\"2b173a77\" 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\"><div id=\"rentoking-search-results-877773\" class=\"rentoking-app rentoking-booking-process\"\r\n     data-rental-class-id=\"0\"\r\n     data-location-id=\"0\" data-display-mode=\"list\">\r\n    <v-app v-cloak class=\"search-results\" theme=\"light\">\r\n        <v-layout v-show=\"displayProcess\" class=\"rounded rounded-md border page-wrapper\"\r\n                  style=\"--v-layout-top: 0; max-height: max-content\"\r\n                  :style=\"display.mdAndDown || navDrawer || step > 1 ? 'overflow: inherit' : ''\">\r\n            <div class=\"drawer-handle\" v-if=\"display.mdAndDown && step > 1 && !navDrawer\" @click=\"navDrawer=true\">\r\n                <v-icon size=\"33\">mdi-drag-vertical<\/v-icon>\r\n            <\/div>\r\n            <v-navigation-drawer :width=\"step === 1 ? 260 : 340\"\r\n                                 v-if=\"didSearch && (step > 1 || hasAvailableFilters)\"\r\n                                 :temporary=\"step === 1 && display.mdAndDown\"\r\n                                 :class=\"'process-nav' + (!navDrawer ? ' d-none' : '' )\"\r\n                                 v-model=\"navDrawer\">\r\n                <div v-show=\"step === 1\">\r\n                    <v-select\r\n                            v-if=\"availableFilters.priceRanges.max > availableFilters.priceRanges.min\"\r\n                            class=\"px-4 mt-6 pb-2\"\r\n                            density=\"comfortable\"\r\n                            variant=\"outlined\"\r\n                            v-model=\"sortBy\"\r\n                            :items=\"sortOptions\"\r\n                            item-title=\"label\"\r\n                            item-value=\"value\"\r\n                            label=\"Ordenar por\"\r\n                            hide-details\r\n                    ><\/v-select>\r\n                    <v-skeleton-loader v-for=\"item in 3\" type=\"text\" v-if=\"searchLoading\"\r\n                                       class=\"mt-3\"><\/v-skeleton-loader>\r\n                    <v-list nav v-else-if=\"rentalClasses.length && hasAvailableFilters\">\r\n                        <v-list-item v-if=\"availableFilters.priceRanges.max > availableFilters.priceRanges.min\">\r\n                            <v-divider class=\"mb-4 mt-0\"><\/v-divider>\r\n                            <div class=\"text-uppercase mb-2\">\r\n                                <small>\r\n                                    <b>\r\n                                        Rango de precios                                        (por d\u00eda)\r\n                                    <\/b>\r\n                                <\/small>\r\n                            <\/div>\r\n                            <v-range-slider\r\n                                    hide-details\r\n                                    class=\"px-1\"\r\n                                    color=\"primary\"\r\n                                    v-model=\"filters.price_range\"\r\n                                    :min=\"availableFilters.priceRanges.min\"\r\n                                    :max=\"availableFilters.priceRanges.max\"\r\n                                    :step=\"priceRangeStep\"\r\n                                    thumb-label\r\n                            >\r\n                                <template v-slot:thumb-label=\"{ modelValue }\">\r\n                                    {{ helpers.formatCurrency(modelValue, selectedCurrency) }}\r\n                                <\/template>\r\n                            <\/v-range-slider>\r\n                            <div class=\"d-flex justify-space-between\">\r\n                                <div>\r\n                                    {{ helpers.formatCurrency(availableFilters.priceRanges.min, selectedCurrency) }}\r\n                                <\/div>\r\n                                <div>\r\n                                    {{ helpers.formatCurrency(availableFilters.priceRanges.max, selectedCurrency) }}\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/v-list-item>\r\n                        <v-list-item v-if=\"availableFilters.bodyTypes.length > 1\">\r\n                            <v-divider class=\"mt-1 mb-4\"><\/v-divider>\r\n                            <div class=\"text-uppercase mb-2\">\r\n                                <small><b>Carrocer\u00eda<\/b><\/small>\r\n                            <\/div>\r\n                            <v-checkbox\r\n                                    density=\"compact\"\r\n                                    v-for=\"item in facetedFilters.bodyTypes\"\r\n                                    :key=\"item.value\"\r\n                                    v-model=\"filters.body_type\"\r\n                                    :value=\"item.value\"\r\n                                    :disabled=\"item.disabled\"\r\n                                    hide-details\r\n                            >\r\n                                <template #label>\r\n                                    {{item.label}}&nbsp;<small>({{item.count}})<\/small>\r\n                                <\/template>\r\n                            <\/v-checkbox>\r\n                        <\/v-list-item>\r\n                        <v-list-item v-if=\"availableFilters.transmissions.length > 1\">\r\n                            <v-divider class=\"mt-1 mb-4\"><\/v-divider>\r\n                            <div class=\"text-uppercase mb-2\">\r\n                                <small><b>Transmisi\u00f3n<\/b><\/small>\r\n                            <\/div>\r\n                            <v-checkbox\r\n                                    density=\"compact\"\r\n                                    v-for=\"item in facetedFilters.transmissions\"\r\n                                    :key=\"item.value\"\r\n                                    v-model=\"filters.transmission\"\r\n                                    :value=\"item.value\"\r\n                                    :disabled=\"item.disabled\"\r\n                                    hide-details\r\n                            >\r\n                                <template #label>\r\n                                    {{item.label}}&nbsp;<small>({{item.count}})<\/small>\r\n                                <\/template>\r\n                            <\/v-checkbox>\r\n                        <\/v-list-item>\r\n                        <v-list-item v-if=\"availableFilters.passengers.length > 1\">\r\n                            <v-divider class=\"mt-1 mb-4\"><\/v-divider>\r\n                            <div class=\"text-uppercase mb-2\">\r\n                                <small><b>Pasajeros<\/b><\/small>\r\n                            <\/div>\r\n                            <v-checkbox\r\n                                    density=\"compact\"\r\n                                    v-for=\"item in facetedFilters.passengers\"\r\n                                    :key=\"item.value\"\r\n                                    v-model=\"filters.passengers\"\r\n                                    :value=\"item.value\"\r\n                                    :disabled=\"item.disabled\"\r\n                                    hide-details\r\n                            >\r\n                                <template #label>\r\n                                    {{item.label}}&nbsp;<small>({{item.count}})<\/small>\r\n                                <\/template>\r\n                            <\/v-checkbox>\r\n                        <\/v-list-item>\r\n                        <v-list-item v-if=\"availableFilters.minDriverAges.length > 1\">\r\n                            <v-divider class=\"mt-1 mb-4\"><\/v-divider>\r\n                            <div class=\"text-uppercase mb-2\">\r\n                                <small><b>Edad m\u00ednima del conductor<\/b><\/small>\r\n                            <\/div>\r\n                            <v-checkbox\r\n                                    density=\"compact\"\r\n                                    v-for=\"item in facetedFilters.minDriverAges\"\r\n                                    :key=\"item.value\"\r\n                                    v-model=\"filters.min_driver_age\"\r\n                                    :value=\"item.value\"\r\n                                    :disabled=\"item.disabled\"\r\n                                    hide-details\r\n                            >\r\n                                <template #label>\r\n                                    {{item.label}}&nbsp;<small>({{item.count}})<\/small>\r\n                                <\/template>\r\n                            <\/v-checkbox>\r\n                        <\/v-list-item>\r\n                        <v-list-item v-if=\"availableFilters.fuelTypes.length > 1\">\r\n                            <v-divider class=\"mt-1 mb-4\"><\/v-divider>\r\n                            <div class=\"text-uppercase mb-2\">\r\n                                <small><b>Combustible<\/b><\/small>\r\n                            <\/div>\r\n                            <v-checkbox\r\n                                    density=\"compact\"\r\n                                    v-for=\"item in facetedFilters.fuelTypes\"\r\n                                    :key=\"item.value\"\r\n                                    v-model=\"filters.fuel_type\"\r\n                                    :value=\"item.value\"\r\n                                    :disabled=\"item.disabled\"\r\n                                    hide-details\r\n                            >\r\n                                <template #label>\r\n                                    {{item.label}}&nbsp;<small>({{item.count}})<\/small>\r\n                                <\/template>\r\n                            <\/v-checkbox>\r\n                        <\/v-list-item>\r\n                        <v-list-item v-if=\"hasActiveFilters\">\r\n                            <v-divider class=\"mt-1 mb-4\"><\/v-divider>\r\n                            <v-btn\r\n                                    block\r\n                                    variant=\"elevated\"\r\n                                    density=\"comfortable\"\r\n                                    color=\"secondary\"\r\n                                    @click=\"resetFilters\"\r\n                            >\r\n                                Borrar filtros                            <\/v-btn>\r\n                        <\/v-list-item>\r\n                    <\/v-list>\r\n                <\/div>\r\n                <div v-show=\"step > 1\" class=\"px-5 mt-3 mt-lg-0\">\r\n                    <div class=\"d-flex justify-space-between search-timeline-header pt-lg-3\">\r\n                        <div>\r\n                            <v-card-title class=\"px-0\">\r\n                                Resumen                            <\/v-card-title>\r\n                            <v-card-subtitle class=\"px-0 mb-5 mb-lg-7\" v-if=\"bookingData.booking_id > 0\">\r\n                                {{ editingBookingText }}\r\n                            <\/v-card-subtitle>\r\n                        <\/div>\r\n                        <div v-if=\"rentalClasses.length || bookingData.rental_class_id > 0\"\r\n                             class=\"search-timeline-toggle text-right mt-3\">\r\n                            <v-btn v-if=\"selectedFormOrTimeline !== 'form'\" variant=\"text\" icon=\"mdi-form-select\"\r\n                                   density=\"compact\" color=\"black\"\r\n                                   @click=\"selectedFormOrTimeline = 'form'\"><\/v-btn>\r\n                            <v-btn v-else density=\"compact\" variant=\"text\" color=\"black\" icon=\"mdi-close\"\r\n                                   @click=\"selectedFormOrTimeline = 'timeline'\"><\/v-btn>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <v-expand-transition>\r\n                        <v-form ref=\"rentoking_search_form\" v-show=\"formOrTimeline('navbar') === 'form'\"\r\n                                class=\"w-100 mb-6 booking-process-search-form\">\r\n                            <v-row class=\"px-0 justify-center\">\r\n                                <v-col cols=\"12\" v-for=\"(field, index) in searchFields\"\r\n                                       :key=\"'option_col_' + index\" class=\"pb-3 flex-grow-1\">\r\n                                    <dynamic-input\r\n                                            :ref=\"'option_' + field.id\"\r\n                                            :option=\"field\"\r\n                                            hide-details\r\n                                            buttons-variant=\"elevated\"\r\n                                            variant=\"outlined\"\r\n                                            density=\"comfortable\"\r\n                                            v-model=\"field.value\"\r\n                                                                                            hide-icon\r\n                                                                                        :props=\"helpers.getRequiredProps(field.use, searchFields)\"\r\n                                            @update:model-value=\"onSearchUpdate(field)\"\r\n                                    ><\/dynamic-input>\r\n                                <\/v-col>\r\n                                <v-col cols=\"12\" class=\"flex-grow-1 pb-5\">\r\n                                    <v-btn class=\"search-form-submit\" @click=\"handleSubmit()\"\r\n                                           color=\"secondary\" block\r\n                                           density=\"comfortable\"\r\n                                           variant=\"elevated\"\r\n                                           :loading=\"searchLoading\">\r\n                                        Buscar                                    <\/v-btn>\r\n                                <\/v-col>\r\n                            <\/v-row>\r\n                        <\/v-form>\r\n                    <\/v-expand-transition>\r\n                    <div v-show=\"formOrTimeline('navbar') === 'timeline'\">\r\n                            <v-timeline dot-color=\"secondary\" align=\"start\" side=\"end\" density=\"compact\" class=\"w-100\">\n        <!-- Pickup -->\n        <v-timeline-item\n                fill-dot\n                :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-' + summary.pickup_location_icon\">\n            <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n                <small>Recogida<\/small>\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\" v-if=\"getFieldById('pickup_location_id')\">\n                {{ summary.pickup_location_title }}\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\">\n                {{ summary.print_pickup_date }}\n            <\/v-card-item>\n        <\/v-timeline-item>\n        <!-- Return -->\n        <v-timeline-item\n                fill-dot\n                :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-' + summary.return_location_icon\">\n            <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n                <small>Devoluci\u00f3n<\/small>\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\" v-if=\"getFieldById('return_location_id')\">\n                {{ summary.return_location_title }}\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\">\n                {{ summary.print_return_date }}\n            <\/v-card-item>\n        <\/v-timeline-item>\n        <!-- Duration -->\n        <v-timeline-item\n                fill-dot\n                :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-calendar-range'\">\n            <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n                <small>Duraci\u00f3n<\/small>\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\">\n                {{ summary.print_booking_duration_short }}\n            <\/v-card-item>\n        <\/v-timeline-item>\n    <\/v-timeline>                    <\/div>\r\n                    <v-timeline dot-color=\"secondary\" side=\"end\" density=\"compact\" class=\"w-100\">\n    <v-timeline-item fill-dot :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-car'\"\n                     v-if=\"summary.rental_class?.details\" class=\"w-100\">\n        <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n            <small>Clase de alquiler<\/small><\/v-card-item>\n        <v-card-item class=\"pa-0\">\n            <v-skeleton-loader v-if=\"searchLoading\"\n                               type=\"text\"><\/v-skeleton-loader>\n            <table v-else class=\"w-100\">\n                <tbody>\n                <tr>\n                    <td class=\"pr-3\">\n                        {{ summary.rental_class.details.name_print}}\n\t\t\t\t\t\t                    <\/td>\n                    <td class=\"text-right pl-3\">\n                        <span v-html=\"summary.rental_class.pricing.prices_print.total_discounted\"><\/span>\n\t\t\t\t\t\t                    <\/td>\n                <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/v-card-item>\n    <\/v-timeline-item>\n    <v-timeline-item fill-dot\n                     :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-shield-half-full'\"\n                     v-if=\"summary.insurance\" class=\"w-100\">\n        <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n            <small>Seguro<\/small><\/v-card-item>\n        <v-card-item class=\"pa-0\">\n            <v-skeleton-loader v-if=\"searchLoading\"\n                               type=\"text\"><\/v-skeleton-loader>\n            <table v-else class=\"w-100\">\n                <tbody>\n                <tr>\n                    <td class=\"pr-3\">\n                        {{ summary.insurance.details.title_print}}\n                    <\/td>\n                    <td class=\"text-right pl-3\"\n                        v-html=\"summary.insurance.pricing.prices_print.total\"><\/td>\n                <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/v-card-item>\n    <\/v-timeline-item>\n    <v-timeline-item fill-dot\n                     v-if=\"summary.extras.length\"\n                     :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-puzzle-outline'\"\n    >\n        <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n            <small>Extras<\/small>\n        <\/v-card-item>\n        <v-card-item class=\"pa-0\">\n            <v-skeleton-loader v-if=\"searchLoading\"\n                               type=\"text\"><\/v-skeleton-loader>\n            <table v-else class=\"w-100\">\n                <tbody>\n                <tr v-for=\"extra in summary.extras\" :key=\"extra.id\">\n                    <td class=\"pr-3\">{{ extra.details.title_print }} <span\n                                v-if=\"extra.qty > 1\">x {{ extra.qty }}<\/span>\n\t\t\t\t\t\t                    <\/td>\n                    <td class=\"text-right pl-3\">\n                        <span v-html=\"extra.pricing.prices_print.multiplied_total\"><\/span>\n\t\t\t\t\t\t                    <\/td>\n                <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/v-card-item>\n    <\/v-timeline-item>\n\t    <v-timeline-item fill-dot\n                     v-if=\"summary.pickup_fee?.amount > 0 || summary.return_fee?.amount > 0 || summary.distance_fee?.price > 0\"\n                     :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-cash-marker'\">\n        <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n            <small>Recargos<\/small><\/v-card-item>\n        <v-card-item class=\"pa-0\">\n            <v-skeleton-loader v-if=\"searchLoading\"\n                               type=\"text,text\"><\/v-skeleton-loader>\n            <table v-else class=\"w-100\">\n                <tbody>\n                <tr v-if=\"summary.pickup_fee?.amount > 0\">\n                    <td class=\"text-left pr-3\">{{ summary.pickup_fee.name }}:<\/td>\n                    <td class=\"text-right pl-3\"\n                        v-html=\"summary.pickup_fee.amount_print\"><\/td>\n                <\/tr>\n                <tr v-if=\"summary.return_fee?.amount > 0\">\n                    <td class=\"text-left pr-3\">{{ summary.return_fee.name }}:<\/td>\n                    <td class=\"text-right pl-3\"\n                        v-html=\"summary.return_fee.amount_print\"><\/td>\n                <\/tr>\n                <tr v-if=\"summary.distance_fee?.price > 0\">\n                    <td class=\"text-left pr-3\">\n                        <b>Tarifa por distancia:<\/b>\n                        {{ summary.distance_fee.distance_print }}\n                    <\/td>\n                    <td v-html=\"summary.distance_fee.price_print\"\n                        class=\"text-right pl-3\"><\/td>\n                <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/v-card-item>\n    <\/v-timeline-item>\n    <v-timeline-item fill-dot\n                     :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-cash'\">\n        <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n            <small>Total<\/small><\/v-card-item>\n        <v-card-item class=\"pa-0\">\n            <v-skeleton-loader v-if=\"searchLoading\"\n                               type=\"text,text,text,text\"><\/v-skeleton-loader>\n            <table v-else class=\"w-100\">\n                <tbody>\n                <tr v-if=\"summary.gross_total > 0 && summary.gross_total < summary.grand_total\">\n                    <td class=\"text-left pr-3\">\n                        Total bruto:\n                    <\/td>\n                    <td class=\"text-right pl-3\">\n                        {{ summary.discounted_gross_total_print}}\n                    <\/td>\n                <\/tr>\n                <tr v-for=\"tax in summary.taxes\">\n                    <td class=\"text-left pr-3\">{{ tax.label }}:<\/td>\n                    <td class=\"text-right pl-3\">{{ tax.total_print }}<\/td>\n                <\/tr>\n                <tr v-if=\"summary.grand_total > 0\">\n                    <td class=\"text-left pr-3\" style=\"font-size: larger;\">\n                        Total:\n                    <\/td>\n                    <td class=\"text-right pl-3\" style=\"font-size: larger;\">\n                        {{ summary.grand_total_print }}\n                    <\/td>\n                <\/tr>\n                <template v-if=\"summary.total_paid > 0\">\n                    <tr>\n                        <td class=\"text-left pr-3\">\n                            Total pagado:\n                        <\/td>\n                        <td class=\"text-right pl-3\">{{ summary.total_paid_print }}<\/td>\n                    <\/tr>\n                    <tr>\n                        <td class=\"text-left pr-3\">\n                            Importe a pagar:\n                        <\/td>\n                        <td class=\"text-right pl-3\">{{ summary.amount_due_print }}<\/td>\n                    <\/tr>\n                <\/template>\n                <tr v-if=\"summary.deposit > 0\">\n                    <td class=\"text-left pr-3\">\n                        Dep\u00f3sito total:\n                    <\/td>\n                    <td class=\"text-right pl-3\">{{ summary.deposit_print }}<\/td>\n                <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/v-card-item>\n    <\/v-timeline-item>\n<\/v-timeline>                <\/div>\r\n            <\/v-navigation-drawer>\r\n            <v-main class=\"process-container d-flex justify-center\">\r\n                <v-stepper v-model=\"step\" class=\"w-100\" elevation=\"0\"\r\n                                        >\r\n                    <v-stepper-header>\r\n                        <v-stepper-item\r\n                                :value=\"1\"\r\n                                color=\"secondary\"\r\n                                :editable=\"step>1\"\r\n                        >\r\n                            Elige tu alquiler                        <\/v-stepper-item>\r\n                        <v-divider><\/v-divider>\r\n                        <v-stepper-item\r\n                                :value=\"2\"\r\n                                color=\"secondary\"\r\n                                :editable=\"bookingData.rental_class_id>0 && step !== 2\"\r\n                        >\r\n                            Selecciona tus complementos                        <\/v-stepper-item>\r\n                        <v-divider><\/v-divider>\r\n                        <v-stepper-item\r\n                                :value=\"3\"\r\n                                color=\"secondary\"\r\n                                :editable=\"bookingData.rental_class_id > 0 && (!insurance_options.length || summary.insurance?.id>0)\"\r\n                        >\r\n                            Tus datos                        <\/v-stepper-item>\r\n                    <\/v-stepper-header>\r\n                    <v-stepper-window class=\"process-stepper mx-5\">\r\n                        <v-stepper-window-item :value=\"1\">\r\n                            <div class=\"w-100 pt-md-4\" ref=\"rentoking_app_bar\">\r\n                                <v-progress-linear v-if=\"!initiated && display.smAndDown\" color=\"secondary\"\r\n                                                   indeterminate><\/v-progress-linear>\r\n                                <div v-if=\"initiated && display.smAndDown\"\r\n                                     class=\"d-flex justify-space-between search-timeline-header\">\r\n                                    <div>\r\n                                        <v-card-title class=\"px-0\">\r\n                                            Resumen                                        <\/v-card-title>\r\n                                        <v-card-subtitle class=\"px-0 mb-5 mb-lg-7\" v-if=\"bookingData.booking_id > 0\">\r\n                                            {{ editingBookingText }}\r\n                                        <\/v-card-subtitle>\r\n                                    <\/div>\r\n                                    <div v-if=\"display.smAndDown && (rentalClasses.length || bookingData.rental_class_id > 0)\"\r\n                                         class=\"search-timeline-toggle text-right mt-3\">\r\n                                        <v-btn v-if=\"selectedFormOrTimeline !== 'form'\" variant=\"text\"\r\n                                               icon=\"mdi-form-select\" density=\"compact\" color=\"black\"\r\n                                               @click=\"selectedFormOrTimeline = 'form'\"><\/v-btn>\r\n                                        <v-btn v-else density=\"compact\" variant=\"text\" color=\"black\"\r\n                                               icon=\"mdi-close\"\r\n                                               @click=\"selectedFormOrTimeline = 'timeline'\"><\/v-btn>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <v-expand-transition>\r\n                                    <v-form ref=\"rentoking_search_form\" v-show=\"initiated && formOrTimeline('main') === 'form'\"\r\n                                            class=\"w-100 mb-6 booking-process-search-form\">\r\n                                        <v-row class=\"px-0 justify-center\">\r\n                                            <v-col cols=\"12\" :sm=\"6\" :lg=\"formLgCols\"\r\n                                                   v-for=\"(field, index) in searchFields\"\r\n                                                   :key=\"'option_col_' + index\" class=\"pb-0 pb-md-1 flex-grow-1\">\r\n                                                <dynamic-input\r\n                                                        :ref=\"'option_' + field.id\"\r\n                                                        :option=\"field\"\r\n                                                        buttons-variant=\"elevated\"\r\n                                                        variant=\"outlined\"\r\n                                                        density=\"comfortable\"\r\n                                                        v-model=\"field.value\"\r\n                                                                                                                    hide-icon\r\n                                                                                                                :props=\"helpers.getRequiredProps(field.use, searchFields)\"\r\n                                                        @update:model-value=\"onSearchUpdate(field)\"\r\n                                                ><\/dynamic-input>\r\n                                            <\/v-col>\r\n                                            <v-col cols=\"12\" :sm=\"6\" :lg=\"formLgCols\" class=\"flex-grow-1 pb-5\">\r\n                                                <v-btn class=\"search-form-submit\" @click=\"handleSubmit(searchTriggerStep)\"\r\n                                                       color=\"secondary\" block\r\n                                                       density=\"comfortable\"\r\n                                                       variant=\"elevated\"\r\n                                                       :loading=\"searchLoading\">\r\n                                                    Buscar                                                <\/v-btn>\r\n                                            <\/v-col>\r\n                                        <\/v-row>\r\n                                    <\/v-form>\r\n                                <\/v-expand-transition>\r\n                                <div v-show=\"formOrTimeline('main') === 'timeline'\">\r\n                                        <v-timeline dot-color=\"secondary\" align=\"start\" side=\"end\" density=\"compact\" class=\"w-100\">\n        <!-- Pickup -->\n        <v-timeline-item\n                fill-dot\n                :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-' + summary.pickup_location_icon\">\n            <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n                <small>Recogida<\/small>\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\" v-if=\"getFieldById('pickup_location_id')\">\n                {{ summary.pickup_location_title }}\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\">\n                {{ summary.print_pickup_date }}\n            <\/v-card-item>\n        <\/v-timeline-item>\n        <!-- Return -->\n        <v-timeline-item\n                fill-dot\n                :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-' + summary.return_location_icon\">\n            <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n                <small>Devoluci\u00f3n<\/small>\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\" v-if=\"getFieldById('return_location_id')\">\n                {{ summary.return_location_title }}\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\">\n                {{ summary.print_return_date }}\n            <\/v-card-item>\n        <\/v-timeline-item>\n        <!-- Duration -->\n        <v-timeline-item\n                fill-dot\n                :icon=\"searchLoading ? 'mdi-loading mdi-spin' : 'mdi-calendar-range'\">\n            <v-card-item class=\"pa-0 text-uppercase font-weight-bold\">\n                <small>Duraci\u00f3n<\/small>\n            <\/v-card-item>\n            <v-card-item class=\"pa-0\">\n                {{ summary.print_booking_duration_short }}\n            <\/v-card-item>\n        <\/v-timeline-item>\n    <\/v-timeline>                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"my-6\">\r\n                                <v-toolbar class=\"px-3\">\r\n                                    <v-btn v-if=\"rentalClasses.length && hasAvailableFilters\"\r\n                                           color=\"black\" class=\"square-button mr-3\"\r\n                                           variant=\"elevated\"\r\n                                           @click=\"navDrawer = !navDrawer\">\r\n                                        <v-icon size=\"large\">mdi-tune<\/v-icon>\r\n                                    <\/v-btn>\r\n                                    <v-btn v-if=\"display.mdAndUp && rentalClasses.length\"\r\n                                           color=\"secondary\" class=\"square-button mr-5\"\r\n                                           variant=\"elevated\"\r\n                                           @click=\"gridMode = !gridMode\">\r\n                                        <v-icon size=\"large\">{{ gridMode ? 'mdi-view-grid' : 'mdi-view-list'}}\r\n                                        <\/v-icon>\r\n                                    <\/v-btn>\r\n                                    <v-toolbar-title class=\"pl-0 ml-0 d-flex\">\r\n                                        <v-icon v-if=\"searchLoading\">mdi-loading mdi-spin<\/v-icon>\r\n                                        <small v-else-if=\"filteredAndSortedRentalClasses.length < rentalClasses.length\">\r\n                                            {{ viewingResultsText }}\r\n                                        <\/small>\r\n                                        <small v-else>\r\n                                            {{ dResultsText }}\r\n                                        <\/small>\r\n                                        <v-icon v-if=\"summary.print_booking_duration_short !== '' && display.mdAndUp\">\r\n                                            mdi-circle-small\r\n                                        <\/v-icon>\r\n                                        <v-chip v-if=\"summary.print_booking_duration_short !== '' && display.mdAndUp\"\r\n                                                variant=\"outlined\"\r\n                                                style=\"border-color: #ababab;\"\r\n                                                label\r\n                                                class=\"ml-1\"\r\n                                        >\r\n                                            <v-icon left class=\"mr-2\">\r\n                                                mdi-calendar-range\r\n                                            <\/v-icon>\r\n                                            {{ summary.print_booking_duration_short }}\r\n                                        <\/v-chip>\r\n                                    <\/v-toolbar-title>\r\n                                    <v-spacer><\/v-spacer>\r\n                                    <v-select v-if=\"currencies.length > 1\"\r\n                                              max-width=\"max-content\" hide-details :items=\"currencies\"\r\n                                              v-model=\"bookingData.currency_id\"\r\n                                              variant=\"outlined\"\r\n                                              density=\"compact\"\r\n                                              label=\"Moneda\"><\/v-select>\r\n                                <\/v-toolbar>\r\n                            <\/div>\r\n                            <div v-if=\"initiated && !didSearch\" class=\"text-center mt-10\">\r\n                                <h3 class=\"text-h5\">\r\n                                    <v-icon class=\"mt-n4\">mdi-arrow-up-left<\/v-icon>\r\n                                    Completa el formulario para obtener resultados                                <\/h3>\r\n                            <\/div>\r\n                            <div v-else-if=\"didSearch && !rentalClasses.length\" class=\"mt-3\">\r\n                                <v-alert type=\"warning\" prominent\r\n                                         title=\"No hay veh\u00edculos disponibles\"\r\n                                         text=\"Por favor, modifica tus criterios de b\u00fasqueda\"\r\n                                ><\/v-alert>\r\n                            <\/div>\r\n                            <div v-else-if=\"didSearch && !filteredAndSortedRentalClasses.length\" class=\"mt-3\">\r\n                                <v-alert type=\"warning\" prominent\r\n                                         title=\"No hay veh\u00edculos disponibles con sus filtros actuales\"\r\n                                         text=\"Borra los filtros para ver todos los resultados.\"\r\n                                ><\/v-alert>\r\n                            <\/div>\r\n                            <template v-else>\r\n                                <v-expand-transition>\r\n                                    <v-alert\r\n                                            variant=\"tonal\"\r\n                                            v-if=\"displayNotAvailableNotice\"\r\n                                            type=\"info\"\r\n                                            class=\"mb-3\"\r\n                                            closable\r\n                                            @click:close=\"displayNotAvailableNotice = false\"\r\n                                    >\r\n                                        El veh\u00edculo solicitado no est\u00e1 disponible para las fechas seleccionadas, pero hemos encontrado otros veh\u00edculos que podr\u00edan interesarte.                                    <\/v-alert>\r\n                                <\/v-expand-transition>\r\n                                <v-row v-if=\"!filteredAndSortedRentalClasses.length && searchLoading\" class=\"mt-3\">\n    <v-col cols=\"12\" :md=\"gridMode ? 6 : 12\" :xl=\"gridMode ? 4 : 12\"\n           v-for=\"item in 6\"\n           class=\"py-3\">\n        <v-card>\n            <v-skeleton-loader v-if=\"gridMode\"\n                               type=\"image, heading, paragraph, heading\"><\/v-skeleton-loader>\n            <v-row align=\"center\" v-else>\n                <v-col cols=\"12\" md=\"8\" class=\"h-100\">\n                    <v-row align=\"center\">\n                        <v-col cols=\"12\" md=\"4\" class=\"pl-6 py-6\">\n                            <v-skeleton-loader\n                                    type=\"image\"\n                                    height=\"160\"\n                            ><\/v-skeleton-loader>\n                        <\/v-col>\n                        <v-col cols=\"12\" md=\"8\">\n                            <v-skeleton-loader\n                                    type=\"heading\"\n                            ><\/v-skeleton-loader>\n                            <v-skeleton-loader\n                                    type=\"paragraph\"\n                            ><\/v-skeleton-loader>\n                        <\/v-col>\n                    <\/v-row>\n                <\/v-col>\n                <v-col cols=\"12\" md=\"4\">\n                    <v-skeleton-loader\n                            type=\"table-row\">\n                    <\/v-skeleton-loader>\n                    <v-skeleton-loader\n                            type=\"text\"\n                            width=\"120\"\n                    ><\/v-skeleton-loader>\n                    <v-skeleton-loader\n                            type=\"heading\"\n                            height=\"48\"\n                            width=\"100%\"\n                    ><\/v-skeleton-loader>\n                <\/v-col>\n            <\/v-row>\n        <\/v-card>\n    <\/v-col>\n<\/v-row>\n<v-row v-else-if=\"filteredAndSortedRentalClasses.length\" align=\"stretch\"\n       class=\"rental-classes-wrapper\">\n    <v-col v-for=\"rentalClass in filteredAndSortedRentalClasses\" cols=\"12\"\n           :md=\"gridMode ? 6 : 12\" :xl=\"gridMode ? 4 : 12\" class=\"rental-class-wrapper\"\n           :key=\"rentalClass.id\">\n        <v-card border-color=\"info\" class=\"rental-class-card d-flex flex-column h-100 px-2 pb-3\" :elevation=\"3\"\n                :loading=\"searchLoading && isSelected(rentalClass.id)\"\n                :variant=\"isSelected(rentalClass.id) ? 'outlined' : 'elevated'\">\n            <v-row :align=\"gridMode ? 'start' : 'center'\">\n                <v-col cols=\"12\" :md=\"gridMode ? '12' : '8'\" :class=\"gridMode ? 'pt-7 pb-0' : ''\">\n                    <v-row class=\"align-center\">\n                        <v-col cols=\"12\" :md=\"gridMode ? '12' : '4'\"\n                               class=\"rental-class-carousel\">\n                            <v-carousel\n                                    v-if=\"rentalClass.details.gallery.length\"\n                                    height=\"auto\"\n                                    :show-arrows=\"false\"\n                                    hide-delimiter-background\n                                    :hide-delimiters=\"rentalClass.details.gallery.length === 1\"\n                            >\n                                <v-carousel-item\n                                        v-for=\"(image, index) in rentalClass.details.gallery\"\n                                        :key=\"'image_' + index\"\n                                >\n                                    <v-img\n                                            :src=\"image.thumbnail\"\n                                            :alt=\"rentalClass.details.name_print\"\n                                            contain\n                                            class=\"mx-auto\"\n                                            height=\"auto\"\n                                            width=\"300\"\n                                            max-width=\"90%\"\n                                    ><\/v-img>\n                                <\/v-carousel-item>\n\n                                <template #prev=\"{ props }\">\n                                    <v-btn icon size=\"small\" variant=\"tonal\" @click=\"props.onClick\">\n                                        <v-icon size=\"x-large\">mdi-chevron-left<\/v-icon>\n                                    <\/v-btn>\n                                <\/template>\n\n                                <template #next=\"{ props }\">\n                                    <v-btn icon size=\"small\" variant=\"tonal\" @click=\"props.onClick\">\n                                        <v-icon size=\"x-large\">mdi-chevron-right<\/v-icon>\n                                    <\/v-btn>\n                                <\/template>\n                            <\/v-carousel>\n                        <\/v-col>\n                        <v-col cols=\"12\" :md=\"gridMode ? '12' : '8'\" :class=\"gridMode ? 'pt-0' : 'px-3 pt-5'\">\n                            <v-card-item class=\"px-2 py-0 rental-class-specs\">\n                                <v-card-title class=\"text-h6\">\n                                    {{ rentalClass.details.name_print }}\n                                <\/v-card-title>\n                                <v-card-subtitle v-if=\"rentalClass.details.body_type_print\" class=\"mb-2\">\n                                    <span class=\"me-1\">{{ rentalClass.details.body_type_print }}<\/span>\n                                <\/v-card-subtitle>\n                                <div class=\"ml-n1\">\n                                    <v-tooltip location=\"top\" v-if=\"rentalClass.details.fuel_type > 0\">\n                                        <template v-slot:activator=\"{ props }\">\n                                            <v-btn v-bind=\"props\" variant=\"text\" size=\"small\"\n                                                   class=\"mb-1 px-1 mr-1\">\n                                                <v-icon class=\"mr-1\"\n                                                        color=\"secondary\"\n                                                        size=\"large\">mdi-gas-station\n                                                <\/v-icon>\n                                                {{ rentalClass.details.fuel_type_print }}\n                                            <\/v-btn>\n                                        <\/template>\n                                        <small>Tipo de combustible<\/small>\n                                    <\/v-tooltip>\n                                    <v-tooltip location=\"top\" v-if=\"rentalClass.details.transmission > 0\">\n                                        <template v-slot:activator=\"{ props }\">\n                                            <v-btn v-bind=\"props\" variant=\"text\" size=\"small\"\n                                                   class=\"mb-1 px-1 mr-1\">\n                                                <v-icon class=\"mr-1\"\n                                                        color=\"secondary\"\n                                                        size=\"large\">mdi-car-shift-pattern\n                                                <\/v-icon>\n                                                {{ rentalClass.details.transmission_print }}\n                                            <\/v-btn>\n                                        <\/template>\n                                        <small>Transmisi\u00f3n<\/small>\n                                    <\/v-tooltip>\n                                    <v-tooltip location=\"top\" v-if=\"rentalClass.details.passengers > 0\">\n                                        <template v-slot:activator=\"{ props }\">\n                                            <v-btn v-bind=\"props\" variant=\"text\" size=\"small\"\n                                                   class=\"mb-1 px-1 mr-1\">\n                                                <v-icon class=\"mr-1\"\n                                                        color=\"secondary\"\n                                                        size=\"large\">mdi-seat-passenger\n                                                <\/v-icon>\n                                                {{ rentalClass.details.passengers_print }}\n                                            <\/v-btn>\n                                        <\/template>\n                                        <small>N\u00famero m\u00e1ximo de pasajeros<\/small>\n                                    <\/v-tooltip>\n                                    <v-tooltip location=\"top\" v-if=\"rentalClass.details.luggage_space > 0\">\n                                        <template v-slot:activator=\"{ props }\">\n                                            <v-btn v-bind=\"props\" variant=\"text\" size=\"small\"\n                                                   class=\"mb-1 px-1 mr-1\">\n                                                <v-icon class=\"mr-1\"\n                                                        color=\"secondary\"\n                                                        size=\"large\">mdi-bag-checked\n                                                <\/v-icon>\n                                                {{ rentalClass.details.luggage_space_print }}\n                                            <\/v-btn>\n                                        <\/template>\n                                        <small>Espacio de equipaje<\/small>\n                                    <\/v-tooltip>\n                                    <v-tooltip location=\"top\" v-if=\"rentalClass.details.doors > 0\">\n                                        <template v-slot:activator=\"{ props }\">\n                                            <v-btn v-bind=\"props\" variant=\"text\" size=\"small\"\n                                                   class=\"mb-1 px-1 mr-1\">\n                                                <v-icon class=\"mr-1\" color=\"secondary\"\n                                                        size=\"large\">\n                                                    mdi-car-door\n                                                <\/v-icon>\n                                                {{ rentalClass.details.doors_print }}\n                                            <\/v-btn>\n                                        <\/template>\n                                        <small>Puertas<\/small>\n                                    <\/v-tooltip>\n                                    <v-tooltip location=\"top\"\n                                               v-if=\"rentalClass.details.fuel_consumption !== ''\">\n                                        <template v-slot:activator=\"{ props }\">\n                                            <v-btn v-bind=\"props\" variant=\"text\" size=\"small\"\n                                                   class=\"mb-1 px-1 mr-1\">\n                                                <v-icon class=\"mr-1\"\n                                                        color=\"secondary\"\n                                                        size=\"large\">mdi-speedometer-slow\n                                                <\/v-icon>\n                                                {{ rentalClass.details.fuel_consumption_print }}\n                                            <\/v-btn>\n                                        <\/template>\n                                        <small>Consumo de combustible<\/small>\n                                    <\/v-tooltip>\n                                    <v-tooltip location=\"top\" v-if=\"rentalClass.details.engine_size > 0\">\n                                        <template v-slot:activator=\"{ props }\">\n                                            <v-btn v-bind=\"props\" variant=\"text\" size=\"small\"\n                                                   class=\"mb-1 px-1 mr-1\">\n                                                <v-icon class=\"mr-1\"\n                                                        color=\"secondary\"\n                                                        size=\"large\">mdi-engine\n                                                <\/v-icon>\n                                                {{ rentalClass.details.engine_size_print }}\n                                            <\/v-btn>\n                                        <\/template>\n                                        <small>Cilindrada del motor<\/small>\n                                    <\/v-tooltip>\n                                <\/div>\n                            <\/v-card-item>\n                            <v-card-item v-if=\"rentalClass.details.short_description_print\"\n                                         class=\"px-2 rental-class-description\">\n                                {{ rentalClass.details.short_description_print }}\n                            <\/v-card-item>\n                            <v-card-item v-if=\"rentalClass.details.features_print\"\n                                         class=\"px-2 pb-0 rental-class-features\">\n                                <v-chip density=\"comfortable\" rounded=\"lg\" class=\"mr-2 mb-2\"\n                                        color=\"secondary\"\n                                        v-for=\"feature in rentalClass.details.features_print.split(', ')\">\n                                    {{ feature }}\n                                <\/v-chip>\n                            <\/v-card-item>\n                        <\/v-col>\n                    <\/v-row>\n                <\/v-col>\n                <v-col cols=\"12\" :md=\"gridMode ? '12' : '4'\"\n                       :class=\"gridMode ? 'pt-0 mt-auto' : 'h-100 pt-5 d-flex flex-column justify-space-between'\">\n                    <v-card-item class=\"px-2 pb-0\">\n                        <v-chip density=\"comfortable\" v-if=\"rentalClass.details.unlimited_mileage\"\n                                color=\"success\" class=\"mr-2 mb-2\" rounded=\"lg\">\n                            Kilometraje ilimitado                        <\/v-chip>\n                        <v-chip density=\"comfortable\" v-else-if=\"rentalClass.details.daily_distance\" color=\"info\" class=\"mr-2 mb-2\" rounded=\"lg\">\n                            {{ rentalClass.details.daily_distance_limit_print }}\n                        <\/v-chip>\n                        <v-chip v-if=\"rentalClass.details.min_driver_age > 0\" density=\"comfortable\" color=\"info\"\n                                class=\"mr-2 mb-2\" rounded=\"lg\">\n                            {{ rentalClass.details.min_driver_age_print }}\n                        <\/v-chip>\n                    <\/v-card-item>\n                    <div class=\"mt-auto\">\n                        <v-divider v-if=\"gridMode\" class=\"border-opacity-25 my-2 mx-3\"><\/v-divider>\n                        <v-row class=\"text-subtitle-1 rental-class-pricing px-2 align-center\">\n                            <v-col cols=\"6\" style=\"font-size: larger;\">\n                                {{ rentalClass.pricing.prices_print.discounted_per_day }} \/\n                                <small>d\u00eda<\/small>\n\t\t\t\t\t\t\t\t                            <\/v-col>\n                            <v-col cols=\"6\" class=\"text-right\">\n                                <small> Total<\/small>\n                                {{ rentalClass.pricing.prices_print.total_discounted }}\n                                <div v-if=\"rentalClass.details.deposit > 0\">\n                                    <small>Dep\u00f3sito<\/small>\n                                    {{ rentalClass.pricing.prices_print.deposit }}\n                                <\/div>\n                                <div v-else>\n                                    Sin dep\u00f3sito                                <\/div>\n                            <\/v-col>\n                        <\/v-row>\n                        <v-card-actions class=\"px-2\">\n                            <v-btn\n                                    variant=\"elevated\"\n                                    density=\"comfortable\"\n                                    class=\"select-rc-btn\"\n                                    :class=\"isSelected(rentalClass.id) ? 'active' : ''\"\n                                    :color=\"isSelected(rentalClass.id) ? 'secondary' : 'primary'\"\n                                    :text=\"buttonText(rentalClass.id, rentalClass.available_count)\"\n                                    @click=\"setRentalClass(parseInt(rentalClass.id))\"\n                                    :disabled=\"searchLoading || !(rentalClass.available_count > 0)\"\n                                    block\n                            ><\/v-btn>\n                        <\/v-card-actions>\n                    <\/div>\n                <\/v-col>\n            <\/v-row>\n        <\/v-card>\n    <\/v-col>\n<\/v-row>                            <\/template>\r\n                        <\/v-stepper-window-item>\r\n                        <v-stepper-window-item :value=\"2\">\r\n                            <v-card class=\"px-xl-3\" variant=\"flat\">\r\n                                <v-card-title class=\"mb-3 pl-0\">\r\n                                    Selecciona tu seguro                                <\/v-card-title>\r\n                                <v-row v-if=\"searchLoading && !insurance_options.length\" class=\"my-3\">\r\n                                    <v-col cols=\"12\" :md=\"6\" :lg=\"4\" v-for=\"item in 3\"\r\n                                           class=\"py-3\">\r\n                                        <v-card border-color=\"info\">\r\n                                            <v-skeleton-loader type=\"image, article, button\"><\/v-skeleton-loader>\r\n                                        <\/v-card>\r\n                                    <\/v-col>\r\n                                <\/v-row>\r\n                                <div v-else-if=\"insurance_options.length\" class=\"insurance_options-wrapper\">\r\n                                        <v-row class=\"insurance-wrapper mt-0 mb-8\">\n        <v-col v-for=\"(insurance, index) in insurance_options\"\n               :key=\"'insurance_' + index\" class=\"insurance-card-wrapper\"\n               cols=\"12\" :md=\"6\" :lg=\"insurance_options.length <= 2 ? 6 : 4\">\n            <div class=\"insurance-card h-100\">\n                <v-card border-color=\"info\" class=\"d-flex h-100 flex-column\" style=\"flex-direction: column\"\n                        :variant=\"isInsuranceSelected(insurance.id) ? 'outlined' : 'elevated'\">\n                    <v-card-title>\n                        {{ insurance.details.title_print }}\n                    <\/v-card-title>\n                    <v-card-subtitle class=\"text-success opacity-100\" v-if=\"insurance.details.reduce_rc_deposit\">\n                        <v-icon>mdi-shield-check-outline<\/v-icon>\n                        Reduce el dep\u00f3sito del veh\u00edculo:\n                        {{ insurance.details.reduce_rc_deposit_percentage_print }}\n                    <\/v-card-subtitle>\n                    <v-card-subtitle v-else>\n                        No reduce el dep\u00f3sito del veh\u00edculo                    <\/v-card-subtitle>\n                    <div v-if=\"insurance.details?.description_print\" class=\"pb-0 px-4 mt-5\"\n                         v-html=\"insurance.details.description_print.replace(\/\\n\/g, '<br>')\"><\/div>\n                    <div class=\"mt-auto\">\n                        <v-divider class=\"border-opacity-50 mt-5 mb-2 mx-3\"><\/v-divider>\n                        <v-card-item>\n                            <v-row>\n                                <v-col class=\"d-flex align-end justify-start\">\n                                    <v-card-title class=\"mr-1\">\n                                        <small>{{ insurance.pricing.prices_print.per_day }}<\/small>\n                                    <\/v-card-title>\n                                    <small class=\"v-card-subtitle\">d\u00eda<\/small>\n                                <\/v-col>\n                                <v-col class=\"d-flex align-end justify-end\">\n                                    <v-card-title class=\"mr-1\">\n                                        <small>{{ insurance.pricing.prices_print.total }}<\/small>\n                                    <\/v-card-title>\n                                    <small class=\"v-card-subtitle\">Total<\/small>\n                                <\/v-col>\n                            <\/v-row>\n                        <\/v-card-item>\n                        <v-card-actions class=\"px-3 pb-3\">\n                            <v-btn :color=\"isInsuranceSelected(insurance.id) ? 'secondary' : 'primary'\"\n                                   :text=\"isInsuranceSelected(insurance.id) ? 'Seleccionado' : 'Seleccionar'\"\n                                   class=\"pa-5\"\n                                   :class=\"isInsuranceSelected(insurance.id) ? 'active' : ''\"\n                                   @click=\"setInsurance(isInsuranceSelected(insurance.id) ? 0 : parseInt(insurance.id))\"\n                                   block\n                                   density=\"comfortable\"\n                                   variant=\"elevated\"\n                            ><\/v-btn>\n                        <\/v-card-actions>\n                    <\/div>\n                <\/v-card>\n            <\/div>\n        <\/v-col>\n    <\/v-row>                                <\/div>\r\n                                <div v-else>\r\n                                    <v-card-title class=\"mb-3\">\r\n                                        No hay opciones de seguro disponibles para la clase de alquiler seleccionada.                                    <\/v-card-title>\r\n                                <\/div>\r\n                                <v-card-title class=\"mb-6 pl-0\">\r\n                                    Selecciona tus extras                                <\/v-card-title>\r\n                                <v-row v-if=\"searchLoading && !extras.length\" class=\"my-3\">\r\n                                    <v-col cols=\"12\" v-for=\"item in 6\"\r\n                                           class=\"py-3\">\r\n                                        <v-card border-color=\"info\">\r\n                                            <v-skeleton-loader type=\"list-item-two-line\"><\/v-skeleton-loader>\r\n                                        <\/v-card>\r\n                                    <\/v-col>\r\n                                <\/v-row>\r\n                                <div v-else-if=\"extras.length\" class=\"extra-wrapper ma-0\">\r\n                                    <div v-for=\"(extra, index) in extras\" :key=\"'extra_' + index\" class=\"px-1\">\n    <v-card border-color=\"info\" class=\"d-flex h-100 flex-column mb-4 py-3\" style=\"flex-direction: column\">\n        <v-row>\n            <v-col cols=\"12\" sm=\"9\" class=\"px-6 pb-0 pb-sm-3 align-center\">\n                <v-row class=\"align-center\">\n                    <v-col cols=\"4\" md=\"auto\">\n                        <v-img v-if=\"extra.details.gallery.length\"\n                               height=\"auto\"\n                               width=\"100\"\n                               class=\"my-3 mx-auto\"\n                               :src=\"extra.details.gallery[0].thumbnail\"\n                        ><\/v-img>\n                    <\/v-col>\n                    <v-col cols=\"8\" md>\n                        <v-card-title class=\"pb-1 pl-0\">\n                            {{ extra.details.title_print }}\n                        <\/v-card-title>\n                        <v-card-item class=\"py-0 pl-0\">\n                            <div v-if=\"extra.details.price_mode === 'day'\">\n                                {{ extra.pricing.prices_print.per_day }}\n                                <small>\/ d\u00eda<\/small>\n                                                                <v-card-subtitle class=\"mt-1\">\n                                    Total:\n                                    {{ extra.pricing.prices_print.total }}\n                                    <span v-if=\"extra.details.deposit !== 0\"> -\n\t\t\t\t\t\t\t\t\t\t\tDep\u00f3sito:\n                                                {{ extra.pricing.prices_print.deposit }}\n\t\t\t\t\t\t\t\t\t\t\t<\/span>\n                                <\/v-card-subtitle>\n                            <\/div>\n                            <div v-else>\n                                <div class=\"d-flex align-end justify-start\">\n                                    <v-card-title class=\"mr-1\">\n                                        {{ extra.pricing.prices_print.total }}\n                                    <\/v-card-title>\n                                    <small class=\"v-card-subtitle\">\u00fanico<\/small>\n                                <\/div>\n                                                            <\/div>\n                        <\/v-card-item>\n                        <v-card-item v-if=\"extra.details?.description_print\" class=\"px-0 pt-0 extra-desc-btn\"\n                                     @click=\"toggleExtraDesc(extra.id)\">\n                            <u v-if=\"!isExtraDescOpen(extra.id)\">\n                                <small>Detalles<\/small> <\/u>\n                            <u v-else> <small>Ver detalles<\/small> <\/u>\n                        <\/v-card-item>\n                    <\/v-col>\n                <\/v-row>\n            <\/v-col>\n            <v-col cols=\"12\" sm=\"3\" class=\"px-8 pt-0 pt-sm-3 justify-items-center justify-items-sm-end\">\n                <v-switch v-if=\"!getExtraSelectedQty(extra.id) || extra.available_count === 1\"\n                          :model-value=\"getExtraSelectedQty(extra.id)\" :true-value=\"1\"\n                          :false-value=\"0\" hide-details :disabled=\"extra.min_count > 0\"\n                          @update:model-value=\"setExtra({ id: parseInt(extra.id), qty: $event })\"\n                          :color=\"getExtraSelectedQty(extra.id) ? 'black' : ''\" inset>\n                <\/v-switch>\n                <v-number-input v-else :disabled=\"searchLoading\" :max-width=\"display.smAndDown ? '100%' : 200\"\n                                bg-color=\"black\" icon-color=\"white\" inset\n                                :min=\"extra.min_count\" :max=\"extra.available_count\" variant=\"outlined\"\n                                class=\"extra-qty-input my-3\"\n                                density=\"compact\" hide-details rounded=\"xl\" style=\"max-width: 96px\"\n                                control-variant=\"split\" :model-value=\"getExtraSelectedQty(extra.id)\"\n                                @update:model-value=\"setExtra({ id: parseInt(extra.id), qty: $event })\"\n                ><\/v-number-input>\n                <div v-if=\"extra.min_count > 0 && extra.available_count === 1\"\n                     class=\"text-caption\">Requerido<\/div>\n                <div v-else-if=\"extra.min_count > 0\" class=\"text-caption\">\n                    {{ extra.min_count }} required                <\/div>\n            <\/v-col>\n        <\/v-row>\n        <v-slide-y-transition>\n            <v-alert v-if=\"isExtraDescOpen(extra.id)\" class=\"mt-3 mx-3 extra-desc\" density=\"compact\">\n                <small>{{ extra.details?.description_print }}<\/small>\n            <\/v-alert>\n        <\/v-slide-y-transition>\n    <\/v-card>\n<\/div>                                <\/div>\r\n                                <div v-else>\r\n                                    <v-card-title class=\"mb-3\">\r\n                                        No hay complementos disponibles para la clase de alquiler seleccionada.                                    <\/v-card-title>\r\n                                <\/div>\r\n                                <div class=\"text-right mt-6\">\r\n                                    <v-btn\r\n                                            size=\"large\"\r\n                                            @click.stop.prevent=\"handleContinueToStep3\"\r\n                                            color=\"secondary\"\r\n                                            class=\"process-btn\"\r\n                                            density=\"comfortable\"\r\n                                            variant=\"elevated\"\r\n                                            :block=\"display.smAndDown\"\r\n                                            :loading=\"confirm_loading || searchLoading\">\r\n                                        Continuar                                    <\/v-btn>\r\n                                <\/div>\r\n                            <\/v-card>\r\n                        <\/v-stepper-window-item>\r\n                        <v-stepper-window-item :value=\"3\">\r\n                            <v-card class=\"px-xl-3\" variant=\"flat\">\r\n                                <v-card-text class=\"pb-0 pt-2\">\r\n                                    <v-form class=\"customer-details-form\">\r\n\t\t\t\t\t\t\t\t\t\t                                        <v-card-title class=\"pl-0\">\r\n\t\t\t\t\t\t\t\t\t\t                                            Introduce tus datos                                        <\/v-card-title>\r\n                                        <v-row class=\"mt-1\">\r\n                                            <template v-for=\"option in customerFields\" :key=\"option.id\">\r\n                                                <div v-if=\"helpers.canViewOption(option.depends_on, customerFields)\"\r\n                                                     :class=\"(option.class || 'v-col-12 v-col-md-6') + ' pb-0'\">\r\n                                                    <dynamic-input\r\n                                                            :ref=\"'option_' + option.id\"\r\n                                                            :option=\"option\"\r\n                                                            density=\"comfortable\"\r\n                                                            variant=\"outlined\"\r\n                                                            buttons-variant=\"elevated\"\r\n                                                                                                                            hide-icon\r\n                                                                                                                        v-model=\"option.value\"\r\n                                                            :props=\"helpers.getRequiredProps(option.use, customerFields)\"\r\n                                                    ><\/dynamic-input>\r\n                                                <\/div>\r\n                                            <\/template>\r\n                                        <\/v-row>\r\n                                    <\/v-form>\r\n                                <\/v-card-text>\r\n\t\t\t\t\t\t\t\t                                <div v-if=\"bookingFields.length\">\r\n                                    <v-card-title class=\"my-3\">\r\n                                        Informaci\u00f3n adicional                                    <\/v-card-title>\r\n                                    <v-card-text>\r\n                                        <v-form class=\"booking-fields-form\">\r\n                                            <v-row>\r\n                                                <template v-for=\"option in bookingFields\" :key=\"option.id\">\r\n                                                    <div v-if=\"helpers.canViewOption(option.depends_on, bookingFields)\"\r\n                                                         :class=\"(option.class || 'v-col-12 v-col-md-6') + ' pb-0'\">\r\n                                                        <dynamic-input\r\n                                                                :ref=\"'option_' + option.id\"\r\n                                                                :option=\"option\"\r\n                                                                density=\"comfortable\"\r\n                                                                hide-details\r\n                                                                variant=\"outlined\"\r\n                                                                buttons-variant=\"elevated\"\r\n                                                                                                                                    hide-icon\r\n                                                                                                                                v-model=\"option.value\"\r\n                                                                :props=\"helpers.getRequiredProps(option.use, bookingFields)\"\r\n                                                        ><\/dynamic-input>\r\n                                                    <\/div>\r\n                                                <\/template>\r\n                                            <\/v-row>\r\n                                        <\/v-form>\r\n                                    <\/v-card-text>\r\n                                <\/div>\r\n                                <v-form\r\n\t\t\t\t\t\t\t\t\t                                        v-if=\"payment_methods.length || currencies.length > 1\"\r\n\t\t\t\t\t\t\t\t\t                                        v-model=\"paymentForm\" ref=\"payment_form\" class=\"payment-form\">\r\n                                    <v-row class=\"justify-center mt-2 pt-3 payment-wrapper-row\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t                                        <v-col cols=\"12\" lg=\"6\" v-if=\"payment_methods.length > 0 || currencies.length > 1\" class=\"py-0\">\r\n\t\t\t\t\t\t\t\t\t\t                                            <v-card variant=\"flat\" class=\"h-100 payment-method-card\">\r\n                                                <v-card-title class=\"my-3\">\r\n                                                    M\u00e9todos de pago*\r\n                                                <\/v-card-title>\r\n                                                <v-card-text class=\"pb-7\">\r\n                                                    <v-radio-group v-model=\"bookingData.payment_method_id\"\r\n                                                                   :rules=\"[v => !!v || 'Requerido']\">\r\n\t\t\t\t\t\t\t\t\t\t                                                        <template v-for=\"(item) in payment_methods\"\r\n                                                                  :key=\"item.value\">\r\n\t\t\t\t\t\t\t\t\t\t                                                            <v-card\r\n                                                                    @click.prevent=\"bookingData.payment_method_id = item.value\"\r\n                                                                    class=\"mb-2 px-1 py-1\"\r\n                                                                    variant=\"outlined\">\r\n                                                                <v-radio\r\n                                                                        :key=\"item.value\"\r\n                                                                        :value=\"item.value\"\r\n                                                                        base-color=\"primary\"\r\n                                                                        variant=\"flat\"\r\n                                                                        :label=\"item.title\"\r\n                                                                        :color=\"bookingData.payment_method_id === item.value ? 'secondary':'primary'\"\r\n                                                                >\r\n                                                                    <template v-slot:label>\r\n                                                                        <div class=\"d-flex justify-space-between w-100 align-center\">\r\n                                                                            <b>{{ item.title }}<\/b>\r\n                                                                            <img :src=\"item.thumbnail\"\r\n                                                                                 v-if=\"item.thumbnail\"\r\n                                                                                 height=\"40px\" width=\"auto\"\/>\r\n                                                                        <\/div>\r\n                                                                    <\/template>\r\n                                                                <\/v-radio>\r\n                                                            <\/v-card>\r\n                                                        <\/template>\r\n                                                    <\/v-radio-group>\r\n                                                    <div v-if=\"currencies.length > 1\" class=\"d-flex align-center\">\r\n                                                        <v-select\r\n                                                                max-width=\"max-content\" min-width=\"100px\"\r\n                                                                hide-details\r\n                                                                :items=\"currencies\"\r\n                                                                v-model=\"bookingData.currency_id\"\r\n                                                                variant=\"outlined\"\r\n                                                                density=\"compact\"\r\n                                                                label=\"Moneda\"><\/v-select>\r\n                                                        <b class=\"ml-2\">Cambiar la moneda para ver otras opciones de pago<\/b>\r\n                                                    <\/div>\r\n                                                <\/v-card-text>\r\n                                            <\/v-card>\r\n                                        <\/v-col>\r\n                                    <\/v-row>\r\n                                <\/v-form>\r\n                                <v-card-actions class=\"justify-content-center flex-column mt-4\">\r\n\t\t\t\t\t\t\t\t\t                                    <v-checkbox v-if=\"termsLoaded\"\r\n                                                :model-value=\"termsAccepted\"\r\n                                                @click.prevent=\"termsDialog = true\"\r\n                                                hide-details\r\n                                                :rules=\"[v => !!v || 'Requerido']\"\r\n                                    >\r\n                                        <template #label>\r\n                                            Acepto los t\u00e9rminos y condiciones                                        <\/template>\r\n                                    <\/v-checkbox>\r\n                                    <v-btn\r\n                                            size=\"large\"\r\n                                            @click=\"handleConfirm\"\r\n                                            color=\"secondary\"\r\n                                            class=\"process-btn my-3 px-5 mt-4\"\r\n                                            :block=\"display.smAndDown\"\r\n                                            density=\"comfortable\"\r\n                                            variant=\"elevated\"\r\n                                            :loading=\"confirm_loading || searchLoading\">\r\n                                        Confirmar                                    <\/v-btn>\r\n                                <\/v-card-actions>\r\n                            <\/v-card>\r\n                        <\/v-stepper-window-item>\r\n                    <\/v-stepper-window>\r\n                <\/v-stepper>\r\n                <alert :alert=\"showAlert\"><\/alert>\r\n            <\/v-main>\r\n        <\/v-layout>\r\n        <v-card v-if=\"!displayProcess\" class=\"mx-auto pa-3 text-center\" width=\"300px\">\r\n            <span v-if=\"bookingData.booking_id>0\">\r\n                {{ loadingBookingS }}\r\n            <\/span>\r\n            <span v-else>Cargando<\/span>\r\n            <v-progress-linear class=\"mt-2\" color=\"secondary\" indeterminate><\/v-progress-linear>\r\n        <\/v-card>\r\n        <v-dialog v-model=\"termsDialog\" max-width=\"800\" v-if=\"termsLoaded\">\r\n            <v-card>\r\n                <v-card-title class=\"pt-4 px-6 pb-6\" v-html=\"termsTitle\"><\/v-card-title>\r\n                <v-card-text class=\"px-6\" style=\"max-height:60vh;overflow:auto;\"\r\n                             v-html=\"termsContent\"><\/v-card-text>\r\n                <v-card-actions class=\"justify-end pa-5\">\r\n                    <v-btn variant=\"elevated\" @click=\"termsDialog = false\"\r\n                           density=\"comfortable\" class=\"px-5\">\r\n                        Cerrar                    <\/v-btn>\r\n                    <v-spacer><\/v-spacer>\r\n                    <v-btn color=\"secondary\" class=\"px-5\" @click=\"acceptTerms\" density=\"comfortable\"\r\n                           variant=\"elevated\">\r\n                        Aceptar                    <\/v-btn>\r\n                <\/v-card-actions>\r\n            <\/v-card>\r\n        <\/v-dialog>\r\n    <\/v-app>\r\n<\/div><\/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},"author":2,"featured_media":0,"template":"","class_list":["post-3193","rk_rental_page","type-rk_rental_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.rentoking.com\/es\/wp-json\/wp\/v2\/rk_rental_page\/3193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.rentoking.com\/es\/wp-json\/wp\/v2\/rk_rental_page"}],"about":[{"href":"https:\/\/demo.rentoking.com\/es\/wp-json\/wp\/v2\/types\/rk_rental_page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.rentoking.com\/es\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":4,"href":"https:\/\/demo.rentoking.com\/es\/wp-json\/wp\/v2\/rk_rental_page\/3193\/revisions"}],"predecessor-version":[{"id":4033,"href":"https:\/\/demo.rentoking.com\/es\/wp-json\/wp\/v2\/rk_rental_page\/3193\/revisions\/4033"}],"wp:attachment":[{"href":"https:\/\/demo.rentoking.com\/es\/wp-json\/wp\/v2\/media?parent=3193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}