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

Open in your IDE?
  1. <div class="modal_online_registration {{ isModalForm ? 'active' : '' }}">
  3.     <div class="modal_online_reg_header_wrapper">
  4.         <div class="container">
  5.             <div class="modal_online_reg_header">
  6.                 {# <img class="modal_online_reg_header_logo"
  7.                      src="{{ asset('bundles/portal/img/service/modal-logo-vidi.svg') }}" alt=""> #}
  8.                      <div class="modal_online_reg_header_logo"></div>
  9.                 <button class="modal_online_reg_header_close" @click="closeServiceSuccess">
  10.                     <svg width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  11.                         <path d="M11.53 11.255L1.53003 1.255M11.53 1.255L1.53003 11.255" stroke="white"
  12.                               stroke-width="2" stroke-linecap="round"/>
  13.                     </svg>
  14.                 </button>
  15.             </div>
  16.         </div>
  17.     </div>
  19.     <div id="scroll-container" class="modal_online_reg_main">
  20.         <div class="container">
  21.             <p class="modal_online_reg_title">{{ 'modal_online_service.online_registration_service'|trans({}, 'portal_base') }} VIDI</p>
  22.             <p class="modal_online_reg_sub_title">{{ 'modal_online_service.estimate_service_steps'|trans({}, 'portal_base') }}</p>
  23.             <div id="preloader-service">
  24.                 <div class="modal_online_cover">
  25.                     <div class="modal_online_cover_head">
  26.                         <button v-if="step > 1" class="step_back" @click="prevStep">
  27.                             <svg width="8" height="14" viewbox="0 0 8 14" fill="none"
  28.                                  xmlns="http://www.w3.org/2000/svg">
  29.                                 <path
  30.                                     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"
  31.                                     fill="inherit"/>
  32.                             </svg>
  33.                             <span>Назад</span>
  34.                         </button>
  35.                         <div class="step_count">
  36.                             <span>{{ 'modal_online_service.step'|trans({}, 'portal_base') }} <span v-html="step"></span> {{ 'modal_online_service.step_letter'|trans({}, 'portal_base') }} 4</span>
  37.                         </div>
  38.                     </div>
  39.                     <div class="modal_online_cover_main">
  40.                         <template v-if="step == 1">
  41.                             <div v-if="!status.stepChangeDealer" id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  43.                                 <div class="modal_online_cover_head">
  44.                                     <p class="modal_online_cover_head_title">{{ 'modal_online_service.general_your_car'|trans({}, 'portal_base') }}</p>
  46.                                 </div>
  47.                                 <div class="searc_number_wrapper">
  48.                                     <p class="searc_number_text">{{ 'modal_online_service.successful_registration'|trans({}, 'portal_base') }}</p>
  49.                                     <div class="search__number_container">
  50.                                         <div class="search__number__form__wrapper"
  51.                                              :class="[error.formCarNumber && !status.stepChangeVariation ? 'error' : '', !status.stepSearchNumber ? 'disabled' : '']">
  52.                                             <svg class="search__number-icon" width="35" height="58"
  53.                                                  viewbox="0 0 35 58" fill="none" xmlns="http://www.w3.org/2000/svg">
  54.                                                 <path
  55.                                                     d="M0 6C0 2.68629 2.68629 0 6 0H35V58H6C2.68629 58 0 55.3137 0 52V6Z"
  56.                                                     fill="#0057B8"/>
  57.                                                 <path
  58.                                                     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"
  59.                                                     fill="white"/>
  60.                                                 <rect x="8" y="10" width="19" height="7" fill="#42ADDE"/>
  61.                                                 <rect x="8" y="17" width="19" height="7" fill="#FFD800"/>
  62.                                             </svg>
  63.                                             {% include '@Portal/Modules/search-number-form.twig' %}
  64.                                         </div>
  65.                                         <button class="search__number_change_btn" v-if="carNumber && !status.stepSearchNumber" @click="backToSearchNumber">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  66.                                             <button class="search__number_change_btn desktop_number_search" v-else-if="status.stepSearchNumber" @click="findVehicleByNumber">{{ 'modal_online_service.search'|trans({}, 'portal_base') }}
  67.                                         </button>
  68.                                         <button class="search__number_change_btn"
  69.                                                 v-else-if="!status.stepSearchNumber" @click="backToSearchNumber">
  70.                                             {{ 'modal_online_service.search_number'|trans({}, 'portal_base') }}
  71.                                         </button>
  72.                                         <div v-if="error.formCarNumber && !status.stepChangeVariation"
  73.                                              class="search_number_info_box">
  74.                                             <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
  75.                                                  viewbox="0 0 12 12" fill="none">
  76.                                                 <path fill-rule="evenodd" clip-rule="evenodd"
  77.                                                       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"
  78.                                                       fill="#E40C25"/>
  79.                                             </svg>
  80.                                             <p>{{ 'modal_online_service.first_registration_number'|trans({}, 'portal_base') }}</p>
  81.                                         </div>
  82.                                     </div>
  84.                                     <template v-if="status.notFindVehicleNumber">
  85.                                         <p class="search__number_no_search">{{ 'modal_online_service.unfortunately_your_car'|trans({}, 'portal_base') }}
  86.                                             {{ 'modal_online_service.please_yourself'|trans({}, 'portal_base') }}</p>
  87.                                         <button class="search__number_btn" @click="enterDataVehicle">{{ 'modal_online_service.enter_car_data'|trans({}, 'portal_base') }}</button>
  88.                                     </template>
  90.                                     <button v-if="!status.stepChangeVariation && !status.notFindVehicleNumber"
  91.                                             class="remember_number_btn" @click="noHaveVehicleNumber">{{ 'modal_online_service.remember_registration_number'|trans({}, 'portal_base') }}
  92.                                     </button>
  94.                                 </div>
  96.                                 <div class="save_car_container"
  97.                                      v-if="user.cars.length > 0 && status.stepSearchNumber">
  98.                                     <p class="save_car_else_titel">{{ 'modal_online_service.or'|trans({}, 'portal_base') }}</p>
  99.                                     <p class="save_car_sub_name">{{ 'modal_online_service.your_saved_cars'|trans({}, 'portal_base') }}:</p>
  100.                                     <div class="save_car_wrapper">
  101.                                         <div class="save_car_box" v-for="car in user.cars"
  102.                                              @click="setUserVehicle(car)">
  103.                                             <span class="save_car_box_name" v-html="car.title"></span>
  104.                                             <div class="save_car_number_box">
  105.                                                 <span class="save_car_year" v-html="car.MakeYear"></span>
  106.                                                 <div class="save_car_number_wrap">
  107.                                                     <svg width="28" height="28" viewbox="0 0 28 28" fill="none"
  108.                                                          xmlns="http://www.w3.org/2000/svg">
  109.                                                         <path
  110.                                                             d="M0 6C0 2.68629 2.68629 0 6 0H28V28H6C2.68629 28 0 25.3137 0 22V6Z"
  111.                                                             fill="#0057B8"/>
  112.                                                         <path
  113.                                                             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"
  114.                                                             fill="white"/>
  115.                                                         <rect x="8" y="4" width="12" height="4" fill="#42ADDE"/>
  116.                                                         <rect x="8" y="8" width="12" height="4" fill="#FFD800"/>
  117.                                                     </svg>
  118.                                                     <span class="save_car_number" v-html="car.Number"></span>
  120.                                                 </div>
  121.                                             </div>
  122.                                         </div>
  123.                                     </div>
  124.                                 </div>
  126.                                 <div class="save_car_container" v-else-if="status.stepNoBrandDealer">
  127.                                     <p class="save_car_sub_name save_car_sub_name_yor_auto">{{ 'modal_online_service.confirm_your_car'|trans({}, 'portal_base') }}</p>
  128.                                     <div class="confirm_your_car_wrapper">
  129.                                         <div class="confirm_your_car_box">
  130.                                             <p class="confirm_your_car_title"><span
  131.                                                     v-html="vehicleInfo.brand"></span> <span
  132.                                                     v-html="vehicleInfo.model"></span></p>
  133.                                             <div class="confirm_your_car_head">
  134.                                                 <div class="confirm_your_car_head_box">
  135.                                                     <svg width="12" height="12" viewbox="0 0 12 12" fill="none"
  136.                                                          xmlns="http://www.w3.org/2000/svg">
  137.                                                         <path
  138.                                                             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"
  139.                                                             fill="#E40C25"/>
  140.                                                         <path
  141.                                                             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"
  142.                                                             fill="#E40C25"/>
  143.                                                         <path
  144.                                                             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"
  145.                                                             fill="#E40C25"/>
  146.                                                         <path
  147.                                                             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"
  148.                                                             fill="#E40C25"/>
  149.                                                     </svg>
  150.                                                     <span v-html="vehicleInfo.variationInfo"></span>
  151.                                                 </div>
  152.                                                 <div class="confirm_your_car_head_box">
  153.                                                     <svg width="12" height="12" viewbox="0 0 12 12" fill="none"
  154.                                                          xmlns="http://www.w3.org/2000/svg">
  155.                                                         <g clip-path="url(#clip0_1195_8209)">
  156.                                                             <path
  157.                                                                 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"
  158.                                                                 fill="#E40C25"/>
  159.                                                         </g>
  160.                                                         <defs>
  161.                                                             <clipPath id="clip0_1195_8209">
  162.                                                                 <rect width="12" height="12" fill="white"/>
  163.                                                             </clipPath>
  164.                                                         </defs>
  165.                                                     </svg>
  167.                                                     <span v-html="vehicleInfo.color"></span>
  168.                                                 </div>
  169.                                             </div>
  170.                                             <div class="save_car_number_box">
  171.                                                 <span class="save_car_year" v-html="vehicleInfo.makeYear"></span>
  172.                                                 <div class="save_car_number_wrap">
  173.                                                     <svg width="28" height="28" viewbox="0 0 28 28" fill="none"
  174.                                                          xmlns="http://www.w3.org/2000/svg">
  175.                                                         <path
  176.                                                             d="M0 6C0 2.68629 2.68629 0 6 0H28V28H6C2.68629 28 0 25.3137 0 22V6Z"
  177.                                                             fill="#0057B8"/>
  178.                                                         <path
  179.                                                             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"
  180.                                                             fill="white"/>
  181.                                                         <rect x="8" y="4" width="12" height="4" fill="#42ADDE"/>
  182.                                                         <rect x="8" y="8" width="12" height="4" fill="#FFD800"/>
  183.                                                     </svg>
  184.                                                     <span class="save_car_number" v-html="vehicleInfo.number"></span>
  185.                                                 </div>
  186.                                             </div>
  188.                                         </div>
  189.                                     </div>
  190.                                 </div>
  192.                                 <div class="save_car_container"
  193.                                      v-else-if="status.stepChangeVariation && !status.notFindVehicleNumber">
  195.                                     <p class="save_car_sub_name save_car_sub_name_select">{{ 'modal_online_service.enter_your_car'|trans({}, 'portal_base') }}</p>
  196.                                     <div class="search_car_wrapper">
  197.                                         <select class="search_car_select" v-model="carData.brandId" @change="setBrand">
  198.                                             <option class="search_car_option" value="null" :checked="carData.brandId === null">{{ 'modal_online_service.brand'|trans({}, 'portal_base') }}</option>
  199.                                             <option v-for="brand in formData.brands" class="search_car_option" :value="brand.id" v-html="brand.title"></option>
  200.                                         </select>
  201.                                         <select class="search_car_select" v-model="carData.modelId" :disabled="carData.brandId === null" @change="setModel">
  202.                                             <option class="search_car_option" value="null" :checked="carData.modelId === null">{{ 'modal_online_service.model'|trans({}, 'portal_base') }}</option>
  203.                                             <option v-for="model in formData.models" class="search_car_option" :value="model.id" v-html="model.title"></option>
  204.                                         </select>
  205.                                         <select class="search_car_select" v-model="carData.makeYear" :disabled="carData.modelId === null || !hasWorkByVariation" @change="setMakeYear">
  206.                                             <option class="search_car_option" value="null" :checked="carData.makeYear === null">{{ 'modal_online_service.year_release'|trans({}, 'portal_base') }}*</option>
  207.                                             <option v-for="makeYear in formData.makeYears" class="search_car_option" :value="makeYear.id" v-html="makeYear.title"></option>
  208.                                         </select>
  209.                                         <select class="search_car_select" v-model="carData.variationId" :disabled="carData.makeYear === null || !hasWorkByVariation">
  210.                                             <option class="search_car_option" value="null" :checked="carData.variationId === null">{{ 'modal_online_service.modification'|trans({}, 'portal_base') }}*</option>
  211.                                             <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>
  212.                                         </select>
  213.                                     </div>
  214.                                 </div>
  215.                             </div>
  216.                             <div v-else-if="status.stepChangeDealer" id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  217.                                 <div class="modal_online_cover_head">
  218.                                     <p class="modal_online_cover_head_title">{{ 'modal_online_service.select_sto_recording'|trans({}, 'portal_base') }}</p>
  220.                                 </div>
  222.                                 <div class="select_service_station_wrapper">
  223.                                     <div class="select_service_station_box" v-for="dealer in formData.dealers"
  224.                                          @click="setDealer(dealer.id)">
  225.                                         <img class="select_service_station_logo" :src="dealer.image" alt="">
  226.                                         <p class="select_service_station_title" :title="`${dealer.title} - ${dealer.address}`"><span v-html="dealer.title"></span>
  227.                                             <span v-html="dealer.address"></span></p>
  228.                                     </div>
  230.                                 </div>
  232.                             </div>
  233.                         </template>
  234.                         <template v-if="step == 2">
  235.                             <div id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  237.                                 <div class="modal_online_cover_head modal_online_cover_head-work">
  238.                                     <p class="modal_online_cover_head_title">{{ 'modal_online_service.select_required_jobs'|trans({}, 'portal_base') }}</p>
  240.                                     <div class="modal_online_search_dropdown">
  241.                                         <div class="modal_online_search">
  242.                                             <input type="text" placeholder="Пошук" v-model="searchWorks" required
  243.                                                    @keyup="searchWorksByTitle">
  244.                                             <button v-if="!isActiveSearchWork">
  245.                                                 <svg width="12" height="12" viewbox="0 0 12 12" fill="none"
  246.                                                      xmlns="http://www.w3.org/2000/svg">
  247.                                                     <path
  248.                                                         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"
  249.                                                         fill="#333333"/>
  250.                                                 </svg>
  251.                                             </button>
  252.                                             {#close#}
  253.                                             <button v-else @click="closeSearch()">
  254.                                                 <svg width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  255.                                                     <path d="M11.53 11.255L1.53003 1.255M11.53 1.255L1.53003 11.255" stroke="#333333"
  256.                                                           stroke-width="2" stroke-linecap="round"/>
  257.                                                 </svg>
  258.                                             </button>
  259.                                         </div>
  260.                                     </div>
  262.                                 </div>
  264.                                 {# DESCTOP #}
  265.                                 <div class="modal_step_two_wrapper modal_step_two-desctop">
  266.                                     <div class="modal_step_two_position">
  267.                                         <div class="modal_step_two_container">
  268.                                             <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)">
  269.                                                 <p class="step_two_select_name" v-html="group.title"></p>
  270.                                                 <svg class="step_two_select_arrow" width="16" height="16"
  271.                                                      viewbox="0 0 16 16" fill="none"
  272.                                                      xmlns="http://www.w3.org/2000/svg">
  273.                                                     <path
  274.                                                         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"
  275.                                                         fill="inherit"/>
  276.                                                 </svg>
  278.                                             </div>
  279.                                         </div>
  280.                                         <div class="modal_step_two_nosearch">
  281.                                             <div class="modal_step_step_two_nosearch" @click="addServiceComment">
  282.                                                 <p class="step_step_two_nosearch_name">{{ 'modal_online_service.find_right_job'|trans({}, 'portal_base') }}</p>
  283.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
  284.                                                      viewbox="0 0 16 16" fill="none">
  285.                                                     <path
  286.                                                         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"
  287.                                                         fill="white"/>
  288.                                                 </svg>
  290.                                             </div>
  291.                                         </div>
  292.                                     </div>
  293.                                     <div class="modal_step_two_service_wrapper" v-if="!status.stepServiceComment && Object.keys(groups).length > 0">
  294.                                         <div v-if="isActiveSearchWork">{{ 'modal_online_service.search_results'|trans({}, 'portal_base') }} “<span v-html="searchWorks"></span>”</div>
  295.                                         <template v-for="mainGroup in groups" v-if="activeParentWorkGroup === mainGroup.id || isActiveSearchWork">
  296.                                             <div v-for="group in mainGroup.groups" v-if="workGroupAvailable(group.id)" class="step_two_service_box">
  297.                                                 <p class="step_two_service_name" v-html="group.title"></p>
  299.                                                 <template v-for="work in formData.works" v-if="group.id === work.groupId">
  301.                                                     <p class="step_two_service_name" v-if="work.millage"><span v-html="work.millage.toLocaleString()"></span> км</p>
  303.                                                     <button class="service_touch_btn" :class="{'active': hasAddWork(work.id)}" @click="toggleWork(work.id)">
  304.                                                         <div class="service_touch"></div>
  305.                                                         <p class="service_touch_text" v-html="work.title"></p>
  306.                                                         <span class="service_touch_price"><span v-html="work.totalCost.toLocaleString()"></span> грн</span>
  307.                                                     </button>
  308.                                                 </template>
  310.                                             </div>
  311.                                         </template>
  312.                                     </div>
  313.                                     <div class="modal_step_two_service_wrapper" v-else="status.stepServiceComment">
  314.                                         <div class="not_found_work">
  315.                                             <textarea class="not_found_work_textarea" name="text" v-model="carData.comment" placeholder="{{ 'modal_online_service.find_job_describe'|trans({}, 'portal_base') }}"></textarea>
  316.                                         </div>
  317.                                     </div>
  318.                                 </div>
  320.                                 {# MOBILE #}
  321.                                 <div class="modal_step_two-mobile">
  323.                                     <div class="accord_mob_wrapper">
  325.                                         <div v-if="isActiveSearchWork">{{ 'modal_online_service.search_results'|trans({}, 'portal_base') }} “<span v-html="searchWorks"></span>”</div>
  327.                                         <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)">
  328.                                             <div v-if="!isActiveSearchWork" class="accord_mob_head" :class="{'active': activeParentWorkGroup === mainGroup.id}">
  329.                                                 <p class="accord_mob_head_name" v-html="mainGroup.title"></p>
  330.                                                 <svg width="14" height="8" viewbox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  331.                                                     <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"/>
  332.                                                 </svg>
  333.                                             </div>
  335.                                             <div v-for="group in mainGroup.groups" v-if="workGroupAvailable(group.id)" :class="{'accord_mob_content': !isActiveSearchWork}">
  336.                                                 <p class="accord_mob_content_name_works" v-html="group.title"></p>
  337.                                                 <div class="accord_mob_content_wrapper">
  339.                                                     <template v-for="work in formData.works" v-if="group.id === work.groupId">
  341.                                                         <p class="step_two_service_name" v-if="work.millage"><span v-html="work.millage.toLocaleString()"></span> км</p>
  343.                                                         <button class="service_touch_btn service_touch_btn-mob" :class="{'active': hasAddWork(work.id)}" @click="toggleWork(work.id)">
  344.                                                             <div class="service_touch"></div>
  345.                                                             <p class="service_touch_text" v-html="work.title"></p>
  346.                                                             <span class="service_touch_price">
  347.                                                                     <span v-html="work.totalCost.toLocaleString()"></span>
  348.                                                                     грн</span>
  349.                                                         </button>
  351.                                                     </template>
  353.                                                 </div>
  354.                                             </div>
  355.                                         </div>
  357.                                         <div class="accord_mob_item">
  358.                                             <div class="accord_mob_head accord_mob_head_not_search" @click="addServiceComment">
  359.                                                 <p class="accord_mob_head_name accord_mob_head_name_not_search">{{ 'modal_online_service.find_right_job'|trans({}, 'portal_base') }}</p>
  360.                                                 <svg width="14" height="8" viewbox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  361.                                                     <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"/>
  362.                                                 </svg>
  364.                                             </div>
  365.                                             <div class="accord_mob_content_not_search" v-if="status.stepServiceComment || Object.keys(groups).length === 0">
  366.                                                 <textarea class="not_found_work_textarea" name="text" v-model="carData.comment" placeholder="{{ 'modal_online_service.find_job_describe'|trans({}, 'portal_base') }}"></textarea>
  367.                                             </div>
  368.                                         </div>
  369.                                     </div>
  370.                                 </div>
  371.                                 {# ====== #}
  372.                             </div>
  374.                         </template>
  375.                         <template v-if="step == 3">
  376.                             <div id="scrollTo-modal_online_cover_box" class="modal_online_cover_box">
  377.                                 <div class="modal_online_cover_head">
  378.                                     <p class="modal_online_cover_head_title">{{ 'modal_online_service.enter_data_record'|trans({}, 'portal_base') }}</p>
  379.                                 </div>
  380.                                 <form class="modal_online_form_wrapper">
  381.                                     <div class="modal_online_form_input_row">
  382.                                         <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') }}*">
  383.                                         <input id="service-phone" class="modal_online_form_input modal_input" v-model="user.phone" v-mask="'+38(###)###-##-##'" type="text" placeholder="Телефон*">
  384.                                     </div>
  385.                                     <div class="modal_online_form_input_row">
  386.                                         <div class="form_input-calendar" @click="calendarActive()">
  387.                                             <input id="service-date" class="modal_online_form_input modal_input" type="text" placeholder="Дата" v-model="userDate" autocomplete="off" readonly>
  388.                                             <template v-if="calendarIsActive">
  389.                                                 {% include '@DcSite/Modules/service-calendar.html.twig' %}
  390.                                             </template>
  391.                                         </div>
  392.                                         <div class="form_input-time">
  393.                                             <input v-if="isNight" @click="timeActive()" id="service-time" class="modal_online_form_input modal_input" type="text" placeholder="Час " v-model="nightTimeInput" readonly/>
  394.                                             <input v-else  @click="timeActive()" id="service-time" class="modal_online_form_input modal_input" type="time" placeholder="Час " v-model="userTimeInput" readonly/>
  395.                                             <template v-if="timeIsActive">
  396.                                                 {% include '@DcSite/Modules/service-time.html.twig' %}
  397.                                             </template>
  398.                                         </div>
  399.                                     </div>
  400.                                     <p class="modal_online_form_info_text">{{ 'modal_online_service.you_service_yourself'|trans({}, 'portal_base') }}
  401.                                         24/7.
  402.                                         <a target="_blank" :href="options.serviceNightBookingUrl">{{ 'modal_online_service.learn_more_service'|trans({}, 'portal_base') }}</a>
  403.                                     </p>
  404.                                     <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') }}">
  406.                                     <template v-if="isNight">
  407.                                         <div class="checkbox_evakes_item_evak">
  408.                                             <label class="checkbox_evak style_evak">
  409.                                                 <input type="checkbox" v-model="isTruck">
  410.                                                 <div class="checkbox_evak__checkmark checkbox_evak__checkmark-red"></div>
  411.                                                 <div class="checkbox_evak__body checkbox_evak__body-lih">{{ 'modal_online_service.tow_truck'|trans({}, 'portal_base') }}
  412.                                                 </div>
  413.                                             </label>
  414.                                         </div>
  415.                                         <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') }}">
  416.                                     </template>
  419.                                     <div class="checkbox_evakes_item_evak">
  420.                                         <label class="checkbox_evak style_evak">
  421.                                             <input type="checkbox" v-model="confirm">
  422.                                             <div id="service-confirmLabel" class="checkbox_evak__checkmark modal_input"></div>
  423.                                             <div class="checkbox_evak__body">{{ 'modal_online_service.consent_personal_data'|trans({}, 'portal_base') }}
  424.                                                 <a class="checkbox_evak_link" target="_blank" :href="privacyUrl">{{ 'modal_online_service.learn_about_deal'|trans({}, 'portal_base') }}</a>
  425.                                             </div>
  426.                                             <div class="checkbox_evak__body" v-if="isNight">{{ 'modal_online_service.more_about_service'|trans({}, 'portal_base') }}
  427.                                                 <a class="checkbox_evak_link" target="_blank" :href="privacyNightUrl">{{ 'modal_online_service.reception_nonworking_hours'|trans({}, 'portal_base') }}</a>
  428.                                             </div>
  429.                                         </label>
  430.                                     </div>
  431.                                 </form>
  433.                             </div>
  434.                         </template>
  435.                         <template v-if="step === 4">
  436.                             <div id="scrollTo-modal_online_cover_box" class="modal_online_cover_box registration_confirmation_box">
  438.                                 <p>{{ 'modal_online_service.your_phone_number'|trans({}, 'portal_base') }} <span v-html="user.phone"></span>
  439.                                     <button @click="prevStep">({{ 'modal_online_service.change_phone'|trans({}, 'portal_base') }})</button>
  440.                                     {{ 'modal_online_service.sent_sms_code'|trans({}, 'portal_base') }}
  441.                                 </p>
  442.                                 <p>{{ 'modal_online_service.enter_received_entry'|trans({}, 'portal_base') }}</p>
  444.                                 <input class="modal_online_form_input modal_online_form_input-evak" type="text"
  445.                                        v-model="confirmCode" placeholder="{{ 'modal_online_service.verification_code'|trans({}, 'portal_base') }}">
  447.                             </div>
  448.                         </template>
  451.                         {# ===================box-right=================== #}
  453.                         <div class="modal_online_cover_box modal_online_cover_box_right ">
  454.                             <p class="cover_box_right_title">{{ 'modal_online_service.order_details'|trans({}, 'portal_base') }}</p>
  455.                             <template v-if="(status.stepSearchNumber || (!vehicleInfo.brand)) && step === 1">
  456.                                 <p class="cover_box_right_sub_title">{{ 'modal_online_service.detailed_information'|trans({}, 'portal_base') }}</p>
  457.                                 <div class="cover_box_right_info_box_wrapper">
  458.                                     <div class="cover_box_right_info_box">
  459.                                         <svg width="10" height="10" viewbox="0 0 10 10" fill="none"
  460.                                              xmlns="http://www.w3.org/2000/svg">
  461.                                             <g clip-path="url(#clip0_1195_3435)">
  462.                                                 <path
  463.                                                     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"
  464.                                                     fill="#E40C25"/>
  465.                                             </g>
  466.                                             <defs>
  467.                                                 <clipPath id="clip0_1195_3435">
  468.                                                     <rect width="10" height="10" fill="white"/>
  469.                                                 </clipPath>
  470.                                             </defs>
  471.                                         </svg>
  473.                                         <p class="cover_box_right_info_text">{{ 'modal_online_service.tech_characteristics_car'|trans({}, 'portal_base') }}</p>
  474.                                     </div>
  475.                                     <div class="cover_box_right_info_box">
  476.                                         <svg width="10" height="10" viewbox="0 0 10 10" fill="none"
  477.                                              xmlns="http://www.w3.org/2000/svg">
  478.                                             <g clip-path="url(#clip0_1195_3435)">
  479.                                                 <path
  480.                                                     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"
  481.                                                     fill="#E40C25"/>
  482.                                             </g>
  483.                                             <defs>
  484.                                                 <clipPath id="clip0_1195_3435">
  485.                                                     <rect width="10" height="10" fill="white"/>
  486.                                                 </clipPath>
  487.                                             </defs>
  488.                                         </svg>
  490.                                         <p class="cover_box_right_info_text">{{ 'modal_online_service.cost_service_repair'|trans({}, 'portal_base') }}</p>
  491.                                     </div>
  492.                                     <div class="cover_box_right_info_box">
  493.                                         <svg width="10" height="10" viewbox="0 0 10 10" fill="none"
  494.                                              xmlns="http://www.w3.org/2000/svg">
  495.                                             <g clip-path="url(#clip0_1195_3435)">
  496.                                                 <path
  497.                                                     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"
  498.                                                     fill="#E40C25"/>
  499.                                             </g>
  500.                                             <defs>
  501.                                                 <clipPath id="clip0_1195_3435">
  502.                                                     <rect width="10" height="10" fill="white"/>
  503.                                                 </clipPath>
  504.                                             </defs>
  505.                                         </svg>
  507.                                         <p class="cover_box_right_info_text">{{ 'modal_online_service.date_time_event'|trans({}, 'portal_base') }}</p>
  508.                                     </div>
  509.                                 </div>
  510.                             </template>
  511.                             <div class="cover_box_right_select_marka_wrapper-step-2">
  512.                                 <div v-if="!status.stepSearchNumber && vehicleInfo.brand"
  513.                                      class="cover_box_right_select_marka_box">
  514.                                     <div class="select_marka_box_head">
  515.                                         <p class="marka_box_head">{{ 'modal_online_service.brand'|trans({}, 'portal_base') }}</p>
  516.                                         <button v-if="step > 1 || status.stepChangeDealer" class="marka_box_head_change" @click="editModel">
  517.                                             {{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  518.                                         </button>
  519.                                     </div>
  520.                                     <p class="select_marka_box_head_name">
  521.                                         <span v-html="vehicleInfo.brand"></span>
  522.                                         <span v-html="vehicleInfo.model"></span>
  523.                                         <span v-html="vehicleInfo.variationInfo"></span>
  524.                                         <span v-html="vehicleInfo.makeYear"></span>
  525.                                     </p>
  526.                                 </div>
  528.                                 <div v-if="carData.dealerId" class="cover_box_right_select_marka_box">
  529.                                     <div class="select_marka_box_head">
  530.                                         <p class="marka_box_head">{{ 'modal_online_service.service_station'|trans({}, 'portal_base') }}</p>
  531.                                         <button v-if="!status.stepChangeDealer" class="marka_box_head_change" @click="editDealer">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  532.                                         </button>
  533.                                     </div>
  534.                                     <p class="select_marka_box_head_name"
  535.                                        v-html="dealers[carData.dealerId].title"></p>
  536.                                 </div>
  538.                                 <template v-if="step === 2">
  539.                                     <div class="works_cover_wrapper">
  540.                                         <p class="works_name">{{ 'modal_online_service.works'|trans({}, 'portal_base') }}</p>
  541.                                         <div class="works_cover_box_wrapper">
  542.                                             <div class="works_cover_box">
  543.                                                 <template>
  544.                                                     <button class="circle_touch_btn active" v-for="work in vehicleInfo.addWorks" v-if="addWorkAvailable(work.id)" @click="toggleWork(work.id)">
  545.                                                         <div class="circle_touch"></div>
  546.                                                         <p class="circle_touch_text" v-html="work.title">{{ 'modal_online_service.computer_diagnostics'|trans({}, 'portal_base') }}</p>
  547.                                                         <span class="circle_touch_price"><span v-html="work.totalCost.toLocaleString()"></span> грн</span>
  548.                                                     </button>
  549.                                                 </template>
  550.                                             </div>
  551.                                         </div>
  552.                                     </div>
  553.                                 </template>
  555.                                 <template v-if="step === 3 || step === 4">
  556.                                     <div class="cover_box_right_select_marka_box">
  557.                                         <div class="select_marka_box_head">
  558.                                             <p class="marka_box_head">{{ 'modal_online_service.works'|trans({}, 'portal_base') }}</p>
  559.                                             <button class="marka_box_head_change" @click="setStep(2)">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}
  560.                                             </button>
  561.                                         </div>
  563.                                         <p class="select_marka_box_head_name" v-html="Object.values(vehicleInfo.addWorks).map(item => item.title).join(', ')"></p>
  564.                                     </div>
  565.                                     <div v-if="userDate" class="cover_box_right_select_marka_box">
  566.                                         <div style="position: relative;" class="select_marka_box_head">
  567.                                             <div class="total_price_title_box">
  568.                                                 <p class="marka_box_head">{{ 'modal_online_service.date_time'|trans({}, 'portal_base') }}</p>
  569.                                                 <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">
  570.                                                     <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"/>
  571.                                                 </svg>
  572.                                             </div>
  574.                                             <button v-if="step > 3" class="marka_box_head_change" @click="setStep(3)">{{ 'modal_online_service.change'|trans({}, 'portal_base') }}</button>
  575.                                             <div class="show_tooltip" id="openTooltip-3">
  576.                                                 <span onclick="openTooltip('#openTooltip-3')" class="price_tooltip_close">x</span>
  577.                                                 <p>{{ 'modal_online_service.pay_attention'|trans({}, 'portal_base') }} <br>
  578.                                                     {{ 'modal_online_service.choose_performed_works'|trans({}, 'portal_base') }}</p>
  579.                                             </div>
  581.                                         </div>
  582.                                         <p class="select_marka_box_head_name">
  583.                                             <span v-html="formatDate(userDate)"></span> на <span v-if="isNight" v-html="nightTimeInput"></span><span v-else v-html="userTimeInput"></span>
  584.                                         </p>
  586.                                     </div>
  587.                                 </template>
  589.                             </div>
  590.                             <div v-if="step === 2" class="total_price_wrapper">
  592.                                 <div class="total_price_title_box">
  593.                                     <p class="total_price_tite">{{ 'modal_online_service.estimated_works'|trans({}, 'portal_base') }}
  594.                                     </p>
  595.                                     <svg onclick="openTooltip('#openTooltip-1')" class="modal_show_tooltip" width="10" height="10" viewbox="0 0 10 10" fill="none"
  596.                                          xmlns="http://www.w3.org/2000/svg">
  597.                                         <path fill-rule="evenodd" clip-rule="evenodd"
  598.                                               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"
  599.                                               fill="#E40C25"/>
  600.                                     </svg>
  601.                                     <p class="modal_footer_price_tite">:</p>
  602.                                 </div>
  603.                                 <div class="show_tooltip" id="openTooltip-1">
  604.                                     <span onclick="openTooltip('#openTooltip-1')" class="price_tooltip_close">x</span>
  605.                                     <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>
  606.                                 </div>
  607.                                 <span class="total_price"><span
  608.                                         v-html="vehicleInfo.totalCostWork.toLocaleString()"></span> грн</span>
  609.                             </div>
  610.                         </div>
  611.                     </div>
  613.                     <template v-if="successService">
  614.                         <div class="thank_modal">
  615.                             <div class="thank_modal_wapper">
  616.                                 <div class="thank_modal_close" @click="closeServiceSuccess">
  617.                                     <svg width="13" height="12" viewbox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  618.                                         <path d="M11.5 11L1.5 1M11.5 1L1.5 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
  619.                                     </svg>
  620.                                 </div>
  621.                                 <p class="thank_modal_title">{{ 'modal_online_service.application_created'|trans({}, 'portal_base') }}</p>
  622.                                 <p class="thank_modal_text">{{ 'modal_online_service.manager_details_future'|trans({}, 'portal_base') }}</p>
  623.                                 <p class="thank_modal_text">{{ 'modal_online_service.thank_choosing_us'|trans({}, 'portal_base') }}</p>
  624.                                 <a :href="options.catalogUrl" class="thank_modal_btn">{{ 'modal_online_service.go_catalog_cars'|trans({}, 'portal_base') }}</a>
  625.                             </div>
  626.                         </div>
  627.                     </template>
  628.                 </div>
  629.             </div>
  630.         </div>
  631.     </div>
  632.     <div class="modal_online_reg_footer">
  633.         <div class="container">
  634.             <div class="modal_online_reg_footer_wrapper">
  636.                 <div class="modal_footer_price_wrapper">
  637.                     <template v-if="step > 1">
  638.                         <div class="modal_footer_price_title_box">
  639.                             <p class="modal_footer_price_tite">{{ 'modal_online_service.estimated_cost'|trans({}, 'portal_base') }}
  640.                             </p>
  641.                             <svg onclick="openTooltip('#openTooltip-2')" class="modal_show_tooltip" width="10" height="10" viewbox="0 0 10 10" fill="none"
  642.                                  xmlns="http://www.w3.org/2000/svg">
  643.                                 <path fill-rule="evenodd" clip-rule="evenodd"
  644.                                       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"
  645.                                       fill="#E40C25"/>
  646.                             </svg>
  647.                             <p class="modal_footer_price_tite">:</p>
  648.                             <div class="show_tooltip" id="openTooltip-2">
  649.                                 <span onclick="openTooltip('#openTooltip-2')" class="price_tooltip_close">x</span>
  650.                                 <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>
  651.                             </div>
  652.                         </div>
  654.                         <span class="modal_footer_price"><span
  655.                                 v-html="vehicleInfo.totalCostWork.toLocaleString()"></span> грн</span>
  656.                     </template>
  657.                 </div>
  659.                 <div class="modal_online_reg_footer_box">
  660.                     <img class="modal_online_reg_footer_img"
  661.                          src="{{ asset('bundles/portal/img/service/modal-footer-icon.svg') }}" alt="">
  662.                     <div class="modal_online_reg_footer_info">
  663.                         <p class="reg_footer_info_title">{{ 'modal_online_service.sign_online'|trans({}, 'portal_base') }}
  664.                         </p>
  665.                         <div class="reg_footer_info_box">
  666.                             <p>{{ 'modal_online_service.get'|trans({}, 'portal_base') }}</p>
  667.                             <span>-20%</span>
  668.                             <p>{{ 'modal_online_service.on_sink'|trans({}, 'portal_base') }}</p>
  669.                         </div>
  670.                     </div>
  671.                 </div>
  672.                 <button v-if="status.stepSearchNumber" class="modal_online_reg_footer_btn" @click="findVehicleByNumber">{{ 'modal_online_service.search'|trans({}, 'portal_base') }}</button>
  673.                 <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>
  674.                 <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>
  675.                 <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>
  676.                 <button v-else-if="step === 3" class="modal_online_reg_footer_btn" @click="booking" :disabled="(!nightTimeInput && !userTimeInput) || !confirm">{{ 'modal_online_service.further'|trans({}, 'portal_base') }}</button>
  677.                 <button v-else-if="step === 4" class="modal_online_reg_footer_btn" @click="confirmBooking" :disabled="!bookingId && !confirmCode">{{ 'modal_online_service.further'|trans({}, 'portal_base') }}</button>
  678.                 <button v-else-if="status.stepNoBrandDealer" class="modal_online_reg_footer_btn" @click="noBrandDealer">{{ 'modal_online_service.to_confirm'|trans({}, 'portal_base') }}</button>
  679.             </div>
  680.         </div>
  681.     </div>
  682. </div>