src/DcSiteBundle/Resources/views/Modules/service/widget-order-to.html.twig line 1

Open in your IDE?
  1. <link rel="stylesheet" href="{{ asset('bundles/dcsite/css/modules/service/widget-order-to.css') }}">
  3. <section class="recording__service elements__style-form-el" v-if="isInit" id="onlineService">
  4.     <div class="container">
  5.         <div class="row align-items-center">
  6.             <div class="col-sm-12 col-md-8 col-lg-8 col-xl-9">
  7.                 <p class="section-title credit_widget-title">{{ 'pages.header.order_to'|trans({},'dc_nissan') }}</p>
  8.                 <p class="recording__service-subtitle">{{ 'pages.services.get_to.eco_time_title-2'|trans({}, 'dc_ford') }}</p>
  9.             </div>
  10.             <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 recording__service-head-btn">
  11.                 <button class="btn btn-outline-primary" data-toggle="modal" data-bs-toggle="modal" data-bs-toggle="modal" data-target="#serviceVideo" data-bs-target="#serviceVideo">
  12.                     <svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  13.                         <path d="M10 12L15 9L10 6V12Z" stroke="#FF0022" stroke-width="1.5" stroke-linecap="round"
  14.                               stroke-linejoin="round"/>
  15.                         <path d="M22.5406 3.42C22.4218 2.94541 22.1799 2.51057 21.8392 2.15941C21.4986 1.80824 21.0713 1.55318 20.6006 1.42C18.8806 1 12.0006 1 12.0006 1C12.0006 1 5.12057 1 3.40057 1.46C2.92982 1.59318 2.50255 1.84824 2.16192 2.19941C1.82129 2.55057 1.57936 2.98541 1.46057 3.46C1.14579 5.20556 0.991808 6.97631 1.00057 8.75C0.989351 10.537 1.14334 12.3213 1.46057 14.08C1.59153 14.5398 1.83888 14.9581 2.17872 15.2945C2.51855 15.6308 2.93939 15.8738 3.40057 16C5.12057 16.46 12.0006 16.46 12.0006 16.46C12.0006 16.46 18.8806 16.46 20.6006 16C21.0713 15.8668 21.4986 15.6118 21.8392 15.2606C22.1799 14.9094 22.4218 14.4746 22.5406 14C22.8529 12.2676 23.0069 10.5103 23.0006 8.75C23.0118 6.96295 22.8578 5.1787 22.5406 3.42V3.42Z"
  16.                               stroke="#FF0022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  17.                     </svg>
  19.                     {{ 'modules.online-booking.how_is_work'|trans({},'dc_base') }}
  20.                 </button>
  21.             </div>
  22.         </div>
  23.     </div>
  24.     <span id="formTop"></span>
  25.     <div id="recording__navigation" class="recording__navigation sticky-top">
  26.         <div class="recording__nav">
  27.             <div class="container">
  28.                 <div class="row">
  29.                     <ul class="nav nav-tabs recording__service-nav mobile-scroll col-md-12" id="myTab" role="tablist">
  30.                         <li class="nav-item" v-on:click.stop.prevent="setStep(2)">
  31.                             <button class="nav-link" :class="step==2 ? 'active' : ''" id="choosecar-tab"
  32.                                     data-toggle="tab" data-bs-toggle="tab" data-bs-toggle="tab" data-target="#choosecar"  data-bs-target="#choosecar" role="tab" aria-controls="choosecar"
  33.                                     aria-selected="false">
  34.                                 <svg width="25" height="22" viewBox="0 0 25 22" fill="none"
  35.                                      xmlns="http://www.w3.org/2000/svg">
  36.                                     <path d="M2.75 8.25L4.8125 2.0625H19.9375L22 8.25H2.75ZM19.9375 15.125C19.3905 15.125 18.8659 14.9077 18.4791 14.5209C18.0923 14.1341 17.875 13.6095 17.875 13.0625C17.875 12.5155 18.0923 11.9909 18.4791 11.6041C18.8659 11.2173 19.3905 11 19.9375 11C20.4845 11 21.0091 11.2173 21.3959 11.6041C21.7827 11.9909 22 12.5155 22 13.0625C22 13.6095 21.7827 14.1341 21.3959 14.5209C21.0091 14.9077 20.4845 15.125 19.9375 15.125ZM4.8125 15.125C4.26549 15.125 3.74089 14.9077 3.35409 14.5209C2.9673 14.1341 2.75 13.6095 2.75 13.0625C2.75 12.5155 2.9673 11.9909 3.35409 11.6041C3.74089 11.2173 4.26549 11 4.8125 11C5.35951 11 5.88411 11.2173 6.27091 11.6041C6.6577 11.9909 6.875 12.5155 6.875 13.0625C6.875 13.6095 6.6577 14.1341 6.27091 14.5209C5.88411 14.9077 5.35951 15.125 4.8125 15.125ZM21.89 1.375C21.615 0.5775 20.845 0 19.9375 0H4.8125C3.905 0 3.135 0.5775 2.86 1.375L0 9.625V20.625C0 20.9897 0.144866 21.3394 0.402728 21.5973C0.660591 21.8551 1.01033 22 1.375 22H2.75C3.11467 22 3.46441 21.8551 3.72227 21.5973C3.98013 21.3394 4.125 20.9897 4.125 20.625V19.25H20.625V20.625C20.625 20.9897 20.7699 21.3394 21.0277 21.5973C21.2856 21.8551 21.6353 22 22 22H23.375C23.7397 22 24.0894 21.8551 24.3473 21.5973C24.6051 21.3394 24.75 20.9897 24.75 20.625V9.625L21.89 1.375Z"
  37.                                           fill="#D1D1D1"/>
  38.                                 </svg>
  39.                                 <span>{{ 'modules.online-booking.select-car'|trans({},'dc_base') }}</span>
  40.                             </button>
  41.                         </li>
  42.                         <li class="nav-item" v-on:click.stop.prevent="setStep(3)">
  43.                             <button class="nav-link" v-bind:class="{ active: step==3, disabled: !car }"
  44.                                     id="chooseservices-tab" data-toggle="tab" data-bs-toggle="tab" data-target="#chooseservices" data-bs-target="#chooseservices" role="tab"
  45.                                     aria-controls="chooseservices" aria-selected="false">
  46.                                 <svg width="25" height="20" viewBox="0 0 25 20" fill="none"
  47.                                      xmlns="http://www.w3.org/2000/svg">
  48.                                     <path d="M7.14286 0V5.71429H24.2857V0H7.14286ZM7.14286 20H24.2857V14.2857H7.14286V20ZM7.14286 12.8571H24.2857V7.14286H7.14286V12.8571ZM0 5.71429H5.71429V0H0V5.71429ZM0 20H5.71429V14.2857H0V20ZM0 12.8571H5.71429V7.14286H0V12.8571Z"
  49.                                           fill="#D1D1D1"/>
  50.                                 </svg>
  51.                                 <span>{{ 'modules.online-booking.services'|trans({},'dc_base') }}</span>
  52.                             </button>
  53.                         </li>
  54.                         <li class="nav-item" v-on:click.stop.prevent="setStep(4)">
  55.                             <button class="nav-link" v-bind:class="{ active: step==4, disabled: !car }"
  56.                                     id="choosedate-tab" data-toggle="tab" data-bs-toggle="tab" data-target="#choosedate" data-bs-target="#choosedate" role="tab"
  57.                                     aria-controls="choosedate" aria-selected="false">
  58.                                 <svg width="22" height="24" viewBox="0 0 22 24" fill="none"
  59.                                      xmlns="http://www.w3.org/2000/svg">
  60.                                     <path d="M19.2 21.6H2.4V8.4H19.2V21.6ZM15.6 0V2.4H6V0H3.6V2.4H2.4C1.068 2.4 0 3.468 0 4.8V21.6C0 22.2365 0.252856 22.847 0.702944 23.2971C1.15303 23.7471 1.76348 24 2.4 24H19.2C19.8365 24 20.447 23.7471 20.8971 23.2971C21.3471 22.847 21.6 22.2365 21.6 21.6V4.8C21.6 3.468 20.52 2.4 19.2 2.4H18V0H15.6ZM16.8 13.2H10.8V19.2H16.8V13.2Z"
  61.                                           fill="#D1D1D1"/>
  62.                                 </svg>
  63.                                 <span>{{ 'modules.online-booking.chose_date_time'|trans({},'dc_base') }}</span>
  64.                             </button>
  65.                         </li>
  66.                         <li class="nav-item" v-on:click.stop.prevent="setStep(5)">
  67.                             <button class="nav-link"
  68.                                     v-bind:class="{ active: step==5, disabled: !car || !userTime || !userDate }"
  69.                                     id="record-tab" data-toggle="tab" data-bs-toggle="tab" data-target="#record" data-bs-target="#record" role="tab"
  70.                                     aria-controls="record" aria-selected="false">
  71.                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
  72.                                      xmlns="http://www.w3.org/2000/svg">
  73.                                     <path d="M12 0C5.4 0 0 5.4 0 12C0 18.6 5.4 24 12 24C18.6 24 24 18.6 24 12C24 5.4 18.6 0 12 0ZM9.6 18L3.6 12L5.292 10.308L9.6 14.604L18.708 5.496L20.4 7.2L9.6 18Z"
  74.                                           fill="#D1D1D1"/>
  75.                                 </svg>
  76.                                 <span>{{ 'modules.online-booking.booking'|trans({},'dc_base') }}</span>
  77.                             </button>
  78.                         </li>
  79.                     </ul>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.         <div class="recording__nav-details"> {# add class - mob-active #}
  84.             <div class="container">
  85.                 <div class="row">
  86.                     <ul class="recording__nav-details-list col-md-12">
  87.                         <li class="first-step" :class="step==1 ? 'active' : ''">
  88.                             <span v-if="user && user.name" v-html="user.name"></span>
  89.                         </li>
  90.                         <li class="second-step" :class="step==2 ? 'active' : ''">
  91.                             <span class="car-title" v-if="car"
  92.                                   v-html="car.title +' '+(car.MakeYear ? car.MakeYear : '')"></span>
  93.                             <span class="d-md-none"
  94.                                   v-else>{{ 'modules.online-booking.select-car'|trans({},'dc_base') }}</span>
  95.                         </li>
  96.                         <li class="third-seep" :class="step==3 ? 'active' : ''">
  97.                             <div v-if="userJobs.length" class="w-100">
  98.                                 <div class="d-flex justify-content-between">
  99.                                     <span v-if="userJobs.length"
  100.                                           v-html="userJobs.length+' {{ 'modules.online-booking.services'|trans({},'dc_base')|lower }}'"></span>
  101.                                     <span class="recording__nav-list-price" v-if="totalCost"
  102.                                           v-html="'на '+totalCost.toLocaleString() + ' грн'"></span>
  103.                                 </div>
  104.                                 <div class="d-flex justify-content-between">
  105.                                     <span v-if="fullTotalCost && fullTotalCost > totalCost">{{ 'modules.online-booking.full_price'|trans({},'dc_base') }}</span>
  106.                                     <span class="recording__nav-old-price"
  107.                                           v-if="fullTotalCost && fullTotalCost > totalCost"
  108.                                           v-html="fullTotalCost.toLocaleString() + ' грн'"></span>
  109.                                 </div>
  110.                             </div>
  111.                             <span class="d-md-none"
  112.                                   v-if="userJobs.length == 0">{{ 'modules.online-booking.services'|trans({},'dc_base') }}</span>
  113.                         </li>
  114.                         <li class="fourth-step" :class="step==4 ? 'active' : ''">
  115.                             <span v-if="userDate && userTime" v-html="userDate +' '+ userTime"></span>
  116.                             <span class="d-md-none"
  117.                                   v-else>{{ 'modules.online-booking.chose_date_time'|trans({},'dc_base') }}</span>
  118.                         </li>
  119.                         <li class="step-5" :class="step==5 ? 'active' : ''">
  120.                             <span class="d-md-none">{{ 'modules.online-booking.contacts_info'|trans({},'dc_base') }}</span>
  121.                         </li>
  122.                         <li>
  123.                             <button v-if="step > 2 && step < 5" class="btn btn-primary w-100"
  124.                                     v-on:click="setStep(step+1)">
  125.                                 <span>{{ 'modules.online-booking.continue'|trans({},'dc_base') }}</span>
  126.                                 <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
  127.                                      xmlns="http://www.w3.org/2000/svg">
  128.                                     <path d="M0 5.24242V6.75758H9.09091L4.92424 10.9242L6 12L12 6L6 0L4.92424 1.07576L9.09091 5.24242H0Z"
  129.                                           fill="white"/>
  130.                                 </svg>
  131.                             </button>
  132.                         </li>
  133.                     </ul>
  134.                 </div>
  135.             </div>
  136.         </div>
  137.     </div>
  139.     <div class="container">
  140.         <div class="tab-content recording__service-tab row" id="myTabContent">
  141.             <div class="col-md-12 tab-pane fade autorization-content" :class="step==1 ? 'show active' : ''"
  142.                  id="autorization" role="tabpanel" aria-labelledby="autorization-tab">
  144.                 <div class="row" v-if="user && user.id">
  145.                     <div class="col-sm-12 col-md-12 col-lg-10 col-xl-8">
  146.                         <div class="recording-info">
  147.                             <div class="recording-info__icon"></div>
  148.                             <div class="recording-info__desc">
  149.                                 <p>{{ 'modules.online-booking.is_uath'|trans({},'dc_base') }} <span
  150.                                             v-html="user.name"></span></p>
  151.                             </div>
  152.                         </div>
  153.                     </div>
  154.                 </div>
  156.             </div>
  157.             <div class="col-md-12 tab-pane fade choosecar-content" :class="step==2 ? 'show active' : ''" id="choosecar"
  158.                  role="tabpanel" aria-labelledby="choosecar-tab">
  159.                 <div class="row">
  160.                     <div class="col-md-12" v-if="user && user.cars.length">
  161.                         <div class="row">
  162.                             <div class="col-md-12">
  163.                                 <span class="service_widget-title">{{ 'modules.online-booking.you_save_car'|trans({},'dc_base') }}:</span>
  164.                             </div>
  165.                         </div>
  166.                         <div class="row select-car-row">
  167.                             <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 select-car-col" v-for="car in user.cars">
  168.                                 <div class="about-car__info" v-on:click.stop.prevent="setCarByDealer(car)">
  169.                                     <span class="about-car__info-name car-title" v-html="car.title"></span>
  170.                                     <div class="about-car__info-desc">
  171.                                         <span class="about-car__info-year" v-html="car.MakeYear"
  172.                                               v-if="car.MakeYear"></span>
  173.                                         <div class="about-car__info-year-number-desc" v-if="car.Number">
  174.                                             <span class="about-car__info-year-number"></span>
  175.                                             <span v-html="car.Number"></span>
  176.                                         </div>
  177.                                     </div>
  178.                                 </div>
  179.                             </div>
  180.                         </div>
  181.                     </div>
  182.                     <div class="col-sm-12 col-md-12 col-lg-9 col-xl-9">
  183.                         <div class="recording-info">
  184.                             <div class="recording-info__icon"></div>
  185.                             <div class="recording-info__desc">
  186.                                 <p>{{ 'modules.online-booking.search_number'|trans({},'dc_base') }}</p>
  187.                             </div>
  188.                         </div>
  189.                     </div>
  190.                 </div>
  191.                 <div v-if="showCars" class="search__car__number__wrapper">
  192.                     <div class="col-md-12">
  193.                         <div class="row">
  194.                             <div class="col-md-12" v-if="findWithBrands && !dealerId">
  195.                                 <div class="row">
  196.                                     <div class="col-md-12">
  197.                                         <span class="service_widget-title">{{ 'modules.online-booking.choose_brand'|trans({},'dc_base') }}:</span>
  198.                                     </div>
  199.                                     <div class="col-md-12 service_choose_brand-wrap">
  200.                                         <div class="service_choose_brand service_choose_brand_card-item"
  201.                                              v-for="brandItem in brands"
  202.                                              @click="isManual=true;setDealer(brandItem.dealerId);setDealerUrl(brandItem.dealerUrl);">
  203.                                             <div class="service_choose_brand_card-img">
  204.                                                 <img :src="brandItem.image" alt="">
  205.                                             </div>
  206.                                             <span class="service_choose_brand_card-title"
  207.                                                   v-html="brandItem.name"></span>
  209.                                             <div class="service_choose_brand_card-info" v-if="brandItem.dealers">
  210.                                                 <div class="service_choose_brand_card-info-head">
  211.                                                     <div class="service_choose_brand_card-title mb-2">
  212.                                                         {{ 'car_page.new.choose_dealer'|trans({}, 'dc_base') }}
  213.                                                     </div>
  214.                                                 </div>
  215.                                                 <div @click.stop.prevent="isManual=true;setDealer(dealer.id);setDealerUrl(dealer.url);"
  216.                                                      class="service_choose_brand_card-info-brand"
  217.                                                      v-for="dealer in brandItem.dealers">
  218.                                                     <span class="service_choose_brand_card-info-brand-name"
  219.                                                           v-html="dealer.title"></span>
  220.                                                     <span class="service_choose_brand_card-info-brand-addr"
  221.                                                           v-html="dealer.adres"></span>
  222.                                                 </div>
  223.                                             </div>
  225.                                         </div>
  226.                                     </div>
  227.                                 </div>
  228.                             </div>
  229.                         </div>
  230.                         {#                        <div class="col-md-12" v-if="findWithBrands && !manualModelId && models.length"> #}
  231.                         {#                            <button class="go_back go__to__back__border" v-on:click="setDealer(null)"> #}
  232.                         {#                                <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg"> #}
  233.                         {#                                    <path d="M7 1L1 6.5L7 12" stroke="#282830"></path> #}
  234.                         {#                                </svg> #}
  235.                         {#                                Назад #}
  236.                         {#                            </button> #}
  237.                         {#                        </div> #}
  238.                         <div class="row service-title-div" v-if="!manualModelId && models.length">
  239.                             <button class="go_back go__to__back__border" type="button" @click="showCars=false">
  240.                                 <svg width="8" height="13" viewBox="0 0 8 13" fill="none"
  241.                                      xmlns="http://www.w3.org/2000/svg">
  242.                                     <path d="M7 1L1 6.5L7 12" stroke="#282830"></path>
  243.                                 </svg>
  244.                                 Назад
  245.                             </button>
  246.                             <div class="col-md-12">
  247.                                 <span class="service_widget-title">{{ 'form.to_widget_choose_model'|trans({}, 'dc_base') }}:</span>
  248.                             </div>
  249.                             <div class="col-md-12">
  250.                                 <div class="row">
  251.                                     <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 service_widget-col"
  252.                                          v-for="model in models">
  253.                                         <div class="service_widget-card-car"
  254.                                              @click.stop.prevent="setManualModelId(model.id)">
  255.                                             <a href="#" class="service_widget-card-car-img">
  256.                                                 <img v-if="model.img" :src="model.img" :alt="model.title">
  257.                                                 <img v-else :src="brandLogo" :alt="model.title">
  258.                                             </a>
  259.                                             <span class="service_widget-card-car-title" v-html="model.title"></span>
  260.                                         </div>
  261.                                     </div>
  262.                                 </div>
  263.                             </div>
  264.                         </div>
  265.                     </div>
  266.                     <div class="col-md-12 service-title-div">
  267.                         <div class="row" v-if="brand && manualModelId && hasPeriod">
  268.                             <div class="col-md-12">
  269.                                 <button class="go_back go__to__back__border" v-on:click="manualModelId = null">
  270.                                     <svg width="8" height="13" viewBox="0 0 8 13" fill="none"
  271.                                          xmlns="http://www.w3.org/2000/svg">
  272.                                         <path d="M7 1L1 6.5L7 12" stroke="#282830"></path>
  273.                                     </svg>
  274.                                     Назад
  275.                                 </button>
  276.                                 <span class="service_widget-title">{{ 'form.to_widget_choose_year'|trans({},'dc_base')|raw }}:</span>
  277.                             </div>
  278.                             <div class="col-md-12">
  279.                                 <div class="row" v-if="variations">
  280.                                     <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 service_widget-col"
  281.                                          v-for="period in variations">
  282.                                         <div class="service_widget-card-car" @click.stop.prevent="selectPeriod(period)">
  283.                                             <a href="#"
  284.                                                class="service_widget-card-car-img service_widget-card-car-img-year">
  285.                                                 <img :src="period.image" alt="">
  286.                                             </a>
  287.                                             <span class="service_widget-card-car-title" v-html="period.period"></span>
  288.                                         </div>
  289.                                     </div>
  290.                                 </div>
  291.                             </div>
  292.                         </div>
  294.                         <div class="row service_widget-modification" v-if="periodVariations && !hasPeriod">
  295.                             <div class="col-md-12" v-if="!hasChooseByNumber">
  296.                                 <button class="go_back go__to__back__border" v-on:click="backVariations()">
  297.                                     <svg width="8" height="13" viewBox="0 0 8 13" fill="none"
  298.                                          xmlns="http://www.w3.org/2000/svg">
  299.                                         <path d="M7 1L1 6.5L7 12" stroke="#282830"></path>
  300.                                     </svg>
  301.                                     Назад
  302.                                 </button>
  303.                                 <span class="service_widget-title">{{ 'trade_in.trade_in_select_mod_title'|trans({},'dc_base') }}:</span>
  304.                             </div>
  305.                             <div v-if="!hasChooseByNumber" class="col-md-12 service_widget-modification-car">
  306.                                 <div class="row justify-content-center ">
  307.                                     <div class="col-sm-12 col-md-9 col-lg-7 col-xl-6">
  308.                                         <div class="row align-items-center">
  309.                                             <div class="col-md-6">
  310.                                                 <div class="service_widget-card-img">
  311.                                                     <img :src="selectedPeriod.image" alt="" class="w-100">
  312.                                                 </div>
  313.                                             </div>
  314.                                             <div class="col-md-6">
  315.                                                 <span class="service_widget-card-title text-left"
  316.                                                       v-html="newCar.Model + ' ' + selectedPeriod.period"></span>
  317.                                             </div>
  318.                                         </div>
  319.                                     </div>
  320.                                 </div>
  321.                             </div>
  322.                             <div class="col-md-12 service_widget-filter">
  323.                                 <button class="service_widget-filter-btn collapsed" type="button" data-toggle="collapse" data-bs-toggle="collapse"
  324.                                         data-target="#collapseExample" data-bs-target="#collapseExample" aria-expanded="false"
  325.                                         aria-controls="collapseExample">
  326.                                     {{ 'form.filters'|trans({}, 'dc_base') }}
  327.                                     <svg width="11" height="7" viewBox="0 0 11 7" fill="none"
  328.                                          xmlns="http://www.w3.org/2000/svg">
  329.                                         <path d="M10 1L5.5 5L1 1" stroke="#505053" stroke-width="2"></path>
  330.                                     </svg>
  331.                                 </button>
  332.                                 <div class="row justify-content-center collapse service_widget-filter-collapse"
  333.                                      id="collapseExample">
  335.                                     <div class="col-sm-12 col-md-9 col-lg-7 col-xl-6">
  336.                                         <div class="row">
  337.                                             <div class="col-md-6">
  338.                                                 <div class="form-group">
  339.                                                     <label for="fuelLabel">{{ 'form.to_widget_fuel'|trans({}, 'dc_base') }}</label>
  340.                                                     <select name="" id="fuelLabel" class="form-control"
  341.                                                             v-model="selectedFilter.fuel">
  342.                                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  343.                                                         <option v-for="fuel in variationsFilters.fuel"
  344.                                                                 v-bind:value="fuel" v-html="fuel"></option>
  345.                                                     </select>
  346.                                                 </div>
  347.                                             </div>
  348.                                             <div class="col-md-6">
  349.                                                 <div class="form-group">
  350.                                                     <label for="engineLabel">{{ 'form.to_widget_engine'|trans({}, 'dc_base') }}
  351.                                                         , л.</label>
  352.                                                     <select name="" id="engineLabel" class="form-control"
  353.                                                             v-model="selectedFilter.engine">
  354.                                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  355.                                                         <option v-for="engine in variationsFilters.engine"
  356.                                                                 v-bind:value="engine" v-html="engine"></option>
  357.                                                     </select>
  358.                                                 </div>
  359.                                             </div>
  360.                                             <div class="col-md-6">
  361.                                                 <div class="form-group">
  362.                                                     <label for="transmissionLabel">{{ 'form.to_widget_transmision'|trans({}, 'dc_base') }}</label>
  363.                                                     <select name="" id="transmissionLabel" class="form-control"
  364.                                                             v-model="selectedFilter.transmission">
  365.                                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  366.                                                         <option v-for="transmission in variationsFilters.transmission"
  367.                                                                 v-bind:value="transmission"
  368.                                                                 v-html="transmission"></option>
  369.                                                     </select>
  370.                                                 </div>
  371.                                             </div>
  372.                                             <div class="col-md-6">
  373.                                                 <div class="form-group">
  374.                                                     <label for="driveLabel">{{ 'form.to_widget_privod'|trans({}, 'dc_base') }}</label>
  375.                                                     <select name="" id="driveLabel" class="form-control"
  376.                                                             v-model="selectedFilter.drive">
  377.                                                         <option value="all">{{ 'form.all_variants'|trans({}, 'dc_base') }}</option>
  378.                                                         <option v-for="drive in variationsFilters.drive"
  379.                                                                 v-bind:value="drive" v-html="drive"></option>
  380.                                                     </select>
  381.                                                 </div>
  382.                                             </div>
  383.                                         </div>
  384.                                     </div>
  385.                                 </div>
  386.                             </div>
  387.                             <div class="col-md-12">
  388.                                 <hr class="service_widget-hr">
  389.                             </div>
  390.                             <div class="col-md-12">
  391.                                 <div class="row justify-content-center">
  392.                                     <div class="col-sm-12 col-md-9 col-lg-7 col-xl-6">
  393.                                         <div class="row mobile-scroll" v-if="periodVariations" id="variationsBlock">
  394.                                             <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 modification-card-mobile"
  395.                                                  v-for="variation in filteredVariations"
  396.                                                  v-on:click="addCar(variation.id)">
  397.                                                 <div class="service_widget-modif">
  398.                                                     <div class="service_widget-modif-item">
  399.                                                         <svg width="21" height="21" viewBox="0 0 21 21" fill="none"
  400.                                                              xmlns="http://www.w3.org/2000/svg">
  401.                                                             <path d="M19.925 7.89997H18.625C18.4951 7.89997 18.365 7.99747 18.3325 8.12745L17.4226 10.825H16.5451L15.6676 9.36247C15.6025 9.26497 15.505 9.19995 15.375 9.19995H14.0751V8.22495C14.0751 8.02995 13.9451 7.89997 13.7501 7.89997H11.475V6.59998H12.45C12.645 6.59998 12.775 6.46999 12.775 6.27499V4.32499C12.775 4.12999 12.645 4 12.45 4H6.6C6.405 4 6.27502 4.12999 6.27502 4.32499V6.27499C6.27502 6.46999 6.405 6.59998 6.6 6.59998H7.57501V7.89997H4.97499C4.87749 7.89997 4.81248 7.93245 4.7475 7.99747C4.68253 8.06248 4.65 8.12745 4.65 8.22495V9.19995H2.37501C2.18001 9.19995 2.05003 9.32994 2.05003 9.52494V11.4749H1.40001V10.5C1.40001 10.305 1.27003 10.175 1.07503 10.175C0.880026 10.175 0.75 10.305 0.75 10.5V13.1C0.75 13.295 0.879987 13.425 1.07499 13.425C1.26999 13.425 1.39998 13.295 1.39998 13.1V12.125H2.04999V14.725C2.04999 14.92 2.17998 15.05 2.37498 15.05H4.81248L6.01497 16.87C6.07998 16.935 6.17748 17 6.27498 17H15.375C15.505 17 15.6025 16.935 15.6675 16.805L16.545 15.05H17.455L18.3325 16.805C18.3975 16.935 18.495 17 18.625 17H19.925C20.12 17 20.25 16.87 20.25 16.675V8.22499C20.25 8.02999 20.12 7.89997 19.925 7.89997ZM6.92499 4.64998H12.125V5.94996H11.15H7.89999H6.92499V4.64998ZM8.22502 6.59998H10.825V7.89997H8.22502V6.59998ZM2.7 14.4V9.84997H4.65V14.4H2.7ZM15.1475 16.35H6.43749L5.29998 14.6283V9.52498V8.54998H7.89999H11.15H13.425V9.52498C13.425 9.71998 13.555 9.84997 13.75 9.84997H15.18L16.025 11.2583V14.595L15.1475 16.35ZM16.675 14.4V11.475H17.325V14.4H16.675ZM19.6 16.35H18.82L17.975 14.7203V11.1511L18.8525 8.54998H19.6V16.35Z"
  402.                                                                   fill="#E40C25"></path>
  403.                                                         </svg>
  404.                                                         <span v-html="getVariationFullName(variation)"></span>
  405.                                                     </div>
  406.                                                     <div class="service_widget-modif-item"
  407.                                                          v-if="variation.transmission">
  408.                                                         <svg width="21" height="21" viewBox="0 0 21 21" fill="none"
  409.                                                              xmlns="http://www.w3.org/2000/svg">
  410.                                                             <path d="M17.1667 15.3228V10.5V5.67719C17.9208 5.54922 18.5 4.88916 18.5 4.1C18.5 3.22 17.78 2.5 16.9 2.5C16.02 2.5 15.3 3.22 15.3 4.1C15.3 4.88916 15.8792 5.54922 16.6333 5.67719V10.2333H12.9V5.67719C13.6542 5.54922 14.2333 4.88916 14.2333 4.1C14.2333 3.22 13.5133 2.5 12.6333 2.5C11.7533 2.5 11.0333 3.22 11.0333 4.1C11.0333 4.88916 11.6125 5.54922 12.3667 5.67719V10.2333H8.63334V5.67719C9.38753 5.54922 9.96669 4.88916 9.96669 4.1C9.96669 3.22 9.24669 2.5 8.36669 2.5C7.48669 2.5 6.76669 3.22 6.76669 4.1C6.76669 4.88916 7.34584 5.54922 8.10003 5.67719V10.2333H4.36666V5.67719C5.12084 5.54922 5.7 4.88916 5.7 4.1C5.7 3.22 4.98 2.5 4.1 2.5C3.22 2.5 2.5 3.22 2.5 4.1C2.5 4.88916 3.07916 5.54922 3.83334 5.67719V10.5C3.83334 10.66 3.94 10.7667 4.1 10.7667H8.1V15.3228C7.34581 15.4508 6.76666 16.1108 6.76666 16.9C6.76666 17.78 7.48666 18.5 8.36666 18.5C9.24666 18.5 9.96666 17.78 9.96666 16.9C9.96666 16.1108 9.3875 15.4508 8.63331 15.3228V10.7667H12.3667V15.3228C11.6125 15.4508 11.0333 16.1108 11.0333 16.9C11.0333 17.78 11.7533 18.5 12.6333 18.5C13.5133 18.5 14.2333 17.78 14.2333 16.9C14.2333 16.1108 13.6542 15.4508 12.9 15.3228V10.7667H16.6333V15.3228C15.8791 15.4508 15.3 16.1108 15.3 16.9C15.3 17.78 16.02 18.5 16.9 18.5C17.78 18.5 18.5 17.78 18.5 16.9C18.5 16.1108 17.9208 15.4508 17.1667 15.3228ZM15.8333 4.1C15.8333 3.51334 16.3133 3.03334 16.9 3.03334C17.4867 3.03334 17.9667 3.51334 17.9667 4.1C17.9667 4.68666 17.4867 5.16666 16.9 5.16666C16.3133 5.16666 15.8333 4.68666 15.8333 4.1ZM11.5667 4.1C11.5667 3.51334 12.0467 3.03334 12.6333 3.03334C13.22 3.03334 13.7 3.51334 13.7 4.1C13.7 4.68666 13.22 5.16666 12.6333 5.16666C12.0467 5.16666 11.5667 4.68666 11.5667 4.1ZM7.3 4.1C7.3 3.51334 7.78 3.03334 8.36666 3.03334C8.95331 3.03334 9.43331 3.51334 9.43331 4.1C9.43331 4.68666 8.95331 5.16666 8.36666 5.16666C7.78 5.16666 7.3 4.68666 7.3 4.1ZM3.03334 4.1C3.03334 3.51334 3.51334 3.03334 4.1 3.03334C4.68666 3.03334 5.16666 3.51334 5.16666 4.1C5.16666 4.68666 4.68666 5.16666 4.1 5.16666C3.51334 5.16666 3.03334 4.68666 3.03334 4.1ZM9.43334 16.9C9.43334 17.4867 8.95334 17.9667 8.36669 17.9667C7.78003 17.9667 7.30003 17.4867 7.30003 16.9C7.30003 16.3133 7.78003 15.8333 8.36669 15.8333C8.95334 15.8333 9.43334 16.3133 9.43334 16.9ZM13.7 16.9C13.7 17.4867 13.22 17.9667 12.6333 17.9667C12.0467 17.9667 11.5667 17.4867 11.5667 16.9C11.5667 16.3133 12.0467 15.8333 12.6333 15.8333C13.22 15.8333 13.7 16.3133 13.7 16.9ZM16.9 17.9667C16.3133 17.9667 15.8333 17.4867 15.8333 16.9C15.8333 16.3133 16.3133 15.8333 16.9 15.8333C17.4867 15.8333 17.9667 16.3133 17.9667 16.9C17.9667 17.4867 17.4867 17.9667 16.9 17.9667Z"
  411.                                                                   fill="#E40C25"></path>
  412.                                                         </svg>
  413.                                                         <span v-html="variation.transmission"></span>
  414.                                                     </div>
  415.                                                     <div class="service_widget-modif-item" v-if="variation.drive">
  416.                                                         <svg width="21" height="21" viewBox="0 0 21 21" fill="none"
  417.                                                              xmlns="http://www.w3.org/2000/svg">
  418.                                                             <path d="M2.50076 12.3512L3.3558 13.1945C3.6562 13.5177 4.04051 13.7371 4.46022 13.8223V15.9602L3.17766 15.6892C2.78575 15.5838 2.39388 15.8297 2.32261 16.2162L2.18012 16.9189C2.14451 17.0946 2.18012 17.2702 2.287 17.4459C2.39388 17.6216 2.57203 17.727 2.75014 17.7621L6.24157 18.5C6.27718 18.5 6.34845 18.5 6.38406 18.5C6.52656 18.5 6.66909 18.4649 6.77597 18.4297C6.95412 18.3243 7.061 18.1486 7.09661 17.973L7.23911 17.2702C7.27472 17.0945 7.23911 16.8837 7.13223 16.7432C7.02535 16.5675 6.8472 16.4621 6.66909 16.427L5.17277 16.1107V13.8321C5.59528 13.7544 5.99959 13.5244 6.31284 13.1593L7.16788 12.3161C7.60104 11.9743 7.87024 11.5402 7.95675 11.0512H13.0355C13.1196 11.5421 13.4217 11.9965 13.9013 12.3512L14.7564 13.1945C15.0568 13.5176 15.4411 13.7371 15.8608 13.8222V15.9702H14.4357C14.0438 15.9702 13.7232 16.2864 13.7232 16.6729V17.3757C13.7232 17.7622 14.0438 18.0784 14.4357 18.0784H17.9984C18.3903 18.0784 18.711 17.7622 18.711 17.3757V16.6729C18.711 16.2864 18.3903 15.9702 17.9984 15.9702H16.5733V13.8321C16.9959 13.7544 17.4002 13.5244 17.7134 13.1593L18.5685 12.3161C19.1029 11.8944 19.3879 11.3323 19.3879 10.6998C19.3879 10.0674 19.1029 9.47007 18.5685 9.04844L17.7134 8.20518C17.4045 7.87286 17.007 7.65031 16.5733 7.57068V5.42946H17.9984C18.3903 5.42946 18.711 5.11324 18.711 4.72673V4.02404C18.711 3.63753 18.3903 3.32131 17.9984 3.32131H14.4357C14.0438 3.32131 13.7232 3.63753 13.7232 4.02404V4.72677C13.7232 5.11328 14.0438 5.4295 14.4357 5.4295H15.8608V7.57154C15.4383 7.65187 15.0642 7.87401 14.7564 8.20522L13.9013 9.04848C13.4309 9.40324 13.1548 9.86411 13.0546 10.3485H7.95742C7.87154 9.84946 7.602 9.39097 7.16788 9.04848L6.31284 8.20522C6.00397 7.8729 5.60639 7.65035 5.17277 7.57072V5.05806L6.59783 5.35922C6.63344 5.35922 6.70471 5.35922 6.74032 5.35922C6.88281 5.35922 7.02535 5.32409 7.16784 5.25381C7.34599 5.1484 7.45287 4.97271 7.48848 4.79706L7.63097 4.09432C7.66659 3.91863 7.63097 3.70782 7.52409 3.56729C7.41721 3.39159 7.23906 3.28619 7.06096 3.25106L3.56956 2.51317C3.39142 2.47805 3.17766 2.51317 3.03516 2.61858C2.85702 2.72399 2.75014 2.89968 2.71452 3.07533L2.57203 3.77806C2.46515 4.16457 2.71452 4.55104 3.10643 4.62132L4.46026 4.90745V7.5715C4.03775 7.65183 3.66371 7.87397 3.35585 8.20518L2.50076 9.04844C1.89509 9.50519 1.61011 10.1376 1.61011 10.7701C1.61011 11.3674 1.93075 11.9647 2.50076 12.3512ZM6.38406 17.7973L2.89263 17.0945L3.03516 16.3918L4.69561 16.7261C4.71748 16.7326 4.74057 16.7372 4.76483 16.74L6.5266 17.0946L6.38406 17.7973ZM17.9984 17.3756H14.4357V16.6729H17.9984V17.3756ZM14.4357 4.02404H17.9984V4.72677H14.4357V4.02404ZM3.39142 3.25102L6.88285 3.98888L6.74036 4.69161L5.02948 4.33005C4.97203 4.29155 4.89981 4.26998 4.81652 4.26998C4.79777 4.26998 4.77978 4.27142 4.76216 4.27356L3.24892 3.95375L3.39142 3.25102ZM14.3645 9.57548L14.4001 9.54036L15.2907 8.66197C15.5401 8.38087 15.8964 8.24034 16.2527 8.24034C16.6089 8.24034 16.9652 8.38087 17.2502 8.66197L18.1409 9.54036C18.4971 9.85658 18.7109 10.2782 18.7109 10.6998C18.7109 11.0863 18.4971 11.508 18.1409 11.789C18.1052 11.8242 18.1052 11.8242 18.1052 11.8242L17.2146 12.7025C16.9296 13.0188 16.5733 13.1593 16.217 13.1593C15.8608 13.1593 15.5402 12.9836 15.2551 12.7025L14.3645 11.8242L14.3289 11.789C13.937 11.5079 13.7232 11.1215 13.7232 10.735C13.7232 10.3133 13.937 9.8917 14.3645 9.57548ZM2.9639 9.57548L2.99951 9.54036L3.89016 8.66197C4.13954 8.38087 4.49583 8.24034 4.85209 8.24034C5.20834 8.24034 5.56464 8.38087 5.84962 8.66197L6.74028 9.54036C7.09653 9.85658 7.31029 10.2782 7.31029 10.6998C7.31029 11.0863 7.09653 11.508 6.74028 11.789C6.70466 11.8242 6.70466 11.8242 6.70466 11.8242L5.81405 12.7026C5.52902 13.0188 5.17277 13.1593 4.81652 13.1593C4.46026 13.1593 4.13962 12.9836 3.85459 12.7026L2.96394 11.8242L2.92833 11.7891C2.53642 11.508 2.32266 11.1215 2.32266 10.735C2.32261 10.3133 2.53638 9.92686 2.9639 9.57548Z"
  419.                                                                   fill="#E40C25"></path>
  420.                                                         </svg>
  421.                                                         <span v-html="variation.drive"></span>
  422.                                                     </div>
  423.                                                     <div class="service_widget-modif-item" v-if="variation.description">
  424.                                                         <span v-html="'(' + variation.description + ')'"></span>
  425.                                                     </div>
  426.                                                 </div>
  427.                                             </div>
  428.                                         </div>
  429.                                     </div>
  430.                                 </div>
  431.                             </div>
  432.                         </div>
  433.                     </div>
  434.                 </div>
  435.                 <div v-else class="search__car__number__wrapper">
  436.                     <div class="search__car__number__box">
  437.                         <p class="search__car__number__name">{{ 'modules.online-booking.searc_number_title'|trans({},'dc_base') }}</p>
  438.                         <input id="findCarNumber"
  439.                                class="search__car__number__input search__car__number__input_uppercase"
  440.                                v-model="newCar.Number" type="text"
  441.                                placeholder="{{ 'modules.online-booking.example_input_title'|trans({},'dc_base') }}: АА1111АА">
  442.                         <button class="search__car__number__btn" type="button"
  443.                                 @click="findCar()">{{ 'modules.online-booking.search_btn'|trans({},'dc_base') }}</button>
  444.                     </div>
  445.                     <div v-if="!findResult" class="">
  446.                         <p>{{ 'modules.online-booking.enter_manual'|trans({},'dc_base') }}</p>
  447.                     </div>
  448.                     <div v-if="!findResult" class="search__car__number__box">
  449.                         <p class="search__car__number__name text-vertical-align">{{ 'form.select_model'|trans({},'dc_base') }}</p>
  450.                         <button class="search__car__number__btn search__car__number__btn-gray" type="button"
  451.                                 @click="findManual">{{ 'form.select'|trans({},'dc_base') }}</button>
  452.                     </div>
  453.                     <div v-if="findResult" class="search__car__number__box selected__car">
  454.                         <div class="search__car__number__img"
  455.                              :style="{ 'background-image': 'url(' + findResult.ModelImg + ')' }"></div>
  456.                         <p class="search__car__number__title" v-html="findResult.ModelName"></p>
  457.                         <div class="search__car__number__characteristics">
  458.                             <p v-if="findResult.Capacity">{{ 'form.volume'|trans({},'dc_base') }}, см 3: <span
  459.                                         v-html="findResult.Capacity"></span></p>
  460.                             <p v-if="findResult.Color">{{ 'configurator.tabs.color_tab'|trans({},'dc_base') }}: <span
  461.                                         v-html="findResult.Color"></span></p>
  462.                         </div>
  463.                         <div class="search__car__number__btn__wrapper">
  464.                             <button class="search__car__number__btn-transparent" type="button" @click="findManual">
  465.                                 {{ 'modules.online-booking.select_manually'|trans({},'dc_base') }}
  466.                             </button>
  467.                             <button class="search__car__number__btn-transparent search__car__number__btn-transparent_uppercase"
  468.                                     type="button"
  469.                                     @click="choiceDealer()">{{ 'modules.online-booking.confirm'|trans({},'dc_base') }}</button>
  470.                         </div>
  471.                     </div>
  472.                 </div>
  473.                 <div v-if="isErrorResult" id="findResultError" class="ourcars-block-error">
  474.                     <span class="ourcars-block-error-title">{{ 'modules.online-booking.not-found'|trans({},'dc_base') }}</span>
  475.                     <p class="ourcars-block-error-desc">{{ 'modules.online-booking.not-found-text'|trans({},'dc_base') }}</p>
  476.                 </div>
  477.             </div>
  478.             <div class="col-md-12 tab-pane fade chooseservices-content" :class="step==3 ? 'show active' : ''"
  479.                  id="chooseservices" role="tabpanel" aria-labelledby="chooseservices-tab">
  480.                 <div class="row" v-if="!car">
  481.                     <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
  482.                         <div class="recording-info">
  483.                             <div class="recording-info__icon"></div>
  484.                             <div class="recording-info__desc">
  485.                                 <p>{{ 'modules.online-booking.set_car'|trans({},'dc_base') }}</p>
  486.                             </div>
  487.                         </div>
  488.                     </div>
  489.                 </div>
  490.                 <div class="row" v-if="car && (!works || Object.keys(works).length == 0)">
  491.                     <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
  492.                         <div class="recording-info">
  493.                             <div class="recording-info__icon"></div>
  494.                             <div class="recording-info__desc">
  495.                                 <p>{{ 'modules.online-booking.no_works'|trans({},'dc_base') }}</p>
  496.                             </div>
  497.                         </div>
  498.                     </div>
  499.                 </div>
  500.                 <template v-if="works && Object.keys(works).length > 0">
  502.                     <div class="row row-categorise-tabs mt-4" v-if="groups">
  503.                         <div class="col-md-4">
  504.                             <ul class="nav nav-tabs nav-tabs-categories flex-column" id="tabChooseCat" role="tablist">
  505.                                 <li class="nav-item" v-for="group in groups">
  506.                                     <a class="nav-link" :class="subGroup == group.id ? 'active' : false"
  507.                                        v-on:click="subGroup = group.id" data-toggle="tab" data-bs-toggle="tab"
  508.                                        :href="'#categories-'+group.id" role="tab" aria-controls="categories-one"
  509.                                        aria-selected="true" v-html="group.title"></a>
  510.                                 </li>
  511.                             </ul>
  512.                         </div>
  513.                         <div class="col-md-8">
  514.                             <div class="row-flex tab-content" id="tabChooseCatContent" v-if="subGroup">
  515.                                 <div class="col-md-12 tab-pane fade"
  516.                                      :class="subGroup == group.id ? 'show active' : false" v-for="group in groups"
  517.                                      :id="'categories-'+group.id" role="tabpanel" aria-labelledby="categories-one-tab">
  518.                                     <template v-for="sGroup in group.groups">
  519.                                         <div class="services__item" v-for="work in works[sGroup.id].works">
  520.                                             <div class="align-items-center d-flex">
  521.                                                 <div class="checkbox__btn">
  522.                                                     <label class="checkbox__item">
  523.                                                         <input type="checkbox" checked="checked" name="userJobs[]"
  524.                                                                v-model="userJobs" :value="work.id">
  525.                                                         <span class="checkmark"></span>
  526.                                                     </label>
  527.                                                 </div>
  528.                                                 <div class="w-100">
  529.                                                     <div style="cursor: pointer;" class="services__item-head"
  530.                                                          @click="toggleJob(work.id)">
  531.                                                         <span class="services__item-name" v-if="work.isRegulation"
  532.                                                               v-html="work.millage+' км'"></span>
  533.                                                         <span class="services__item-name" v-else
  534.                                                               v-html="work.title"></span>
  535.                                                         <div class="text-right">
  536.                                                             <span class="services__item-price d-block"
  537.                                                                   v-html="work.totalCost.toLocaleString() + ' грн'"></span>
  538.                                                             <span class="services__item-price-old"
  539.                                                                   v-if="work.fullTotalCost && work.fullTotalCost > work.totalCost"
  540.                                                                   v-html="work.fullTotalCost.toLocaleString() + ' грн'"></span>
  541.                                                         </div>
  542.                                                     </div>
  543.                                                     <div class="services__item-body">
  544.                                                         <span class="services__item-hour"><span
  545.                                                                     v-html="work.time"></span> {{ 'modules.online-booking.hours'|trans({},'dc_base') }}</span>
  546.                                                         <a class="btn-link collapsed" data-toggle="collapse" data-bs-toggle="collapse"
  547.                                                            :href="'#collapseItem'+work.id" role="button"
  548.                                                            aria-expanded="true" aria-controls="'collapseItem'+work.id">
  549.                                                             <span class="open-text">{{ 'pages.buttons.details'|trans({},'dc_base') }}</span>
  550.                                                             <span class="close-text">{{ 'car_in_stock_module.hide'|trans({},'dc_base') }}</span>
  551.                                                         </a>
  552.                                                     </div>
  553.                                                 </div>
  554.                                             </div>
  555.                                             <div class="collapse" :id="'collapseItem'+work.id">
  556.                                                 <div class="services__item-desc">
  557.                                                     <span class="services__item-desc-head">{{ 'modules.online-booking.works'|trans({},'dc_base') }}</span>
  558.                                                     <div class="services__item-line mb-2" v-for="job in work.works">
  559.                                                         <span class="services__item-desc-title"
  560.                                                               v-html="job.title"></span>
  561.                                                         <span class="services__item-price"
  562.                                                               v-html="job.price.toLocaleString()+' грн'"></span>
  563.                                                     </div>
  564.                                                     <span class="services__item-desc-head">{{ 'modules.online-booking.parts'|trans({},'dc_base') }}</span>
  565.                                                     <div class="services__item-line" v-for="part in work.parts">
  566.                                                         <span class="services__item-desc-title"
  567.                                                               v-html="part.title + ' ('+part.count+' '+part.unit+')'"></span>
  568.                                                         <span class="services__item-price"
  569.                                                               v-html="part.price.toLocaleString()+' грн'"></span>
  570.                                                     </div>
  571.                                                 </div>
  572.                                             </div>
  573.                                         </div>
  574.                                     </template>
  575.                                 </div>
  576.                             </div>
  577.                         </div>
  578.                     </div>
  580.                     <div class="row mt-4">
  581.                         <div class="col-md-12 accordion-categories-mobile-col">
  582.                             <div class="accordion-categories-mobile" v-if="subGroup" id="accordionExample">
  583.                                 <div class="card" v-for="group in groups">
  584.                                     <div class="card-header" :id="'heading'+group.id">
  585.                                         <button class="btn btn-link collapsed" :id="'jssubGroup'+group.id"
  586.                                                 v-on:click="setSubGroup(group.id)" type="button" data-toggle="collapse" data-bs-toggle="collapse"
  587.                                                 :data-target="'#collapse-'+group.id" :data-bs-target="'#collapse-'+group.id" v-html="group.title"
  588.                                                 aria-expanded="true" aria-controls="collapseOne"></button>
  589.                                     </div>
  590.                                     <template v-for="sGroup in group.groups">
  591.                                         <div :id="'collapse-'+group.id" class="head-collapse collapse"
  592.                                              :aria-labelledby="'heading'+group.id" data-parent="#accordionExample">
  593.                                             <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"
  594.                                                  v-for="work in works[sGroup.id].works">
  595.                                                 <div class="services__item">
  596.                                                     <div class="align-items-center d-flex">
  597.                                                         <div class="checkbox__btn">
  598.                                                             <label class="checkbox__item">
  599.                                                                 <input type="checkbox" checked="checked"
  600.                                                                        name="userJobs[]" v-model="userJobs"
  601.                                                                        :value="work.id">
  602.                                                                 <span class="checkmark"></span>
  603.                                                             </label>
  604.                                                         </div>
  605.                                                         <div class="w-100">
  606.                                                             <div style="cursor: pointer" class="services__item-head"
  607.                                                                  @click="toggleJob(work.id)">
  608.                                                                 <span class="services__item-name"
  609.                                                                       v-if="work.isRegulation"
  610.                                                                       v-html="work.millage+' км'"></span>
  611.                                                                 <span class="services__item-name" v-else
  612.                                                                       v-html="work.title"></span>
  613.                                                                 <div>
  614.                                                                     <span class="services__item-price"
  615.                                                                           v-html="work.totalCost.toLocaleString() + ' грн'"></span>
  616.                                                                     <span class="services__item-price-old ml-2"
  617.                                                                           v-if="work.fullTotalCost && work.fullTotalCost > work.totalCost"
  618.                                                                           v-html="work.fullTotalCost.toLocaleString() + ' грн'"></span>
  619.                                                                 </div>
  620.                                                             </div>
  621.                                                             <div class="services__item-body">
  622.                                                                 <span class="services__item-hour"><span
  623.                                                                             v-html="work.time"></span> {{ 'modules.online-booking.hours'|trans({},'dc_base') }}</span>
  624.                                                                 <a class="btn-link collapsed" data-toggle="collapse" data-bs-toggle="collapse"
  625.                                                                    :href="'#collapseItemMob'+work.id" role="button"
  626.                                                                    aria-expanded="true"
  627.                                                                    :aria-controls="'collapseItemMob'+work.id">
  628.                                                                     <span class="open-text">{{ 'pages.buttons.details'|trans({},'dc_base') }}</span>
  629.                                                                     <span class="close-text">{{ 'car_in_stock_module.hide'|trans({},'dc_base') }}</span>
  630.                                                                 </a>
  631.                                                             </div>
  632.                                                         </div>
  633.                                                     </div>
  634.                                                     <div class="collapse" :id="'collapseItemMob'+work.id">
  635.                                                         <div class="services__item-desc">
  636.                                                             <span class="services__item-desc-head">{{ 'modules.online-booking.works'|trans({},'dc_base') }}</span>
  637.                                                             <div class="services__item-line mb-2"
  638.                                                                  v-for="job in work.works">
  639.                                                                 <span class="services__item-desc-title"
  640.                                                                       v-html="job.title"></span>
  641.                                                                 <span class="services__item-price"
  642.                                                                       v-html="job.price.toLocaleString()+' грн'"></span>
  643.                                                             </div>
  644.                                                             <span v-if="work.parts.length"
  645.                                                                   class="services__item-desc-head">{{ 'modules.online-booking.parts'|trans({},'dc_base') }}</span>
  646.                                                             <div class="services__item-line" v-for="part in work.parts">
  647.                                                                 <span class="services__item-desc-title"
  648.                                                                       v-html="part.title + ' ('+part.count+' '+part.unit+')'"></span>
  649.                                                                 <span class="services__item-price"
  650.                                                                       v-html="part.price.toLocaleString()+' грн'"></span>
  651.                                                             </div>
  652.                                                         </div>
  653.                                                     </div>
  654.                                                 </div>
  655.                                             </div>
  656.                                         </div>
  657.                                     </template>
  658.                                 </div>
  659.                             </div>
  660.                         </div>
  661.                         <div class="col-md-12">
  662.                             <div class="row justify-content-end">
  663.                                 <div class="col-md-8 text-center" v-if="userJobs.length > 0">
  664.                                     <span class="new_block-to-title">{{ 'modules.online-booking.new_block_title'|trans({},'dc_base') }}</span>
  665.                                     <div class="form-group">
  666.                                         <textarea v-model="comment" class="form-control"
  667.                                                   placeholder="{{ 'modules.online-booking.comment_pl'|trans({},'dc_base') }}"></textarea>
  668.                                     </div>
  669.                                 </div>
  670.                             </div>
  671.                         </div>
  672.                     </div>
  674.                 </template>
  675.                 <div class="row new_block-to" v-if="!userJobs.length">
  676.                     <div class="col-md-12 text-center">
  677.                         <hr>
  678.                         <svg class="d-block m-auto" width="30" height="30" viewBox="0 0 30 30" fill="none"
  679.                              xmlns="http://www.w3.org/2000/svg">
  680.                             <path d="M15 27.5C21.9036 27.5 27.5 21.9036 27.5 15C27.5 8.09644 21.9036 2.5 15 2.5C8.09644 2.5 2.5 8.09644 2.5 15C2.5 21.9036 8.09644 27.5 15 27.5Z"
  681.                                   stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  682.                             <path d="M18.75 11.25L11.25 18.75" stroke="#AAAAAA" stroke-width="1.5"
  683.                                   stroke-linecap="round" stroke-linejoin="round"/>
  684.                             <path d="M11.25 11.25L18.75 18.75" stroke="#AAAAAA" stroke-width="1.5"
  685.                                   stroke-linecap="round" stroke-linejoin="round"/>
  686.                         </svg>
  687.                         <span class="new_block-to-headtitle">{{ 'modules.online-booking.new_block_subtitle'|trans({},'dc_base') }}</span>
  688.                         <div class="row justify-content-center mt-4">
  689.                             <div class="col-md-8">
  690.                                 <textarea v-model="comment" class="form-control mb-4"
  691.                                           placeholder="{{ 'modules.online-booking.comment_pl_2'|trans({},'dc_base') }}"></textarea>
  692.                             </div>
  693.                         </div>
  694.                         <p class="new_block-to-desc mb-0">{{ 'modules.online-booking.new_block_desc'|trans({},'dc_base') }}</p>
  695.                         <hr>
  696.                     </div>
  697.                 </div>
  698.                 <div class="row justify-content-end" v-if="car">
  699.                     <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
  700.                         <div class="row justify-content-end">
  701.                             <div class="col-md-6">
  702.                                 <button v-on:click="setStep(step+1)" type="button"
  703.                                         class="btn btn-primary w-100">{{ 'modules.online-booking.continue'|trans({},'dc_base') }}</button>
  704.                             </div>
  705.                         </div>
  706.                     </div>
  707.                 </div>
  708.             </div>
  709.             <div class="col-md-12 tab-pane fade choosedate-content" :class="step==4 ? 'show active' : ''"
  710.                  id="choosedate" role="tabpanel" aria-labelledby="choosedate-tab">
  711.                 <div class="row d-flex">
  712.                     {% if jlr is defined %}
  713.                             <div class="calc-title-btn__wrapper">
  714.                                 <button class="calc-title-btn" :class="{ active: !isActive }"
  715.                                         @click="changeDelivery(false); isActive = !isActive">{{ 'modules.online-booking.delivery_myself'|trans({},'dc_base') }}</button>
  716.                                 <button class="calc-title-btn" :class="{ active: isActive }"
  717.                                         @click="changeDelivery(true); isActive = !isActive">{{ 'modules.online-booking.delivery_auto'|trans({},'dc_base') }}</button>
  718.                             </div>
  719.                         {% endif %}
  721.                     <div class="col-sm-12 col-md-12 col-lg-5 col-xl-4">
  723.                         <div class="recording__service-calendar">
  724.                             <span class="month-name-block">
  725.                                 <span v-on:click="setMonth(month-1)">&lt;</span>
  726.                                 <span class="month-name" v-html="calendarMonth"></span>
  727.                                 <span v-on:click="setMonth(month+1)">&gt;</span>
  728.                             </span>
  729.                             <div>
  730.                                 <div class="recording__service-calendar-head">
  731.                                     <span>Пн</span>
  732.                                     <span>Вт</span>
  733.                                     <span>Ср</span>
  734.                                     <span>Чт</span>
  735.                                     <span>Пт</span>
  736.                                     <span>Сб</span>
  737.                                     <span>{{ 'modules.online-booking.day_sunday'|trans({},'dc_base') }}</span>
  738.                                 </div>
  739.                                 <div class="recording__service-calendar-day">
  740.                                     <span v-on:click="setDate" :data-date="day.active ? day.day : null"
  741.                                           v-for="day in days" :class="!day.active ? 'active' : ''"
  742.                                           v-html="day.day"></span>
  743.                                 </div>
  744.                             </div>
  745.                         </div>
  746.                     </div>
  747.                     <div class="col-sm-12 col-md-12 col-lg-7 col-xl-8" id="times-wrapper">
  748.                         <div class="recording__service-calendar-time" v-if="times.length">
  749.                             <div v-if="!isTodayDate && isNightDealer" class="night-time blue-color" data-time="00:00 - 08:00" @click="setTime">00:00 - 08:00</div>
  750.                             <div :class="checkTime(time)" :data-time="time" v-for="time in times"
  751.                                  v-on="!disabledDate(time) ? { click: setTime } : {}" v-html="time"></div>
  752.                             <div v-if="isNightDealer" class="night-time blue-color" data-time="20:00 - 00:00" @click="setTime">20:00 - 00:00</div>
  753.                         </div>
  754.                         <div class="recording__service-calendar-time" v-else>
  755.                             {{ 'site.choose_time'|trans({},'dc_base') }}
  756.                         </div>
  757.                         <div class="service-square-info" v-if="isYellow">
  758.                             <div></div>
  759.                             <span>{{ 'modules.online-booking.time-alert'|trans({}, 'dc_base') }}</span>
  760.                         </div>
  761.                         <div class="choosedate-content-info blue-chosedate" v-if="isBlue">
  762.                             {% if app.request.locale == 'ua' %}
  763.                             <p>Ви маєте можливість скористатися новою послугою "Прийом авто у не робочий час", та залишити своє авто на обслуговування самостійно, коли вам зручно. <a href="{{ path('portal_service_night_booking') }}" target="blank">Детальніше про послугу</a></p>
  764.                             {% else %}
  765.                             <p>Вы можете воспользоваться новой услугой "Прием авто в нерабочее время", и оставить свой автомобиль на обслуживание самостоятельно, когда вам удобно. <a href="{{ path('portal_service_night_booking') }}" target="blank">Подробнее об услуге</a></p>
  766.                             {% endif %}
  767.                         </div>
  769.                         <div class="choosedate-content-info" v-if="times.length">
  770.                             <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
  771.                                  xmlns="http://www.w3.org/2000/svg">
  772.                                 <path d="M15 29C22.732 29 29 22.732 29 15C29 7.26801 22.732 1 15 1C7.26801 1 1 7.26801 1 15C1 22.732 7.26801 29 15 29Z"
  773.                                       stroke="#E40C25" stroke-width="2" stroke-linecap="round"
  774.                                       stroke-linejoin="round"></path>
  775.                                 <path d="M15 9.40002V15" stroke="#E40C25" stroke-width="2" stroke-linecap="round"
  776.                                       stroke-linejoin="round"></path>
  777.                                 <path d="M15 20.6H15.014" stroke="#E40C25" stroke-width="2" stroke-linecap="round"
  778.                                       stroke-linejoin="round"></path>
  779.                             </svg>
  780.                             <p>{{ 'modules.online-booking.time_info'|trans({},'dc_base') }}</p>
  781.                         </div>
  782.                     </div>
  783.                 </div>
  784.                 <div class="row">
  785.                     <div class="col-sm-12 col-md-12 col-lg-7 col-xl-6">
  786.                         <div class="row">
  787.                             <div class="col-md-6">
  788.                                 <button v-on:click="setStep(step+1)" type="button"
  789.                                         class="btn btn-primary w-100">{{ 'modules.online-booking.continue'|trans({},'dc_base') }}</button>
  790.                             </div>
  791.                             <div class="col-md-12">
  792.                                 <div class="choosedate-content-info-mobile blue-chosedate d-none" v-if="isBlue">
  793.                                     {% if app.request.locale == 'ua' %}
  794.                                         <p>Ви маєте можливість скористатися новою послугою "Прийом авто у не робочий час", та залишити своє авто на обслуговування самостійно, коли вам зручно. <a href="{{ path('portal_service_night_booking') }}" target="blank">Детальніше про послугу</a></p>
  795.                                     {% else %}
  796.                                         <p>Вы можете воспользоваться новой услугой "Прием авто в нерабочее время", и оставить свой автомобиль на обслуживание самостоятельно, когда вам удобно. <a href="{{ path('portal_service_night_booking') }}" target="blank">Подробнее об услуге</a></p>
  797.                                     {% endif %}
  798.                                 </div>
  800.                                 <div class="choosedate-content-info-mobile d-none">
  801.                                     <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
  802.                                          xmlns="http://www.w3.org/2000/svg">
  803.                                         <path d="M15 29C22.732 29 29 22.732 29 15C29 7.26801 22.732 1 15 1C7.26801 1 1 7.26801 1 15C1 22.732 7.26801 29 15 29Z"
  804.                                               stroke="#E40C25" stroke-width="2" stroke-linecap="round"
  805.                                               stroke-linejoin="round"></path>
  806.                                         <path d="M15 9.40002V15" stroke="#E40C25" stroke-width="2"
  807.                                               stroke-linecap="round" stroke-linejoin="round"></path>
  808.                                         <path d="M15 20.6H15.014" stroke="#E40C25" stroke-width="2"
  809.                                               stroke-linecap="round" stroke-linejoin="round"></path>
  810.                                     </svg>
  811.                                     <p>{{ 'modules.online-booking.time_info'|trans({},'dc_base') }}</p>
  812.                                 </div>
  813.                             </div>
  814.                         </div>
  815.                     </div>
  816.                 </div>
  817.             </div>
  818.             <div class="col-md-12 tab-pane fade record-content" :class="step==5 ? 'show active' : ''" id="record" role="tabpanel" aria-labelledby="record-tab">
  819.                 <div class="row">
  820.                     <div class="col-sm-12 col-md-12 col-lg-8 col-xl-6">
  821.                         <div class="row">
  822.                             <div class="col-md-12">
  823.                                 <span class="tab-content-title font-weight-normal d-lg-block d-sm-none">{{ 'modules.online-booking.contacts_info'|trans({},'dc_base') }}</span>
  824.                             </div>
  825.                             <div class="col-md-6">
  826.                                 <div class="form-group">
  827.                                     <input type="text" id="online-name" v-model="user.name" name="text" value="" class="form-control" placeholder="{{ 'modules.online-booking.your_name'|trans({},'dc_base') }} *">
  828.                                 </div>
  829.                             </div>
  830.                             <div class="col-md-6">
  831.                                 <div class="form-group">
  832.                                     <input type="text" id="online-phone" v-model="user.phone" v-mask="'+38(###)###-##-##'" name="text" value="" class="form-control" placeholder="{{ 'modules.online-booking.your_phone'|trans({},'dc_base') }} *">
  833.                                 </div>
  834.                             </div>
  835.                             <div class="col-md-12">
  836.                                 <div class="form-group">
  837.                                     <input type="text" id="online-email" v-model="user.email" name="text" value="" class="form-control" placeholder="E–mail {{ 'modules.online-booking.your_mail'|trans({},'dc_base') }}">
  838.                                 </div>
  840.                         {# =======Функціонал тільки для Лексуса========= #}
  841.                         {% if dealer is defined and dealer.id == 14 %}
  842.                         <div class="delete_block">
  844.                             <div class="form-group">
  845.                                 <select id="connection-type" class="form-control touch_option_select" v-model="selectedConnectionType">
  846.                                     <option value="" disabled selected>{{ 'modules.online-booking.way_communication'|trans({},'dc_base') }}</option>
  847.                                     <option value="Телефон">Телефон</option>
  848.                                     <option value="Viber">Viber</option>
  849.                                 </select>
  850.                             </div>
  852.                             <p id="mobility-service">{{ 'modules.online-booking.mobility_service'|trans({},'dc_base') }}</p>
  853.                             <div class="touch_option_wrapper">
  854.                                 <label class="touch-label">
  855.                                 <div class="touch_info_wrapper">
  856.                                     <input type="radio" name="touch_type" value="Підмінне авто" v-model="selectedMobilityService">
  857.                                     <span class="touch-label__checkmark">
  858.                                         <svg class="icon" role="presentation" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24px" height="24px"><path d="M 19.980469 5.9902344 A 1.0001 1.0001 0 0 0 19.292969 6.2929688 L 9 16.585938 L 5.7070312 13.292969 A 1.0001 1.0001 0 1 0 4.2929688 14.707031 L 8.2929688 18.707031 A 1.0001 1.0001 0 0 0 9.7070312 18.707031 L 20.707031 7.7070312 A 1.0001 1.0001 0 0 0 19.980469 5.9902344 z"/></svg>
  859.                                     </span>
  861.                                     <span class="touch-label__value">
  862.                                         {{ 'modules.online-booking.replacement_car'|trans({},'dc_base') }}
  863.                                     </span>
  864.                                      <svg class="touch_info_modal-icon" xmlns:xlink="http://www.w3.org/1999/xlink" class="widgets__content-info info__box__discont-svg" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" fill="none">
  865.                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99943 0C7.65664 0 9.1565 0.671257 10.2421 1.75682C11.3276 2.84351 12 4.34336 12 5.99943C12 7.65664 11.3276 9.1565 10.2421 10.2421C9.1565 11.3276 7.65664 12 5.99943 12C4.34336 12 2.84351 11.3276 1.75682 10.2421C0.671257 9.1565 0 7.65664 0 5.99943C0 4.34336 0.671257 2.84237 1.75682 1.75682C2.84237 0.671257 4.34336 0 5.99943 0ZM9.57985 2.41902C8.66409 1.50325 7.39742 0.936138 5.99943 0.936138C4.60145 0.936138 3.33591 1.50325 2.41902 2.41902C1.50325 3.33591 0.936138 4.60145 0.936138 5.99943C0.936138 7.39742 1.50325 8.66409 2.41902 9.57985C3.33591 10.4956 4.60145 11.0627 5.99943 11.0627C7.39742 11.0627 8.66409 10.4956 9.57985 9.57985C10.4956 8.66409 11.0627 7.39742 11.0627 5.99943C11.0627 4.60145 10.4956 3.33591 9.57985 2.41902ZM5.94736 3.80568C5.68927 3.80568 5.47986 3.59626 5.47986 3.33818C5.47986 3.07895 5.68927 2.86954 5.94736 2.86954H6.0515C6.31073 2.86954 6.52014 3.07895 6.52014 3.33818C6.52014 3.59626 6.31073 3.80568 6.0515 3.80568H5.94736ZM5.5274 4.88784C5.5274 4.62975 5.73682 4.42034 5.99604 4.42034C6.25413 4.42034 6.46354 4.62975 6.46354 4.88784V8.66182C6.46354 8.91991 6.25413 9.13046 5.99604 9.13046C5.73682 9.13046 5.5274 8.91991 5.5274 8.66182V4.88784Z" fill="#9C9C9C"></path>
  866.                                         </svg>
  867.                                         <div class="touch_info_modal">
  868.                                             {{ 'modules.online-booking.replacement_car_lexus'|trans({},'dc_base') }}
  869.                                         </div>
  870.                                     </div>
  871.                                 </label>
  872.                                 <label class="touch-label">
  873.                                     <input type="radio" name="touch_type" value="Таксі" v-model="selectedMobilityService">
  874.                                     <span class="touch-label__checkmark">
  875.                                         <svg class="icon" role="presentation" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24px" height="24px"><path d="M 19.980469 5.9902344 A 1.0001 1.0001 0 0 0 19.292969 6.2929688 L 9 16.585938 L 5.7070312 13.292969 A 1.0001 1.0001 0 1 0 4.2929688 14.707031 L 8.2929688 18.707031 A 1.0001 1.0001 0 0 0 9.7070312 18.707031 L 20.707031 7.7070312 A 1.0001 1.0001 0 0 0 19.980469 5.9902344 z"/></svg>
  876.                                     </span>
  878.                                     <span class="touch-label__value">{{ 'modules.online-booking.taxi'|trans({},'dc_base') }}</span>
  879.                                 </label>
  880.                                 <label class="touch-label">
  881.                                         <input type="radio" name="touch_type" value="Очікування" v-model="selectedMobilityService">
  882.                                         <span class="touch-label__checkmark">
  883.                                             <svg class="icon" role="presentation" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24px" height="24px"><path d="M 19.980469 5.9902344 A 1.0001 1.0001 0 0 0 19.292969 6.2929688 L 9 16.585938 L 5.7070312 13.292969 A 1.0001 1.0001 0 1 0 4.2929688 14.707031 L 8.2929688 18.707031 A 1.0001 1.0001 0 0 0 9.7070312 18.707031 L 20.707031 7.7070312 A 1.0001 1.0001 0 0 0 19.980469 5.9902344 z"/></svg>
  884.                                         </span>
  885.                                         <span class="touch-label__value">{{ 'modules.online-booking.wait_in_hall'|trans({},'dc_base') }}</span>
  886.                                 </label>
  887.                             </div>
  889.                             {#                            START ToGo Service                          #}
  890.                                 <div class="touch_option_wrapper">
  891.                                     <label class="touch-label">
  892.                                         <p id="to-go" class="to-go-p">{{ 'modules.online-booking.to_go'|trans({},'dc_base') }}</p>
  893.                                             <svg class="touch_info_modal-icon-second" xmlns:xlink="http://www.w3.org/1999/xlink" class="widgets__content-info info__box__discont-svg" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" fill="none">
  894.                                                 <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99943 0C7.65664 0 9.1565 0.671257 10.2421 1.75682C11.3276 2.84351 12 4.34336 12 5.99943C12 7.65664 11.3276 9.1565 10.2421 10.2421C9.1565 11.3276 7.65664 12 5.99943 12C4.34336 12 2.84351 11.3276 1.75682 10.2421C0.671257 9.1565 0 7.65664 0 5.99943C0 4.34336 0.671257 2.84237 1.75682 1.75682C2.84237 0.671257 4.34336 0 5.99943 0ZM9.57985 2.41902C8.66409 1.50325 7.39742 0.936138 5.99943 0.936138C4.60145 0.936138 3.33591 1.50325 2.41902 2.41902C1.50325 3.33591 0.936138 4.60145 0.936138 5.99943C0.936138 7.39742 1.50325 8.66409 2.41902 9.57985C3.33591 10.4956 4.60145 11.0627 5.99943 11.0627C7.39742 11.0627 8.66409 10.4956 9.57985 9.57985C10.4956 8.66409 11.0627 7.39742 11.0627 5.99943C11.0627 4.60145 10.4956 3.33591 9.57985 2.41902ZM5.94736 3.80568C5.68927 3.80568 5.47986 3.59626 5.47986 3.33818C5.47986 3.07895 5.68927 2.86954 5.94736 2.86954H6.0515C6.31073 2.86954 6.52014 3.07895 6.52014 3.33818C6.52014 3.59626 6.31073 3.80568 6.0515 3.80568H5.94736ZM5.5274 4.88784C5.5274 4.62975 5.73682 4.42034 5.99604 4.42034C6.25413 4.42034 6.46354 4.62975 6.46354 4.88784V8.66182C6.46354 8.91991 6.25413 9.13046 5.99604 9.13046C5.73682 9.13046 5.5274 8.91991 5.5274 8.66182V4.88784Z" fill="#9C9C9C"></path>
  895.                                             </svg>
  896.                                         <div class="touch_info_modal-second">
  897.                                             {{ 'modules.online-booking.to_go_description'|trans({},'dc_base') }}
  898.                                         </div>
  900.                                         <div class="touch_info_wrapper">
  901.                                             <input type="checkbox" name="touch_type" v-model="toGoService">
  902.                                             <span class="touch-label__checkmark">
  903.                                             <svg class="icon" role="presentation" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24px" height="24px"><path d="M 19.980469 5.9902344 A 1.0001 1.0001 0 0 0 19.292969 6.2929688 L 9 16.585938 L 5.7070312 13.292969 A 1.0001 1.0001 0 1 0 4.2929688 14.707031 L 8.2929688 18.707031 A 1.0001 1.0001 0 0 0 9.7070312 18.707031 L 20.707031 7.7070312 A 1.0001 1.0001 0 0 0 19.980469 5.9902344 z"/></svg>
  904.                                         </span>
  906.                                         </div>
  907.                                     </label>
  908.                                 </div>
  909.                             {#                        END ToGo Service                           #}
  910.                         </div>
  911.                         {% endif %}
  913.                         {# =====END====Функціонал тільки для Лексуса========= #}
  916.                                 <div class="form-group" v-if="isNight">
  917.                                     <input type="text" id="online-carRegNumber" v-model="car.Number" name="text" value="" class="form-control" placeholder="{{ 'modules.online-booking.reg_number_car'|trans({},'dc_base') }}">
  918.                                 </div>
  920.                                 <div class="form-group checkbox__btn mb-4" v-if="isNight">
  921.                                     <label class="checkbox__item" style="font-size: 13px; cursor: pointer;" for="online-isTruck">
  922.                                         <input type="checkbox" id="online-isTruck" v-model="isTruck">
  923.                                         <span class="checkmark"></span>
  924.                                         Буду на евакуаторі
  925.                                     </label>
  926.                                 </div>
  928.                                 <div class="form-group" v-if="isNight">
  929.                                     <input v-if="isTruck" type="text" id="online-truckRegNumber" v-model="truckRegNumber" name="text" value="" class="form-control" placeholder="Введіть реєстраційний номер евакуатора">
  930.                                 </div>
  932.                                 {#                                <div class="form-group"> #}
  933.                                 {#                                    <input type="text" id="online-address" v-if="delivery" v-model="user.address" #}
  934.                                 {#                                           name="text" value="" class="form-control" #}
  935.                                 {#                                           placeholder="{{ 'modules.online-booking.your_address'|trans({},'dc_base') }}"> #}
  936.                                 {#                                </div> #}
  938.                                 <div class="form-group checkbox__btn mb-4">
  939.                                     <label class="checkbox__item" id="confirmLabel"
  940.                                            style="font-size: 13px; cursor: pointer;">
  941.                                         <input type="checkbox" v-model="confirm" id="online-isConfirm">
  942.                                         <span id="check_privacy" class="checkmark"></span>
  943.                                         <span v-if="isNight">
  944.                                             {{ 'personal_data_agreement.privacy_is_night'|trans({}, 'dc_base') }}
  945.                                             <a :href="options.nightBookingAgreementUrl" target="_blank"> {{ 'personal_data_agreement.privacy_link_is_night'|trans({}, 'dc_base') }}</a>
  946.                                         </span>
  947.                                         <span v-else>
  948.                                             {{ 'personal_data_agreement.privacy'|trans({}, 'dc_base') }}
  949.                                                     <a class="" :href="options.agreementUrl" target="_blank">{{ 'personal_data_agreement.privacy_link'|trans({}, 'dc_base') }}</a>
  950.                                         </span>
  951.                                     </label>
  952.                                 </div>
  953.                                 <div class="checkbox__btn" style="margin-left: 35px">
  954.                                     <a v-if="delivery" target="_blank" class="bokking-doc"
  955.                                        :href="options.deliveryUrl">{{ 'modules.online-booking.conditions_testdrive'|trans({},'dc_base') }}</a>
  956.                                 </div>
  957.                             </div>
  958.                         </div>
  960.                         <div class="row">
  961.                             <div class="col-md-6">
  962.                                 <button v-on:click="booking"
  963.                                         class="btn btn-primary w-100">{{ 'modules.online-booking.sign_up'|trans({},'dc_base') }}</button>
  964.                             </div>
  965.                         </div>
  966.                     </div>
  967.                 </div>
  968.                 <div class="row" v-if="bookingId && showConfirm && !isFinish">
  969.                     <div class="col-sm-12 col-md-12 col-lg-8 col-xl-6">
  970.                         <div class="row">
  971.                             <div class="col-md-12 mb-3">
  972.                                 {{ 'modules.online-booking.your_phone_number'|trans({},'dc_base') }}:<br> <b
  973.                                         v-html="user.phone"></b> (<a class="online-booking-tel-changed" href="#"
  974.                                                                      v-on:click.stop.prevent="showConfirm = false">{{ 'modules.online-booking.change_small_word'|trans({},'dc_base') }}</a>) {{ 'modules.online-booking.we_send_sms'|trans({},'dc_base') }}
  975.                             </div>
  976.                             <div class="col-md-6">
  977.                                 <div class="form-group">
  978.                                     <input type="text" v-model="confirmCode" name="text" value="" class="form-control"
  979.                                            placeholder="{{ 'modules.online-booking.confirmation_code'|trans({},'dc_base') }}">
  980.                                 </div>
  981.                             </div>
  982.                         </div>
  983.                         <div class="row">
  984.                             <div class="col-md-6">
  985.                                 <button v-on:click="confirmBooking" type="button"
  986.                                         class="btn btn-primary w-100">{{ 'modules.online-booking.confirm_record'|trans({},'dc_base') }}</button>
  987.                             </div>
  988.                         </div>
  989.                     </div>
  990.                 </div>
  991.                 <div class="row" v-if="(!user || !user.id) && isFinish">
  992.                     <div class="col-md-4">
  993.                     </div>
  994.                     <div class="col-md-4" style="margin-bottom: 15px">
  995.                         <button data-toggle="modal" data-bs-toggle="modal" data-target="#enterModal" data-bs-target="#enterModal"
  996.                                 class="btn btn-primary w-100">{{ 'modules.online-booking.reg_btn'|trans({},'dc_base') }}</button>
  997.                     </div>
  998.                     <div class="col-md-4">
  999.                     </div>
  1000.                     <div class="col-md-12 text-center">
  1001.                         <span class="tab-content-title">{{ 'modules.online-booking.reg_title'|trans({},'dc_base') }}</span>
  1002.                     </div>
  1003.                     <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4">
  1004.                         <div class="autorizarion__adv">
  1005.                             <div class="autorizarion__adv-head">
  1006.                                 <svg width="34" height="30" viewBox="0 0 34 30" fill="none"
  1007.                                      xmlns="http://www.w3.org/2000/svg">
  1008.                                     <path d="M11.0526 14.2105L13.4211 7.10526H27.6316L30 14.2105H11.0526ZM27.6316 22.1053C27.0034 22.1053 26.401 21.8557 25.9569 21.4116C25.5127 20.9674 25.2632 20.365 25.2632 19.7368C25.2632 19.1087 25.5127 18.5063 25.9569 18.0621C26.401 17.618 27.0034 17.3684 27.6316 17.3684C28.2597 17.3684 28.8621 17.618 29.3063 18.0621C29.7505 18.5063 30 19.1087 30 19.7368C30 20.365 29.7505 20.9674 29.3063 21.4116C28.8621 21.8557 28.2597 22.1053 27.6316 22.1053ZM13.4211 22.1053C12.7929 22.1053 12.1905 21.8557 11.7463 21.4116C11.3022 20.9674 11.0526 20.365 11.0526 19.7368C11.0526 19.1087 11.3022 18.5063 11.7463 18.0621C12.1905 17.618 12.7929 17.3684 13.4211 17.3684C14.0492 17.3684 14.6516 17.618 15.0958 18.0621C15.5399 18.5063 15.7895 19.1087 15.7895 19.7368C15.7895 20.365 15.5399 20.9674 15.0958 21.4116C14.6516 21.8557 14.0492 22.1053 13.4211 22.1053ZM29.8737 6.31579C29.5421 5.36842 28.6421 4.73684 27.6316 4.73684H13.4211C12.4105 4.73684 11.5105 5.36842 11.1789 6.31579L7.89474 15.7895V28.4211C7.89474 28.8398 8.06109 29.2414 8.3572 29.5375C8.65331 29.8336 9.05492 30 9.47368 30H11.0526C11.4714 30 11.873 29.8336 12.1691 29.5375C12.4652 29.2414 12.6316 28.8398 12.6316 28.4211V26.8421H28.4211V28.4211C28.4211 28.8398 28.5874 29.2414 28.8835 29.5375C29.1796 29.8336 29.5812 30 30 30H31.5789C31.9977 30 32.3993 29.8336 32.6954 29.5375C32.9915 29.2414 33.1579 28.8398 33.1579 28.4211V15.7895L29.8737 6.31579ZM21.9789 1.57895C21.6474 0.631579 20.7474 0 19.7368 0H5.52632C4.51579 0 3.61579 0.631579 3.28421 1.57895L0 11.0526V23.6842C0 24.103 0.166353 24.5046 0.462463 24.8007C0.758573 25.0968 1.16018 25.2632 1.57895 25.2632H3.15789C3.57666 25.2632 3.97827 25.0968 4.27438 24.8007C4.57049 24.5046 4.73684 24.103 4.73684 23.6842V17.2263C3.50526 16.7842 2.87368 15.4263 3.31579 14.2105C3.66316 13.2632 4.53158 12.6316 5.52632 12.6316H5.63684L6.74211 9.47368H3.15789L5.52632 2.36842H22.2474L21.9789 1.57895Z"
  1009.                                           fill="#DCDCDC"/>
  1010.                                 </svg>
  1011.                                 <span class="autorizarion__adv-title">{{ 'modules.online-booking.add_cars_t'|trans({},'dc_base') }}</span>
  1012.                             </div>
  1013.                             <p class="autorizarion__adv-desc">{{ 'modules.online-booking.add_cars_text'|trans({},'dc_base') }}</p>
  1014.                         </div>
  1015.                     </div>
  1016.                     <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4">
  1017.                         <div class="autorizarion__adv">
  1018.                             <div class="autorizarion__adv-head">
  1019.                                 <svg width="29" height="30" viewBox="0 0 29 30" fill="none"
  1020.                                      xmlns="http://www.w3.org/2000/svg">
  1021.                                     <path d="M18.3914 13.2418C22.0696 13.2418 25.0123 16.1844 25.0123 19.8627C25.0123 21.1574 24.6444 22.3786 23.9971 23.3938L28.5287 27.9549L26.4836 30L21.8931 25.4831C20.8779 26.1157 19.6714 26.4836 18.3914 26.4836C14.7131 26.4836 11.7705 23.541 11.7705 19.8627C11.7705 16.1844 14.7131 13.2418 18.3914 13.2418ZM18.3914 16.1844C17.4158 16.1844 16.4802 16.5719 15.7904 17.2617C15.1006 17.9516 14.7131 18.8871 14.7131 19.8627C14.7131 20.8382 15.1006 21.7738 15.7904 22.4636C16.4802 23.1534 17.4158 23.541 18.3914 23.541C19.3669 23.541 20.3025 23.1534 20.9923 22.4636C21.6821 21.7738 22.0696 20.8382 22.0696 19.8627C22.0696 18.8871 21.6821 17.9516 20.9923 17.2617C20.3025 16.5719 19.3669 16.1844 18.3914 16.1844ZM5.88524 17.6557V20.5983H8.82786C9.03384 22.8789 10.0049 24.924 11.4909 26.4836H2.94262C1.30947 26.4836 0 25.1594 0 23.541V2.94262C0 1.30947 1.30947 0 2.94262 0H23.541C24.3214 0 25.0698 0.310025 25.6217 0.861873C26.1735 1.41372 26.4836 2.16219 26.4836 2.94262V14.7572C24.7916 12.0795 21.8048 10.2992 18.3914 10.2992C16.5228 10.2992 14.7719 10.8436 13.3006 11.7705H5.88524V14.7131H10.2992C9.7695 15.5959 9.3281 16.5964 9.07798 17.6557H5.88524ZM20.5983 8.82786V5.88524H5.88524V8.82786H20.5983Z"
  1022.                                           fill="#DCDCDC"/>
  1023.                                 </svg>
  1024.                                 <span class="autorizarion__adv-title">{{ 'modules.online-booking.status_t'|trans({},'dc_base') }}</span>
  1025.                             </div>
  1026.                             <p class="autorizarion__adv-desc">{{ 'modules.online-booking.status_text'|trans({},'dc_base') }}</p>
  1027.                         </div>
  1028.                     </div>
  1029.                     <div class="col-sm-12 col-md-6 col-lg-4 col-xl-4">
  1030.                         <div class="autorizarion__adv">
  1031.                             <div class="autorizarion__adv-head">
  1032.                                 <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
  1033.                                      xmlns="http://www.w3.org/2000/svg">
  1034.                                     <path d="M4.9 7C4.34305 7 3.8089 6.77875 3.41508 6.38492C3.02125 5.9911 2.8 5.45695 2.8 4.9C2.8 4.34305 3.02125 3.8089 3.41508 3.41508C3.8089 3.02125 4.34305 2.8 4.9 2.8C5.45695 2.8 5.9911 3.02125 6.38492 3.41508C6.77875 3.8089 7 4.34305 7 4.9C7 5.45695 6.77875 5.9911 6.38492 6.38492C5.9911 6.77875 5.45695 7 4.9 7ZM27.174 13.412L14.574 0.812C14.07 0.308 13.37 0 12.6 0H2.8C1.246 0 0 1.246 0 2.8V12.6C0 13.37 0.308 14.07 0.826 14.574L13.412 27.174C13.93 27.678 14.63 28 15.4 28C16.17 28 16.87 27.678 17.374 27.174L27.174 17.374C27.692 16.87 28 16.17 28 15.4C28 14.616 27.678 13.916 27.174 13.412Z"
  1035.                                           fill="#DCDCDC"/>
  1036.                                 </svg>
  1037.                                 <span class="autorizarion__adv-title">{{ 'modules.online-booking.actions_t'|trans({},'dc_base') }}</span>
  1038.                             </div>
  1039.                             <p class="autorizarion__adv-desc">{{ 'modules.online-booking.actions_text'|trans({},'dc_base') }}</p>
  1040.                         </div>
  1041.                     </div>
  1042.                     <div class="col-md-12">
  1043.                         <hr>
  1044.                     </div>
  1045.                 </div>
  1046.             </div>
  1047.         </div>
  1048.     </div>
  1049.     <!-- Modal -->
  1050.     <div class="modal fade" id="selectDealer" data-backdrop="static" data-keyboard="false" tabindex="-1"
  1051.          aria-labelledby="serviceVideoLabel" aria-hidden="true">
  1052.         <div class="modal-dialog modal-dialog-centered">
  1053.             <div class="modal-content">
  1054.                 <div class="modal-header">
  1055.                     {{ 'car_page.new.choose_dealer'|trans({}, 'dc_base') }}
  1056.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1057.                         <span aria-hidden="true">&times;</span>
  1058.                     </button>
  1059.                 </div>
  1060.                 <div class="modal-body" v-if="tempCar">
  1061.                     <div class="service_choose_brand_card-info" style="display: block; position: relative; width: 100%">
  1062.                         <div @click.stop.prevent="setTempDealer(dealer.id)"
  1063.                              class="service_choose_brand_card-info-brand" v-for="dealer in tempCar.dealer">
  1064.                             <span class="service_choose_brand_card-info-brand-name" v-html="dealer.title"></span>
  1065.                             <span class="service_choose_brand_card-info-brand-addr" v-html="dealer.adress"></span>
  1066.                         </div>
  1067.                     </div>
  1069.                 </div>
  1070.             </div>
  1071.         </div>
  1072.     </div>
  1074.     <!-- Modal -->
  1075.     <div class="modal fade" id="selectDealerService" data-backdrop="static" data-keyboard="false" tabindex="-1"
  1076.          aria-labelledby="serviceVideoLabel" aria-hidden="true">
  1077.         <div class="modal-dialog modal-dialog-centered">
  1078.             <div class="modal-content">
  1079.                 <div class="modal-header">
  1080.                     {{ 'car_page.new.choose_dealer'|trans({}, 'dc_base') }}
  1081.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1082.                         <span aria-hidden="true">&times;</span>
  1083.                     </button>
  1084.                 </div>
  1085.                 <div class="modal-body" v-if="brands">
  1086.                     <div class="service_choose_brand_card-info" style="display: block; position: relative; width: 100%">
  1087.                         <div class="modal-body-select-wrapper" v-for="dealer in brands">
  1088.                             <a href="#" class="select__dealer__box" v-if="dealer.dealers" v-for="item in dealer.dealers"
  1089.                                @click.stop.prevent="selectDealer(item.id)">
  1090.                                 <div class="select__dealer-logo"
  1091.                                      v-bind:style="{ backgroundImage: 'url(' + dealer.image + ')' }">
  1092.                                 </div>
  1093.                                 <div class="select__dealer-name__wrapper">
  1094.                                     <span class="select__dealer-name" v-html="item.title"></span>
  1095.                                     <span class="select__dealer-name" v-html="item.adres"></span>
  1096.                                 </div>
  1097.                             </a>
  1098.                             <a href="#" class="select__dealer__box" v-if="dealer.dealerId"
  1099.                                @click.stop.prevent="selectDealer(dealer.dealerId)">
  1100.                                 <div class="select__dealer-logo"
  1101.                                      v-bind:style="{ backgroundImage: 'url(' + dealer.image + ')' }">
  1102.                                 </div>
  1103.                                 <div class="select__dealer-name__wrapper">
  1104.                                     <span class="select__dealer-name" v-html="dealer.dealerTitle"></span>
  1105.                                     <span class="select__dealer-name" v-html="dealer.dealerAddress"></span>
  1106.                                 </div>
  1107.                             </a>
  1108.                         </div>
  1109.                     </div>
  1111.                 </div>
  1112.             </div>
  1113.         </div>
  1114.     </div>
  1115. </section>
  1117. <!-- Modal -->
  1118. <div class="modal fade" id="serviceVideo" data-backdrop="static" data-keyboard="false" tabindex="-1"
  1119.      aria-labelledby="serviceVideoLabel" aria-hidden="true">
  1120.     <div class="modal-dialog modal-dialog-centered">
  1121.         <div class="modal-content">
  1122.             <div class="modal-header">
  1123.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1124.                     <span aria-hidden="true">&times;</span>
  1125.                 </button>
  1126.             </div>
  1127.             <div class="modal-body">
  1129.                 <div>
  1130.                     {% if dealer is defined and dealer.linkServiceVideo %}
  1131.                         <iframe width="100%" height="492" src="{{ dealer.linkServiceVideo }}" frameborder="0"
  1132.                                 loading="lazy"
  1133.                                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  1134.                                 allowfullscreen></iframe>
  1135.                     {% else %}
  1136.                         <iframe width="100%" height="492" src="https://www.youtube.com/embed/Xzi-YCr6k7o?rel=0"
  1137.                                 loading="lazy"
  1138.                                 frameborder="0"
  1139.                                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  1140.                                 allowfullscreen></iframe>
  1141.                     {% endif %}
  1142.                 </div>
  1144.             </div>
  1145.         </div>
  1146.     </div>
  1147. </div>