src/PortalBundle/Resources/views/Car/module-temporary.html.twig line 1

Open in your IDE?
  1. <div class="card__car__colum card_car_colum_p0">
  2.     <div class="card__car__widgets__wrapper">
  3.         <div class="card__car__widgets__head">
  4.             <p>{{ 'card_car.article.profitable_with'|trans({}, 'portal_base') }}
  5.                 VIDI</p>
  6.         </div>
  7.     </div>
  9.     {# Accordion STEPS #}
  10.     <div class="accordion accordion__wedgets__wrapper" id="accordionWidgets">
  11.         <div>
  13.             <div class="accordion-item accordion-item-widgets">
  14.                 <div class="accordion-header" id="carWidgets-2222">
  15.                     <button class="accordion-button accordion-button-widgets" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-2222" aria-expanded="false" aria-controls="carWidgetsCollapse-2222">
  16.                         <p class="widgets__accord__title">{{ 'menu.buy_car'|trans({}, 'portal_base') }} {{ vehicle.fullName }} {% if vehicle.isNew is defined and vehicle.isNew %} {{ vehicle.equipmentTitle }} {% endif %} в кредит за {{ creditPayment|price }} {{ 'card_car.article.uah_month'|trans({}, 'portal_base') }}.</p>
  17.                         {# <p class="widgets__accord__price ">за {{ creditPayment|price }} {{ 'card_car.article.uah_month'|trans({}, 'portal_base') }}.</p> #}
  18.                     </button>
  20.                 </div>
  21.                 <div id="carWidgetsCollapse-2222" class="accordion-collapse collapse show" :class="{ 'show' : isShow === true}" aria-labelledby="carWidgets-2222" data-bs-parent="#accordionWidgets" v-if="firstStepLeasing">
  23.                     <div class="accordion-body accordion-body-widgets">
  24.                         {% include '@Portal/Modules/credit-calc-car-card.html.twig' %}
  25.                     </div>
  26.                 </div>
  27.             </div>
  30.         </div>
  31.         {# 111111111111111111111111111111111 #}
  34.         {% if isUsed is not defined %}
  35.             <!-- accordion-item-2 -->
  36.             <!-- STEP 1 accordion-item-2 -->
  37.                 <div id="leasing_widget_acordion"> <div class="accordion-item accordion-item-widgets">
  38.                     <div class="accordion-header" id="carWidgets-2" v-if="firstStepLeasing">
  39.                         <button class="accordion-button accordion-button-widgets collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-2" aria-expanded="false" aria-controls="carWidgetsCollapse-2">
  40.                             <p class="widgets__accord__title">{{ 'card_car.article.buy_leasing'|trans({}, 'portal_base') }} за {{ leasingPayment|price }} {{ 'card_car.article.uah_month'|trans({}, 'portal_base') }}.</p>
  41.                             {# <p class="widgets__accord__price">
  42.                                 за
  43.                                 {{ leasingPayment|price }}
  44.                                 {{ 'card_car.article.uah_month'|trans({}, 'portal_base') }}.</p> #}
  45.                         </button>
  46.                     </div>
  47.                     <div id="carWidgetsCollapse-2" class="accordion-collapse collapse" :class="{ 'show' : isShow === true}" aria-labelledby="carWidgets-2" data-bs-parent="#accordionWidgets" v-if="firstStepLeasing">
  48.                         <div class="accordion-body accordion-body-widgets">
  50.                             <p class="widgets__text mb-4">{{ 'card_car.article.determine_conditions'|trans({}, 'portal_base') }}</p>
  52.                             <div class="car__widgets__collapse__select__wrapper-4">
  54.                                 <div class="select__wrapper-box">
  55.                                     <p>{{ 'card_car.article.advance_payment'|trans({}, 'portal_base') }}</p>
  56.                                     <div class="select__wrapper-box select__wrapper-box-40 select__wrapper-box-parent">
  57.                                         <input class="select__parent__input" type="text" v-model="financeConditions.prepaid" placeholder="">
  58.                                         <span class="leasing_widget-range_avans-percent" v-html="Math.ceil(financeConditions.prepaidPercent)+' %'"></span>
  59.                                     </div>
  60.                                     <span v-if="errorPrepaidInput" class="leasing_widget-avans-error">{{ 'leasing.price_enter'|trans({},'dc_base') }}
  61.                                         {% verbatim %}
  62.                                             {{ financeConditions.min }}
  63.                                         {% endverbatim %}
  64.                                         до
  65.                                         {% verbatim %}
  66.                                             {{ financeConditions.max }}
  67.                                         {% endverbatim %}
  68.                                     </span>
  69.                                 </div>
  71.                                 <div class="select__wrapper-box select__wrapper-box-40">
  72.                                     <p>{{ 'card_car.article.term_financing'|trans({}, 'portal_base') }}
  73.                                         ,
  74.                                         {{ 'car.month'|trans({}, 'automarket_base') }}</p>
  75.                                     <select v-model="financeConditions.period">
  76.                                         <option>12</option>
  77.                                         <option>24</option>
  78.                                         <option>36</option>
  79.                                     </select>
  80.                                 </div>
  82.                                 <div class="select__wrapper-box select__wrapper-box-40">
  83.                                     <p>{{ 'card_car.article.repayment_type'|trans({}, 'portal_base') }}</p>
  84.                                     <select v-model="financeConditions.leasingType">
  85.                                         <option value="1">{{ 'card_car.article.standard'|trans({}, 'portal_base') }}</option>
  86.                                         <option value="2">{{ 'card_car.article.annuity'|trans({}, 'portal_base') }}</option>
  87.                                     </select>
  88.                                 </div>
  90.                             </div>
  91.                             <div class="accordion__number__wrapper">
  92.                                 <p>{{ 'card_car.article.number_cars'|trans({}, 'portal_base') }}</p>
  93.                                 <div class="accordion__number">
  94.                                     <span class="accordion-minus" @click.stop.prevent="financeConditions.carPark > 1 ? financeConditions.carPark-- : false" :class="{'disabled': financeConditions.carPark == 1}">-</span>
  95.                                     <input class="accordion-input" type="text" v-model="financeConditions.carPark"/>
  96.                                     <span class="accordion-plus" @click.stop.prevent="financeConditions.carPark++">+</span>
  97.                                 </div>
  98.                             </div>
  99.                             <button id="card_lising" @click.stop.prevent="updateMerchant" class="widgets__button" :disabled="errorPrepaidInput">{{ 'card_car.article.calculate_payment'|trans({}, 'portal_base') }}</button>
  100.                         </div>
  101.                     </div>
  102.                 </div>
  104.                 <!-- STEP 2 accordion-item-2 -->
  105.                 <div class="accordion-item accordion-item-widgets">
  107.                     <div class="accordion-header accordion-header-relative" id="carWidgets-2" v-if="secondStepLeasing">
  108.                         <button class="accordion-button accordion-button-widgets" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-2" aria-expanded="false" aria-controls="carWidgetsCollapse-2">
  109.                             <div class="accordion__step__wrapper">
  110.                                 <p class="widgets__accord__title widgets__accord__title-100" @click.prevent.stop="prevStepOne()">{{ 'card_car.article.calculation_details'|trans({}, 'portal_base') }}</p>
  111.                             </div>
  112.                         </button>
  113.                         <div class="accordion__arrow__back" @click.prevent.stop="prevStepOne()">
  114.                             <svg class="accordion__arrow__back-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewbox="0 0 8 14" fill="none">
  115.                                 <path d="M6.08321 0.933316L0.466547 6.53332C0.39988 6.59998 0.352547 6.67221 0.324547 6.74998C0.296547 6.82776 0.282769 6.91109 0.283214 6.99998C0.283214 7.08887 0.296991 7.17221 0.324547 7.24998C0.352102 7.32776 0.399436 7.39998 0.466547 7.46665L6.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.7055 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 6.99998L7.26655 2.09998C7.4221 1.94443 7.49988 1.75265 7.49988 1.52465C7.49988 1.29665 7.41655 1.09954 7.24988 0.933316C7.08321 0.766649 6.88877 0.683316 6.66655 0.683316C6.44432 0.683316 6.24988 0.766649 6.08321 0.933316Z" fill="inherit"/>
  116.                             </svg>
  117.                         </div>
  118.                     </div>
  120.                     <div id="carWidgetsCollapse-2" class="accordion-collapse collapse show" aria-labelledby="carWidgets-2" data-bs-parent="#accordionWidgets" v-if="secondStepLeasing">
  121.                         <div class="accordion-body accordion-body-widgets">
  123.                             <div class="accordion__calculation__details__wrapper">
  124.                                 <div class="accordion__calculation__details__box">
  126.                                     <div class="accordion__calculation__details-item">
  127.                                         <p class="details-item-text">{{ 'card_car.article.full_car'|trans({}, 'portal_base') }}</p>
  128.                                         <p class="details-item-price">
  129.                                             <span v-html="financeConditions.price.toLocaleString()"></span>
  130.                                             грн</p>
  131.                                     </div>
  132.                                     <div class="accordion__calculation__details-item">
  133.                                         <p class="details-item-text">{{ 'card_car.article.advance_payment'|trans({}, 'portal_base') }}</p>
  134.                                         <p class="details-item-price">
  135.                                             <span v-html="Number(financeConditions.prepaid).toLocaleString()"></span>
  136.                                             грн
  137.                                         </p>
  138.                                     </div>
  139.                                     <div class="accordion__calculation__details-item" v-if="financeConditions.merchants.length">
  140.                                         <p class="details-item-text">{{ 'card_car.article.rate'|trans({}, 'portal_base') }}</p>
  141.                                         <p class="details-item-price" v-if="financeConditions.leasingType == leasingTypes.standart" v-html="financeConditions.merchants[0].data.classic.percent + '%'">
  142.                                             1%</p>
  143.                                         <p class="details-item-price" v-else-if="financeConditions.leasingType == leasingTypes.annuitet" v-html="financeConditions.merchants[0].data.annuitet.percent + '%'">
  144.                                             1%</p>
  145.                                     </div>
  146.                                     <div class="accordion__calculation__details-item">
  147.                                         <p class="details-item-text">{{ 'card_car.article.term'|trans({}, 'portal_base') }}</p>
  148.                                         <p class="details-item-price">
  149.                                             {% verbatim %}
  150.                                                 {{financeConditions.period}}
  151.                                             {% endverbatim %}
  152.                                             {{ 'car.month'|trans({}, 'automarket_base') }}
  153.                                         </p>
  154.                                     </div>
  155.                                     <div class="accordion__calculation__details-item">
  156.                                         <p class="details-item-text">{{ 'card_car.article.monthly_payment'|trans({}, 'portal_base') }}</p>
  157.                                         <p class="details-item-price item__box__right__text-red" v-if="financeConditions.activeMerchant === false" v-html="financeConditions.avgPayment.toLocaleString() + ' грн*'"></p>
  158.                                         <p class="details-item-price item__box__right__text-red" v-else-if="financeConditions.leasingType == leasingTypes.annuitet && typeof financeConditions.merchants[financeConditions.activeMerchant] !== 'undefined'" v-html="Math.round(financeConditions.merchants[financeConditions.activeMerchant].data.annuitet.payment).toLocaleString() + ' грн*'"></p>
  159.                                         <p class="details-item-price item__box__right__text-red" v-else-if="financeConditions.leasingType == leasingTypes.standart && typeof financeConditions.merchants[financeConditions.activeMerchant] !== 'undefined'" v-html="Math.round(financeConditions.merchants[financeConditions.activeMerchant].data.classic.payment).toLocaleString() + ' грн*'"></p>
  160.                                     </div>
  162.                                 </div>
  164.                                 <div class="accordion__calculation__details__box details__box-info">
  166.                                     <div class="details__box__info__title__wrapper">
  167.                                         <p>{{ 'card_car.article.funding_program'|trans({}, 'portal_base') }}</p>
  168.                                         <svg class="widgets__content-info" @click.prevent.stop="showInfo" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" fill="none">
  169.                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99943 0C7.65664 0 9.1565 0.671257 10.2421 1.75682C11.3276 2.84351 12 4.34336 12 5.99943C12 7.65664 11.3276 9.1565 10.2421 10.2421C9.1565 11.3276 7.65664 12 5.99943 12C4.34336 12 2.84351 11.3276 1.75682 10.2421C0.671257 9.1565 0 7.65664 0 5.99943C0 4.34336 0.671257 2.84237 1.75682 1.75682C2.84237 0.671257 4.34336 0 5.99943 0ZM9.57985 2.41902C8.66409 1.50325 7.39742 0.936138 5.99943 0.936138C4.60145 0.936138 3.33591 1.50325 2.41902 2.41902C1.50325 3.33591 0.936138 4.60145 0.936138 5.99943C0.936138 7.39742 1.50325 8.66409 2.41902 9.57985C3.33591 10.4956 4.60145 11.0627 5.99943 11.0627C7.39742 11.0627 8.66409 10.4956 9.57985 9.57985C10.4956 8.66409 11.0627 7.39742 11.0627 5.99943C11.0627 4.60145 10.4956 3.33591 9.57985 2.41902ZM5.94736 3.80568C5.68927 3.80568 5.47986 3.59626 5.47986 3.33818C5.47986 3.07895 5.68927 2.86954 5.94736 2.86954H6.0515C6.31073 2.86954 6.52014 3.07895 6.52014 3.33818C6.52014 3.59626 6.31073 3.80568 6.0515 3.80568H5.94736ZM5.5274 4.88784C5.5274 4.62975 5.73682 4.42034 5.99604 4.42034C6.25413 4.42034 6.46354 4.62975 6.46354 4.88784V8.66182C6.46354 8.91991 6.25413 9.13046 5.99604 9.13046C5.73682 9.13046 5.5274 8.91991 5.5274 8.66182V4.88784Z" fill="inherit"/>
  170.                                         </svg>
  171.                                     </div>
  172.                                     <div class="details__box__info__header__wrapper">
  173.                                         <div class="box__info__header">
  174.                                             <p class="header__info__text">{{ 'card_car.article.term_financing'|trans({}, 'portal_base') }}</p>
  175.                                             <p class="header__info__text header__info__text-mon" v-html="financeConditions.period+' {{ 'car.month'|trans({}, 'automarket_base') }}'"></p>
  176.                                         </div>
  177.                                         <div class="box__info__header">
  178.                                             <p class="header__info__text">{{ 'card_car.article.payment_month'|trans({}, 'portal_base') }}
  179.                                                 :</p>
  180.                                             {#                                        <p class="header__info__text header__info__text-price">47 637 грн*</p> #}
  181.                                             <p class="header__info__text header__info__text-price" v-if="financeConditions.activeMerchant === false" v-html="financeConditions.avgPayment.toLocaleString() + ' грн*'"></p>
  182.                                             <p class="header__info__text header__info__text-price" v-else-if="financeConditions.leasingType == leasingTypes.annuitet && typeof financeConditions.merchants[financeConditions.activeMerchant] !== 'undefined'" v-html="Math.round(financeConditions.merchants[financeConditions.activeMerchant].data.annuitet.payment).toLocaleString() + ' грн*'"></p>
  183.                                             <p class="header__info__text header__info__text-price" v-else-if="financeConditions.leasingType == leasingTypes.standart && typeof financeConditions.merchants[financeConditions.activeMerchant] !== 'undefined'" v-html="Math.round(financeConditions.merchants[financeConditions.activeMerchant].data.classic.payment).toLocaleString() + ' грн*'"></p>
  184.                                         </div>
  185.                                     </div>
  187.                                     <p class="details__box__info-name">{{ 'card_car.article.payment_schedule'|trans({}, 'portal_base') }}</p>
  189.                                     <div class="accordion__box__info__scroll__wrapper" v-for="(merchant, index) in financeConditions.merchants">
  191.                                         <div class="accordion__box__info__scroll__box" v-for="m in financeConditions.period /4">
  192.                                             <div class="info__scroll__box__number__box" v-for="i in 4">
  193.                                                 <span v-html="m + (financeConditions.period /4 * (i-1))"></span>
  194.                                                 <p v-if="financeConditions.leasingType == leasingTypes.annuitet" v-html="Math.round(merchant.data.annuitet.schedule[m + (financeConditions.period /4 * (i-1))].payment).toLocaleString() + ' грн *'"></p>
  195.                                                 <p v-else-if="financeConditions.leasingType == leasingTypes.standart" v-html="Math.round(merchant.data.classic.schedule[m + (financeConditions.period /4 * (i-1))].payment).toLocaleString() + ' грн *'"></p>
  196.                                             </div>
  197.                                         </div>
  199.                                     </div>
  202.                                     <div class="widgets__content__info__modal widgets__content__info__modal-scroll" id="widgets__content__info__leasing">
  203.                                         <div class="info__modal__box">
  204.                                             <p class="info__modal__title">{{ 'card_car.article.amount_leasing_payment'|trans({}, 'portal_base') }}
  205.                                                 :</p>
  206.                                             <svg class="info__modal__close" @click.prevent.stop="closeInfo" xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewbox="0 0 13 12" fill="none">
  207.                                                 <path d="M11.5 11L1.5 1M11.5 1L1.5 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
  208.                                             </svg>
  209.                                         </div>
  211.                                         <div class="widgets__content__info__modal__wrapper">
  212.                                             <p class="content__info__modal-text">
  213.                                                 •
  214.                                                 {{ 'card_car.article.info_modal_text_1'|trans({}, 'portal_base') }}</p>
  215.                                             <p class="content__info__modal-text">
  216.                                                 •
  217.                                                 {{ 'card_car.article.info_modal_text_2'|trans({}, 'portal_base') }}</p>
  218.                                             <p class="content__info__modal-text">
  219.                                                 •
  220.                                                 {{ 'card_car.article.info_modal_text_3'|trans({}, 'portal_base') }}</p>
  221.                                             <p class="content__info__modal-text">
  222.                                                 •
  223.                                                 {{ 'card_car.article.info_modal_text_4'|trans({}, 'portal_base') }}</p>
  224.                                             <p class="content__info__modal-text">
  225.                                                 •
  226.                                                 {{ 'card_car.article.info_modal_text_5'|trans({}, 'portal_base') }}</p>
  227.                                             <p class="content__info__modal-text">
  228.                                                 •
  229.                                                 {{ 'card_car.article.info_modal_text_6'|trans({}, 'portal_base') }}</p>
  230.                                         </div>
  231.                                     </div>
  233.                                 </div>
  234.                             </div>
  235.                             <div class="widgets__content__button__block">
  236.                                 <a href="#" class="widgets__button" @click.prevent.stop="sendLead">{{ 'car.want_auto_in_leasing'|trans({}, 'automarket_base') }}</a>
  237.                                 <p>*{{ 'car.grn_payment'|trans({}, 'automarket_base') }}</p>
  238.                             </div>
  239.                         </div>
  240.                     </div>
  241.                 </div>
  242.                 <div class="modal fade modal__step__custom" id="exampleModalLeasing" tabindex="-1" role="dialog" aria-labelledby="exampleModalLeasingLabel" aria-hidden="true">
  243.                     <div class="modal-dialog modal__step__custom__dialog modal-dialog-centered" role="document">
  244.                         <div class="modal-content modal__step__custom__content modal__step__custom-btn">
  245.                             <div class="modal-header modal__step__custom__header">
  246.                                 <h5 class="modal-title modal__step__custom__title" id="exampleModalLeasingLabel">{{ 'card_car.modal.we_are_happy'|trans({}, 'portal_base') }}</h5>
  247.                                 <button type="button" class="close modal__step__custom__close" data-dismiss="modal" aria-label="Close" @click.prevent.stop="modalClose">
  248.                                     <span aria-hidden="true">&times;</span>
  249.                                 </button>
  250.                             </div>
  251.                             <div class="modal-body modal__step__custom__body">
  252.                                 <p class="modal__step__custom__text">{{ 'card_car.modal.contact_phone'|trans({}, 'portal_base') }}</p>
  253.                                 {{ form_start(leasingCalculatorForm, {attr: {'action': path('form_leasing_save'), 'class': 'block-forma lead-form form-leasing-calculator' } }) }}
  254.                                 <div class="modal__step__custom__input">
  255.                                     {{ form_row(leasingCalculatorForm.name, {'attr' : {'v-model':'user.name', 'id': 'leasing_name'}}) }}
  256.                                 </div>
  257.                                 <div class="modal__step__custom__input">
  258.                                     {{ form_row(leasingCalculatorForm.phone, {'attr' : {'v-model':'user.phone', 'id': 'leasing_phone', 'v-mask': "'+38(###)###-##-##'", 'placeholder':'+38(___)___-__-__'}}) }}
  259.                                 </div>
  260.                                 <div class="modal__step__custom__input">
  261.                                     {{ form_row(leasingCalculatorForm.email, {'attr' : {'v-model':'user.email', 'class' : 'my_form_input'}}) }}
  262.                                 </div>
  263.                                 <div class="modal__step__custom__input">
  264.                                     {{ form_row(leasingCalculatorForm.edrpou, {'attr' : { 'class' : 'my_form_input'}}) }}
  265.                                 </div>
  266.                                 <div class="col-md-12">
  267.                                     <fieldset class="text-center">
  268.                                         <p class="modal__step__custom__text">{{ 'card_car.modal.how_connect_u'|trans({}, 'portal_base') }}</p>
  269.                                         {# <legend>Як з Вами краще зв'язатися?</legend> #}
  271.                                         <input type="radio" id="One" value="call" v-model="message">
  272.                                         <label for="One">{{ 'card_car.modal.call'|trans({}, 'portal_base') }}</label>
  274.                                         <input type="radio" id="Two" value="viber" v-model="message">
  275.                                         <label for="Two">Viber</label>
  276.                                         {#                                    <input type="radio" id="Three" value="telegram" v-model="message"> #}
  277.                                         {#                                    <label for="Three">Telegram</label> #}
  278.                                     </fieldset>
  279.                                 </div>
  280.                                 <div style="display: none;">
  281.                                     {{ form_row(leasingCalculatorForm.captcha, {'attr' : {'v-model':'token'}}) }}
  282.                                     {{ form_row(leasingCalculatorForm.data, {'attr' : {'v-model':'formData'}}) }}
  283.                                     {{ form_rest(leasingCalculatorForm) }}
  284.                                 </div>
  286.                                 <div class="form-group checkbox style-b mt-3 mb-0" v-if="privacyUrl">
  287.                                     <label class="checkboxes__item-privacy">
  288.                                         <input type="checkbox" v-model="checkPrivacy"/>
  289.                                         <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  290.                                         <p class="checkbox__body">{{ 'card_car.article.your_personal_accordance'|trans({}, 'portal_base') }}
  291.                                             <a :href="privacyUrl" target="_blank">{{ 'modal_online_service.learn_about_deal'|trans({}, 'portal_base') }}</a>
  292.                                         </p>
  293.                                     </label>
  294.                                 </div>
  295.                                 {#                        <p class="modal__step__custom__text-f">{{ 'card_car.article.your_personal_accordance'|trans({}, 'portal_base') }} <a href="{{ path('portal_privacy_policy') }}"{{ 'modal_online_service.learn_about_deal'|trans({}, 'portal_base') }}</a></p> #}
  296.                                 {{ form_end(leasingCalculatorForm) }}
  297.                             </div>
  298.                             <div class="modal-footer modal__step__custom__footer">
  299.                                 <button type="button" class="modal__step__custom__btn" @click.prevent.stop="sendForm">{{ 'card_car.modal.waiting_for_call'|trans({}, 'portal_base') }}</button>
  300.                             </div>
  301.                         </div>
  302.                     </div>
  303.                 </div>
  304.             </div>
  305.         {% endif %}
  308.         <div id="ti-new-widget">
  309.             <!-- accordion-item-3 -->
  310.             <!-- STEP 1 accordion-item-3 -->
  311.                 <div class="accordion-item"> <div class="accordion-header" id="carWidgets-3" v-if="tradeInStepOne">
  312.                     <button class="accordion-button accordion-button-widgets collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-3" aria-expanded="false" aria-controls="carWidgetsCollapse-3">
  313.                         <p class="widgets__accord__title">{{ 'car.exchange_your_car'|trans({}, 'automarket_base') }}</p>
  314.                     </button>
  315.                 </div>
  316.                 <div id="carWidgetsCollapse-3" class="accordion-collapse collapse" :class="{ 'show' : isShow === true}" aria-labelledby="carWidgets-3" data-bs-parent="#accordionWidgets" v-if="tradeInStepOne">
  317.                     <div class="accordion-body accordion-body-widgets">
  318.                         <div class="body__widgets__content__wrapper">
  319.                             <p class="widgets__text mb-3">{{ 'car.become_owner_alt'|trans({}, 'automarket_base') }}</p>
  320.                             <ul class="widgets__content__text">
  321.                                 <li class="widgets__text">{{ 'car.exchange_of'|trans({}, 'automarket_base')|raw }}
  322.                                     <a class="widgets__text-link" href="{{ path('portal_finance_tradein') }}">{{ 'car.trade-in'|trans({}, 'automarket_base') }}</a>
  323.                                     {{ 'buy_car.benefit_5'|trans({}, 'automarket_base') }}
  324.                                     <a class="widgets__text-link" href="{{ path('portal_sale_vidi_select') }}">VIDI
  325.                                                                                 SELECT</a>)
  326.                                 </li>
  327.                                 <li class="widgets__text">•
  328.                                     <strong>{{ 'card_car.widgets_text_6'|trans({}, 'portal_base') }}</strong>
  329.                                     {{ 'card_car.widgets_text_7'|trans({}, 'portal_base') }}
  330.                                 </li>
  331.                                 <li class="widgets__text">•
  332.                                     {{ 'card_car.widgets_text_8'|trans({}, 'portal_base') }}
  333.                                     <strong>{{ 'card_car.widgets_text_9'|trans({}, 'portal_base') }}</strong>
  334.                                 </li>
  336.                             </ul>
  337.                             <p class="widgets__text mb-4">{{ 'car.three_steps'|trans({}, 'automarket_base') }}</p>
  338.                             <a href="#" id="card_tradein" @click.prevent.stop="toStepSecond()" class="widgets__button widgets__button-white">{{ 'profit_with_vidi.rate_your_car'|trans({}, 'automarket_base') }}</a>
  339.                         </div>
  340.                     </div>
  341.                 </div>
  342.             </div>
  343.             <!-- STEP 2 accordion-item-3 -->
  344.             <div class="accordion-item accordion-item-widgets">
  345.                 <div class="accordion-header accordion-header-relative" id="carWidgets-3" v-if="tradeInStepTwo">
  346.                     <button class="accordion-button accordion-button-widgets" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-3" aria-expanded="false" aria-controls="carWidgetsCollapse-3">
  347.                         <div class="accordion__step__wrapper accordion__step-pl" @click.prevent.stop="prevStepOne()">
  348.                             <div class="accordion__step__counter">1</div>
  349.                             <p class="widgets__accord__title ">{{ 'car.registration_number'|trans({}, 'automarket_base') }}</p>
  350.                         </div>
  351.                     </button>
  352.                     <div class="accordion__arrow__back" @click.prevent.stop="prevStepOne()">
  353.                         <svg class="accordion__arrow__back-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewbox="0 0 8 14" fill="none">
  354.                             <path d="M6.08321 0.933316L0.466547 6.53332C0.39988 6.59998 0.352547 6.67221 0.324547 6.74998C0.296547 6.82776 0.282769 6.91109 0.283214 6.99998C0.283214 7.08887 0.296991 7.17221 0.324547 7.24998C0.352102 7.32776 0.399436 7.39998 0.466547 7.46665L6.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.7055 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 6.99998L7.26655 2.09998C7.4221 1.94443 7.49988 1.75265 7.49988 1.52465C7.49988 1.29665 7.41655 1.09954 7.24988 0.933316C7.08321 0.766649 6.88877 0.683316 6.66655 0.683316C6.44432 0.683316 6.24988 0.766649 6.08321 0.933316Z" fill="inherit"/>
  355.                         </svg>
  356.                     </div>
  357.                 </div>
  358.                 <div id="carWidgetsCollapse-3" class="accordion-collapse collapse show" aria-labelledby="carWidgets-3" data-bs-parent="#accordionWidgets" v-if="tradeInStepTwo">
  359.                     <div class="accordion-body accordion-body-widgets">
  360.                         <div class="body__widgets__content__wrapper">
  361.                             <p class="widgets__text carWidgets-3-title">{{ 'car.free_car_grade'|trans({}, 'automarket_base') }}</p>
  362.                             <div class="carWidgets3__search__wrapper">
  364.                                 <div class="search__number__form__wrapper">
  365.                                     <svg class="search__number-icon" width="35" height="58" viewbox="0 0 35 58" fill="none" xmlns="http://www.w3.org/2000/svg">
  366.                                         <path d="M0 6C0 2.68629 2.68629 0 6 0H35V58H6C2.68629 58 0 55.3137 0 52V6Z" fill="#0057B8"/>
  367.                                         <path 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" fill="white"/>
  368.                                         <rect x="8" y="10" width="19" height="7" fill="#42ADDE"/>
  369.                                         <rect x="8" y="17" width="19" height="7" fill="#FFD800"/>
  370.                                     </svg>
  371.                                     <form class="search__number__form">
  372.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  373.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  374.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  375.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  376.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  377.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  378.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  379.                                         <input name="number" type="text" maxlength="1" @keydown.prevent @keyup="numberVehicleEnter">
  380.                                     </form>
  381.                                 </div>
  383.                                 <a class="carWidgets3__search__link" @click.prevent.stop="toStepThird()" href="#">{{ 'car.dont_remember_number'|trans({}, 'automarket_base') }}</a>
  384.                             </div>
  386.                             <button class="widgets__button widgets__button-white" @click="estimateAuto">{{ 'profit_with_vidi.rate_your_car'|trans({}, 'automarket_base') }}</button>
  387.                         </div>
  388.                     </div>
  389.                 </div>
  390.             </div>
  391.             <!-- STEP 3 accordion-item-3 -->
  392.             <div class="accordion-item accordion-item-widgets">
  393.                 <div class="accordion-header accordion-header-relative" id="carWidgets-3" v-if="tradeInStepThree">
  394.                     <button class="accordion-button accordion-button-widgets" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-3" aria-expanded="false" aria-controls="carWidgetsCollapse-3">
  395.                         <div class="accordion__step__wrapper accordion__step-pl" @click.prevent.stop="prevStepSecond()">
  396.                             <div class="accordion__step__counter">2</div>
  397.                             <p class="widgets__accord__title ">{{ 'car.info_about_auto'|trans({}, 'automarket_base') }}</p>
  398.                         </div>
  399.                     </button>
  400.                     <div class="accordion__arrow__back" @click.prevent.stop="prevStepSecond()">
  401.                         <svg class="accordion__arrow__back-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewbox="0 0 8 14" fill="none">
  402.                             <path d="M6.08321 0.933316L0.466547 6.53332C0.39988 6.59998 0.352547 6.67221 0.324547 6.74998C0.296547 6.82776 0.282769 6.91109 0.283214 6.99998C0.283214 7.08887 0.296991 7.17221 0.324547 7.24998C0.352102 7.32776 0.399436 7.39998 0.466547 7.46665L6.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.7055 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 6.99998L7.26655 2.09998C7.4221 1.94443 7.49988 1.75265 7.49988 1.52465C7.49988 1.29665 7.41655 1.09954 7.24988 0.933316C7.08321 0.766649 6.88877 0.683316 6.66655 0.683316C6.44432 0.683316 6.24988 0.766649 6.08321 0.933316Z" fill="inherit"/>
  403.                         </svg>
  404.                     </div>
  405.                 </div>
  406.                 <div id="carWidgetsCollapse-3" class="accordion-collapse collapse show" aria-labelledby="carWidgets-3" data-bs-parent="#accordionWidgets" v-if="tradeInStepThree">
  407.                     <div class="accordion-body accordion-body-widgets">
  408.                         <div class="body__widgets__content__wrapper">
  410.                             <p class="widgets__text mb-2">{{ 'car.check_data'|trans({}, 'automarket_base') }}</p>
  411.                             <div class="car__widgets__collapse__select__wrapper-4">
  413.                                 <div class="select__wrapper-box">
  415.                                     <select v-model="data.brand" id="brand">
  416.                                         <option :value="null" disabled>{{ 'form.brand_1'|trans({}, 'dc_base') }}</option>
  417.                                         {% verbatim %}
  418.                                             <option :value="brand.id" v-for="brand in api.brands">{{ brand.title }}</option>
  419.                                         {% endverbatim %}
  420.                                     </select>
  421.                                 </div>
  423.                                 <div class="select__wrapper-box">
  424.                                     <select v-model="data.model" :disabled="api.models.length == 0" id="model">
  425.                                         <option :value="null" disabled>{{ 'card_car.model'|trans({}, 'portal_base') }}</option>
  426.                                         {% verbatim %}
  427.                                             <option :value="model.id" v-for="model in api.models">{{ model.title }}</option>
  428.                                         {% endverbatim %}
  429.                                     </select>
  430.                                 </div>
  432.                                 <div class="select__wrapper-box">
  433.                                     <select v-model="data.transmission" :disabled="!data.model">
  434.                                         <option :value="null" disabled>{{ 'trade_in.trans'|trans({}, 'dc_base') }}</option>
  435.                                         {% verbatim %}
  436.                                             <option v-if="transmission.id < 3" :value="transmission.id" v-for="transmission in api.transmission">{{ transmission.title }}</option>
  437.                                         {% endverbatim %}
  438.                                     </select>
  439.                                 </div>
  441.                                 <div class="select__wrapper-box">
  442.                                     <select v-model="data.year" :disabled="!data.model" id="year">
  443.                                         <option :value="null" disabled>{{ 'form.year'|trans({}, 'dc_base') }}
  444.                                         </option>
  445.                                         {% verbatim %}
  446.                                             <option :value="year" v-for="year in api.years">{{ year }}</option>
  447.                                         {% endverbatim %}
  448.                                     </select>
  449.                                 </div>
  451.                                 <div class="select__wrapper-box">
  452.                                     <select v-model="data.fuel" :disabled="!data.model">
  453.                                         <option :value="null" disabled>{{ 'trade_in.fuel'|trans({}, 'dc_base') }}</option>
  454.                                         {% verbatim %}
  455.                                             <option v-if="item.id < 7" :value="item.id" v-for="item in api.fuel">{{ item.title }}</option>
  456.                                         {% endverbatim %}
  457.                                     </select>
  458.                                 </div>
  460.                                 <div class="select__wrapper-box">
  461.                                     <select v-model="data.mileage" id="mileage" :disabled="!data.model">
  462.                                         <option :value="null" disabled>{{ 'trade_in.yardage'|trans({}, 'dc_base') }}*
  463.                                         </option>
  464.                                         {% verbatim %}
  465.                                             <option :value="item.id" v-for="item in api.mileage">{{ item.title }}</option>
  466.                                         {% endverbatim %}
  467.                                     </select>
  468.                                 </div>
  470.                             </div>
  472.                             <p class="widgets__text mb-2">{{ 'form.contact_info'|trans({}, 'dc_base')|capitalize }}</p>
  473.                             <div class="car__widgets__collapse__select__wrapper-4">
  474.                                 <div class="select__wrapper-box">
  475.                                     <input type="text" placeholder="{{ 'form.name'|trans({}, 'dc_base') }}" id="service_name" v-model="data.name">
  476.                                 </div>
  478.                                 <div class="select__wrapper-box">
  479.                                     <input type="text" placeholder="Email" v-model="data.email" id="service_email">
  480.                                 </div>
  482.                                 <div class="select__wrapper-box">
  483.                                     <input type="text" placeholder="+38(__)*" v-mask="'+38(###)###-##-##'" id="service_phone" v-model="data.phone">
  484.                                 </div>
  485.                             </div>
  487.                             <div class="widgets__content__button__block checkmark_box_accord">
  488.                                 <a href="#" class="widgets__button widgets__button-white" @click.prevent.stop="getEstimate()">{{ 'trade_in.estimate'|trans({}, 'dc_base') }}</a>
  489.                                 <div class="accordion__agree__text">
  490.                                     <div class="form-group checkbox style-b" v-if="privacyUrl">
  491.                                         <label class="checkboxes__item-privacy">
  492.                                             <input type="checkbox" v-model="checkPrivacy"/>
  493.                                             <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  494.                                             <p class="modal__step__custom__text-f">{{ 'card_car.article.your_personal_accordance'|trans({}, 'portal_base') }}
  495.                                                 <a :href="privacyUrl" target="_blank">{{ 'card_car.article.learn_more_deal'|trans({}, 'portal_base') }}</a>
  496.                                             </p>
  497.                                         </label>
  498.                                     </div>
  499.                                 </div>
  500.                             </div>
  501.                         </div>
  502.                     </div>
  503.                 </div>
  504.             </div>
  506.             <!-- STEP 4 accordion-item-3 -->
  507.             <div class="accordion-item accordion-item-widgets">
  508.                 <div class="accordion-header accordion-header-relative" id="carWidgets-3" v-if="tradeInStepFour && priceNotNull">
  509.                     <button class="accordion-button accordion-button-widgets" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-3" aria-expanded="false" aria-controls="carWidgetsCollapse-3">
  510.                         <div class="accordion__step__wrapper accordion__step-pl" @click.prevent.stop="prevStepThird()">
  511.                             <div class="accordion__step__counter">3</div>
  512.                             <p class="widgets__accord__title ">{{ 'car.rating_car'|trans({}, 'automarket_base') }}</p>
  513.                         </div>
  514.                     </button>
  515.                     <div class="accordion__arrow__back" @click.prevent.stop="prevStepThird()">
  516.                         <svg class="accordion__arrow__back-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewbox="0 0 8 14" fill="none">
  517.                             <path d="M6.08321 0.933316L0.466547 6.53332C0.39988 6.59998 0.352547 6.67221 0.324547 6.74998C0.296547 6.82776 0.282769 6.91109 0.283214 6.99998C0.283214 7.08887 0.296991 7.17221 0.324547 7.24998C0.352102 7.32776 0.399436 7.39998 0.466547 7.46665L6.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.7055 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 6.99998L7.26655 2.09998C7.4221 1.94443 7.49988 1.75265 7.49988 1.52465C7.49988 1.29665 7.41655 1.09954 7.24988 0.933316C7.08321 0.766649 6.88877 0.683316 6.66655 0.683316C6.44432 0.683316 6.24988 0.766649 6.08321 0.933316Z" fill="inherit"/>
  518.                         </svg>
  519.                     </div>
  520.                 </div>
  521.                 <div id="carWidgetsCollapse-3" class="accordion-collapse collapse show" aria-labelledby="carWidgets-3" data-bs-parent="#accordionWidgets" v-if="tradeInStepFour && priceNotNull">
  522.                     <div class="accordion-body accordion-body-widgets">
  523.                         <div class="body__widgets__content__wrapper">
  525.                             <div class="accordion__tradein__wrapper">
  527.                                 <div class="accordion__tradein__box">
  528.                                     <p class="accordion__tradein-title">
  529.                                         {% verbatim %}
  530.                                             {{vehicleSearch}}
  531.                                             {{ vehicleSearchYear }}
  532.                                         {% endverbatim %}
  533.                                         {{ 'catalog.year'|trans({}, 'automarket_base') }}</p>
  534.                                     <p class="accordion__tradein-text">{{ 'car.cost_of_u_car'|trans({}, 'automarket_base') }}
  535.                                         <span class="accordion__tradein-price">
  536.                                             <span v-html="priceTI.toLocaleString()"></span>
  537.                                             грн</span>
  538.                                     </p>
  539.                                 </div>
  541.                                 <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 50 50" fill="none">
  542.                                     <path d="M32.8243 31.3681H17.154C16.9389 31.3642 16.7243 31.3477 16.5111 31.3186C13.6375 30.967 11.4672 28.3516 11.4672 25.2362C11.4567 24.2811 11.6653 23.3364 12.0767 22.4744C12.4882 21.6124 13.0916 20.8562 13.8408 20.2637C15.154 16.0054 19.0001 13.7362 24.9891 13.7362C30.9782 13.7362 34.8243 15.989 36.132 20.2582C36.8881 20.8544 37.4958 21.6175 37.9076 22.4878C38.3194 23.3582 38.5241 24.312 38.5056 25.2747C38.5056 28.3901 36.3408 31.0054 33.4672 31.3571C33.2533 31.3741 33.0386 31.3778 32.8243 31.3681ZM24.9891 15.3846C19.6155 15.3846 16.3738 17.2857 15.3463 20.9944C15.2965 21.1804 15.1814 21.3423 15.0221 21.4505C14.4176 21.8851 13.928 22.4604 13.5958 23.1267C13.2636 23.7931 13.0987 24.5303 13.1155 25.2747C13.1155 27.5604 14.6595 29.4725 16.7089 29.7197C16.8566 29.7375 17.0052 29.7467 17.154 29.7472H32.8243C32.9712 29.7464 33.118 29.7373 33.2639 29.7197C35.3133 29.4725 36.8573 27.5604 36.8573 25.2747C36.8777 24.5266 36.7146 23.785 36.3822 23.1145C36.0499 22.4441 35.5584 21.8652 34.9507 21.4285C34.7914 21.3203 34.6763 21.1585 34.6265 20.9725C33.6045 17.2857 30.3628 15.3846 24.9891 15.3846Z" fill="#E40C25"/>
  543.                                     <path d="M37.8186 20.6538H35.7856C35.567 20.6538 35.3574 20.567 35.2028 20.4124C35.0483 20.2579 34.9614 20.0483 34.9614 19.8297C34.9614 19.6111 35.0483 19.4015 35.2028 19.2469C35.3574 19.0923 35.567 19.0055 35.7856 19.0055H37.8186C38.0372 19.0055 38.2468 19.0923 38.4014 19.2469C38.5559 19.4015 38.6427 19.6111 38.6427 19.8297C38.6427 20.0483 38.5559 20.2579 38.4014 20.4124C38.2468 20.567 38.0372 20.6538 37.8186 20.6538Z" fill="#E40C25"/>
  544.                                     <path d="M14.1867 20.6538H12.1538C11.9352 20.6538 11.7255 20.567 11.571 20.4124C11.4164 20.2579 11.3296 20.0483 11.3296 19.8297C11.3296 19.6111 11.4164 19.4015 11.571 19.2469C11.7255 19.0923 11.9352 19.0055 12.1538 19.0055H14.1867C14.4053 19.0055 14.615 19.0923 14.7695 19.2469C14.9241 19.4015 15.0109 19.6111 15.0109 19.8297C15.0109 20.0483 14.9241 20.2579 14.7695 20.4124C14.615 20.567 14.4053 20.6538 14.1867 20.6538Z" fill="#E40C25"/>
  545.                                     <path d="M17.0934 35.0714H15.6374C14.9437 35.0714 14.2785 34.7959 13.788 34.3054C13.2975 33.8149 13.022 33.1497 13.022 32.4561V29.7418C13.022 29.5232 13.1088 29.3136 13.2634 29.159C13.4179 29.0044 13.6276 28.9176 13.8461 28.9176C14.0647 28.9176 14.2744 29.0044 14.4289 29.159C14.5835 29.3136 14.6703 29.5232 14.6703 29.7418V32.4561C14.6703 32.7125 14.7722 32.9585 14.9536 33.1399C15.1349 33.3212 15.3809 33.4231 15.6374 33.4231H17.0934C17.3489 33.4216 17.5935 33.3191 17.7736 33.1379C17.9538 32.9567 18.0549 32.7116 18.0549 32.4561V30.6209C18.0549 30.4023 18.1418 30.1927 18.2963 30.0381C18.4509 29.8836 18.6605 29.7967 18.8791 29.7967C19.0977 29.7967 19.3073 29.8836 19.4619 30.0381C19.6165 30.1927 19.7033 30.4023 19.7033 30.6209V32.4561C19.7033 33.1488 19.4285 33.8132 18.9392 34.3035C18.4499 34.7938 17.7861 35.07 17.0934 35.0714Z" fill="#E40C25"/>
  546.                                     <path d="M34.3405 35.0714H32.8789C32.1862 35.07 31.5224 34.7938 31.0331 34.3035C30.5438 33.8132 30.269 33.1488 30.269 32.4561V30.6209C30.269 30.4023 30.3559 30.1927 30.5104 30.0381C30.665 29.8836 30.8746 29.7967 31.0932 29.7967C31.3118 29.7967 31.5214 29.8836 31.676 30.0381C31.8306 30.1927 31.9174 30.4023 31.9174 30.6209V32.4561C31.9174 32.7116 32.0185 32.9567 32.1987 33.1379C32.3789 33.3191 32.6234 33.4216 32.8789 33.4231H34.3405C34.596 33.4216 34.8406 33.3191 35.0207 33.1379C35.2009 32.9567 35.302 32.7116 35.302 32.4561V29.7418C35.302 29.5232 35.3888 29.3136 35.5434 29.159C35.698 29.0044 35.9076 28.9176 36.1262 28.9176C36.3448 28.9176 36.5544 29.0044 36.709 29.159C36.8635 29.3136 36.9504 29.5232 36.9504 29.7418V32.4561C36.9504 33.1488 36.6756 33.8132 36.1863 34.3035C35.697 34.7938 35.0332 35.07 34.3405 35.0714Z" fill="#E40C25"/>
  547.                                     <path d="M17.4724 27.055C17.1996 27.055 16.933 26.9741 16.7062 26.8226C16.4794 26.671 16.3026 26.4556 16.1982 26.2036C16.0939 25.9516 16.0665 25.6743 16.1198 25.4068C16.173 25.1393 16.3043 24.8936 16.4972 24.7007C16.6901 24.5078 16.9358 24.3765 17.2033 24.3233C17.4709 24.27 17.7481 24.2974 18.0002 24.4017C18.2522 24.5061 18.4675 24.6829 18.6191 24.9097C18.7706 25.1365 18.8515 25.4031 18.8515 25.6759C18.8501 26.0412 18.7043 26.3911 18.446 26.6495C18.1876 26.9078 17.8377 27.0535 17.4724 27.055Z" fill="#E40C25"/>
  548.                                     <path d="M32.4177 27.055C32.1449 27.055 31.8783 26.9741 31.6515 26.8226C31.4247 26.671 31.2479 26.4556 31.1436 26.2036C31.0392 25.9516 31.0119 25.6743 31.0651 25.4068C31.1183 25.1393 31.2496 24.8936 31.4425 24.7007C31.6354 24.5078 31.8811 24.3765 32.1486 24.3233C32.4162 24.27 32.6935 24.2974 32.9455 24.4017C33.1975 24.5061 33.4129 24.6829 33.5644 24.9097C33.7159 25.1365 33.7968 25.4031 33.7968 25.6759C33.7954 26.0412 33.6496 26.3911 33.3913 26.6495C33.133 26.9078 32.783 27.0535 32.4177 27.055Z" fill="#E40C25"/>
  549.                                     <path d="M29.8463 21.5989H14.5551C14.3365 21.5989 14.1269 21.5121 13.9724 21.3575C13.8178 21.203 13.731 20.9933 13.731 20.7747C13.731 20.5562 13.8178 20.3465 13.9724 20.192C14.1269 20.0374 14.3365 19.9506 14.5551 19.9506H29.8463C30.0649 19.9506 30.2746 20.0374 30.4291 20.192C30.5837 20.3465 30.6705 20.5562 30.6705 20.7747C30.6705 20.9933 30.5837 21.203 30.4291 21.3575C30.2746 21.5121 30.0649 21.5989 29.8463 21.5989Z" fill="#E40C25"/>
  550.                                     <path d="M14.1428 42.4175C13.9824 42.4172 13.8256 42.3694 13.6923 42.2802C9.78472 39.7134 6.86832 35.8918 5.42379 31.4454C3.97926 26.999 4.09282 22.1931 5.74574 17.8199C7.39866 13.4466 10.4923 9.76708 14.5167 7.38772C18.5411 5.00836 23.2561 4.07121 27.8846 4.73072C28.1032 4.76132 28.3006 4.8775 28.4336 5.0537C28.5665 5.2299 28.624 5.45169 28.5934 5.67028C28.5628 5.88886 28.4466 6.08634 28.2704 6.21926C28.0942 6.35219 27.8724 6.40967 27.6538 6.37907C23.3996 5.77525 19.0665 6.63814 15.3682 8.82565C11.6698 11.0132 8.82659 14.3949 7.30672 18.414C5.78684 22.4331 5.68091 26.8499 7.00636 30.9373C8.33181 35.0246 11.0096 38.5387 14.5989 40.901C14.749 40.998 14.8635 41.1411 14.9252 41.3088C14.9869 41.4764 14.9925 41.6596 14.941 41.8307C14.8896 42.0019 14.7839 42.1516 14.6399 42.2575C14.496 42.3633 14.3215 42.4195 14.1428 42.4175Z" fill="#E40C25"/>
  551.                                     <path d="M24.9506 45.6593C23.9928 45.6598 23.0362 45.5919 22.088 45.456C21.9798 45.4405 21.8757 45.4038 21.7816 45.3481C21.6875 45.2923 21.6054 45.2186 21.5398 45.1311C21.4743 45.0436 21.4266 44.9441 21.3995 44.8381C21.3724 44.7322 21.3664 44.622 21.382 44.5137C21.3975 44.4055 21.4342 44.3014 21.4899 44.2073C21.5457 44.1133 21.6194 44.0311 21.7069 43.9655C21.7944 43.9 21.8939 43.8523 21.9999 43.8252C22.1058 43.7981 22.216 43.7922 22.3243 43.8077C26.578 44.4083 30.9095 43.5432 34.6062 41.3547C38.3029 39.1662 41.1447 35.7847 42.664 31.7664C44.1834 27.7481 44.2898 23.3324 42.9658 19.2455C41.6418 15.1587 38.9662 11.6442 35.3792 9.28021C35.2812 9.22586 35.1955 9.15199 35.1272 9.06315C35.0589 8.97431 35.0096 8.87241 34.9823 8.76375C34.955 8.65508 34.9503 8.54197 34.9685 8.43142C34.9867 8.32086 35.0274 8.21522 35.088 8.12102C35.1487 8.02683 35.228 7.94608 35.3212 7.88379C35.4143 7.8215 35.5192 7.77899 35.6294 7.75889C35.7397 7.73879 35.8528 7.74152 35.962 7.76693C36.0711 7.79233 36.1738 7.83987 36.2638 7.90658C39.9674 10.3357 42.7875 13.8959 44.3045 18.0571C45.8214 22.2183 45.9541 26.7582 44.6827 31.0009C43.4113 35.2436 40.8038 38.9623 37.2484 41.6035C33.693 44.2448 29.3797 45.6673 24.9506 45.6593Z" fill="#E40C25"/>
  552.                                     <path d="M23.1044 10.4396C22.9262 10.4403 22.7526 10.3832 22.6095 10.277C22.4665 10.1707 22.3617 10.0209 22.311 9.85011C22.2602 9.67929 22.2662 9.49662 22.328 9.32949C22.3898 9.16235 22.5042 9.01976 22.6539 8.92307L27.8407 5.55494L23.0055 1.86263C22.8314 1.73002 22.717 1.53367 22.6877 1.31677C22.6583 1.09986 22.7163 0.880177 22.8489 0.706037C22.9815 0.531898 23.1779 0.417569 23.3948 0.388202C23.6117 0.358835 23.8314 0.416836 24.0055 0.549444L29.7692 4.94505C29.8747 5.02483 29.9593 5.12898 30.0158 5.24859C30.0722 5.3682 30.0989 5.49971 30.0934 5.63186C30.0874 5.76403 30.0498 5.89284 29.9839 6.00753C29.9179 6.12223 29.8255 6.21949 29.7143 6.2912L23.5495 10.3187C23.4165 10.4026 23.2615 10.4447 23.1044 10.4396Z" fill="#E40C25"/>
  553.                                     <path d="M27.2801 49.8682C27.1019 49.8674 26.9287 49.8096 26.7856 49.7033L20.9834 45.3352C20.8773 45.2557 20.7919 45.1518 20.7345 45.0322C20.6771 44.9126 20.6494 44.781 20.6538 44.6484C20.6558 44.5166 20.6905 44.3874 20.7548 44.2723C20.819 44.1573 20.9108 44.0599 21.0219 43.9891L27.1483 39.9396C27.2388 39.8801 27.3402 39.839 27.4467 39.8186C27.5531 39.7983 27.6625 39.7991 27.7686 39.821C27.8748 39.843 27.9755 39.8856 28.0652 39.9465C28.1548 40.0074 28.2316 40.0853 28.2911 40.1759C28.3507 40.2664 28.3918 40.3678 28.4121 40.4743C28.4325 40.5807 28.4316 40.6901 28.4097 40.7962C28.3878 40.9024 28.3451 41.0031 28.2842 41.0928C28.2234 41.1824 28.1454 41.2592 28.0549 41.3187L22.9065 44.7198L27.7801 48.3847C27.9189 48.4887 28.0213 48.6339 28.0728 48.7996C28.1242 48.9652 28.1221 49.1429 28.0667 49.3072C28.0113 49.4716 27.9054 49.6143 27.7642 49.715C27.623 49.8157 27.4536 49.8693 27.2801 49.8682Z" fill="#E40C25"/>
  554.                                 </svg>
  556.                                 <div class="accordion__tradein__box">
  557.                                     <p class="accordion__tradein-title">
  558.                                         {% verbatim %}
  559.                                             {{vehicleName}}
  560.                                             {{ year }}
  561.                                         {% endverbatim %}
  562.                                         {{ 'catalog.year'|trans({}, 'automarket_base') }}</p>
  563.                                     <p class="accordion__tradein-text">{{ 'car.cost_of_new_car'|trans({}, 'automarket_base') }}
  564.                                         <span class="accordion__tradein-price">
  565.                                             <span v-html="Number(price).toLocaleString()"></span>
  566.                                             грн</span>
  567.                                     </p>
  568.                                     <p class="accordion__tradein-text">{{ 'car.sum_amount'|trans({}, 'automarket_base') }}
  569.                                         <span class="accordion__tradein-price tradein-price-color">
  570.                                             <span v-html="priceDiff.toLocaleString()"></span>
  571.                                             грн</span>
  572.                                     </p>
  573.                                 </div>
  575.                             </div>
  578.                             <a href="#" class="widgets__button widgets__button-white" id="card_vikup" @click.prevent.stop="sendLead()">{{ 'car.want_to_trade_car'|trans({}, 'automarket_base') }}</a>
  580.                         </div>
  581.                     </div>
  582.                 </div>
  583.             </div>
  584.             <div class="accordion-item accordion-item-widgets">
  585.                 <div class="accordion-header accordion-header-relative" id="carWidgets-3" v-if="tradeInStepFour && !priceNotNull">
  586.                     <button class="accordion-button accordion-button-widgets" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-3" aria-expanded="false" aria-controls="carWidgetsCollapse-3">
  587.                         <div class="accordion__step__wrapper accordion__step-pl" @click.prevent.stop="prevStepThird()">
  588.                             <div class="accordion__step__counter">3</div>
  589.                             <p class="widgets__accord__title ">{{ 'car.rating_car'|trans({}, 'automarket_base') }}</p>
  590.                         </div>
  591.                     </button>
  592.                     <div class="accordion__arrow__back" @click.prevent.stop="prevStepThird()">
  593.                         <svg class="accordion__arrow__back-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewbox="0 0 8 14" fill="none">
  594.                             <path d="M6.08321 0.933316L0.466547 6.53332C0.39988 6.59998 0.352547 6.67221 0.324547 6.74998C0.296547 6.82776 0.282769 6.91109 0.283214 6.99998C0.283214 7.08887 0.296991 7.17221 0.324547 7.24998C0.352102 7.32776 0.399436 7.39998 0.466547 7.46665L6.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.7055 7.51655 12.4833C7.51655 12.2611 7.43321 12.0667 7.26655 11.9L2.36655 6.99998L7.26655 2.09998C7.4221 1.94443 7.49988 1.75265 7.49988 1.52465C7.49988 1.29665 7.41655 1.09954 7.24988 0.933316C7.08321 0.766649 6.88877 0.683316 6.66655 0.683316C6.44432 0.683316 6.24988 0.766649 6.08321 0.933316Z" fill="inherit"/>
  595.                         </svg>
  596.                     </div>
  597.                 </div>
  598.                 <div id="carWidgetsCollapse-3" class="accordion-collapse collapse show" aria-labelledby="carWidgets-3" data-bs-parent="#accordionWidgets" v-if="tradeInStepFour && !priceNotNull">
  599.                     <div class="accordion-body accordion-body-widgets">
  600.                         <div class="body__widgets__content__wrapper">
  602.                             <div class="accordion__tradein__wrapper">
  604.                                 <div class="accordion__tradein__box accordion__tradein__box-c">
  605.                                     <div class="accordion__tradein__parent">
  606.                                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none">
  607.                                             <g clip-path="url(#clip0_2384_26802)">
  608.                                                 <path d="M10 0C4.47723 0 0 4.47723 0 10C0 15.5228 4.47723 20 10 20C15.5228 20 20 15.5228 20 10C19.9939 4.47968 15.5203 0.00610352 10 0ZM10 18.9999C5.02945 18.9999 1.00006 14.9706 1.00006 10C1.00006 5.02945 5.02945 1.00006 10 1.00006C14.9706 1.00006 18.9999 5.02945 18.9999 10C18.9943 14.9681 14.9681 18.9943 10 18.9999Z" fill="#E40C25"/>
  609.                                                 <path d="M11.4999 14.5H10.5V8.00003C10.5 7.72385 10.2762 7.5 9.99997 7.5H8.99991C8.72388 7.5 8.50003 7.72385 8.50003 8.00003C8.50003 8.27621 8.72388 8.49991 8.99991 8.49991H9.49994V14.5H8.49988C8.22385 14.5 8 14.7238 8 14.9998C8 15.276 8.22385 15.4999 8.49988 15.4999H11.4999C11.7761 15.4999 11.9999 15.276 11.9999 14.9998C11.9999 14.7238 11.7761 14.5 11.4999 14.5Z" fill="#E40C25"/>
  610.                                                 <path d="M11.0001 5.00006C11.0001 5.55228 10.5523 5.99997 10.0001 5.99997C9.44785 5.99997 9 5.55228 9 5.00006C9 4.44769 9.44785 4 10.0001 4C10.5523 4 11.0001 4.44769 11.0001 5.00006Z" fill="#E40C25"/>
  611.                                             </g>
  612.                                             <defs>
  613.                                                 <clipPath id="clip0_2384_26802">
  614.                                                     <rect width="20" height="20" fill="white"/>
  615.                                                 </clipPath>
  616.                                             </defs>
  617.                                         </svg>
  618.                                         <p>{{ 'car.not_found_car'|trans({}, 'automarket_base') }}</p>
  620.                                     </div>
  621.                                     <p class="accordion__tradein__parent__text">{{ 'car.please_book_appoinment'|trans({}, 'automarket_base') }}</p>
  622.                                 </div>
  624.                             </div>
  627.                             <a href="#" @click.prevent.stop="sendLead()" class="widgets__button widgets__button-white">{{ 'car.book_appoinment'|trans({}, 'automarket_base') }}</a>
  629.                         </div>
  630.                     </div>
  631.                 </div>
  632.             </div>
  633.             <div class="modal fade modal__step__custom" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  634.                 <div class="modal-dialog modal-dialog-centered modal__step__custom__dialog" role="document">
  635.                     <div class="modal-content modal__step__custom__content">
  636.                         <div class="modal-header modal__step__custom__header">
  637.                             <p class="modal-title modal__step__custom__title" id="exampleModalLongTitle">{{ 'car.application_created'|trans({}, 'automarket_base') }}</p>
  638.                             <button type="button" class="close modal__step__custom__close" data-dismiss="modal" aria-label="Close" @click.prevent.stop="closeModal()">
  639.                                 <span aria-hidden="true">&times;</span>
  640.                             </button>
  641.                         </div>
  642.                         <div class="modal-body modal__step__custom__body">
  643.                             <p class="modal__step__custom__text">{{ 'card_car.article.contact_near_future'|trans({}, 'portal_base') }}</p>
  644.                             <p class="modal__step__custom__text">{{ 'card_car.article.thank_you_choosing'|trans({}, 'portal_base') }}</p>
  645.                         </div>
  646.                         <div class="modal-footer modal__step__custom__footer">
  647.                             <a href="{{ path('portal_homepage') }}" class="modal__step__custom__btn widgets__button-white">{{ 'card_car.article.go_to_page'|trans({}, 'portal_base') }}</a>
  648.                         </div>
  649.                     </div>
  650.                 </div>
  651.             </div>
  652.         </div>
  653.         {% if isUsed is not defined %}
  654.             <div id="calculatorCasco">
  655.                 <!-- accordion-item-4 -->
  656.                 <!-- STEP 1 accordion-item-4 -->
  657.                     <div class="accordion-item accordion-item-widgets"> <div class="accordion-header" id="carWidgets-4">
  658.                         <button class="accordion-button accordion-button-widgets collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-4" aria-expanded="false" aria-controls="carWidgetsCollapse-4">
  659.                             {# <p class="widgets__accord__title widgets__accord__title-ellipsis">{{ 'card_car.insurance_package'|trans({}, 'portal_base') }}
  660.                                 {{ vehicle.fullName }}</p>
  661.                             <p class="widgets__accord__price" v-if="amount" v-html="amount + ' грн.'"></p> #}
  662.                             <p class="widgets__accord__title widgets__accord__title-ellipsis">
  663.                                {{ 'card_car.insurance_package'|trans({}, 'portal_base') }}
  664.                                 {{ vehicle.fullName }}
  665.                                 <span v-if="amount" v-html="' ' + amount + ' грн.'"></span>
  666.                             </p>
  667.                         </button>
  668.                     </div>
  669.                     <div id="carWidgetsCollapse-4" class="accordion-collapse collapse" aria-labelledby="carWidgets-4" data-bs-parent="#accordionWidgets">
  670.                         <div class="accordion-body accordion-body-widgets">
  671.                             <div class="widgets__content__item__wrapper">
  672.                                 <div class="widgets__content__item__box">
  673.                                     <p class="item__box__left__text">{{ 'card_car.article.full_car'|trans({}, 'portal_base') }}</p>
  674.                                     <p class="item__box__right__text" v-html="parseFloat(options.price).toLocaleString().replace(/,/g,' ') + ' грн'"></p>
  675.                                 </div>
  676.                                 <div class="widgets__content__item__box">
  677.                                     <p class="item__box__left__text">{{ 'card_car.franchise'|trans({}, 'portal_base') }}</p>
  678.                                     <p class="item__box__right__text">1%</p>
  679.                                 </div>
  680.                                 <div class="widgets__content__item__box">
  681.                                     <p class="item__box__left__text">{{ 'car.casco.group_insurance_risks'|trans({}, 'automarket_base') }}</p>
  682.                                     <p class="item__box__right__text">{{ 'car.casco.full_casco'|trans({}, 'automarket_base') }}</p>
  683.                                 </div>
  684.                                 <div class="widgets__content__item__box">
  685.                                     <p class="item__box__left__text">{{ 'car.casco.casco_cost'|trans({}, 'automarket_base') }}</p>
  686.                                     <p class="item__box__right__text item__box__right__text-red" v-html="amount + ' грн */{{ 'catalog.year'|trans({}, 'automarket_base')|lower }}'">
  687.                                         38 359 грн */{{ 'catalog.year'|trans({}, 'automarket_base') }}</p>
  688.                                 </div>
  689.                             </div>
  690.                             <div class="widgets__content__button__block">
  691.                                 <a id="card_kasko" href="#" class="widgets__button" @click.prevent.stop="showModal()">{{ 'base.get_consult'|trans({}, 'automarket_base') }}</a>
  692.                                 <p>{{ 'car.casco.approximate_calculation'|trans({}, 'automarket_base') }}</p>
  693.                             </div>
  695.                         </div>
  696.                     </div>
  697.                 </div>
  699.                 <div class="modal fade modal__step__custom" id="exampleModalCasco" tabindex="-1" role="dialog" aria-labelledby="exampleModalCascoLabel" aria-hidden="true">
  700.                     <div class="modal-dialog modal__step__custom__dialog custom__dialog-w modal-dialog-centered" role="document">
  701.                         <div class="modal-content modal__step__custom__content modal__step__custom-btn">
  702.                             <div class="modal-header modal__step__custom__header">
  703.                                 <p class="modal-title modal__step__custom__title" id="exampleModalCascoLabel">{{ 'card_car.modal.we_are_happy'|trans({}, 'portal_base') }}</p>
  704.                                 <button type="button" class="close modal__step__custom__close" data-dismiss="modal" aria-label="Close" @click.prevent.stop="modalClose()">
  705.                                     <span aria-hidden="true">&times;</span>
  706.                                 </button>
  707.                             </div>
  708.                             <div class="modal-body modal__step__custom__body">
  709.                                 <p class="modal__step__custom__text">{{ 'card_car.modal.contact_phone'|trans({}, 'portal_base') }}</p>
  710.                                 <div class="modal__step__custom__input mb-3">
  711.                                     <input type="text" id="casco_phone" v-model="uPhone" v-mask="'+38(###)###-##-##'" placeholder="+38(___)___-__-__" class="form-control">
  712.                                 </div>
  713.                                 <div class="modal__step__custom__input mb-5">
  714.                                     <input type="text" id="casco_name" v-model="uName" placeholder="{{ 'card_car.modal.how_to_address'|trans({}, 'portal_base') }}">
  715.                                 </div>
  716.                                 <div class="col-md-12">
  717.                                     <fieldset class="text-center">
  718.                                         <p class="modal__step__custom__text">{{ 'card_car.modal.how_connect_u'|trans({}, 'portal_base') }}</p>
  719.                                         {# <legend>Як з Вами краще зв'язатися?</legend> #}
  721.                                         <input type="radio" id="One-1" value="call" v-model="message">
  722.                                         <label for="One-1">{{ 'card_car.modal.call'|trans({}, 'portal_base') }}</label>
  724.                                         <input type="radio" id="Two-2" value="viber" v-model="message">
  725.                                         <label for="Two-2">Viber</label>
  726.                                         {#                                    <input type="radio" id="Three-3" value="telegram" v-model="message"> #}
  727.                                         {#                                    <label for="Three-3">Telegram</label> #}
  728.                                     </fieldset>
  729.                                     {# <p class="modal__step__custom__text-f mt-3">{{ 'card_car.modal.privacy_first'|trans({}, 'portal_base') }}  <a href="{{ path('portal_privacy_policy') }}" target="_blank">{{ 'card_car.modal.privacy_second'|trans({}, 'portal_base') }}</a></p> #}
  730.                                 </div>
  731.                             </div>
  732.                             <div class="modal-footer modal__step__custom__footer mt-3">
  733.                                 <div class="form-group checkbox style-b form-group checkbox-custom" v-if="privacyUrl">
  734.                                     <label class="checkboxes__item-privacy">
  735.                                         <input type="checkbox" v-model="checkPrivacy"/>
  736.                                         <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  737.                                     </label>
  738.                                     <p class="modal__step__custom__text-f">{{ 'card_car.article.your_personal_accordance'|trans({}, 'portal_base') }}
  739.                                         <a :href="privacyUrl" target="_blank">{{ 'card_car.article.learn_more_deal'|trans({}, 'portal_base') }}</a>
  740.                                     </p>
  741.                                 </div>
  742.                                 <button type="button" class="modal__step__custom__btn" @click.prevent.stop="sendForm()">{{ 'card_car.modal.waiting_for_call'|trans({}, 'portal_base') }}</button>
  743.                             </div>
  746.                             {#                        <div class="modal-footer modal__step__custom__footer"> #}
  747.                         {#                            <div class="form-group checkbox style-b text-center" v-if="privacyUrl"> #}
  748.                             {#                                <label class="checkboxes__item-privacy"> #}
  749.                             {#                                    <input type="checkbox" v-model="checkPrivacy"/> #}
  750.                             {#                                    <div id="check_privacy" class="checkbox__checkmark form-control"></div> #}
  751.                             {#                                </label> #}
  752.                             {#                                <p class="modal__step__custom__text-f">{{ 'card_car.article.your_personal_accordance'|trans({}, 'portal_base') }}  <a :href="privacyUrl" target="_blank">{{ 'modal_online_service.learn_about_deal'|trans({}, 'portal_base') }}</a></p> #}
  753.                             {#                            </div> #}
  754.                             {#                            <button type="button" class="modal__step__custom__btn" @click.prevent.stop="sendForm()">{{ 'card_car.card_car.modal.waiting_for_call'|trans({}, 'portal_base') }}</button> #}
  755.                             {#                        </div> #}
  756.                         </div>
  757.                     </div>
  758.                 </div>
  759.             </div>
  760.         {% endif %}
  762.         {% if isUsed is not defined %}
  763.             <!-- accordion-item-5 -->
  764.             <div
  765.                 id="reg-cost">
  766.                 <!-- accordion-item-5 -->
  767.                 <div class="accordion-item accordion-item-widgets">
  768.                     <div class="accordion-header" id="carWidgets-5">
  769.                         <button class="accordion-button accordion-button-widgets collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-5" aria-expanded="false" aria-controls="carWidgetsCollapse-5">
  770.                             {# <p class="widgets__accord__title">{{ 'car.initial_car_registration.title'|trans({}, 'automarket_base') }}</p>
  771.                             <p class="widgets__accord__price" v-html="totalIndividual.toLocaleString() + ' грн.'"></p> #}
  773.                             <p class="widgets__accord__title" v-html="'{{ 'car.initial_car_registration.title'|trans({}, 'automarket_base') }} ' + totalIndividual.toLocaleString() + ' грн.'"></p>
  774.                         </button>
  775.                     </div>
  776.                     <div id="carWidgetsCollapse-5" class="accordion-collapse collapse" aria-labelledby="carWidgets-5" data-bs-parent="#accordionWidgets">
  777.                         <div class="accordion-body accordion-body-widgets">
  778.                             <div class="body__widgets__content__wrapper">
  779.                                 <p class="widgets__text mb-4">{{ 'car.initial_car_registration.without_queuing'|trans({}, 'automarket_base') }}</p>
  780.                                 <p class="widgets__text mb-4">
  781.                                     <strong>{{ 'car.initial_car_registration.calculation_registration'|trans({}, 'automarket_base') }}
  782.                                     </p>
  783.                                     {{ vehicle.fullName }}
  784.                                 </p>
  785.                             </strong>
  786.                         </p>
  787.                         <div class="widgets__content__item__wrapper">
  789.                             <div class="widgets__content__item__box">
  790.                                 <p class="item__box__left__text">{{ 'car.initial_car_registration.car_registration_services'|trans({}, 'automarket_base') }}
  791.                                     <span class="item__box__left__text-sub">{{ 'car.initial_car_registration.including_reg_number'|trans({}, 'automarket_base') }}</span>
  792.                                 </p>
  793.                                 <p class="item__box__right__text" v-html="individualCost.toLocaleString() + ' грн*'"></p>
  794.                             </div>
  795.                             <div class="widgets__content__item__box" v-if="calculateTaxCost">
  796.                                 <p class="item__box__left__text">{{ 'car.initial_car_registration.mandatory_state'|trans({}, 'automarket_base') }}</p>
  797.                                 <p class="item__box__right__text" v-html="taxCost.toLocaleString() + ' грн'"></p>
  798.                             </div>
  799.                             <div class="widgets__content__item__box">
  800.                                 <p class="item__box__left__text">{{ 'car.initial_car_registration.total_cost'|trans({}, 'automarket_base') }}</p>
  801.                                 <p class="item__box__right__text item__box__right__text-red" v-html="totalIndividual.toLocaleString() + ' грн'"></p>
  802.                             </div>
  805.                         </div>
  806.                         <p class="widgets__text widgets__text__custom">{{ 'car.initial_car_registration.individuals_calc'|trans({}, 'automarket_base') }}</p>
  808.                     </div>
  809.                 </div>
  810.             </div>
  811.         </div>
  812.     </div>
  813.     <!-- accordion-item-6 -->
  814.     <div
  815.         id="service-cost">
  816.         <!-- accordion-item-6 -->
  817.         <div class="accordion-item accordion-item-widgets">
  818.             <div class="accordion-header" id="carWidgets-6">
  819.                 <button class="accordion-button accordion-button-widgets collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-6" aria-expanded="false" aria-controls="carWidgetsCollapse-6">
  820.                     <p class="widgets__accord__title">{{ 'car.official_service.title'|trans({}, 'automarket_base') }}</p>
  821.                 </button>
  822.             </div>
  823.             <div id="carWidgetsCollapse-6" class="accordion-collapse collapse" aria-labelledby="carWidgets-6" data-bs-parent="#accordionWidgets">
  824.                 <div class="accordion-body accordion-body-widgets">
  825.                     <div class="body__widgets__content__wrapper">
  826.                         <p class="widgets__text mb-4">{{ 'car.official_service.service_your_car'|trans({}, 'automarket_base') }}
  827.                             VIDI
  828.                         </p>
  829.                         <p class="widgets__text mb-3">{{ 'car.official_service.cto'|trans({}, 'automarket_base') }}</p>
  830.                         <ul class="widgets__content__text">
  831.                             <li class="widgets__text">{{ 'car.official_service.li_1'|trans({}, 'automarket_base') }}</li>
  832.                             <li class="widgets__text">{{ 'car.official_service.li_2'|trans({}, 'automarket_base') }}</li>
  833.                             <li class="widgets__text">{{ 'car.official_service.li_3'|trans({}, 'automarket_base') }}</li>
  834.                             <li class="widgets__text">{{ 'car.official_service.li_4'|trans({}, 'automarket_base') }}</li>
  835.                             <li class="widgets__text">{{ 'car.official_service.li_5'|trans({}, 'automarket_base') }}</li>
  836.                             <li class="widgets__text">{{ 'car.official_service.li_6'|trans({}, 'automarket_base') }}</li>
  837.                         </ul>
  838.                         <p class="widgets__accord__title mb-4">{{ 'car.official_service.mileage_cost'|trans({}, 'automarket_base') }}</p>
  839.                         <p class="widgets__text mb-4">{{ 'car.official_service.auto'|trans({}, 'automarket_base') }}
  840.                             {{ vehicle.fullName }}</p>
  841.                         <div class="widgets__content__item__wrapper">
  842.                             <div class="wrapper-box-parent" v-if="works && works.length > 1" v-for="item,index in works">
  843.                                 <div class="widgets__content__item__box">
  844.                                     <p class="item__box__left__text" v-html="'• ' + item.millage.toLocaleString() + ' км'"></p>
  845.                                     <div class="item__box__right__block">
  846.                                         <p class="item__box__right__text" v-html="item.totalCost.toLocaleString() + ' грн'"></p>
  847.                                         <svg class="widgets__content-info" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" fill="none" @click="openWidget(index)">
  848.                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99943 0C7.65664 0 9.1565 0.671257 10.2421 1.75682C11.3276 2.84351 12 4.34336 12 5.99943C12 7.65664 11.3276 9.1565 10.2421 10.2421C9.1565 11.3276 7.65664 12 5.99943 12C4.34336 12 2.84351 11.3276 1.75682 10.2421C0.671257 9.1565 0 7.65664 0 5.99943C0 4.34336 0.671257 2.84237 1.75682 1.75682C2.84237 0.671257 4.34336 0 5.99943 0ZM9.57985 2.41902C8.66409 1.50325 7.39742 0.936138 5.99943 0.936138C4.60145 0.936138 3.33591 1.50325 2.41902 2.41902C1.50325 3.33591 0.936138 4.60145 0.936138 5.99943C0.936138 7.39742 1.50325 8.66409 2.41902 9.57985C3.33591 10.4956 4.60145 11.0627 5.99943 11.0627C7.39742 11.0627 8.66409 10.4956 9.57985 9.57985C10.4956 8.66409 11.0627 7.39742 11.0627 5.99943C11.0627 4.60145 10.4956 3.33591 9.57985 2.41902ZM5.94736 3.80568C5.68927 3.80568 5.47986 3.59626 5.47986 3.33818C5.47986 3.07895 5.68927 2.86954 5.94736 2.86954H6.0515C6.31073 2.86954 6.52014 3.07895 6.52014 3.33818C6.52014 3.59626 6.31073 3.80568 6.0515 3.80568H5.94736ZM5.5274 4.88784C5.5274 4.62975 5.73682 4.42034 5.99604 4.42034C6.25413 4.42034 6.46354 4.62975 6.46354 4.88784V8.66182C6.46354 8.91991 6.25413 9.13046 5.99604 9.13046C5.73682 9.13046 5.5274 8.91991 5.5274 8.66182V4.88784Z" fill="inherit"/>
  849.                                         </svg>
  850.                                     </div>
  851.                                 </div>
  852.                                 <div class="widgets__content__info__modal" :id="'widget-'+index">
  853.                                     <div class="info__modal__box">
  854.                                         <p class="info__modal__price" v-html="item.millage.toLocaleString()+ ' км'"></p>
  856.                                         <svg class="info__modal__close" xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewbox="0 0 13 12" fill="none" @click="closeWidget(index)">
  857.                                             <path d="M11.5 11L1.5 1M11.5 1L1.5 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
  858.                                         </svg>
  859.                                     </div>
  860.                                     <div class="widgets__content__info__modal__wrapper">
  861.                                         <p class="info__modal__title">{{ 'card_car.works_car'|trans({}, 'portal_base') }}</p>
  862.                                         <div class="info__modal__text__box">
  863.                                             <p class="widgets__text text__modal">{{ 'card_car.maintenance_cars'|trans({}, 'portal_base') }}
  864.                                                 {{ vehicle.fullName }}
  865.                                             </p>
  866.                                             <p class="widgets__text__modal__price" v-html="item.worksCost + ' грн'"></p>
  867.                                         </div>
  868.                                         <p class="info__modal__title">{{ 'card_car.spare_parts'|trans({}, 'portal_base') }}
  869.                                             :</p>
  870.                                         <div class="info__modal__text__box" v-for="part in item.parts">
  871.                                             <p class="widgets__text text__modal" v-html="part.title+' ( '+part.count+ ' '+part.unit+' )'"></p>
  872.                                             <p class="widgets__text__modal__price" v-html="part.price + ' грн'"></p>
  873.                                         </div>
  874.                                     </div>
  875.                                 </div>
  876.                             </div>
  877.                         </div>
  878.                         <p class="widgets__text mb-4">{{ 'car.official_service.chose_comfort_time'|trans({}, 'automarket_base') }}</p>
  879.                         <a id="card_sto" class="widgets__links" href="{{ path('portal_service_to') }}">{{ 'car.official_service.title'|trans({}, 'automarket_base') }}
  880.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewbox="0 0 16 17" fill="none">
  881.                                 <path d="M5.91666 2.43335L11.5333 8.03335C11.6 8.10001 11.6473 8.17224 11.6753 8.25001C11.7033 8.32779 11.7171 8.41112 11.7167 8.50001C11.7167 8.5889 11.7029 8.67224 11.6753 8.75001C11.6478 8.82779 11.6004 8.90001 11.5333 8.96668L5.91666 14.5833C5.76111 14.7389 5.56666 14.8167 5.33333 14.8167C5.1 14.8167 4.9 14.7333 4.73333 14.5667C4.56666 14.4 4.48333 14.2056 4.48333 13.9833C4.48333 13.7611 4.56666 13.5667 4.73333 13.4L9.63333 8.50001L4.73333 3.60001C4.57777 3.44446 4.5 3.25268 4.5 3.02468C4.5 2.79668 4.58333 2.59957 4.75 2.43335C4.91666 2.26668 5.11111 2.18335 5.33333 2.18335C5.55555 2.18335 5.75 2.26668 5.91666 2.43335Z" fill="inherit"/>
  882.                             </svg>
  883.                         </a>
  884.                     </div>
  885.                 </div>
  886.             </div>
  887.         </div>
  888.     </div>
  890.     <!-- accordion-item-7 -->
  891.     <div class="accordion-item accordion-item-widgets">
  892.         <div class="accordion-header" id="carWidgets-7">
  893.             <button class="accordion-button accordion-button-widgets collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-7" aria-expanded="false" aria-controls="carWidgetsCollapse-7">
  894.                 <p class="widgets__accord__title">{{ 'car.extended_warranty.title'|trans({}, 'automarket_base') }}</p>
  896.             </button>
  897.         </div>
  898.         <div id="carWidgetsCollapse-7" class="accordion-collapse collapse" aria-labelledby="carWidgets-7" data-bs-parent="#accordionWidgets">
  899.             <div class="accordion-body accordion-body-widgets">
  901.                 <div class="body__widgets__content__wrapper">
  902.                     <p class="widgets__text mb-4">{{ 'car.extended_warranty.four_step'|trans({}, 'automarket_base') }}</p>
  903.                     <ul class="widgets__content__text p-0">
  904.                         <li class="widgets__text">{{ 'car.extended_warranty.first'|trans({}, 'automarket_base') }}</li>
  905.                         <li class="widgets__text">{{ 'car.extended_warranty.second'|trans({}, 'automarket_base') }}</li>
  906.                         <li class="widgets__text">{{ 'car.extended_warranty.third'|trans({}, 'automarket_base') }}</li>
  907.                         <li class="widgets__text">{{ 'car.extended_warranty.fourth'|trans({}, 'automarket_base') }}</li>
  908.                     </ul>
  909.                     <a id="card_garantiya" href="{{ path('portal_finance_extended_warranty') }}" class="widgets__button">{{ 'small_words.more'|trans({}, 'automarket_base') }}</a>
  910.                 </div>
  912.             </div>
  913.         </div>
  914.     </div>
  915. {% endif %}
  916. {% include '@Portal/Modules/sps-popup-portal.html.twig' %}</div>{# END Accordion STEPS #}</div>
  918. {#<div class="accordion-header" id="carWidgets-2222">#}
  919. {#    <button class="accordion-button accordion-button-widgets" type="button" data-bs-toggle="collapse" data-bs-target="#carWidgetsCollapse-2222" aria-expanded="false" aria-controls="carWidgetsCollapse-2222">#}
  920. {#        <p class="widgets__accord__title">{{ 'menu.buy_car'|trans({}, 'portal_base') }} {{ vehicle.fullName }} {% if vehicle.isNew is defined and vehicle.isNew %} {{ vehicle.equipmentTitle }} {% endif %} в кредит за {{ creditPayment|price }} {{ 'card_car.article.uah_month'|trans({}, 'portal_base') }}.</p>#}
  921. {#        #}{# <p class="widgets__accord__price ">за {{ creditPayment|price }} {{ 'card_car.article.uah_month'|trans({}, 'portal_base') }}.</p> #}
  922. {#    </button>#}
  924. {#</div>#}
  925. {#<div class="accordion__filter__header active" :class="{ 'accordion__filter__header-price' : creditStepOne === true}">#}
  926. {#    {% include '@Portal/Modules/credit-calc-car-card.html.twig' %}#}
  927. {#</div>#}