src/PortalBundle/Resources/views/Service/service.html.twig line 1

Open in your IDE?
  1. {% extends '@Portal/template.html.twig' %}
  3. {% block head %}
  4.     <title>{{ 'seo.service_page.title'|trans({}, 'portal_base') }}</title>
  5.     <meta name="description" content="{{ 'seo.service_page.description'|trans({}, 'portal_base') }}">
  6.     {% if isModalForm %}
  7.         <meta name="robots" content="noindex, follow" />
  8.     {% endif %}
  9.     <link rel="stylesheet" type="text/css" href="/dist/{{ MODE }}/portal/css/portalService.css?{{ VERSION }}">
  10.     <link rel="stylesheet" href="{{ asset('bundles/dcsite/css/modules/service/widget-order-to.css') }}">
  11. {% endblock head %}
  13. {% block ogtagDynamic %}
  14.     <meta property="og:title" content="{{ 'seo.service_page.title'|trans({}, 'portal_base') }}">
  15.     <meta property="og:description" content="{{ 'seo.service_page.description'|trans({}, 'portal_base') }}"/>
  16. {% endblock ogtagDynamic %}
  18. {% block content %}
  19.     <section class="breadcrumbs__new">
  20.         <div class="container">
  21.             <ol class="vidi_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
  22.                 <li class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  23.                     <a itemprop="item" href="{{ path('portal_homepage') }}">
  24.                         <span class="breadcrumbs__link" itemprop="name">VIDI.UA</span>
  25.                     </a>
  26.                     <meta itemprop="position" content="1"/>
  27.                 </li>
  29.                 <div class="arrow-bc"></div>
  30.                 <li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
  31.                     itemtype="https://schema.org/ListItem">
  32.                     <span style="color: #ABABAB" class="breadcrumbs__link"
  33.                           itemprop="name">{{ 'base.service'|trans({}, 'portal_base') }}</span>
  34.                     <meta itemprop="position" content="2"/>
  35.                 </li>
  36.             </ol>
  37.         </div>
  38.     </section>
  40.     {% if app.request.locale == 'ru' %}
  41.         {% include '@Portal/Service/translations/service_ru.html.twig' %}
  42.     {% else %}
  43.         {% include '@Portal/Service/translations/service_ua.html.twig' %}
  44.     {% endif %}
  47.     {# =====================MODAL========================= #}
  48.     <div id="serviceModule" class="modal_online_registration {{ isModalForm ? 'active' : '' }}">
  50.         <div class="modal_online_reg_header_wrapper">
  51.             <div class="container">
  52.                 <div class="modal_online_reg_header">
  53.                 <div class="modal_online_reg_header_logo"></div>
  54.                     {# <img class="modal_online_reg_header_logo" src="{{ asset('bundles/portal/img/service/modal-logo-vidi.svg') }}" alt=""> #}
  55.                     <button class="modal_online_reg_header_close" @click="closeService">
  56.                         <svg width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  57.                             <path d="M11.53 11.255L1.53003 1.255M11.53 1.255L1.53003 11.255" stroke="white"
  58.                                   stroke-width="2" stroke-linecap="round"/>
  59.                         </svg>
  60.                     </button>
  61.                 </div>
  62.             </div>
  63.         </div>
  65.         <div id="scroll-container" class="modal_online_reg_main">
  66.             <div class="container">
  67.                 <p class="modal_online_reg_title">{{ 'modal_online_service.online_registration_service'|trans({}, 'portal_base') }} VIDI</p>
  68.                 <p class="modal_online_reg_sub_title">{{ 'modal_online_service.estimate_service_steps'|trans({}, 'portal_base') }}</p>
  69.                 <div id="preloader-service">
  70.                     <div class="modal_online_cover">
  71.                         <div class="modal_online_cover_head">
  72.                             <button v-if="step > 1" class="step_back" @click="prevStep">
  73.                                 <svg width="8" height="14" viewbox="0 0 8 14" fill="none"
  74.                                      xmlns="http://www.w3.org/2000/svg">
  75.                                     <path
  76.                                         d="M6.08321 0.933347L0.466547 6.53335C0.39988 6.60001 0.352547 6.67224 0.324547 6.75001C0.296547 6.82779 0.282769 6.91112 0.283214 7.00001C0.283214 7.0889 0.296991 7.17224 0.324547 7.25001C0.352102 7.32779 0.399436 7.40001 0.466547 7.46668L6.08321 13.0833C6.23877 13.2389 6.43321 13.3167 6.66655 13.3167C6.89988 13.3167 7.09988 13.2333 7.26655 13.0667C7.43321 12.9 7.51655 12.7056 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 7.00001L7.26655 2.10001C7.4221 1.94446 7.49988 1.75268 7.49988 1.52468C7.49988 1.29668 7.41655 1.09957 7.24988 0.933347C7.08321 0.76668 6.88877 0.683347 6.66655 0.683347C6.44432 0.683347 6.24988 0.76668 6.08321 0.933347Z"
  77.                                         fill="inherit"/>
  78.                                 </svg>
  79.                                 <span>Назад</span>
  80.                             </button>
  81.                             <div class="step_count">
  82.                                 <span>{{ 'modal_online_service.step'|trans({}, 'portal_base') }} <span v-html="step"></span> {{ 'modal_online_service.step_letter'|trans({}, 'portal_base') }} 4</span>
  83.                             </div>
  84.                         </div>
  85.                         <div class="modal_online_cover_main">
  86.                             <template v-if="step == 1">
  87.                                 <div v-if="!status.stepChangeDealer" id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  89.                                     <div class="modal_online_cover_head">
  90.                                         <p class="modal_online_cover_head_title">{{ 'modal_online_service.general_your_car'|trans({}, 'portal_base') }}</p>
  92.                                     </div>
  93.                                     <div class="searc_number_wrapper">
  94.                                         <p class="searc_number_text">{{ 'modal_online_service.successful_registration'|trans({}, 'portal_base') }}</p>
  95.                                         <div class="search__number_container">
  96.                                             <div class="search__number__form__wrapper"
  97.                                                  @keyup.enter="findVehicleByNumber"
  98.                                                  :class="[error.formCarNumber && !status.stepChangeVariation ? 'error' : '', !status.stepSearchNumber ? 'disabled' : '']">
  99.                                                 <svg class="search__number-icon" width="35" height="58"
  100.                                                      viewbox="0 0 35 58" fill="none" xmlns="http://www.w3.org/2000/svg">
  101.                                                     <path
  102.                                                         d="M0 6C0 2.68629 2.68629 0 6 0H35V58H6C2.68629 58 0 55.3137 0 52V6Z"
  103.                                                         fill="#0057B8"/>
  104.                                                     <path
  105.                                                         d="M16.6357 36.6V41.496C16.6357 44.064 15.0997 45.108 13.3837 45.108C11.3677 45.108 9.90367 43.872 9.90367 41.412V36.6H10.9237V41.22C10.9237 43.044 11.8117 44.148 13.3837 44.148C14.7637 44.148 15.6157 43.2 15.6157 41.292V36.6H16.6357ZM17.9554 45L21.5674 36.552H22.4434L26.0554 45H24.9634L23.8834 42.456H20.0554L18.9874 45H17.9554ZM21.9754 37.908L20.4634 41.496H23.4874L21.9754 37.908Z"
  106.                                                         fill="white"/>
  107.                                                     <rect x="8" y="10" width="19" height="7" fill="#42ADDE"/>
  108.                                                     <rect x="8" y="17" width="19" height="7" fill="#FFD800"/>
  109.                                                 </svg>
  110.                                                 {% include '@Portal/Modules/search-number-form.twig' %}
  111.                                             </div>
  112.                                             <button class="search__number_change_btn" v-if="carNumber && !status.stepSearchNumber" @click="backToSearchNumber">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  113.                                             <button class="search__number_change_btn desktop_number_search" v-else-if="status.stepSearchNumber" @click="findVehicleByNumber">{{ 'modal_online_service.search'|trans({}, 'portal_base') }}
  114.                                             </button>
  115.                                             <button class="search__number_change_btn"
  116.                                                     v-else-if="!status.stepSearchNumber" @click="backToSearchNumber">
  117.                                                {{ 'modal_online_service.search_number'|trans({}, 'portal_base') }}
  118.                                             </button>
  119.                                             <div v-if="error.formCarNumber && !status.stepChangeVariation"
  120.                                                  class="search_number_info_box">
  121.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
  122.                                                      viewbox="0 0 12 12" fill="none">
  123.                                                     <path fill-rule="evenodd" clip-rule="evenodd"
  124.                                                           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"
  125.                                                           fill="#E40C25"/>
  126.                                                 </svg>
  127.                                                 <p>{{ 'modal_online_service.first_registration_number'|trans({}, 'portal_base') }}</p>
  128.                                             </div>
  129.                                         </div>
  131.                                         <template v-if="status.notFindVehicleNumber">
  132.                                             <p class="search__number_no_search">{{ 'modal_online_service.unfortunately_your_car'|trans({}, 'portal_base') }}
  133.                                                 {{ 'modal_online_service.please_yourself'|trans({}, 'portal_base') }}</p>
  134.                                             <button class="search__number_btn" @click="enterDataVehicle">{{ 'modal_online_service.enter_car_data'|trans({}, 'portal_base') }}</button>
  135.                                         </template>
  137.                                         <button v-if="!status.stepChangeVariation && !status.notFindVehicleNumber"
  138.                                                 class="remember_number_btn" @click="noHaveVehicleNumber">{{ 'modal_online_service.remember_registration_number'|trans({}, 'portal_base') }}
  139.                                         </button>
  141.                                     </div>
  143.                                     <div class="save_car_container"
  144.                                          v-if="user.cars.length > 0 && status.stepSearchNumber">
  145.                                         <p class="save_car_else_titel">{{ 'modal_online_service.or'|trans({}, 'portal_base') }}</p>
  146.                                         <p class="save_car_sub_name ">{{ 'modal_online_service.your_saved_cars'|trans({}, 'portal_base') }}:</p>
  147.                                         <div class="save_car_wrapper">
  148.                                             <div class="save_car_box" v-for="car in user.cars"
  149.                                                  @click="setUserVehicle(car)">
  150.                                                 <span class="save_car_box_name" v-html="car.title"></span>
  151.                                                 <div class="save_car_number_box">
  152.                                                     <span class="save_car_year" v-html="car.MakeYear"></span>
  153.                                                     <div class="save_car_number_wrap">
  154.                                                         <svg width="28" height="28" viewbox="0 0 28 28" fill="none"
  155.                                                              xmlns="http://www.w3.org/2000/svg">
  156.                                                             <path
  157.                                                                 d="M0 6C0 2.68629 2.68629 0 6 0H28V28H6C2.68629 28 0 25.3137 0 22V6Z"
  158.                                                                 fill="#0057B8"/>
  159.                                                             <path
  160.                                                                 d="M13.9238 16.4V19.664C13.9238 21.376 12.8998 22.072 11.7558 22.072C10.4118 22.072 9.43578 21.248 9.43578 19.608V16.4H10.1158V19.48C10.1158 20.696 10.7078 21.432 11.7558 21.432C12.6758 21.432 13.2438 20.8 13.2438 19.528V16.4H13.9238ZM14.8036 22L17.2116 16.368H17.7956L20.2036 22H19.4756L18.7556 20.304H16.2036L15.4916 22H14.8036ZM17.4836 17.272L16.4756 19.664H18.4916L17.4836 17.272Z"
  161.                                                                 fill="white"/>
  162.                                                             <rect x="8" y="4" width="12" height="4" fill="#42ADDE"/>
  163.                                                             <rect x="8" y="8" width="12" height="4" fill="#FFD800"/>
  164.                                                         </svg>
  165.                                                         <span class="save_car_number" v-html="car.Number"></span>
  167.                                                     </div>
  168.                                                 </div>
  169.                                             </div>
  170.                                         </div>
  171.                                     </div>
  173.                                     <div class="save_car_container" v-else-if="status.stepNoBrandDealer">
  174.                                         <p class="save_car_sub_name save_car_sub_name_yor_auto">{{ 'modal_online_service.confirm_your_car'|trans({}, 'portal_base') }}</p>
  175.                                         <div class="confirm_your_car_wrapper">
  176.                                             <div class="confirm_your_car_box">
  177.                                                 <p class="confirm_your_car_title"><span
  178.                                                         v-html="vehicleInfo.brand"></span> <span
  179.                                                         v-html="vehicleInfo.model"></span></p>
  180.                                                 <div class="confirm_your_car_head">
  181.                                                     <div class="confirm_your_car_head_box">
  182.                                                         <svg width="12" height="12" viewbox="0 0 12 12" fill="none"
  183.                                                              xmlns="http://www.w3.org/2000/svg">
  184.                                                             <path
  185.                                                                 d="M2.72296 3.09641H6.63093C6.66823 3.09641 6.70399 3.08159 6.73037 3.05522C6.75674 3.02885 6.77156 2.99308 6.77156 2.95578V1.83523C6.77139 1.71577 6.72385 1.60125 6.63936 1.5168C6.55486 1.43235 6.44032 1.38486 6.32085 1.38477H3.03304C2.91358 1.38487 2.79904 1.43236 2.71454 1.51681C2.63005 1.60126 2.5825 1.71577 2.58234 1.83523V2.95578C2.58234 2.99308 2.59715 3.02885 2.62352 3.05522C2.6499 3.08159 2.68567 3.09641 2.72296 3.09641ZM2.86359 1.83523C2.86367 1.79034 2.88155 1.74731 2.91332 1.71558C2.94509 1.68386 2.98814 1.66603 3.03304 1.66602H6.32085C6.36575 1.66603 6.4088 1.68386 6.44057 1.71558C6.47234 1.74731 6.49023 1.79034 6.49031 1.83523V2.81516H2.86359V1.83523Z"
  186.                                                                 fill="#E40C25"/>
  187.                                                             <path
  188.                                                                 d="M2.65924 4.49927C2.62194 4.49927 2.58618 4.51408 2.5598 4.54046C2.53343 4.56683 2.51862 4.6026 2.51862 4.63989V4.82341C2.51862 4.8607 2.53343 4.89647 2.5598 4.92285C2.58618 4.94922 2.62194 4.96403 2.65924 4.96403C2.69654 4.96403 2.73231 4.94922 2.75868 4.92285C2.78505 4.89647 2.79987 4.8607 2.79987 4.82341V4.63989C2.79987 4.6026 2.78505 4.56683 2.75868 4.54046C2.73231 4.51408 2.69654 4.49927 2.65924 4.49927Z"
  189.                                                                 fill="#E40C25"/>
  190.                                                             <path
  191.                                                                 d="M2.65924 5.10254C2.62194 5.10254 2.58618 5.11735 2.5598 5.14373C2.53343 5.1701 2.51862 5.20587 2.51862 5.24316V7.99777C2.51862 8.03507 2.53343 8.07084 2.5598 8.09721C2.58618 8.12358 2.62194 8.1384 2.65924 8.1384C2.69654 8.1384 2.73231 8.12358 2.75868 8.09721C2.78505 8.07084 2.79987 8.03507 2.79987 7.99777V5.24316C2.79987 5.20587 2.78505 5.1701 2.75868 5.14373C2.73231 5.11735 2.69654 5.10254 2.65924 5.10254Z"
  192.                                                                 fill="#E40C25"/>
  193.                                                             <path
  194.                                                                 d="M10.3997 2.45365L8.38927 1.47748C8.37244 1.46931 8.35415 1.46458 8.33547 1.46356C8.31679 1.46255 8.2981 1.46527 8.28048 1.47158C8.26287 1.47788 8.24669 1.48763 8.23289 1.50026C8.21909 1.51289 8.20795 1.52815 8.20013 1.54514L7.91956 2.15414L7.80504 2.09508V1.55267C7.80466 1.24151 7.68086 0.943207 7.46082 0.723207C7.24077 0.503207 6.94245 0.379473 6.63129 0.37915H2.69487C2.38371 0.379473 2.08538 0.503207 1.86534 0.723207C1.6453 0.943207 1.5215 1.24151 1.52112 1.55267V10.4472C1.5215 10.7584 1.6453 11.0567 1.86534 11.2767C2.08538 11.4967 2.38371 11.6204 2.69487 11.6207H9.25268C9.56381 11.6204 9.86209 11.4966 10.0821 11.2766C10.3021 11.0566 10.4258 10.7583 10.4262 10.4472V3.53313C10.4262 3.50732 10.4191 3.48201 10.4057 3.45996C10.3922 3.43792 10.373 3.42 10.35 3.40817L10.1675 3.31402L10.4669 2.63703C10.4816 2.60371 10.4829 2.56598 10.4703 2.53178C10.4578 2.49757 10.4325 2.46956 10.3997 2.45365ZM10.1449 10.4472C10.1447 10.6838 10.0506 10.9106 9.88331 11.0778C9.71603 11.2451 9.48924 11.3392 9.25268 11.3395H2.69487C2.45828 11.3392 2.23144 11.2452 2.06412 11.0779C1.8968 10.9106 1.80267 10.6838 1.80237 10.4472V1.55267C1.80267 1.31607 1.8968 1.08926 2.06412 0.921985C2.23144 0.754711 2.45828 0.660636 2.69487 0.6604H6.6312C6.86779 0.660636 7.09463 0.754711 7.26195 0.921985C7.42926 1.08926 7.5234 1.31607 7.5237 1.55267V2.18079C7.5237 2.20661 7.53081 2.23192 7.54424 2.25397C7.55768 2.27601 7.57692 2.29393 7.59987 2.30576L10.1449 3.61882V10.4472ZM9.91718 3.18483L8.16963 2.28319L8.3955 1.79316L10.1548 2.64738L9.91718 3.18483Z"
  195.                                                                 fill="#E40C25"/>
  196.                                                         </svg>
  197.                                                         <span v-html="vehicleInfo.variationInfo"></span>
  198.                                                     </div>
  199.                                                     <div class="confirm_your_car_head_box">
  200.                                                         <svg width="12" height="12" viewbox="0 0 12 12" fill="none"
  201.                                                              xmlns="http://www.w3.org/2000/svg">
  202.                                                             <g clip-path="url(#clip0_1195_8209)">
  203.                                                                 <path
  204.                                                                     d="M11.0268 1.67849C10.0217 0.733797 7.95368 0.462344 5.49554 0.952539C4.05929 1.23876 1.55375 2.24723 0.537661 3.85232C-0.203175 5.02265 -0.0434253 5.85037 0.220926 6.33864C0.700036 7.22338 1.964 7.78642 3.51957 7.80805C3.80347 7.81197 3.9915 7.86761 4.09432 7.97802C4.25354 8.14916 4.2338 8.4888 4.211 8.88208C4.17615 9.48145 4.13288 10.2274 4.67691 10.8809C4.90252 11.1518 5.22432 11.2872 5.6235 11.2872C6.02766 11.2872 6.5112 11.1482 7.05397 10.8704C9.14007 9.8027 11.6082 7.00302 11.9575 4.53695C12.122 3.3752 11.8088 2.4134 11.0268 1.67849ZM11.6364 4.49146C11.3063 6.82291 8.87855 9.57234 6.90617 10.5818C6.36783 10.8573 5.39452 11.2358 4.92607 10.6733C4.46407 10.1184 4.50165 9.47151 4.53481 8.90088C4.56195 8.43339 4.58539 8.02966 4.33179 7.75717C4.16541 7.57844 3.90125 7.489 3.52402 7.48373C2.08585 7.46378 0.929465 6.96587 0.506114 6.18419C0.186215 5.59337 0.291895 4.84696 0.811762 4.02578C1.76647 2.5176 4.23022 1.53543 5.55889 1.27054C7.37778 0.908195 9.71091 0.886984 10.8047 1.91477C11.5054 2.57336 11.7853 3.44024 11.6364 4.49146ZM2.90426 3.66259C2.30321 3.66259 1.81428 4.15162 1.81428 4.75267C1.81428 5.35373 2.30321 5.84275 2.90426 5.84275C3.50532 5.84275 3.99434 5.35373 3.99434 4.75267C3.99434 4.15162 3.50532 3.66259 2.90426 3.66259ZM2.90426 5.51842C2.48206 5.51842 2.13863 5.17487 2.13863 4.75267C2.13863 4.33047 2.48206 3.98692 2.90426 3.98692C3.32647 3.98692 3.67001 4.33047 3.67001 4.75267C3.67001 5.17487 3.32647 5.51842 2.90426 5.51842ZM6.45999 3.26805C6.45999 2.66699 5.97096 2.17797 5.36979 2.17797C4.76874 2.17797 4.27981 2.66699 4.27981 3.26805C4.27981 3.8691 4.76874 4.35812 5.36979 4.35812C5.97096 4.35812 6.45999 3.8691 6.45999 3.26805ZM5.36982 4.0338C4.94761 4.0338 4.60418 3.69025 4.60418 3.26805C4.60418 2.84584 4.94761 2.5023 5.36982 2.5023C5.79211 2.5023 6.13566 2.84584 6.13566 3.26805C6.13566 3.69025 5.79211 4.0338 5.36982 4.0338ZM8.52476 3.93393C9.12582 3.93393 9.61484 3.44491 9.61484 2.84385C9.61484 2.2428 9.12582 1.75387 8.52476 1.75387C7.92371 1.75387 7.43468 2.2428 7.43468 2.84385C7.43468 3.44491 7.92371 3.93393 8.52476 3.93393ZM8.52476 2.0782C8.94697 2.0782 9.29051 2.42162 9.29051 2.84383C9.29051 3.26603 8.94697 3.60958 8.52476 3.60958C8.10256 3.60958 7.75901 3.26603 7.75901 2.84383C7.75901 2.42162 8.10256 2.0782 8.52476 2.0782ZM8.97547 4.9352C8.37441 4.9352 7.88539 5.42423 7.88539 6.02528C7.88539 6.62634 8.37441 7.11527 8.97547 7.11527C9.57652 7.11527 10.0655 6.62634 10.0655 6.02528C10.0655 5.42423 9.57652 4.9352 8.97547 4.9352ZM8.97547 6.79094C8.55326 6.79094 8.20971 6.44751 8.20971 6.0253C8.20971 5.6031 8.55326 5.25955 8.97547 5.25955C9.39767 5.25955 9.74121 5.6031 9.74121 6.0253C9.74121 6.44751 9.39767 6.79094 8.97547 6.79094ZM6.82803 7.34774C6.22697 7.34774 5.73795 7.83677 5.73795 8.43782C5.73795 9.03887 6.22697 9.5278 6.82803 9.5278C7.42908 9.5278 7.91811 9.03887 7.91811 8.43782C7.91811 7.83677 7.42908 7.34774 6.82803 7.34774ZM6.82803 9.20348C6.40582 9.20348 6.06228 8.86005 6.06228 8.43784C6.06228 8.01564 6.40582 7.67209 6.82803 7.67209C7.25023 7.67209 7.59378 8.01564 7.59378 8.43784C7.59378 8.86005 7.25023 9.20348 6.82803 9.20348Z"
  205.                                                                     fill="#E40C25"/>
  206.                                                             </g>
  207.                                                             <defs>
  208.                                                                 <clipPath id="clip0_1195_8209">
  209.                                                                     <rect width="12" height="12" fill="white"/>
  210.                                                                 </clipPath>
  211.                                                             </defs>
  212.                                                         </svg>
  214.                                                         <span v-html="vehicleInfo.color"></span>
  215.                                                     </div>
  216.                                                 </div>
  217.                                                 <div class="save_car_number_box">
  218.                                                     <span class="save_car_year" v-html="vehicleInfo.makeYear"></span>
  219.                                                     <div class="save_car_number_wrap">
  220.                                                         <svg width="28" height="28" viewbox="0 0 28 28" fill="none"
  221.                                                              xmlns="http://www.w3.org/2000/svg">
  222.                                                             <path
  223.                                                                 d="M0 6C0 2.68629 2.68629 0 6 0H28V28H6C2.68629 28 0 25.3137 0 22V6Z"
  224.                                                                 fill="#0057B8"/>
  225.                                                             <path
  226.                                                                 d="M13.9238 16.4V19.664C13.9238 21.376 12.8998 22.072 11.7558 22.072C10.4118 22.072 9.43578 21.248 9.43578 19.608V16.4H10.1158V19.48C10.1158 20.696 10.7078 21.432 11.7558 21.432C12.6758 21.432 13.2438 20.8 13.2438 19.528V16.4H13.9238ZM14.8036 22L17.2116 16.368H17.7956L20.2036 22H19.4756L18.7556 20.304H16.2036L15.4916 22H14.8036ZM17.4836 17.272L16.4756 19.664H18.4916L17.4836 17.272Z"
  227.                                                                 fill="white"/>
  228.                                                             <rect x="8" y="4" width="12" height="4" fill="#42ADDE"/>
  229.                                                             <rect x="8" y="8" width="12" height="4" fill="#FFD800"/>
  230.                                                         </svg>
  231.                                                         <span class="save_car_number" v-html="vehicleInfo.number"></span>
  232.                                                     </div>
  233.                                                 </div>
  235.                                             </div>
  236.                                         </div>
  237.                                     </div>
  238.                                     <div class="save_car_container" id="changeVariation"
  239.                                          v-else-if="status.stepChangeVariation && !status.notFindVehicleNumber">
  241.                                         <p class="save_car_sub_name save_car_sub_name_select">{{ 'modal_online_service.enter_your_car'|trans({}, 'portal_base') }}</p>
  242.                                         <div class="search_car_wrapper">
  243.                                             <select class="search_car_select" v-model="carData.brandId" @change="setBrand">
  244.                                                 <option class="search_car_option" value="null" :checked="carData.brandId === null">{{ 'modal_online_service.brand'|trans({}, 'portal_base') }}</option>
  245.                                                 <option v-for="brand in formData.brands" class="search_car_option" :value="brand.id" v-html="brand.title"></option>
  246.                                             </select>
  247.                                             <select class="search_car_select" v-model="carData.modelId" :disabled="carData.brandId === null" @change="setModel">
  248.                                                 <option class="search_car_option" value="null" :checked="carData.modelId === null">{{ 'modal_online_service.model'|trans({}, 'portal_base') }}</option>
  249.                                                 <option v-for="model in formData.models" class="search_car_option" :value="model.id" v-html="model.title"></option>
  250.                                             </select>
  251.                                             <select class="search_car_select" v-model="carData.makeYear" :disabled="carData.modelId === null || !hasWorkByVariation" @change="setMakeYear">
  252.                                                 <option class="search_car_option" value="null" :checked="carData.makeYear === null">{{ 'modal_online_service.year_release'|trans({}, 'portal_base') }}*</option>
  253.                                                 <option v-for="makeYear in formData.makeYears" class="search_car_option" :value="makeYear.id" v-html="makeYear.title"></option>
  254.                                             </select>
  255.                                             <select class="search_car_select" v-model="carData.variationId" :disabled="carData.makeYear === null || !hasWorkByVariation">
  256.                                                 <option class="search_car_option" value="null" :checked="carData.variationId === null">{{ 'modal_online_service.modification'|trans({}, 'portal_base') }}*</option>
  257.                                                 <option v-for="variation in formData.variations" class="search_car_option" :value="variation.id" v-html="variation.title">{{ 'modal_online_service.modification'|trans({}, 'portal_base') }}*</option>
  258.                                             </select>
  259.                                         </div>
  260.                                     </div>
  261.                                 </div>
  262.                                 <div v-else-if="status.stepChangeDealer" id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  263.                                     <div class="modal_online_cover_head">
  264.                                         <p class="modal_online_cover_head_title">{{ 'modal_online_service.select_sto_recording'|trans({}, 'portal_base') }}</p>
  266.                                     </div>
  268.                                     <div class="select_service_station_wrapper">
  269.                                         <div class="select_service_station_box" v-for="dealer in formData.dealers"
  270.                                              @click="setDealer(dealer.id)">
  271.                                             <img class="select_service_station_logo" :src="dealer.image" alt="">
  272.                                             <p class="select_service_station_title" :title="`${dealer.title} - ${dealer.address}`"><span v-html="dealer.title"></span>
  273.                                                 <span v-html="dealer.address"></span></p>
  274.                                         </div>
  276.                                     </div>
  278.                                 </div>
  279.                             </template>
  280.                             <template v-if="step == 2">
  281.                                 <div id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  283.                                     <div class="modal_online_cover_head modal_online_cover_head-work">
  284.                                         <p class="modal_online_cover_head_title">{{ 'modal_online_service.select_required_jobs'|trans({}, 'portal_base') }}</p>
  286.                                         <div class="modal_online_search_dropdown">
  287.                                             <div class="modal_online_search">
  288.                                                 <input type="text" placeholder="{{ 'new_catalog.searchs'|trans({}, 'portal_base') }}" v-model="searchWorks" required
  289.                                                        @keyup="searchWorksByTitle">
  290.                                                 <button v-if="!isActiveSearchWork">
  291.                                                     <svg width="12" height="12" viewbox="0 0 12 12" fill="none"
  292.                                                          xmlns="http://www.w3.org/2000/svg">
  293.                                                         <path
  294.                                                             d="M11.8989 11.4243L8.55514 8.06183C9.38249 7.11929 9.81089 5.89196 9.74978 4.6393C9.68867 3.38664 9.14284 2.20684 8.22768 1.34931C7.31252 0.491771 6.09975 0.0237186 4.84577 0.0440955C3.59179 0.0644725 2.39487 0.571682 1.50806 1.4585C0.621243 2.34531 0.114033 3.54223 0.0936561 4.79621C0.0732791 6.05019 0.541332 7.26296 1.39887 8.17812C2.2564 9.09328 3.4362 9.63911 4.68886 9.70022C5.94152 9.76133 7.16885 9.33293 8.11139 8.50558L11.4739 11.8618C11.5019 11.8917 11.5358 11.9156 11.5735 11.9318C11.6111 11.9481 11.6516 11.9565 11.6926 11.9565C11.7336 11.9565 11.7742 11.9481 11.8118 11.9318C11.8494 11.9156 11.8833 11.8917 11.9114 11.8618C11.9405 11.8329 11.9634 11.7984 11.9786 11.7603C11.9938 11.7222 12.0011 11.6814 11.9999 11.6404C11.9987 11.5994 11.9892 11.559 11.9718 11.5219C11.9544 11.4847 11.9296 11.4515 11.8989 11.4243ZM4.93014 9.08058C4.10193 9.08058 3.29232 8.83499 2.60369 8.37486C1.91506 7.91473 1.37834 7.26073 1.06139 6.49557C0.744452 5.7304 0.661526 4.88843 0.823102 4.07614C0.984677 3.26384 1.3835 2.5177 1.96913 1.93207C2.55476 1.34644 3.3009 0.947617 4.1132 0.786041C4.92549 0.624465 5.76746 0.707392 6.53263 1.02433C7.29779 1.34128 7.95179 1.878 8.41192 2.56663C8.87205 3.25526 9.11764 4.06487 9.11764 4.89308C9.11599 6.00317 8.67427 7.06731 7.88932 7.85226C7.10437 8.63721 6.04023 9.07893 4.93014 9.08058Z"
  295.                                                             fill="#333333"/>
  296.                                                     </svg>
  297.                                                 </button>
  298.                                                 {#close#}
  299.                                                 <button v-else @click="closeSearch()">
  300.                                                     <svg width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  301.                                                         <path d="M11.53 11.255L1.53003 1.255M11.53 1.255L1.53003 11.255" stroke="#333333"
  302.                                                               stroke-width="2" stroke-linecap="round"/>
  303.                                                     </svg>
  304.                                                 </button>
  305.                                             </div>
  306.                                         </div>
  308.                                     </div>
  310.                                     {# DESCTOP #}
  311.                                     <div class="modal_step_two_wrapper modal_step_two-desctop">
  312.                                         <div class="modal_step_two_position">
  313.                                             <div class="modal_step_two_container">
  314.                                                 <div v-for="group in groups" v-if="workParentGroupAvailable(group.id)" class="modal_step_two_select_box" :class="{'active': activeParentWorkGroup === group.id || isActiveSearchWork}" @click="setActiveParentWorkGroup(group.id)">
  315.                                                     <p class="step_two_select_name" v-html="group.title"></p>
  316.                                                     <svg class="step_two_select_arrow" width="16" height="16"
  317.                                                          viewbox="0 0 16 16" fill="none"
  318.                                                          xmlns="http://www.w3.org/2000/svg">
  319.                                                         <path
  320.                                                             d="M5.91679 1.93333L11.5335 7.53333C11.6001 7.6 11.6475 7.67222 11.6755 7.75C11.7035 7.82778 11.7172 7.91111 11.7168 8C11.7168 8.08889 11.703 8.17222 11.6755 8.25C11.6479 8.32778 11.6006 8.4 11.5335 8.46667L5.91679 14.0833C5.76123 14.2389 5.56679 14.3167 5.33345 14.3167C5.10012 14.3167 4.90012 14.2333 4.73345 14.0667C4.56679 13.9 4.48345 13.7056 4.48345 13.4833C4.48345 13.2611 4.56679 13.0667 4.73345 12.9L9.63345 8L4.73345 3.1C4.5779 2.94444 4.50012 2.75267 4.50012 2.52467C4.50012 2.29667 4.58345 2.09955 4.75012 1.93333C4.91679 1.76667 5.11123 1.68333 5.33345 1.68333C5.55567 1.68333 5.75012 1.76667 5.91679 1.93333Z"
  321.                                                             fill="inherit"/>
  322.                                                     </svg>
  324.                                                 </div>
  325.                                             </div>
  326.                                             <div class="modal_step_two_nosearch">
  327.                                                 <div class="modal_step_step_two_nosearch" @click="addServiceComment">
  328.                                                     <p class="step_step_two_nosearch_name">{{ 'modal_online_service.find_right_job'|trans({}, 'portal_base') }}</p>
  329.                                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
  330.                                                          viewbox="0 0 16 16" fill="none">
  331.                                                         <path
  332.                                                             d="M5.91679 1.93333L11.5335 7.53333C11.6001 7.6 11.6475 7.67222 11.6755 7.75C11.7035 7.82778 11.7172 7.91111 11.7168 8C11.7168 8.08889 11.703 8.17222 11.6755 8.25C11.6479 8.32778 11.6006 8.4 11.5335 8.46667L5.91679 14.0833C5.76123 14.2389 5.56679 14.3167 5.33345 14.3167C5.10012 14.3167 4.90012 14.2333 4.73345 14.0667C4.56679 13.9 4.48345 13.7056 4.48345 13.4833C4.48345 13.2611 4.56679 13.0667 4.73345 12.9L9.63345 8L4.73345 3.1C4.5779 2.94444 4.50012 2.75267 4.50012 2.52467C4.50012 2.29667 4.58345 2.09955 4.75012 1.93333C4.91679 1.76667 5.11123 1.68333 5.33345 1.68333C5.55567 1.68333 5.75012 1.76667 5.91679 1.93333Z"
  333.                                                             fill="white"/>
  334.                                                     </svg>
  336.                                                 </div>
  337.                                             </div>
  338.                                         </div>
  339.                                         <div class="modal_step_two_service_wrapper" v-if="!status.stepServiceComment && Object.keys(groups).length > 0">
  340.                                             <div v-if="isActiveSearchWork">{{ 'modal_online_service.search_results'|trans({}, 'portal_base') }} “<span v-html="searchWorks"></span>”</div>
  341.                                             <template v-for="mainGroup in groups" v-if="activeParentWorkGroup === mainGroup.id || isActiveSearchWork">
  342.                                                 <div v-for="group in mainGroup.groups" v-if="workGroupAvailable(group.id)" class="step_two_service_box">
  343.                                                     <p class="step_two_service_name" v-html="group.title"></p>
  345.                                                     <template v-for="work in formData.works" v-if="group.id === work.groupId">
  347.                                                         <p class="step_two_service_name" v-if="work.millage"><span v-html="work.millage.toLocaleString()"></span> км</p>
  349.                                                         <button class="service_touch_btn" :class="{'active': hasAddWork(work.id)}" @click="toggleWork(work.id)">
  350.                                                             <div class="service_touch"></div>
  351.                                                             <p class="service_touch_text" v-html="work.title"></p>
  352.                                                             <span class="service_touch_price"><span v-html="work.totalCost.toLocaleString()"></span> грн</span>
  353.                                                         </button>
  354.                                                     </template>
  356.                                                 </div>
  357.                                             </template>
  358.                                         </div>
  359.                                         <div class="modal_step_two_service_wrapper" v-else="status.stepServiceComment">
  360.                                             <div class="not_found_work">
  361.                                                 <textarea class="not_found_work_textarea" name="text" v-model="carData.comment" placeholder="{{ 'modal_online_service.find_job_describe'|trans({}, 'portal_base') }}"></textarea>
  362.                                             </div>
  363.                                         </div>
  364.                                     </div>
  366.                                     {# MOBILE #}
  367.                                     <div class="modal_step_two-mobile">
  369.                                         <div class="accord_mob_wrapper">
  371.                                             <div v-if="isActiveSearchWork">{{ 'modal_online_service.search_results'|trans({}, 'portal_base') }} “<span v-html="searchWorks"></span>”</div>
  373.                                             <div v-for="mainGroup in groups" v-if="workParentGroupAvailable(mainGroup.id) || isActiveSearchWork" :id="'scrollTo-'+mainGroup.id" class="accord_mob_item" @click="setActiveParentWorkGroup(mainGroup.id, true)">
  374.                                                 <div v-if="!isActiveSearchWork" class="accord_mob_head" :class="{'active': activeParentWorkGroup === mainGroup.id}">
  375.                                                     <p class="accord_mob_head_name" v-html="mainGroup.title"></p>
  376.                                                     <svg width="14" height="8" viewbox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  377.                                                         <path d="M13.0667 1.91666L7.46668 7.53333C7.40002 7.6 7.32779 7.64733 7.25002 7.67533C7.17224 7.70333 7.08891 7.71711 7.00002 7.71666C6.91113 7.71666 6.82779 7.70289 6.75002 7.67533C6.67224 7.64778 6.60002 7.60044 6.53335 7.53333L0.916683 1.91666C0.761127 1.76111 0.68335 1.56666 0.68335 1.33333C0.68335 1.1 0.766683 0.899998 0.93335 0.733332C1.10002 0.566665 1.29446 0.483332 1.51668 0.483332C1.73891 0.483332 1.93335 0.566665 2.10002 0.733332L7.00002 5.63333L11.9 0.733332C12.0556 0.577776 12.2473 0.499998 12.4753 0.499998C12.7034 0.499998 12.9005 0.583331 13.0667 0.749998C13.2334 0.916665 13.3167 1.11111 13.3167 1.33333C13.3167 1.55555 13.2334 1.75 13.0667 1.91666Z" fill="inherit"/>
  378.                                                     </svg>
  379.                                                 </div>
  381.                                                 <div v-for="group in mainGroup.groups" v-if="workGroupAvailable(group.id)" :class="{'accord_mob_content': !isActiveSearchWork}">
  382.                                                     <p class="accord_mob_content_name_works" v-html="group.title"></p>
  383.                                                     <div class="accord_mob_content_wrapper">
  385.                                                         <template v-for="work in formData.works" v-if="group.id === work.groupId">
  387.                                                             <p class="step_two_service_name" v-if="work.millage"><span v-html="work.millage.toLocaleString()"></span> км</p>
  389.                                                             <button class="service_touch_btn service_touch_btn-mob" :class="{'active': hasAddWork(work.id)}" @click="toggleWork(work.id)">
  390.                                                                 <div class="service_touch"></div>
  391.                                                                 <p class="service_touch_text" v-html="work.title"></p>
  392.                                                                 <span class="service_touch_price">
  393.                                                                     <span v-html="work.totalCost.toLocaleString()"></span>
  394.                                                                     грн</span>
  395.                                                             </button>
  397.                                                         </template>
  399.                                                     </div>
  400.                                                 </div>
  401.                                             </div>
  403.                                             <div>
  404.                                                 <div class="accord_mob_head accord_mob_head_not_search" @click="addServiceComment">
  405.                                                     <p class="accord_mob_head_name accord_mob_head_name_not_search">{{ 'modal_online_service.find_right_job'|trans({}, 'portal_base') }}</p>
  406.                                                     <svg width="14" height="8" viewbox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  407.                                                         <path d="M13.0667 1.91666L7.46668 7.53333C7.40002 7.6 7.32779 7.64733 7.25002 7.67533C7.17224 7.70333 7.08891 7.71711 7.00002 7.71666C6.91113 7.71666 6.82779 7.70289 6.75002 7.67533C6.67224 7.64778 6.60002 7.60044 6.53335 7.53333L0.916683 1.91666C0.761127 1.76111 0.68335 1.56666 0.68335 1.33333C0.68335 1.1 0.766683 0.899998 0.93335 0.733332C1.10002 0.566665 1.29446 0.483332 1.51668 0.483332C1.73891 0.483332 1.93335 0.566665 2.10002 0.733332L7.00002 5.63333L11.9 0.733332C12.0556 0.577776 12.2473 0.499998 12.4753 0.499998C12.7034 0.499998 12.9005 0.583331 13.0667 0.749998C13.2334 0.916665 13.3167 1.11111 13.3167 1.33333C13.3167 1.55555 13.2334 1.75 13.0667 1.91666Z" fill="inherit"/>
  408.                                                     </svg>
  410.                                                 </div>
  411.                                                 <div class="accord_mob_content_not_search" v-if="status.stepServiceComment || Object.keys(groups).length === 0">
  412.                                                     <textarea class="not_found_work_textarea" name="text" v-model="carData.comment" placeholder="{{ 'modal_online_service.find_job_describe'|trans({}, 'portal_base') }}"></textarea>
  413.                                                 </div>
  414.                                             </div>
  415.                                         </div>
  416.                                     </div>
  417.                                     {# ====== #}
  418.                                 </div>
  420.                             </template>
  421.                             <template v-if="step == 3">
  422.                                 <div id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  423.                                     <div class="modal_online_cover_head">
  424.                                         <p class="modal_online_cover_head_title">{{ 'modal_online_service.enter_data_record'|trans({}, 'portal_base') }}</p>
  425.                                     </div>
  426.                                     <form class="modal_online_form_wrapper">
  427.                                         <div class="modal_online_form_input_row">
  428.                                             <input id="service-name" class="modal_online_form_input modal_input" v-model="user.name" type="text" placeholder="{{ 'reglament_to.to_name'|trans({}, 'portal_base') }}*">
  429.                                             <input id="service-phone" class="modal_online_form_input modal_input" v-model="user.phone" v-mask="'+38(###)###-##-##'" type="text" placeholder="Телефон*">
  430.                                         </div>
  431.                                         <div class="modal_online_form_input_row">
  432.                                         {# =====1====  #}
  433.                                         <div class="modal_online_form_cover_pos">
  434.                                             <div class="form_input-calendar" @click="calendarActive()">
  435.                                                 <input id="service-date" class="modal_online_form_input modal_input" readonly type="text" placeholder="Дата" v-model="userDate">
  436.                                             </div>
  437.                                             <template v-if="calendarIsActive">
  438.                                                 {% include '@DcSite/Modules/service-calendar.html.twig' %}
  439.                                                 <div class="calendar_prev_btn step_back" @click="closeBackActive()">
  440.                                                     <svg width="8" height="14" viewbox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  441.                                                         <path d="M6.08321 0.933347L0.466547 6.53335C0.39988 6.60001 0.352547 6.67224 0.324547 6.75001C0.296547 6.82779 0.282769 6.91112 0.283214 7.00001C0.283214 7.0889 0.296991 7.17224 0.324547 7.25001C0.352102 7.32779 0.399436 7.40001 0.466547 7.46668L6.08321 13.0833C6.23877 13.2389 6.43321 13.3167 6.66655 13.3167C6.89988 13.3167 7.09988 13.2333 7.26655 13.0667C7.43321 12.9 7.51655 12.7056 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 7.00001L7.26655 2.10001C7.4221 1.94446 7.49988 1.75268 7.49988 1.52468C7.49988 1.29668 7.41655 1.09957 7.24988 0.933347C7.08321 0.76668 6.88877 0.683347 6.66655 0.683347C6.44432 0.683347 6.24988 0.76668 6.08321 0.933347Z" fill="inherit"/>
  442.                                                     </svg>
  443.                                                     <span>Назад</span>
  444.                                                 </div>
  446.                                             </template>
  447.                                         </div>
  449.                                         {# ====1=====  #}
  451.                                         {# ====2=====  #}
  452.                                         <div class="modal_online_form_cover_pos">
  453.                                             <div class="form_input-time" @click="timeActive()">
  454.                                                 <input v-if="isNight" id="service-time" class="modal_online_form_input modal_input" type="text" placeholder="{{ 'reglament_to.to_time'|trans({}, 'portal_base') }}" v-model="nightTimeInput" readonly/>
  455.                                                 <input v-else id="service-time" class="modal_online_form_input modal_input" type="text" placeholder="{{ 'reglament_to.to_time'|trans({}, 'portal_base') }}" v-model="userTimeInput" readonly/>
  456.                                             </div>
  457.                                             <template v-if="timeIsActive">
  458.                                                 {% include '@DcSite/Modules/service-time.html.twig' %}
  459.                                                 <div class="calendar_prev_btn calendar_prev_btn-2 step_back" @click="calendarActive()">
  460.                                                     <svg width="8" height="14" viewbox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  461.                                                         <path d="M6.08321 0.933347L0.466547 6.53335C0.39988 6.60001 0.352547 6.67224 0.324547 6.75001C0.296547 6.82779 0.282769 6.91112 0.283214 7.00001C0.283214 7.0889 0.296991 7.17224 0.324547 7.25001C0.352102 7.32779 0.399436 7.40001 0.466547 7.46668L6.08321 13.0833C6.23877 13.2389 6.43321 13.3167 6.66655 13.3167C6.89988 13.3167 7.09988 13.2333 7.26655 13.0667C7.43321 12.9 7.51655 12.7056 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 7.00001L7.26655 2.10001C7.4221 1.94446 7.49988 1.75268 7.49988 1.52468C7.49988 1.29668 7.41655 1.09957 7.24988 0.933347C7.08321 0.76668 6.88877 0.683347 6.66655 0.683347C6.44432 0.683347 6.24988 0.76668 6.08321 0.933347Z" fill="inherit"/>
  462.                                                     </svg>
  463.                                                     <span>Назад</span>
  464.                                                 </div>
  465.                                             </template>
  466.                                         </div>
  467.                                         {# ====2=====  #}</div>
  469.                                         <p class="modal_online_form_info_text">{{ 'modal_online_service.you_service_yourself'|trans({}, 'portal_base') }} 24/7.
  470.                                             <a target="_blank" :href="options.serviceNightBookingUrl">{{ 'modal_online_service.learn_more_service'|trans({}, 'portal_base') }}</a>
  471.                                         </p>
  473.                                         <input v-if="isNight" id="service-vehicleNumber" class="modal_online_form_input modal_online_form_input-evak modal_input" type="text" v-model="carNumber" v-mask="'ССDDDDСС'" placeholder="{{ 'modal_online_service.enter_number_car'|trans({}, 'portal_base') }}">
  478.                                         <template v-if="isNight">
  479.                                             <div class="checkbox_evakes_item_evak">
  480.                                                 <label class="checkbox_evak style_evak">
  481.                                                     <input type="checkbox" v-model="isTruck">
  482.                                                     <div class="checkbox_evak__checkmark checkbox_evak__checkmark-red"></div>
  483.                                                     <div class="checkbox_evak__body checkbox_evak__body-lih">{{ 'modal_online_service.tow_truck'|trans({}, 'portal_base') }}
  484.                                                     </div>
  485.                                                 </label>
  486.                                             </div>
  487.                                             <input v-if="isTruck" id="service-truckNumber" class="modal_online_form_input modal_online_form_input-evak modal_input" type="text" v-model="truckNumber" v-mask="'ССDDDDСС'" placeholder="{{ 'modal_online_service.enter_number_truck'|trans({}, 'portal_base') }}">
  488.                                         </template>
  491.                                         <div class="checkbox_evakes_item_evak">
  492.                                             <label class="checkbox_evak style_evak">
  493.                                                 <input type="checkbox" v-model="confirm">
  494.                                                 <div id="service-confirmLabel" class="checkbox_evak__checkmark modal_input"></div>
  495.                                                 <div class="checkbox_evak__body">{{ 'modal_online_service.consent_personal_data'|trans({}, 'portal_base') }}
  496.                                                     <a class="checkbox_evak_link" target="_blank" :href="privacyUrl">{{ 'modal_online_service.learn_about_deal'|trans({}, 'portal_base') }}</a>
  497.                                                 </div>
  498.                                                 <div class="checkbox_evak__body" v-if="isNight">{{ 'modal_online_service.more_about_service'|trans({}, 'portal_base') }}
  499.                                                     <a class="checkbox_evak_link" target="_blank" :href="privacyNightUrl">{{ 'modal_online_service.reception_nonworking_hours'|trans({}, 'portal_base') }}</a>
  500.                                                 </div>
  501.                                             </label>
  502.                                         </div>
  503.                                     </form>
  504.                                 </div>
  505.                             </template>
  506.                             <template v-if="step === 4">
  507.                                 <div id="scrollTo-modal_online_cover_box" class="modal_online_cover_box registration_confirmation_box">
  509.                                     <p>{{ 'modal_online_service.your_phone_number'|trans({}, 'portal_base') }} <span v-html="user.phone"></span>
  510.                                         <button @click="prevStep">({{ 'modal_online_service.change_phone'|trans({}, 'portal_base') }})</button>
  511.                                        {{ 'modal_online_service.sent_sms_code'|trans({}, 'portal_base') }}
  512.                                     </p>
  513.                                     <p>{{ 'modal_online_service.enter_received_entry'|trans({}, 'portal_base') }}</p>
  515.                                     <input class="modal_online_form_input modal_online_form_input-evak" type="text" id="confirmCode"
  516.                                            v-model="confirmCode" placeholder="{{ 'modal_online_service.verification_code'|trans({}, 'portal_base') }}">
  518.                                 </div>
  519.                             </template>
  522.                             {# ===================box-right=================== #}
  524.                             <div class="modal_online_cover_box modal_online_cover_box_right ">
  525.                                 <p class="cover_box_right_title">{{ 'modal_online_service.order_details'|trans({}, 'portal_base') }}</p>
  526.                                 <template v-if="(status.stepSearchNumber || (!vehicleInfo.brand)) && step === 1">
  527.                                     <p class="cover_box_right_sub_title">{{ 'modal_online_service.detailed_information'|trans({}, 'portal_base') }}</p>
  528.                                     <div class="cover_box_right_info_box_wrapper">
  529.                                         <div class="cover_box_right_info_box">
  530.                                             <svg width="10" height="10" viewbox="0 0 10 10" fill="none"
  531.                                                  xmlns="http://www.w3.org/2000/svg">
  532.                                                 <g clip-path="url(#clip0_1195_3435)">
  533.                                                     <path
  534.                                                         d="M9.76764 1.63439C9.45824 1.32457 8.95582 1.32477 8.64601 1.63439L3.59787 6.68272L1.35419 4.43906C1.04438 4.12924 0.542174 4.12924 0.23236 4.43906C-0.0774534 4.74887 -0.0774534 5.25107 0.23236 5.56089L3.03684 8.36537C3.19165 8.52017 3.39464 8.59777 3.59765 8.59777C3.80067 8.59777 4.00386 8.52037 4.15867 8.36537L9.76764 2.7562C10.0775 2.4466 10.0775 1.94418 9.76764 1.63439Z"
  535.                                                         fill="#E40C25"/>
  536.                                                 </g>
  537.                                                 <defs>
  538.                                                     <clipPath id="clip0_1195_3435">
  539.                                                         <rect width="10" height="10" fill="white"/>
  540.                                                     </clipPath>
  541.                                                 </defs>
  542.                                             </svg>
  544.                                             <p class="cover_box_right_info_text">{{ 'modal_online_service.tech_characteristics_car'|trans({}, 'portal_base') }}</p>
  545.                                         </div>
  546.                                         <div class="cover_box_right_info_box">
  547.                                             <svg width="10" height="10" viewbox="0 0 10 10" fill="none"
  548.                                                  xmlns="http://www.w3.org/2000/svg">
  549.                                                 <g clip-path="url(#clip0_1195_3435)">
  550.                                                     <path
  551.                                                         d="M9.76764 1.63439C9.45824 1.32457 8.95582 1.32477 8.64601 1.63439L3.59787 6.68272L1.35419 4.43906C1.04438 4.12924 0.542174 4.12924 0.23236 4.43906C-0.0774534 4.74887 -0.0774534 5.25107 0.23236 5.56089L3.03684 8.36537C3.19165 8.52017 3.39464 8.59777 3.59765 8.59777C3.80067 8.59777 4.00386 8.52037 4.15867 8.36537L9.76764 2.7562C10.0775 2.4466 10.0775 1.94418 9.76764 1.63439Z"
  552.                                                         fill="#E40C25"/>
  553.                                                 </g>
  554.                                                 <defs>
  555.                                                     <clipPath id="clip0_1195_3435">
  556.                                                         <rect width="10" height="10" fill="white"/>
  557.                                                     </clipPath>
  558.                                                 </defs>
  559.                                             </svg>
  561.                                             <p class="cover_box_right_info_text">{{ 'modal_online_service.cost_service_repair'|trans({}, 'portal_base') }}</p>
  562.                                         </div>
  563.                                         <div class="cover_box_right_info_box">
  564.                                             <svg width="10" height="10" viewbox="0 0 10 10" fill="none"
  565.                                                  xmlns="http://www.w3.org/2000/svg">
  566.                                                 <g clip-path="url(#clip0_1195_3435)">
  567.                                                     <path
  568.                                                         d="M9.76764 1.63439C9.45824 1.32457 8.95582 1.32477 8.64601 1.63439L3.59787 6.68272L1.35419 4.43906C1.04438 4.12924 0.542174 4.12924 0.23236 4.43906C-0.0774534 4.74887 -0.0774534 5.25107 0.23236 5.56089L3.03684 8.36537C3.19165 8.52017 3.39464 8.59777 3.59765 8.59777C3.80067 8.59777 4.00386 8.52037 4.15867 8.36537L9.76764 2.7562C10.0775 2.4466 10.0775 1.94418 9.76764 1.63439Z"
  569.                                                         fill="#E40C25"/>
  570.                                                 </g>
  571.                                                 <defs>
  572.                                                     <clipPath id="clip0_1195_3435">
  573.                                                         <rect width="10" height="10" fill="white"/>
  574.                                                     </clipPath>
  575.                                                 </defs>
  576.                                             </svg>
  578.                                             <p class="cover_box_right_info_text">{{ 'modal_online_service.date_time_event'|trans({}, 'portal_base') }}</p>
  579.                                         </div>
  580.                                     </div>
  581.                                 </template>
  582.                                 <div class="cover_box_right_select_marka_wrapper-step-2">
  583.                                     <div v-if="!status.stepSearchNumber && vehicleInfo.brand"
  584.                                          class="cover_box_right_select_marka_box">
  585.                                         <div class="select_marka_box_head">
  586.                                             <p class="marka_box_head">{{ 'modal_online_service.brand'|trans({}, 'portal_base') }}</p>
  587.                                             <button v-if="step > 1 || status.stepChangeDealer" class="marka_box_head_change" @click="editModel">
  588.                                                 {{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  589.                                             </button>
  590.                                         </div>
  591.                                         <p class="select_marka_box_head_name">
  592.                                             <span v-html="vehicleInfo.brand"></span>
  593.                                             <span v-html="vehicleInfo.model"></span>
  594.                                             <span v-html="vehicleInfo.variationInfo"></span>
  595.                                             <span v-html="vehicleInfo.makeYear"></span>
  596.                                         </p>
  597.                                     </div>
  599.                                     <div v-if="carData.dealerId" class="cover_box_right_select_marka_box">
  600.                                         <div class="select_marka_box_head">
  601.                                             <p class="marka_box_head">{{ 'modal_online_service.service_station'|trans({}, 'portal_base') }}</p>
  602.                                             <button v-if="!status.stepChangeDealer" class="marka_box_head_change" @click="editDealer">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  603.                                             </button>
  604.                                         </div>
  605.                                         <p class="select_marka_box_head_name"
  606.                                            v-html="dealers[carData.dealerId].title"></p>
  607.                                     </div>
  609.                                     <template v-if="step === 2">
  610.                                         <div class="works_cover_wrapper">
  611.                                             <p class="works_name">{{ 'modal_online_service.works'|trans({}, 'portal_base') }}</p>
  612.                                             <div class="works_cover_box_wrapper">
  613.                                                 <div class="works_cover_box">
  614.                                                     <template>
  615.                                                         <button class="circle_touch_btn active" v-for="work in vehicleInfo.addWorks" v-if="addWorkAvailable(work.id)" @click="toggleWork(work.id)">
  616.                                                             <div class="circle_touch"></div>
  617.                                                             <p class="circle_touch_text" v-html="work.title">{{ 'modal_online_service.computer_diagnostics'|trans({}, 'portal_base') }}</p>
  618.                                                             <span class="circle_touch_price"><span v-html="work.totalCost.toLocaleString()"></span> грн</span>
  619.                                                         </button>
  620.                                                     </template>
  621.                                                     <template>
  622.                                                         <button class="circle_touch_btn wait" v-for="work in formData.works" v-if="addWaitWorkAvailable(work.id)" @click="toggleWork(work.id)">
  623.                                                             <div class="circle_touch"></div>
  624.                                                             <p class="circle_touch_text" v-html="work.title">{{ 'modal_online_service.computer_diagnostics'|trans({}, 'portal_base') }}</p>
  625.                                                             <span class="circle_touch_price"><span v-html="work.totalCost.toLocaleString()"></span> грн</span>
  626.                                                         </button>
  627.                                                     </template>
  628.                                                 </div>
  629.                                             </div>
  630.                                         </div>
  631.                                     </template>
  633.                                     <template v-if="step === 3 || step === 4">
  634.                                         <div class="cover_box_right_select_marka_box">
  635.                                             <div class="select_marka_box_head">
  636.                                                 <p class="marka_box_head">{{ 'modal_online_service.works'|trans({}, 'portal_base') }}</p>
  637.                                                 <button class="marka_box_head_change" @click="setStep(2)">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  638.                                                 </button>
  639.                                             </div>
  641.                                             <p class="select_marka_box_head_name" v-html="Object.values(vehicleInfo.addWorks).map(item => item.title).join(', ')"></p>
  642.                                         </div>
  643.                                         <div v-if="userDate" class="cover_box_right_select_marka_box">
  644.                                             <div style="position: relative;" class="select_marka_box_head">
  645.                                                 <div class="total_price_title_box">
  646.                                                    <p class="marka_box_head">{{ 'modal_online_service.date_time'|trans({}, 'portal_base') }}</p>
  647.                                                     <svg onclick="openTooltip('#openTooltip-3')" class="modal_show_tooltip" width="10" height="10" viewbox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  648.                                                     <path fill-rule="evenodd" clip-rule="evenodd" d="M4.99953 0C6.38053 0 7.63041 0.559381 8.53504 1.46401C9.43968 2.36959 10 3.61947 10 4.99953C10 6.38053 9.43968 7.63041 8.53504 8.53504C7.63041 9.43968 6.38053 10 4.99953 10C3.61947 10 2.36959 9.43968 1.46401 8.53504C0.559381 7.63041 0 6.38053 0 4.99953C0 3.61947 0.559381 2.36864 1.46401 1.46401C2.36864 0.559381 3.61947 0 4.99953 0ZM7.98321 2.01585C7.22007 1.25271 6.16451 0.780115 4.99953 0.780115C3.83454 0.780115 2.77993 1.25271 2.01585 2.01585C1.25271 2.77993 0.780115 3.83454 0.780115 4.99953C0.780115 6.16451 1.25271 7.22007 2.01585 7.98321C2.77993 8.74634 3.83454 9.21894 4.99953 9.21894C6.16451 9.21894 7.22007 8.74634 7.98321 7.98321C8.74634 7.22007 9.21894 6.16451 9.21894 4.99953C9.21894 3.83454 8.74634 2.77993 7.98321 2.01585ZM4.95614 3.1714C4.74106 3.1714 4.56655 2.99689 4.56655 2.78181C4.56655 2.5658 4.74106 2.39128 4.95614 2.39128H5.04292C5.25894 2.39128 5.43345 2.5658 5.43345 2.78181C5.43345 2.99689 5.25894 3.1714 5.04292 3.1714H4.95614ZM4.60617 4.0732C4.60617 3.85813 4.78068 3.68361 4.9967 3.68361C5.21177 3.68361 5.38628 3.85813 5.38628 4.0732V7.21819C5.38628 7.43326 5.21177 7.60872 4.9967 7.60872C4.78068 7.60872 4.60617 7.43326 4.60617 7.21819V4.0732Z" fill="#E40C25"/>
  649.                                                     </svg>
  650.                                                 </div>
  652.                                                 <button v-if="step > 3" class="marka_box_head_change" @click="setStep(3)">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}</button>
  653.                                                 <div class="show_tooltip" id="openTooltip-3">
  654.                                                     <span onclick="openTooltip('#openTooltip-3')" class="price_tooltip_close">x</span>
  655.                                                     <p>{{ 'modal_online_service.pay_attention'|trans({}, 'portal_base') }} <br>
  656.                                                         {{ 'modal_online_service.choose_performed_works'|trans({}, 'portal_base') }}</p>
  657.                                                 </div>
  659.                                             </div>
  660.                                             <p class="select_marka_box_head_name">
  661.                                                 <span v-html="formatDate(userDate)"></span> на <span v-if="isNight" v-html="nightTimeInput"></span><span v-else v-html="userTimeInput"></span>
  662.                                             </p>
  664.                                         </div>
  665.                                     </template>
  667.                                 </div>
  668.                                 <div v-if="step === 2" class="total_price_wrapper">
  670.                                     <div class="total_price_title_box">
  671.                                         <p class="total_price_tite">{{ 'modal_online_service.estimated_works'|trans({}, 'portal_base') }}
  672.                                         </p>
  673.                                         <svg onclick="openTooltip('#openTooltip-1')" class="modal_show_tooltip" width="10" height="10" viewbox="0 0 10 10" fill="none"
  674.                                              xmlns="http://www.w3.org/2000/svg">
  675.                                             <path fill-rule="evenodd" clip-rule="evenodd"
  676.                                                   d="M4.99953 0C6.38053 0 7.63041 0.559381 8.53504 1.46401C9.43968 2.36959 10 3.61947 10 4.99953C10 6.38053 9.43968 7.63041 8.53504 8.53504C7.63041 9.43968 6.38053 10 4.99953 10C3.61947 10 2.36959 9.43968 1.46401 8.53504C0.559381 7.63041 0 6.38053 0 4.99953C0 3.61947 0.559381 2.36864 1.46401 1.46401C2.36864 0.559381 3.61947 0 4.99953 0ZM7.98321 2.01585C7.22007 1.25271 6.16451 0.780115 4.99953 0.780115C3.83454 0.780115 2.77993 1.25271 2.01585 2.01585C1.25271 2.77993 0.780115 3.83454 0.780115 4.99953C0.780115 6.16451 1.25271 7.22007 2.01585 7.98321C2.77993 8.74634 3.83454 9.21894 4.99953 9.21894C6.16451 9.21894 7.22007 8.74634 7.98321 7.98321C8.74634 7.22007 9.21894 6.16451 9.21894 4.99953C9.21894 3.83454 8.74634 2.77993 7.98321 2.01585ZM4.95614 3.1714C4.74106 3.1714 4.56655 2.99689 4.56655 2.78181C4.56655 2.5658 4.74106 2.39128 4.95614 2.39128H5.04292C5.25894 2.39128 5.43345 2.5658 5.43345 2.78181C5.43345 2.99689 5.25894 3.1714 5.04292 3.1714H4.95614ZM4.60617 4.0732C4.60617 3.85813 4.78068 3.68361 4.9967 3.68361C5.21177 3.68361 5.38628 3.85813 5.38628 4.0732V7.21819C5.38628 7.43326 5.21177 7.60872 4.9967 7.60872C4.78068 7.60872 4.60617 7.43326 4.60617 7.21819V4.0732Z"
  677.                                                   fill="#E40C25"/>
  678.                                         </svg>
  679.                                         <p class="modal_footer_price_tite">:</p>
  680.                                     </div>
  681.                                     <div class="show_tooltip" id="openTooltip-1">
  682.                                         <span onclick="openTooltip('#openTooltip-1')" class="price_tooltip_close">x</span>
  683.                                         <p>* {{ 'modal_online_service.prices_valid'|trans({}, 'portal_base') }} {{ "now"|date("d.") }}{{ "now"|date("m.") }}{{ "now"|date("Y") }}. {{ 'modal_online_service.specified_price_maintenance'|trans({}, 'portal_base') }}</p>
  684.                                     </div>
  685.                                     <span class="total_price"><span
  686.                                             v-html="vehicleInfo.totalCostWork.toLocaleString()"></span> грн</span>
  687.                                 </div>
  688.                             </div>
  689.                         </div>
  691.                         <template v-if="successService">
  692.                             <div class="thank_modal">
  693.                                 <div class="thank_modal_wapper">
  694.                                     <div class="thank_modal_close" @click="closeServiceSuccess">
  695.                                         <svg width="13" height="12" viewbox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  696.                                             <path d="M11.5 11L1.5 1M11.5 1L1.5 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
  697.                                         </svg>
  698.                                     </div>
  699.                                     <p class="thank_modal_title">{{ 'modal_online_service.application_created'|trans({}, 'portal_base') }}</p>
  700.                                     <p class="thank_modal_text">{{ 'modal_online_service.manager_details_future'|trans({}, 'portal_base') }}</p>
  701.                                     <p class="thank_modal_text">{{ 'modal_online_service.thank_choosing_us'|trans({}, 'portal_base') }}</p>
  702.                                     <a :href="options.catalogUrl" class="thank_modal_btn">{{ 'modal_online_service.go_catalog_cars'|trans({}, 'portal_base') }}</a>
  703.                                 </div>
  704.                             </div>
  705.                         </template>
  706.                     </div>
  707.                 </div>
  708.             </div>
  709.         </div>
  710.         <div class="modal_online_reg_footer">
  711.             <div class="container">
  712.                 <div class="modal_online_reg_footer_wrapper">
  713.                     <div class="modal_footer_price_wrapper">
  714.                         <template v-if="step > 1">
  715.                             <div class="modal_footer_price_title_box">
  716.                                 <p class="modal_footer_price_tite">{{ 'modal_online_service.estimated_cost'|trans({}, 'portal_base') }}
  717.                                 </p>
  718.                                 <svg onclick="openTooltip('#openTooltip-2')" class="modal_show_tooltip" width="10" height="10" viewbox="0 0 10 10" fill="none"
  719.                                      xmlns="http://www.w3.org/2000/svg">
  720.                                     <path fill-rule="evenodd" clip-rule="evenodd"
  721.                                           d="M4.99953 0C6.38053 0 7.63041 0.559381 8.53504 1.46401C9.43968 2.36959 10 3.61947 10 4.99953C10 6.38053 9.43968 7.63041 8.53504 8.53504C7.63041 9.43968 6.38053 10 4.99953 10C3.61947 10 2.36959 9.43968 1.46401 8.53504C0.559381 7.63041 0 6.38053 0 4.99953C0 3.61947 0.559381 2.36864 1.46401 1.46401C2.36864 0.559381 3.61947 0 4.99953 0ZM7.98321 2.01585C7.22007 1.25271 6.16451 0.780115 4.99953 0.780115C3.83454 0.780115 2.77993 1.25271 2.01585 2.01585C1.25271 2.77993 0.780115 3.83454 0.780115 4.99953C0.780115 6.16451 1.25271 7.22007 2.01585 7.98321C2.77993 8.74634 3.83454 9.21894 4.99953 9.21894C6.16451 9.21894 7.22007 8.74634 7.98321 7.98321C8.74634 7.22007 9.21894 6.16451 9.21894 4.99953C9.21894 3.83454 8.74634 2.77993 7.98321 2.01585ZM4.95614 3.1714C4.74106 3.1714 4.56655 2.99689 4.56655 2.78181C4.56655 2.5658 4.74106 2.39128 4.95614 2.39128H5.04292C5.25894 2.39128 5.43345 2.5658 5.43345 2.78181C5.43345 2.99689 5.25894 3.1714 5.04292 3.1714H4.95614ZM4.60617 4.0732C4.60617 3.85813 4.78068 3.68361 4.9967 3.68361C5.21177 3.68361 5.38628 3.85813 5.38628 4.0732V7.21819C5.38628 7.43326 5.21177 7.60872 4.9967 7.60872C4.78068 7.60872 4.60617 7.43326 4.60617 7.21819V4.0732Z"
  722.                                           fill="#E40C25"/>
  723.                                 </svg>
  724.                                 <p class="modal_footer_price_tite">:</p>
  725.                                 <div class="show_tooltip" id="openTooltip-2">
  726.                                     <span onclick="openTooltip('#openTooltip-2')" class="price_tooltip_close">x</span>
  727.                                     <p>* {{ 'modal_online_service.prices_valid'|trans({}, 'portal_base') }} {{ "now"|date("d.") }}{{ "now"|date("m.") }}{{ "now"|date("Y") }}. {{ 'modal_online_service.specified_price_maintenance'|trans({}, 'portal_base') }}</p>
  728.                                 </div>
  729.                             </div>
  731.                             <span class="modal_footer_price"><span
  732.                                     v-html="vehicleInfo.totalCostWork.toLocaleString()"></span> грн</span>
  733.                         </template>
  734.                     </div>
  736.                     <div class="modal_online_reg_footer_box">
  737.                         <div class="modal_online_reg_footer_info">
  738.                             <p class="reg_footer_info_title">
  739.                             </p>
  740.                             <div class="reg_footer_info_box">
  741.                             </div>
  742.                         </div>
  743.                     </div>
  744.                     <button v-if="status.stepSearchNumber" class="modal_online_reg_footer_btn" @click="findVehicleByNumber">{{ 'modal_online_service.search'|trans({}, 'portal_base') }}</button>
  745.                     <button v-else-if="status.stepChangeDealer && step === 1" class="modal_online_reg_footer_btn" @click="findServiceWork" disabled>{{ 'modal_online_service.further'|trans({}, 'portal_base') }}</button>
  746.                     <button v-else-if="status.stepChangeVariation && step === 1" class="modal_online_reg_footer_btn" @click="findServiceWork" :disabled="!carData.modelId || (carData.modelId && hasWorkByVariation && !carData.variationId)">{{ 'modal_online_service.further'|trans({}, 'portal_base') }}</button>
  747.                     <button v-else-if="step === 2" class="modal_online_reg_footer_btn" @click="nextStep" :disabled="!carData.workIds.length && !carData.comment.length ">{{ 'modal_online_service.further'|trans({}, 'portal_base') }}</button>
  748.                     <button v-else-if="step === 3" class="modal_online_reg_footer_btn" @click="booking" >{{ 'modal_online_service.sign_up'|trans({}, 'portal_base') }}</button>
  749.                     <button v-else-if="step === 4" class="modal_online_reg_footer_btn" @click="confirmBooking" :disabled="!bookingId && !confirmCode">{{ 'modal_online_service.confirm_entry'|trans({}, 'portal_base') }}</button>
  750.                     <button v-else-if="status.stepNoBrandDealer" class="modal_online_reg_footer_btn" @click="noBrandDealer">{{ 'modal_online_service.to_confirm'|trans({}, 'portal_base') }}</button>
  751.                 </div>
  752.             </div>
  753.         </div>
  754.     </div>
  756. {% endblock %}
  759. {% block script %}
  760.     <script src="/dist/{{ MODE }}/portal/js/portalService.js?{{ VERSION }}"></script>
  762.     <script>
  763.      // openTooltip
  764.          function openTooltip(targetSelector) {
  765.         $(targetSelector).toggleClass("active");
  766.      }
  767.     </script>
  769.     <script>
  770.         $(() => {
  772.             const obj = new portal.portalService.Service();
  773.             obj.init({
  774.                 prevArrow: '<div class="slick-prev"><img src="{{ asset('bundles/portal/img/service/sl-l.svg') }}"></div>',
  775.                 nextArrow: '<div class="slick-next"><img src="{{ asset('bundles/portal/img/service/sl-r.svg') }}"></div>'
  776.             });
  777.             obj.initService({
  778.                 initServiceUrl: '{{ path('online-init-service') }}',
  779.                 findVehicleUrl: '{{ path('online-service-find') }}',
  780.                 findModelDealerUrl: '{{ path('online-service-find-model-dealer') }}',
  781.                 findServiceVariationUrl: '{{ path('online-find-service-variation') }}',
  782.                 getWorkByVariation: '{{ path('online-service-find-work') }}',
  783.                 getTimesUrl: '{{ path('online-service-get-time') }}',
  784.                 byModelUrl: '{{ path('online-service-load-by-model') }}',
  785.                 bookingUrl: '{{ path('online-service-booking') }}',
  786.                 confirmBookingUrl: '{{ path('online-service-booking-confirm') }}',
  787.                 findServiceUrl: '{{ path('online-service-find') }}',
  788.                 serviceNightBookingUrl: '{{ path('portal_service_night_booking') }}',
  789.                 privacyUrl: '{{ privacyUrl }}',
  790.                 privacyNightUrl: '{{ path('my_profile_night_service_agreement') }}',
  791.                 catalogUrl: '{{ path('portal_new_catalog', {state: 'new', type: 'car'} ) }}',
  792.                 carNumberLength: 8,
  793.                 locale: '{{ app.request.locale }}',
  794.                 dealerId: '{{ dealerId|default('') }}',
  795.             }),
  796.                 obj.initServiceDealer({
  797.                     regulationsDealers: {{ regulationDealers|json_encode|raw }},
  798.                 });
  799.         });
  800.     </script>
  802. {% endblock script %}