{% include '@Core/Core/preloader_style.html.twig' %}<div id="creditCalc"> <section class="section_calc_module-swap"> <div class="container"> <div class="calc_swap_wrapper"> <div class="calc_swap_head" v-if="!options?.unsetFlow2"> <p class="calc_swap_head_name">{{ 'finance.credit.credit_type_calc'|trans({}, 'portal_base') }} </p> <div class="calc_swap_head_box"> <div class="calc_swap_radio_wrapper" v-if="isBlockVisible && isLoadedMinMax"> <div class="calc_swap-radio"> <input id="radio-1" name="radio-top" type="radio" :checked="typeCreditCalc === 1"> <label for="radio-1" @click="setTypeCreditCalc(1)" class="calc_swap_radio-label">{{ 'finance.credit.credit_calc_auto_online'|trans({}, 'portal_base') }} </label> </div> <div class="calc_swap-radio" v-if="!options?.unsetFlow2"> <input id="radio-2" name="radio-top" type="radio" :checked="typeCreditCalc === 2"> <label for="radio-2" @click="setTypeCreditCalc(2)" class="calc_swap_radio-label">{{ 'finance.credit.credit_calc_auto_your_wallet'|trans({}, 'portal_base') }}</label> </div> </div> </div> </div> <template v-if="typeCreditCalc === 1"> <p class="calc_swap-title">{{ 'finance.credit.credit_calc_auto_online_new_car'|trans({}, 'portal_base') }} {% if dealer is defined and dealer.brand is defined and dealer.brand.name is defined %} {{ dealer.brand.name}} {% endif %} </p> <p class="calc_swap-title calc_title_individual">{{ 'finance.credit.loan_calculator_cars'|trans({}, 'portal_base') }}</p> <p class="calc_swap-sub-title">{{ 'finance.credit.credit_calc_auto_on_3_step'|trans({}, 'portal_base') }}</p> </template> <template v-if="typeCreditCalc === 2"> <p class="calc_swap-title calc_title_individual">{{ 'finance.credit.credit_calc_auto_your_wallet'|trans({}, 'portal_base') }}</p> <p class="calc_swap-title">{{ 'finance.credit.credit_calc_auto_your_wallet'|trans({}, 'portal_base') }}</p> <p class="calc_swap-sub-title">{{ 'finance.credit.credit_calc_auto_on_3_step_select'|trans({}, 'portal_base') }}</p> </template> </div> </div> </section> {# ============================MODULE========================== #} <section class="calc_module"> <div class="container" id="credit-calc-widget"> <div class="calc_module_btn_head"> <div> <template v-if="step > 1"> <svg @click="backStep" class="module_btn_head_back" width="64" height="20" viewbox="0 0 64 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.0832 3.93333L4.46655 9.53333C4.39988 9.6 4.35255 9.67222 4.32455 9.75C4.29655 9.82778 4.28277 9.91111 4.28321 10C4.28321 10.0889 4.29699 10.1722 4.32455 10.25C4.3521 10.3278 4.39944 10.4 4.46655 10.4667L10.0832 16.0833C10.2388 16.2389 10.4332 16.3167 10.6665 16.3167C10.8999 16.3167 11.0999 16.2333 11.2665 16.0667C11.4332 15.9 11.5165 15.7056 11.5165 15.4833C11.5165 15.2611 11.4332 15.0667 11.2665 14.9L6.36655 10L11.2665 5.1C11.4221 4.94444 11.4999 4.75267 11.4999 4.52467C11.4999 4.29667 11.4165 4.09955 11.2499 3.93333C11.0832 3.76666 10.8888 3.68333 10.6665 3.68333C10.4443 3.68333 10.2499 3.76666 10.0832 3.93333Z" fill="inherit"/> <path d="M34.2512 14V9.562H28.8612V14H27.6712V4.2H28.8612V8.442H34.2512V4.2H35.4412V14H34.2512ZM38.2503 9.03L37.9563 8.134C38.5163 7.784 39.2723 7.56 40.0563 7.56C41.8483 7.56 42.4783 8.498 42.4783 10.136V14H41.4143V13.188C41.0363 13.664 40.4343 14.098 39.3983 14.098C38.2503 14.098 37.4663 13.37 37.4663 12.152C37.4663 10.864 38.4883 10.15 39.8463 10.15C40.3363 10.15 40.9943 10.248 41.4143 10.556C41.4143 9.38 41.2323 8.568 39.9863 8.568C39.2163 8.568 38.7542 8.764 38.2503 9.03ZM39.7903 13.09C40.6163 13.09 41.0923 12.656 41.4143 12.278V11.48C41.0222 11.2 40.5463 11.06 40.0003 11.06C39.3283 11.06 38.6562 11.368 38.6562 12.096C38.6562 12.698 39.0623 13.09 39.7903 13.09ZM46.4397 14.14C45.5157 14.14 44.2557 13.79 43.8357 13.286L44.4097 12.446C44.9417 12.88 45.7257 13.132 46.2717 13.132C47.2237 13.132 47.9237 12.726 47.9237 12.096C47.9237 11.578 47.4617 11.284 46.6917 11.284H45.6277V10.374H46.6217C47.2517 10.374 47.7137 9.982 47.7137 9.478C47.7137 8.904 47.1817 8.568 46.3697 8.568C45.5017 8.568 44.8997 8.932 44.4797 9.268L44.0457 8.4C44.5637 7.868 45.5437 7.56 46.5377 7.56C48.0777 7.56 48.9037 8.218 48.9037 9.254C48.9037 9.87 48.5957 10.458 47.7977 10.738V10.766C48.6797 10.864 49.1137 11.522 49.1137 12.25C49.1137 13.426 47.9937 14.14 46.4397 14.14ZM51.1565 9.03L50.8625 8.134C51.4225 7.784 52.1785 7.56 52.9625 7.56C54.7545 7.56 55.3845 8.498 55.3845 10.136V14H54.3205V13.188C53.9425 13.664 53.3405 14.098 52.3045 14.098C51.1565 14.098 50.3725 13.37 50.3725 12.152C50.3725 10.864 51.3945 10.15 52.7525 10.15C53.2425 10.15 53.9005 10.248 54.3205 10.556C54.3205 9.38 54.1385 8.568 52.8925 8.568C52.1225 8.568 51.6605 8.764 51.1565 9.03ZM52.6965 13.09C53.5225 13.09 53.9985 12.656 54.3205 12.278V11.48C53.9285 11.2 53.4525 11.06 52.9065 11.06C52.2345 11.06 51.5625 11.368 51.5625 12.096C51.5625 12.698 51.9685 13.09 52.6965 13.09ZM56.392 15.54V12.95H57.176C57.596 12.418 58.03 11.088 58.142 9.366L58.24 7.7H62.538V12.95H63.588V15.54H62.538V14H57.442V15.54H56.392ZM59.22 9.8C59.08 11.41 58.66 12.558 58.366 12.95H61.418V8.75H59.29L59.22 9.8Z" fill="inherit"/> </svg> </template> </div> <div class="module_btn_head_step"> <template v-if="step > 1 || typeCreditCalc === 2"> <svg class="module_btn_head-refresh" @click="pushReloadCreditCalc()" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_2128_9093)"> <path d="M14.029 19.7096C14.236 19.4058 14.1578 18.9921 13.8542 18.785L11.8645 17.428C13.507 17.0755 15.0162 16.2589 16.2312 15.0439C17.8961 13.379 18.813 11.1654 18.813 8.8108C18.813 6.45628 17.8961 4.24262 16.2312 2.57772C12.7942 -0.85924 7.20189 -0.859241 3.76502 2.57772C2.04654 4.2962 1.1873 6.5535 1.1873 8.8108C1.1873 11.0681 2.04654 13.3254 3.76502 15.0439C4.02485 15.3037 4.44613 15.3037 4.70596 15.0439C4.96579 14.7841 4.96579 14.3628 4.70596 14.103C1.78786 11.1848 1.78786 6.43685 4.70596 3.51875C7.62406 0.600651 12.3722 0.600652 15.2903 3.51875C16.7038 4.93234 17.4823 6.81174 17.4823 8.81089C17.4823 10.81 16.7038 12.6895 15.2902 14.103C14.1993 15.1941 12.8285 15.9052 11.3403 16.1735L12.9511 13.8118C13.1581 13.5082 13.0799 13.0943 12.7763 12.8873C12.4727 12.6802 12.0588 12.7585 11.8518 13.062L9.4489 16.585C9.44881 16.5852 9.44864 16.5854 9.44846 16.5856C9.41049 16.6413 9.38255 16.7007 9.36347 16.7618C9.36285 16.7637 9.36188 16.7655 9.36135 16.7673C9.35815 16.7777 9.35691 16.7883 9.35425 16.7987C9.34094 16.852 9.33278 16.9059 9.33278 16.9598C9.33278 17.1724 9.43444 17.3813 9.62322 17.5101L13.1044 19.8843C13.408 20.0914 13.8219 20.0131 14.029 19.7096Z" fill="inherit"/> </g> <defs> <clipPath id="clip0_2128_9093"> <rect width="20" height="20" fill="white" transform="translate(20) rotate(90)"/> </clipPath> </defs> </svg> </template> <span>{{ 'finance.credit.credit_step'|trans({}, 'portal_base') }}</span> <span v-html="step"></span> <span>{{ 'finance.credit.credit_of'|trans({}, 'portal_base') }} 3</span> </div> </div> {# MAIN STEP 0 #} <div class="calc_module_wrapper"> <div class="calc_module_block_left" v-show="(step === 1 && typeCreditCalc == 1)"> <p class="module_block_left_title">{{ 'finance.credit.credit_select_car_what_you_want'|trans({}, 'portal_base') }}</p> <div v-if="isBlockVisible" class="calc_swap_radio_wrapper calc_swap_radio-step-start"> <div class="calc_swap-radio" v-if="!options.unsetNewTypeVehicle"> <input id="new-car-1111" name="radio111" type="radio" :checked="!isUsed"> <label for="new-car-1111" class="calc_swap_radio-label" @click="setTypeVehicle('new')">{{ 'finance.credit.credit_new_cars'|trans({}, 'portal_base') }} </label> </div> <div class="calc_swap-radio" v-if="!options?.unsetUsedTypeVehicle"> <input id="new-car-2222" name="radio111" type="radio" :checked="isUsed"> <label for="new-car-2222" class="calc_swap_radio-label" @click="setTypeVehicle('used')">{{ 'finance.credit.credit_old_cars'|trans({}, 'portal_base') }}</label> </div> </div> <div class="calc_module_form_wrapper 1" v-if="showForm"> <select id="brand-select" :disabled="!unDisabledBrand" class="calc_module_form_select" v-model="vehicle.brand_id" @change="setBrand" :class="{'error_input' : formErrors.brand }"> <option value="null">Марка</option> <option v-for="item in dataCreditCalcOne.brands" :value="item.id" v-html="item.title"></option> </select> <select id="model-select" :disabled="!this.unDisabledModels" class="calc_module_form_select" v-model="vehicle.model_id" @change="setModel" :class="{'error_input' : formErrors.model }"> <option :disabled="vehicle.model_id !== null" value="null">Модель</option> <option v-for="item in dataCreditCalcOne.models" :value="item.id" v-html="item.title"></option> </select>{# <template v-if="showForm">#} <select class="calc_module_form_select 5555" v-if="isUsed" v-model="vehicle.year" @change="setYearForUsed" :class="{'error_input' : formErrors.year }" :disabled="vehicle.model_id === null"> <option :disabled="vehicle.year !== null" value="null">{{ 'new_catalog.year'|trans({}, 'portal_base') }}</option> <option v-for="item in dataCreditCalcOne.years" :value="item.year" v-html="item.year + ' (' + translate_price_from + ' ' + formatToCurrency(item.min_price) + ')'"></option> </select> <select id="equipment-select" class="calc_module_form_select" v-else v-model="vehicle.vehicleItemId" @change="setEquipment" :class="{'error_input' : formErrors.equipment }" :disabled="vehicle.model_id === null"> <option :disabled="vehicle.vehicleItemId !== null" value="null">{{ 'finance.credit.credit_coplectation'|trans({}, 'portal_base') }}</option> <option v-for="item in dataCreditCalcOne.equipments" :value="item.vehicleItemId" v-html="item.title"></option> </select> <select class="calc_module_form_select" v-if="isUsed" v-model="vehicle.millage" @change="setMillageForUsed" :disabled="vehicle.year === null" :class="{'error_input' : formErrors.millage }"> <option :disabled="vehicle.millage !== null" value="null">{{ 'cars.used.mileage'|trans({}, 'portal_base') }}, км</option> <option v-for="item in dataCreditCalcOne.millages" :value="item.millage" v-html="item.millage.toLocaleString() + ' км (' + formatToCurrency(item.min_price) + ')'"></option> </select> <select id="variation-select" class="calc_module_form_select" v-else v-model="vehicleItemId" @change="cancelAllError" :disabled="vehicle.equipment_id === null" :class="{'error_input' : formErrors.vehicleItemId }"> <option :disabled="vehicleItemId !== null" value="null">{{ 'finance.credit.credit_modification'|trans({}, 'portal_base') }}</option> <option v-for="item in dataCreditCalcOne.variations" :value="item.id" v-html="item.title + ' (' + formatToCurrency(item.min_price) + ')'"></option> </select>{# </template>#} </div> <button class="calc_module_btn calc_module_btn-mob" @click="changeVehicleItem(); scrollToStep();">{{ 'finance.credit.next'|trans({}, 'portal_base') }}</button> </div> <div class="calc_module_block_left" v-if="step === 2 || (step == 1 && typeCreditCalc === 2) || (step === 3 && typeCreditCalc === 1)"> <p v-if="typeCreditCalc === 1" class="module_block_left_title module_block_left_title-last">{{ 'finance.credit.credit_your_conditions'|trans({}, 'portal_base') }}</p> <p v-else class="module_block_left_title module_block_left_title-last">{{ 'finance.credit.credit_your_conditions_flow_2'|trans({}, 'portal_base') }}</p> <div class="calc_swap_money"> <div class="calc_swap_money-item calc_swap_money-item-mob" :class="{'active' : tabPay === 1}" @click="setTabPay(1)"> <span>{{ 'finance.credit.credit_own_money_1'|trans({}, 'portal_base') }}</span> <span>{{ 'finance.credit.credit_own_money_2'|trans({}, 'portal_base') }}</span> </div> <div class="calc_swap_money-item calc_swap_money-item-mob" :class="{'active' : tabPay === 2}" @click="setTabPay(2)"> <span>{{ 'finance.credit.credit_own_car_first_payment_1'|trans({}, 'portal_base') }}</span> <span>{{ 'finance.credit.credit_own_car_first_payment_2'|trans({}, 'portal_base') }}</span> </div> </div> <div class="calc_module_form_wrapper-step-2" v-if="tabPay === 1"> <span v-if="messageError && isError" v-html="messageError" :key="messageError + isError" :class="{ 'error_text_red': messageError }"></span> <div class="calc_module_form_wrapper" v-if="typeCreditCalc === 1"> <select v-if="creditCalc.arrPercent" v-model="creditCalc.percent" @change="changePercent()" :class="{'error_input' : formErrors.percent }" class="calc_module_form_select"> <option value="null" disabled>{{ 'finance.credit.down_payment_uah'|trans({}, 'portal_base') }}</option> <template v-for="item in creditCalc.arrPercent"> <option :value="item"> <span v-html="item"></span>% (<span v-html="formatToCurrency(getCreditPrice(item))"></span>)</option> </template> </select> <select v-model="creditCalc.term" @change="cancelAllError" :disabled="creditCalc.programToPercent === null" class="calc_module_form_select" :class="{'error_input' : formErrors.term }"> <option value="null" disabled>{{ 'finance.credit.term_months'|trans({}, 'portal_base') }}</option> <template v-for="program,key in (creditCalc.percent ? creditCalc.arrPrograms[creditCalc.percent] : creditCalc.programToPercent)"> <option :value="key"> <span v-html="key + ' ' + translate_month"></span> </option> </template> </select> </div> <div v-else class="calc_module_form_wrapper calc_module_cancel_wrap"> <div class="module_form_for_tooltip tooltip-container"> <formatted-input :min="minFirstPayment" v-model="ownMoney" @blur="checkNeedChangeFirstPayment" @keyup="cancelAllError();filterMonthsByPayment()" placeholder="{{ 'finance.credit.down_first_payment_uah'|trans({}, 'portal_base') }}" class="calc_module_form_select" :class="{ 'error_input': isError || formErrors.ownMoney || isAdviseUserToIncreaseSum || isAdviseUserToDecreaseSum}"></formatted-input> <div class="push_to_input" @click.prevent="openTooltipInput($event)"> <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_2132_12524)"> <path d="M8 0C3.5888 0 0 3.58885 0 8.00005C0 12.4112 3.5888 16 8 16C12.4112 16 16 12.4112 16 8.00005C16 3.58885 12.4112 0 8 0ZM8 14.5455C4.39079 14.5455 1.45455 11.6092 1.45455 8.00005C1.45455 4.39088 4.39079 1.45455 8 1.45455C11.6092 1.45455 14.5455 4.39088 14.5455 8.00005C14.5455 11.6092 11.6092 14.5455 8 14.5455Z" fill="#9C9C9C"/> <path d="M7.99978 3.39355C7.46518 3.39355 7.03027 3.82875 7.03027 4.36369C7.03027 4.89814 7.46518 5.33295 7.99978 5.33295C8.53437 5.33295 8.96928 4.89814 8.96928 4.36369C8.96928 3.82875 8.53437 3.39355 7.99978 3.39355Z" fill="#9C9C9C"/> <path d="M7.99973 6.78809C7.59809 6.78809 7.27246 7.11371 7.27246 7.51536V11.879C7.27246 12.2806 7.59809 12.6063 7.99973 12.6063C8.40138 12.6063 8.72701 12.2806 8.72701 11.879V7.51536C8.72701 7.11371 8.40138 6.78809 7.99973 6.78809Z" fill="#9C9C9C"/> </g> <defs> <clipPath id="clip0_2132_12524"> <rect width="16" height="16" fill="white"/> </clipPath> </defs> </svg> </div> <div class="form_select_tooltip"> <p class="form_select_tooltip_text" v-html="translate_min_first_payment + formatToCurrency(minFirstPayment)"></p> <button class="form_select_tooltip_close" @click.prevent="closeTooltipInput($event)"> <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 11L1 1M11 1L1 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/> </svg> </button> </div> <p class="clue_text" v-if="isAdviseUserToIncreaseSum">{{ 'finance.credit.credit_advise_change_sum'|trans({}, 'portal_base') }}</p> <p class="clue_text" v-if="isAdviseUserToDecreaseSum">{{ 'finance.credit.credit_advise_decrease_sum'|trans({}, 'portal_base') }}</p> </div> <div class="module_form_for_tooltip tooltip-container"> <formatted-input :min="minPaymentPerMonth" @blur="checkNeedChangeMonthPayment" :suffix="uahPerMonthTranslate" v-model="ownMoneyPerMonth" @keyup="cancelAllError();filterMonthsByPayment()" placeholder="{{ 'finance.credit.monthly_payment_uah'|trans({}, 'portal_base') }}" class="calc_module_form_select" :class="{ 'error_input': isError || formErrors.ownMoneyPerMonth || isAdviseUserToIncreaseMonthSum || isAdviseUserToDecreaseMonthSum }"></formatted-input> <div class="form_select_tooltip"> <p class="form_select_tooltip_text" v-html="translate_min_month_payment + formatToCurrency(minPaymentPerMonth) + ' на ' + ownTermSelected + translate_month_term_credit"></p> <button class="form_select_tooltip_close" @click.prevent="closeTooltipInput($event)"> <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 11L1 1M11 1L1 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/> </svg> </button> </div> <p class="clue_text" v-if="isAdviseUserToIncreaseMonthSum">{{ 'finance.credit.credit_advise_change_month_sum'|trans({}, 'portal_base') }}</p> <p class="clue_text" v-if="isAdviseUserToDecreaseMonthSum">{{ 'finance.credit.credit_advise_decrease_month_sum'|trans({}, 'portal_base') }}</p> </div> <select v-model="showedTerm" @change="cancelAllError" class="calc_module_form_select calc_module_form_select_flow_two" :class="{ 'error_input': isError | formErrors.ownTermSelected }"> <option :value="null" v-html="translate_term_months_short" :disabled="showedTerm !== null"></option> <option v-for="month in filterMonthsByPayment()" :value="month" v-html="month + ' ' + translate_month"></option> </select> </div> <div class="calc_module_form_wrapper calc_module_form_wrapper-step-2 calc_step_two_top"> <p class="calc_module_form-text">{{ 'form.contacts'|trans({}, 'portal_base') }}</p> <input class="calc_module_form_input calc_module_form_input_gray" type="text" v-model="user.phone" @keyup="cancelAllError" :class="{'error_input' : formErrors.phone }" v-mask="'+38(###)###-##-##'" placeholder="+38(___)*"> <input class="calc_module_form_input calc_module_form_input_gray" type="text" v-model="user.name" @keyup="cancelAllError" :class="{'error_input' : formErrors.name }" placeholder="{{ 'finance.credit.credit_name'|trans({}, 'portal_base') }}*"> </div> <div class="checkboxes_rating_check"> <label class="checkbox rating_check_b"> <input v-model="user.approveTerm" @change="cancelAllError" type="checkbox"/> <div class="checkbox_rating_check" :class="{'error_input' : formErrors.approveTerm }"></div> <div class="checkbox_rating_body">{{ 'finance.credit.credit_agree_to_collection'|trans({}, 'portal_base') }} <a :href="options.privacyUrl" target="_blank">{{ 'finance.credit.credit_know_more'|trans({}, 'portal_base') }}</a> </div> </label> </div> </div> <template v-if="tabPay === 2"> <div v-if="!status.isNotHaveNumberVehicle" class="calc_module_form_wrapper calc_module_form_wrapper-step-2 calc_module_form_for_mob"> <p class="calc_module_form-text">{{ 'finance.credit.credit_car_evaluation'|trans({}, 'portal_base') }} </p> <div class="search__number__form__wrapper"> <svg class="search__number-icon" width="35" height="58" viewbox="0 0 35 58" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 6C0 2.68629 2.68629 0 6 0H35V58H6C2.68629 58 0 55.3137 0 52V6Z" fill="#0057B8"/> <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"/> <rect x="8" y="10" width="19" height="7" fill="#42ADDE"/> <rect x="8" y="17" width="19" height="7" fill="#FFD800"/> </svg> <form class="search__number__form" id="vehicleNumberForEstimate"> <input v-for="(input, index) in vehicleNumberEstimate" :key="index" ref="inputs" :inputmode="(index >= 2 && index <= 5) ? 'numeric' : ''" type="text" maxlength="1" v-model="vehicleNumberEstimate[index]" @keyup="numberVehicleEnter($event, index)"> </form> </div> <button class="calc_module_form-not_search" @click="noHaveVehicleNumber()">{{ 'finance.credit.credit_not_remember_auto_number'|trans({}, 'portal_base') }}</button> </div> <div v-show="status.isNotHaveNumberVehicle" class="calc_module_form_wrapper calc_module_form_wrapper-step-2 selected_car_head_wrapper transit_head_step"> <div v-if="tradeInData.estimated.priceBuy !== 0 || isNeedIncreaseFirstPayment" class="selected_car_head_wrapper"> <p v-if="typeCreditCalc == 1" class="calc_module_form-text">{{ 'finance.credit.credit_first_payment_auto_price'|trans({}, 'portal_base') }} <span v-if="isError" v-html="messageError" class="error_text_red"></span> </p> <div v-if="typeCreditCalc == 1" class="calc_module_form_wrapper"> <div style="position: relative;" class="calc_module_form_select module_form_select_mobile_position tooltip-container" :class="{ 'error_text_red': isError, 'error_input' : formErrors.percent}" @click="toggleIncreaseSumForFirstPayment"> {% verbatim %} <span class="calc_module_form_select_text">{{ tradeInData.estimated.percentOfFirstPayment }}% ({{ formatToCurrency(tradeInData.estimated.priceBuy) }})</span> {% endverbatim %} <div class="push_to_input" @click.stop.prevent="openTooltipInput($event)"> <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_2132_12524)"> <path d="M8 0C3.5888 0 0 3.58885 0 8.00005C0 12.4112 3.5888 16 8 16C12.4112 16 16 12.4112 16 8.00005C16 3.58885 12.4112 0 8 0ZM8 14.5455C4.39079 14.5455 1.45455 11.6092 1.45455 8.00005C1.45455 4.39088 4.39079 1.45455 8 1.45455C11.6092 1.45455 14.5455 4.39088 14.5455 8.00005C14.5455 11.6092 11.6092 14.5455 8 14.5455Z" fill="#9C9C9C"/> <path d="M7.99978 3.39355C7.46518 3.39355 7.03027 3.82875 7.03027 4.36369C7.03027 4.89814 7.46518 5.33295 7.99978 5.33295C8.53437 5.33295 8.96928 4.89814 8.96928 4.36369C8.96928 3.82875 8.53437 3.39355 7.99978 3.39355Z" fill="#9C9C9C"/> <path d="M7.99973 6.78809C7.59809 6.78809 7.27246 7.11371 7.27246 7.51536V11.879C7.27246 12.2806 7.59809 12.6063 7.99973 12.6063C8.40138 12.6063 8.72701 12.2806 8.72701 11.879V7.51536C8.72701 7.11371 8.40138 6.78809 7.99973 6.78809Z" fill="#9C9C9C"/> </g> <defs> <clipPath id="clip0_2132_12524"> <rect width="16" height="16" fill="white"/> </clipPath> </defs> </svg> </div> <div class="form_select_tooltip"> <p v-if="tradeInData.estimated.estimatedPrice === 0" class="form_select_tooltip_text" v-html="translate_min_first_payment_for_car + formatToCurrency(needIncreaseSum) + ' (20%). ' + translate_unfortunately_not_enough"></p> <p v-else-if="tradeInData.estimated.estimatedPricePercent < 20" class="form_select_tooltip_text" v-html="translate_min_first_payment_for_car + formatToCurrency(creditCalc.firstPrice) + ' (20%). ' + translate_price_of_your_car + formatToCurrency(tradeInData.estimated.estimatedPrice) + ' (' + tradeInData.estimated.estimatedPricePercent+ '%)'"></p> <p v-else-if="isIncreaseFirstPayment" class="form_select_tooltip_text">{{ 'finance.credit.pre_estimate_plus_money'|trans({}, 'portal_base') }}</p> <p v-else class="form_select_tooltip_text"> {{ 'finance.credit.pre_estimate_1'|trans({}, 'portal_base') }} {% verbatim %} {{ tradeInData.estimated.countItems }} {% endverbatim %} {{ 'finance.credit.pre_estimate_2'|trans({}, 'portal_base') }} </p> <button class="form_select_tooltip_close" @click.stop.prevent="closeTooltipInput($event)"> <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 11L1 1M11 1L1 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/> </svg> </button> </div> </div> <select v-model="creditCalc.term" class="calc_module_form_select" :class="{'error_input' : formErrors.term }" @change="cancelAllError"> <template> <option :value="null"> <span v-html="translate_term_months"></span> </option> </template> <template v-for="program,key in (tradeInData.estimated.percentOfFirstPayment >= 20 || tradeInData.estimated.percentOfFirstPayment <= 70 ? creditCalc.arrPrograms[tradeInData.estimated.percentOfFirstPaymentRounded] : creditCalc.programToPercent)"> <option :value="key"> <span v-html="key + ' ' + translate_month"></span> </option> </template> </select> <div class="calc_module_select-link-box calc_module_select-link-btn-mobile"> <button class="calc_module_form-link-btn calc_module_select-link-btn-mobile" @click="toggleIncreaseSumForFirstPayment"> {{ 'finance.credit.credit_increase_first_payment'|trans({}, 'portal_base') }} </button> <span class="error_text_red" v-if="isNeedIncreaseFirstPayment || minFirstPayment > tradeInData.estimated.priceBuy" v-html="'(' + translate_min + ' на ' + formatToCurrency(needIncreaseSum) + ')'" :class="{ 'error_text_red': messageError }"></span> </div> </div> <div v-else class="selected_car_head_wrapper"> <p class="calc_module_form-text">{{ 'finance.credit.credit_first_payment_auto_price'|trans({}, 'portal_base') }} <span v-if="isError" v-html="messageError" :class="{ 'error_text_red': messageError}"></span> </p> <div class="calc_module_form_wrapper calc_module_cancel_margin_bottom calc_module_form_wrapper-order"> <div class="module_form_for_tooltip_w_30 tooltip-container module_form_for_order-first"> <formatted-input v-model="tradeInData.estimated.priceBuy" @click.native="toggleIncreaseSumForFirstPayment" :class="{ 'error_text_red': isError && minFirstPayment < tradeInData.estimated.priceBuy, 'error_input' : formErrors.ownMoney }" placeholder="{{ 'finance.credit.down_first_payment_uah'|trans({}, 'portal_base') }}" class="calc_module_form_select calc_module_form_select_order_position form_select_order_first" @change="changeDisableCaclVehicleOnStepTwo" readonly></formatted-input> <div class="push_to_input" @click.prevent="openTooltipInput($event)"> <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_2132_12524)"> <path d="M8 0C3.5888 0 0 3.58885 0 8.00005C0 12.4112 3.5888 16 8 16C12.4112 16 16 12.4112 16 8.00005C16 3.58885 12.4112 0 8 0ZM8 14.5455C4.39079 14.5455 1.45455 11.6092 1.45455 8.00005C1.45455 4.39088 4.39079 1.45455 8 1.45455C11.6092 1.45455 14.5455 4.39088 14.5455 8.00005C14.5455 11.6092 11.6092 14.5455 8 14.5455Z" fill="#9C9C9C"/> <path d="M7.99978 3.39355C7.46518 3.39355 7.03027 3.82875 7.03027 4.36369C7.03027 4.89814 7.46518 5.33295 7.99978 5.33295C8.53437 5.33295 8.96928 4.89814 8.96928 4.36369C8.96928 3.82875 8.53437 3.39355 7.99978 3.39355Z" fill="#9C9C9C"/> <path d="M7.99973 6.78809C7.59809 6.78809 7.27246 7.11371 7.27246 7.51536V11.879C7.27246 12.2806 7.59809 12.6063 7.99973 12.6063C8.40138 12.6063 8.72701 12.2806 8.72701 11.879V7.51536C8.72701 7.11371 8.40138 6.78809 7.99973 6.78809Z" fill="#9C9C9C"/> </g> <defs> <clipPath id="clip0_2132_12524"> <rect width="16" height="16" fill="white"/> </clipPath> </defs> </svg> </div> <div class="form_select_tooltip"> <p v-if="step === 1 && typeCreditCalc === 2 && tradeInData.estimated.priceBuy === 0" class="form_select_tooltip_text" v-html="translate_min_first_payment + formatToCurrency(minFirstPayment) + '. ' + translate_unfortunately_not_enough"></p> <p v-else-if="step === 1 && typeCreditCalc === 2 && tradeInData.estimated.estimatedPrice < minFirstPayment" class="form_select_tooltip_text" v-html="translate_min_first_payment + formatToCurrency(minFirstPayment) + '. ' + translate_price_of_your_car + formatToCurrency(tradeInData.estimated.priceBuy)"></p> <p v-else-if="isIncreaseFirstPayment" class="form_select_tooltip_text" v-html="translate_min_first_payment + formatToCurrency(minFirstPayment)"></p> <p v-else class="form_select_tooltip_text"> {{ 'finance.credit.pre_estimate_1'|trans({}, 'portal_base') }} {% verbatim %} {{ tradeInData.estimated.countItems }} {% endverbatim %} {{ 'finance.credit.pre_estimate_2'|trans({}, 'portal_base') }} </p> <button class="form_select_tooltip_close" @click.prevent="closeTooltipInput($event)"> <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 11L1 1M11 1L1 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/> </svg> </button> </div> </div> <div class="module_form_for_tooltip_w_30 tooltip-container"> <formatted-input :min="minPaymentPerMonth" :suffix="uahPerMonthTranslate" v-model="ownMoneyPerMonth" @change="changeDisableCaclVehicleOnStepTwo()" @keyup="cancelAllError();filterMonthsByPayment()" placeholder="{{ 'finance.credit.monthly_payment_uah'|trans({}, 'portal_base') }}" class="calc_module_form_select calc_module_form_select_order_position" :class="{ 'error_input' : formErrors.ownMoneyPerMonth }"></formatted-input> </div> <select v-model="showedTerm" @change="changeDisableCaclVehicleOnStepTwo()" @keyup="cancelAllError" class="calc_module_form_select calc_module_form_select_order_position calc_module_form_month calc_module_form_select_flow_two" :class="{'error_input' : formErrors.ownTermSelected }"> <template> <option :value="null" v-html="translate_term_months_short" :disabled="showedTerm !== null"></option> </template> <template v-for="month,key in filterMonthsByPayment()"> <option :value="month" v-html="month + ' ' + translate_month"></option> </template> </select> <div class="calc_module_select-link-box calc_module_select-link-btn-mobile calc_module_form_select_order_position_last"> <button class="calc_module_form-link-btn" @click="toggleIncreaseSumForFirstPayment"> {{ 'finance.credit.credit_increase_first_payment'|trans({}, 'portal_base') }} </button> <span v-if="isNeedIncreaseFirstPayment" v-html="'(' + translate_min + ' на ' + formatToCurrency(needIncreaseSum) + ')'" :class="{ 'error_text_red': messageError }"></span> </div> </div> </div> <div class="calc_module_form_wrapper calc_module_form_wrapper-step-2"> <p class="calc_module_form-text">{{ 'form.contacts'|trans({}, 'portal_base') }}</p> <input class="calc_module_form_input calc_module_form_input_gray" v-model="user.phone" @keyup="formErrors.phone = false" :class="{'error_input' : formErrors.phone }" type="text" v-mask="'+38(###)###-##-##'" placeholder="+38(___)*"> <input class="calc_module_form_input calc_module_form_input_gray" v-model="user.name" @keyup="formErrors.name = false" :class="{'error_input' : formErrors.name }" type="text" placeholder="{{ 'finance.credit.credit_name'|trans({}, 'portal_base') }}"> </div> <div class="checkboxes_rating_check"> <label class="checkbox rating_check_b"> <input type="checkbox" v-model="user.approveTerm" @change="cancelAllError"/> <div class="checkbox_rating_check" :class="{'error_input' : formErrors.approveTerm }"></div> <div class="checkbox_rating_body">{{ 'finance.credit.credit_agree_to_collection'|trans({}, 'portal_base') }} <a :href="options.privacyUrl" target="_blank">{{ 'finance.credit.credit_more_condition'|trans({}, 'portal_base') }}</a> </div> </label> </div> </div> <div v-show="tradeInData.estimated.priceBuy === 0 && !tradeInData.estimated.isWasRequest" class="calc_module_form_wrapper calc_module_gap_two"> <p class="calc_module_form-text calc_module_form-text-mb">{{ 'finance.credit.credit_car_estimate'|trans({}, 'portal_base') }}</p> <select id="brand-ria" class="calc_module_form_select" v-model="tradeInData.brand" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.brand }"></select> <select id="model-ria" class="calc_module_form_select" v-model="tradeInData.model" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.model }"></select> <select id="fuel" class="calc_module_form_select" v-model="tradeInData.fuel" data-live-search="true" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.fuel }"> <option :value="null" disabled>{{ 'trade_in.fuel'|trans({}, 'dc_base') }}*</option> {% verbatim %} <option v-if="fuel.id < 7" :value="fuel.id" v-for="fuel in tradeInData.fuels">{{ fuel.title }}</option> {% endverbatim %} </select> <select id="mileage" class="calc_module_form_select" v-model="tradeInData.mileage" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.mileage }"> <option :value="null" disabled>{{ 'trade_in.yardage'|trans({}, 'dc_base') }}* </option> {% verbatim %} <option :value="item.id" v-for="item in tradeInData.mileages">{{ item.title }}</option> {% endverbatim %} </select> <select class="calc_module_form_select" v-model="tradeInData.year" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.year }"> <option :value="null" disabled> {{ 'form.year'|trans({}, 'dc_base') }}* </option> {% verbatim %} <option :value="year" v-for="year in tradeInData.years">{{ year }}</option> {% endverbatim %} </select> <select class="calc_module_form_select" v-model="tradeInData.transmission" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.transmission }"> <option :value="null" disabled> {{ 'trade_in.trans'|trans({}, 'dc_base') }} </option> {% verbatim %} <option v-if="transmission.id < 3" :value="transmission.id" v-for="transmission in tradeInData.transmissions">{{ transmission.title }}</option> {% endverbatim %} </select> </div> </div> </template> <button v-if="tabPay === 2 && !status.isNotHaveNumberVehicle" class="calc_module_btn" @click="tradeInEstimate"> {{ 'leads.estimate'|trans({}, 'portal_base')|capitalize }} </button> <button v-else-if="tabPay === 2 && status.isNotHaveNumberVehicle && !tradeInData.estimated.isWasRequest" class="calc_module_btn" @click="tradeInEstimate(); scrollToStep();"> {{ 'leads.estimate'|trans({}, 'portal_base')|capitalize }} </button> <button v-else-if="typeCreditCalc === 2" :disabled="step === 2 && isDisableCaclVehicleOnStepTwo" class="calc_module_btn" @click="toChooseVehicleByWallet">{{ 'finance.credit.select_vehicle'|trans({}, 'portal_base')|upper }}</button> <button v-else class="calc_module_btn" @click="creditStepSecond();addClassAndScroll()" :disabled="isDisabledCalcButton">{{ 'finance.credit.credit_calc'|trans({}, 'portal_base') }}</button> </div> <div class="calc_module_block_left calc_module_block_left_position" v-if="step === 3 && typeCreditCalc === 2"> <p class="module_block_left_title module_block_left_title-last">Все про авто</p> <p class="module_block_left_title-tabs" v-html="getFullNameForVehicle() + ' ' + vehicleInfo.enginePower + ' ' + ks + ' ' + vehicleInfo.year"></p>{# <div class="add__comparison__like__box">#}{# <button :class="{ active:!!vehicleInfo.comparedId }" :comparedid="vehicleInfo.comparedId" @click="toggleCompare" class="comparison__like add__comparison"></button>#}{# <button :class="{ active:!!vehicleInfo.featuredId }" :featuredid="vehicleInfo.featuredId" @click="toggleFavorite" class="comparison__like add__like"></button>#}{# </div>#} <div class="module_block-tabs"> <div class="tabbed"> <input type="radio" id="module-tab-1" name="css-tabs" checked> <input type="radio" id="module-tab-2" name="css-tabs"> <input type="radio" v-if="vehicleInfo.optionsByEquipment?.count > 0" id="module-tab-3" name="css-tabs" ref="fullOptions"> <ul class="tabs_change_step"> <li class="tabs_change_tab"> <label for="module-tab-1">{{ 'finance.credit.credit_main_info'|trans({}, 'portal_base') }}</label> </li> <li class="tabs_change_tab"> <label for="module-tab-2">{{ 'finance.credit.credit_tech_info'|trans({}, 'portal_base') }} </label> </li> <li class="tabs_change_tab" v-if="vehicleInfo.optionsByEquipment?.count > 0"> <label for="module-tab-3">{{ 'finance.credit.credit_features_info'|trans({}, 'portal_base') }}</label> </li> </ul> <div class="tab-content"> <div class="tabs_change_car_content_first_wrapper"> <img class="tabs_change_car_img" :src="vehicleInfo.image" alt=""> <div class="tabs_change_car_content_first_box"> <div class="tabs_content_first_head"> <p class="tabs_content_first_head-old-price" v-if="vehicleInfo?.hasActionPrice" v-html="formatToCurrency(vehicleInfo.fullPrice)"></p> <p class="tabs_content_first_head-middle-price" v-html="formatToCurrency(vehicleInfo.price)"></p> <span class="tabs_content_first_head-span">•</span> <p class="tabs_content_first_head-price" v-html="formatToCurrency(creditCalc.monthPayment) + ' /' + translate_month"></p> </div> <div class="tabs_content_first_char"> <div class="tabs_content_first_char_box"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_2262_3474)"> <path d="M22 11.2H21.2C20.8817 11.2 20.5765 11.3264 20.3515 11.5515C20.1264 11.7765 20 12.0817 20 12.4V12.8H19.2V10.8C19.2 10.4817 19.0736 10.1765 18.8485 9.95148C18.6235 9.72644 18.3183 9.60001 18 9.60001H16.8C16.6939 9.60001 16.5922 9.55786 16.5172 9.48285C16.4421 9.40784 16.4 9.30609 16.4 9.20001V8.40001C16.4 8.08175 16.2736 7.77652 16.0485 7.55148C15.8235 7.32643 15.5183 7.20001 15.2 7.20001H13.6V6.00001H15.6C15.9183 6.00001 16.2235 5.87358 16.4485 5.64853C16.6736 5.42349 16.8 5.11827 16.8 4.80001C16.8 4.48175 16.6736 4.17652 16.4485 3.95148C16.2235 3.72643 15.9183 3.60001 15.6 3.60001H7.6C7.28174 3.60001 6.97652 3.72643 6.75147 3.95148C6.52643 4.17652 6.4 4.48175 6.4 4.80001C6.4 5.11827 6.52643 5.42349 6.75147 5.64853C6.97652 5.87358 7.28174 6.00001 7.6 6.00001H9.6V7.20001H7.6C7.28174 7.20001 6.97652 7.32643 6.75147 7.55148C6.52643 7.77652 6.4 8.08175 6.4 8.40001C6.4 8.50609 6.35786 8.60784 6.28284 8.68285C6.20783 8.75786 6.10609 8.80001 6 8.80001H4.8C4.48174 8.80001 4.17652 8.92643 3.95147 9.15148C3.72643 9.37652 3.6 9.68175 3.6 10V11.6H2.4V10C2.4 9.68175 2.27357 9.37652 2.04853 9.15148C1.82348 8.92643 1.51826 8.80001 1.2 8.80001C0.88174 8.80001 0.576515 8.92643 0.351472 9.15148C0.126428 9.37652 0 9.68175 0 10L0 16.4C0 16.7183 0.126428 17.0235 0.351472 17.2485C0.576515 17.4736 0.88174 17.6 1.2 17.6C1.51826 17.6 1.82348 17.4736 2.04853 17.2485C2.27357 17.0235 2.4 16.7183 2.4 16.4V14.8H3.6V16.8C3.6 17.1183 3.72643 17.4235 3.95147 17.6485C4.17652 17.8736 4.48174 18 4.8 18H6.4688C6.57488 18 6.6766 18.0422 6.7516 18.1172L8.6828 20.0484C8.79391 20.1602 8.92612 20.2489 9.07175 20.3093C9.21739 20.3696 9.37356 20.4005 9.5312 20.4H18C18.3183 20.4 18.6235 20.2736 18.8485 20.0485C19.0736 19.8235 19.2 19.5183 19.2 19.2V17.6H20V18C20 18.3183 20.1264 18.6235 20.3515 18.8485C20.5765 19.0736 20.8817 19.2 21.2 19.2H22C22.5302 19.1994 23.0386 18.9885 23.4135 18.6135C23.7884 18.2386 23.9994 17.7302 24 17.2V13.2C23.9994 12.6698 23.7884 12.1614 23.4135 11.7865C23.0386 11.4116 22.5302 11.2006 22 11.2ZM7.2 4.80001C7.2 4.69392 7.24214 4.59218 7.31716 4.51716C7.39217 4.44215 7.49391 4.40001 7.6 4.40001H15.6C15.7061 4.40001 15.8078 4.44215 15.8828 4.51716C15.9579 4.59218 16 4.69392 16 4.80001C16 4.90609 15.9579 5.00783 15.8828 5.08285C15.8078 5.15786 15.7061 5.20001 15.6 5.20001H7.6C7.49391 5.20001 7.39217 5.15786 7.31716 5.08285C7.24214 5.00783 7.2 4.90609 7.2 4.80001ZM10.4 6.00001H12.8V7.20001H10.4V6.00001ZM1.6 16.4C1.6 16.5061 1.55786 16.6078 1.48284 16.6829C1.40783 16.7579 1.30609 16.8 1.2 16.8C1.09391 16.8 0.992172 16.7579 0.917157 16.6829C0.842143 16.6078 0.8 16.5061 0.8 16.4V10C0.8 9.89392 0.842143 9.79218 0.917157 9.71716C0.992172 9.64215 1.09391 9.60001 1.2 9.60001C1.30609 9.60001 1.40783 9.64215 1.48284 9.71716C1.55786 9.79218 1.6 9.89392 1.6 10V16.4ZM2.4 14V12.4H3.6V14H2.4ZM18.4 19.2C18.4 19.3061 18.3579 19.4078 18.2828 19.4829C18.2078 19.5579 18.1061 19.6 18 19.6H9.5312C9.42512 19.6 9.3234 19.5578 9.2484 19.4828L7.3172 17.5516C7.20603 17.4399 7.07382 17.3512 6.92819 17.2909C6.78257 17.2305 6.62643 17.1996 6.4688 17.2H4.8C4.69391 17.2 4.59217 17.1579 4.51716 17.0829C4.44214 17.0078 4.4 16.9061 4.4 16.8V10C4.4 9.89392 4.44214 9.79218 4.51716 9.71716C4.59217 9.64215 4.69391 9.60001 4.8 9.60001H6C6.31826 9.60001 6.62348 9.47358 6.84853 9.24854C7.07357 9.02349 7.2 8.71827 7.2 8.40001C7.2 8.29392 7.24214 8.19218 7.31716 8.11716C7.39217 8.04215 7.49391 8.00001 7.6 8.00001H15.2C15.3061 8.00001 15.4078 8.04215 15.4828 8.11716C15.5579 8.19218 15.6 8.29392 15.6 8.40001V9.20001C15.6 9.51827 15.7264 9.82349 15.9515 10.0485C16.1765 10.2736 16.4817 10.4 16.8 10.4H18C18.1061 10.4 18.2078 10.4421 18.2828 10.5172C18.3579 10.5922 18.4 10.6939 18.4 10.8V19.2ZM19.2 16.8V13.6H20V16.8H19.2ZM23.2 17.2C23.2 17.5183 23.0736 17.8235 22.8485 18.0485C22.6235 18.2736 22.3183 18.4 22 18.4H21.2C21.0939 18.4 20.9922 18.3579 20.9172 18.2829C20.8421 18.2078 20.8 18.1061 20.8 18V12.4C20.8 12.2939 20.8421 12.1922 20.9172 12.1172C20.9922 12.0421 21.0939 12 21.2 12H22C22.3183 12 22.6235 12.1264 22.8485 12.3515C23.0736 12.5765 23.2 12.8817 23.2 13.2V17.2Z" fill="#E40C25"/> </g> <defs> <clipPath id="clip0_2262_3474"> <rect width="24" height="24" fill="white"/> </clipPath> </defs> </svg> <p v-html="vehicleInfo.fuelTypeName + ', ' + vehicleInfo.engineVolume + ' л '" :title="vehicleInfo.fuelTypeName + ', ' + vehicleInfo.engineVolume + ' л '"></p> </div> <div class="tabs_content_first_char_box"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23.9928 4.63387C24.0429 4.05556 23.8315 3.49227 23.3864 3.00507C22.9914 2.57298 22.4792 2.3041 21.9444 2.25002C21.2289 2.17792 20.5164 2.41244 19.9836 2.89541C19.4829 3.34605 19.2065 3.94689 19.2065 4.59031C19.2065 5.33334 19.5009 6.00328 20.0077 6.43589V10.1481C20.0077 10.48 19.7386 10.749 19.4068 10.749H18.2181C17.8952 9.90178 17.3399 9.34248 16.5012 9.02103V6.504C17.3124 6.05886 17.6629 5.27678 17.4926 4.26834C17.3148 3.21687 16.5363 2.41272 15.5549 2.26551C14.9126 2.15928 14.2562 2.34259 13.7619 2.76623C13.2467 3.20785 12.9507 3.87329 12.9507 4.59031C12.9507 5.36442 13.4569 6.02633 13.9977 6.44293V9.02107C13.1465 9.34605 12.5692 9.91535 12.2453 10.749H10.5899C10.2601 10.7487 9.99289 10.4815 9.99261 10.1517V6.50405C10.8058 6.05844 11.1573 5.27532 10.987 4.26642C10.8092 3.21494 10.0302 2.41131 9.04877 2.26359C8.40614 2.15708 7.74934 2.34038 7.25473 2.76431C6.73195 3.22536 6.43612 3.89141 6.44457 4.58839C6.44457 5.36296 6.9498 6.02492 7.48906 6.44101V10.1462C7.48906 10.478 7.22004 10.747 6.88821 10.747H3.98416V6.41195C4.61857 5.79106 5.02761 4.70654 4.53144 3.57695C4.38123 3.23447 4.01021 2.82589 3.66773 2.6256C2.83654 2.13793 1.92476 2.10638 1.17023 2.53899C0.441239 2.96489 -0.00488839 3.74753 4.04212e-05 4.59181C4.04212e-05 5.38742 0.471704 6.04037 0.979418 6.44443V11.5376C0.980263 12.4843 1.74756 13.2517 2.69431 13.2525H6.8677C7.21037 13.253 7.48802 13.5307 7.48859 13.8734V17.497C6.66792 17.9451 6.31243 18.7297 6.48316 19.7411C6.66092 20.7926 7.44202 21.5938 8.42539 21.7389C8.54044 21.7557 8.65657 21.7642 8.77289 21.7645C9.3045 21.7673 9.81897 21.5767 10.2204 21.2282C10.7406 20.7683 11.0351 20.105 11.0276 19.4107C11.0276 18.6331 10.5268 17.9722 9.99209 17.558V13.8529C9.99209 13.521 10.2611 13.252 10.5929 13.252H12.2453C12.5692 14.0857 13.1465 14.654 13.9977 14.98V17.4965C13.1746 17.9471 12.8186 18.7312 12.9893 19.7427C13.1675 20.7942 13.9486 21.5953 14.9325 21.739C15.5774 21.841 16.2344 21.6532 16.728 21.2258C17.2472 20.7663 17.5414 20.104 17.5342 19.4107C17.5342 18.6321 17.0334 17.9717 16.5012 17.5581V14.9795C17.3399 14.658 17.8952 14.0987 18.2181 13.2515H19.8735C19.9468 13.2515 20.0063 13.3109 20.0066 13.3842V17.5902C19.4814 18.1064 19.0843 18.9686 19.2781 19.9064C19.4433 20.7076 20.0547 21.368 20.8739 21.6363C21.6249 21.8817 22.4015 21.7695 23.0104 21.3279C23.6213 20.8805 23.9814 20.1679 23.9792 19.4107C23.9783 18.6115 23.5121 17.9601 23.0104 17.5595V6.41735C23.3554 6.10242 23.9232 5.46604 23.9928 4.63387ZM22.9944 4.55276C22.9538 5.04193 22.5578 5.51463 22.2007 5.79402C22.0794 5.88893 22.0084 6.0345 22.0085 6.18856V17.8154C22.0086 17.9862 22.0958 18.1451 22.2398 18.237C22.5798 18.4548 22.9768 18.8929 22.9768 19.4111C22.9794 19.8472 22.7734 20.2582 22.4225 20.5172C22.072 20.7711 21.6304 20.8312 21.1853 20.6849C20.7137 20.5302 20.3496 20.1452 20.2585 19.704C20.1283 19.0752 20.4443 18.5024 20.8153 18.21C20.9367 18.115 21.0076 17.9695 21.0076 17.8154V13.3852C21.0067 12.759 20.4991 12.2516 19.8729 12.2511H17.8576C17.6332 12.251 17.436 12.4005 17.3754 12.6166C17.1416 13.4518 16.691 13.9064 15.8678 14.1358C15.6515 14.1962 15.5018 14.3933 15.5018 14.6179V17.8154C15.5019 17.9861 15.5889 18.145 15.7326 18.237C16.1027 18.4743 16.5338 18.924 16.5338 19.4111C16.541 19.8141 16.3729 20.2003 16.0732 20.4696C15.798 20.7045 15.4334 20.8066 15.0763 20.7485C14.533 20.6704 14.0819 20.1882 13.9782 19.5759C13.8661 18.9149 14.0829 18.5159 14.6817 18.282C14.8737 18.207 15.0001 18.022 15.0002 17.8158V14.6179C15.0001 14.3933 14.8505 14.1961 14.6342 14.1357C13.794 13.9014 13.3173 13.4347 13.0895 12.6171C13.0291 12.4007 12.8319 12.2511 12.6073 12.2511H10.593C9.7081 12.2511 8.99075 12.9684 8.99075 13.8533V17.8154C8.99079 17.9861 9.07782 18.145 9.22156 18.237C9.59258 18.4753 10.0262 18.9254 10.0262 19.4111C10.0334 19.8146 9.86516 20.2013 9.56502 20.4711C9.29032 20.7053 8.92634 20.8066 8.57011 20.748C8.02634 20.6689 7.57472 20.1862 7.46854 19.5743C7.3564 18.9139 7.57271 18.5153 8.16951 18.2815C8.3615 18.2065 8.48787 18.0214 8.48796 17.8153V13.8733C8.48688 12.9778 7.76117 12.2521 6.86568 12.251H2.69431C2.30048 12.2504 1.98137 11.9313 1.98081 11.5375V6.18555C1.97992 6.01577 1.89303 5.858 1.75 5.76647C1.40503 5.54514 0.998945 5.10502 0.998945 4.59233C0.993969 4.10607 1.24928 3.65426 1.66837 3.40768C2.10999 3.15481 2.63874 3.18438 3.16147 3.48978C3.31919 3.58239 3.54803 3.82977 3.6121 3.97999C3.96261 4.78113 3.54202 5.50313 3.1725 5.79205C3.05111 5.88696 2.98018 6.03248 2.98023 6.18659V11.113C2.98051 11.4652 3.26596 11.7506 3.61811 11.7509H6.88521C7.77009 11.7509 8.48744 11.0335 8.48744 10.1486V6.18555C8.48707 6.01624 8.40121 5.85856 8.25912 5.76647C7.88411 5.52613 7.4455 5.07399 7.4455 4.59233C7.43747 4.18695 7.60636 3.79814 7.90815 3.52733C8.09741 3.36412 8.42238 3.18485 8.89954 3.25597C9.4503 3.3391 9.89342 3.81325 10.0011 4.43513C10.1143 5.10305 9.90746 5.4866 9.31112 5.72145C9.11913 5.79646 8.99277 5.9815 8.99267 6.18762V10.1532C8.9946 11.0354 9.70927 11.75 10.5914 11.752H12.6078C12.8324 11.7519 13.0295 11.6023 13.09 11.386C13.3178 10.5698 13.7945 10.1017 14.6347 9.86733C14.851 9.80691 15.0007 9.60976 15.0007 9.38515V6.18565C14.9994 6.01558 14.9119 5.85772 14.7683 5.76656C14.3918 5.52524 13.9522 5.0731 13.9522 4.59242C13.9522 4.16733 14.1209 3.7788 14.4148 3.52592C14.6031 3.36318 14.927 3.18194 15.4042 3.25456C15.955 3.33816 16.3986 3.81283 16.5058 4.43522C16.6189 5.10267 16.4132 5.4867 15.8188 5.71952C15.6268 5.79454 15.5004 5.97958 15.5003 6.1857V9.38318C15.5004 9.60779 15.65 9.80494 15.8663 9.86535C16.6895 10.0947 17.1401 10.5488 17.3739 11.3845C17.4345 11.6007 17.6316 11.75 17.8561 11.75H19.4058C20.2907 11.75 21.008 11.0327 21.008 10.1478V6.18574C21.007 6.01586 20.9199 5.85805 20.7767 5.76665C20.4207 5.53833 20.2079 5.0992 20.2079 4.59252C20.2079 4.23854 20.3661 3.90056 20.6546 3.64116C20.9769 3.34788 21.4086 3.20518 21.8422 3.2486C22.1281 3.27812 22.4215 3.43636 22.6468 3.68322C22.9063 3.96642 23.0199 4.25083 22.9944 4.55276Z" fill="#E40C25"/> </svg> <p v-html="vehicleInfo.transmissionTypeName" :title="vehicleInfo.transmissionTypeName"></p> </div> <div class="tabs_content_first_char_box"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18.75 8.625H21C21.6203 8.625 22.125 8.12025 22.125 7.5V1.5C22.125 0.87975 21.6203 0.375 21 0.375H18.75C18.1297 0.375 17.625 0.87975 17.625 1.5V2.625H16.5C16.2926 2.625 16.125 2.793 16.125 3V3.375H7.875V3C7.875 2.793 7.70738 2.625 7.5 2.625H6.375V1.5C6.375 0.87975 5.87025 0.375 5.25 0.375H3C2.37975 0.375 1.875 0.87975 1.875 1.5V7.5C1.875 8.12025 2.37975 8.625 3 8.625H5.25C5.87025 8.625 6.375 8.12025 6.375 7.5V6.375H7.5C7.70738 6.375 7.875 6.207 7.875 6V5.625H8.46975L10.875 8.03025V11.625H10.5C10.2926 11.625 10.125 11.793 10.125 12V14.625H9C8.79262 14.625 8.625 14.7926 8.625 15V18.375H7.875V18C7.875 17.7926 7.70738 17.625 7.5 17.625H6.375V16.5C6.375 15.8798 5.87025 15.375 5.25 15.375H3C2.37975 15.375 1.875 15.8798 1.875 16.5V22.5C1.875 23.1203 2.37975 23.625 3 23.625H5.25C5.87025 23.625 6.375 23.1203 6.375 22.5V21.375H7.5C7.70738 21.375 7.875 21.2074 7.875 21V20.625H16.125V21C16.125 21.2074 16.2926 21.375 16.5 21.375H17.625V22.5C17.625 23.1203 18.1297 23.625 18.75 23.625H21C21.6203 23.625 22.125 23.1203 22.125 22.5V16.5C22.125 15.8798 21.6203 15.375 21 15.375H18.75C18.1297 15.375 17.625 15.8798 17.625 16.5V17.625H16.5C16.2926 17.625 16.125 17.7926 16.125 18V18.375H15.375V15C15.375 14.7926 15.2074 14.625 15 14.625H13.875V12C13.875 11.793 13.7074 11.625 13.5 11.625H13.125V8.03025L15.5303 5.625H16.125V6C16.125 6.207 16.2926 6.375 16.5 6.375H17.625V7.5C17.625 8.12025 18.1297 8.625 18.75 8.625ZM5.25 7.875H3C2.793 7.875 2.625 7.70662 2.625 7.5V6.53025L3.10988 7.01513L3.64012 6.48487L2.625 5.46975V4.65525L3.10988 5.14012L3.64012 4.60988L2.625 3.59475V2.78025L3.10988 3.26512L3.64012 2.73488L2.625 1.71975V1.5C2.625 1.29338 2.793 1.125 3 1.125H5.25C5.457 1.125 5.625 1.29338 5.625 1.5V1.71975L4.60988 2.73488L5.14012 3.26512L5.625 2.78025V3.59475L4.60988 4.60988L5.14012 5.14012L5.625 4.65525V5.46975L4.60988 6.48487L5.14012 7.01513L5.625 6.53025V7.5C5.625 7.70662 5.457 7.875 5.25 7.875ZM7.125 5.625H6.375V3.375H7.125V5.625ZM5.25 22.875H3C2.793 22.875 2.625 22.707 2.625 22.5V21.5303L3.10988 22.0151L3.64012 21.4849L2.625 20.4697V19.6553L3.10988 20.1401L3.64012 19.6099L2.625 18.5947V17.7803L3.10988 18.2651L3.64012 17.7349L2.625 16.7197V16.5C2.625 16.293 2.793 16.125 3 16.125H5.25C5.457 16.125 5.625 16.293 5.625 16.5V16.7197L4.60988 17.7349L5.14012 18.2651L5.625 17.7803V18.5947L4.60988 19.6099L5.14012 20.1401L5.625 19.6553V20.4697L4.60988 21.4849L5.14012 22.0151L5.625 21.5303V22.5C5.625 22.707 5.457 22.875 5.25 22.875ZM7.125 20.625H6.375V18.375H7.125V20.625ZM18.75 16.125H21C21.207 16.125 21.375 16.293 21.375 16.5V16.7197L20.3599 17.7349L20.8901 18.2651L21.375 17.7803V18.5947L20.3599 19.6099L20.8901 20.1401L21.375 19.6553V20.4697L20.3599 21.4849L20.8901 22.0151L21.375 21.5303V22.5C21.375 22.707 21.207 22.875 21 22.875H18.75C18.543 22.875 18.375 22.707 18.375 22.5V21.5303L18.8599 22.0151L19.3901 21.4849L18.375 20.4697V19.6553L18.8599 20.1401L19.3901 19.6099L18.375 18.5947V17.7803L18.8599 18.2651L19.3901 17.7349L18.375 16.7197V16.5C18.375 16.293 18.543 16.125 18.75 16.125ZM16.875 18.375H17.625V20.625H16.875V18.375ZM9.53025 5.625H10.875V6.96975L9.53025 5.625ZM10.875 12.375H13.125V16.125H10.875V12.375ZM11.625 18.375V16.875H12.375V18.375H11.625ZM9.375 15.375H10.125V16.5C10.125 16.7074 10.2926 16.875 10.5 16.875H10.875V18.375H9.375V15.375ZM16.125 19.875H7.875V19.125H16.125V19.875ZM13.875 16.5V15.375H14.625V18.375H13.125V16.875H13.5C13.7074 16.875 13.875 16.7074 13.875 16.5ZM11.625 11.625V5.625H12.375V11.625H11.625ZM13.125 6.96975V5.625H14.4697L13.125 6.96975ZM7.875 4.875V4.125H16.125V4.875H7.875ZM18.75 1.125H21C21.207 1.125 21.375 1.29338 21.375 1.5V1.71975L20.3599 2.73488L20.8901 3.26512L21.375 2.78025V3.59475L20.3599 4.60988L20.8901 5.14012L21.375 4.65525V5.46975L20.3599 6.48487L20.8901 7.01513L21.375 6.53025V7.5C21.375 7.70662 21.207 7.875 21 7.875H18.75C18.543 7.875 18.375 7.70662 18.375 7.5V6.53025L18.8599 7.01513L19.3901 6.48487L18.375 5.46975V4.65525L18.8599 5.14012L19.3901 4.60988L18.375 3.59475V2.78025L18.8599 3.26512L19.3901 2.73488L18.375 1.71975V1.5C18.375 1.29338 18.543 1.125 18.75 1.125ZM16.875 5.625V3.375H17.625V5.625H16.875Z" fill="#E40C25"/> </svg> <p v-html="vehicleInfo.driveUnitTypeName" :title="vehicleInfo.driveUnitTypeName"></p> </div> <div v-if="!isUsed" class="tabs_content_first_char_box"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23.25 8.25H21C20.7926 8.25 20.625 8.41762 20.625 8.625V10.5H19.875V10.125C19.875 10.0252 19.8356 9.93 19.7651 9.85987L16.7651 6.85987C16.695 6.78937 16.5998 6.75 16.5 6.75H13.875V6H16.125C16.3324 6 16.5 5.83238 16.5 5.625V4.125C16.5 3.91763 16.3324 3.75 16.125 3.75H6.375C6.16762 3.75 6 3.91763 6 4.125V5.625C6 5.83238 6.16762 6 6.375 6H8.625V6.75H5.625C5.41762 6.75 5.25 6.91762 5.25 7.125V9.75H3.75C3.54262 9.75 3.375 9.91762 3.375 10.125V11.625H2.625V9.375C2.625 9.16762 2.45738 9 2.25 9H0.75C0.542625 9 0.375 9.16762 0.375 9.375V17.625C0.375 17.8324 0.542625 18 0.75 18H2.25C2.45738 18 2.625 17.8324 2.625 17.625V15.375H3.375V17.25C3.375 17.4574 3.54262 17.625 3.75 17.625H6.59475L9.10987 20.1401C9.18 20.2106 9.27525 20.25 9.375 20.25H19.5C19.7074 20.25 19.875 20.0824 19.875 19.875V17.25H20.625V19.125C20.625 19.3324 20.7926 19.5 21 19.5H23.25C23.4574 19.5 23.625 19.3324 23.625 19.125V8.625C23.625 8.41762 23.4574 8.25 23.25 8.25ZM1.875 17.25H1.125V9.75H1.875V11.625V12.375V14.625V15.375V17.25ZM2.625 14.625V12.375H3.375V14.625H2.625ZM6.75 4.5H15.75V5.25H6.75V4.5ZM9.375 6H13.125V6.75H9.375V6ZM19.125 19.5H9.53025L7.01513 16.9849C6.945 16.9144 6.84975 16.875 6.75 16.875H4.125V10.5H5.625C5.83238 10.5 6 10.3324 6 10.125V7.5H16.3447L19.125 10.2802V19.5ZM19.875 16.5V11.25H20.625V16.5H19.875ZM22.875 18.75H21.375V9H22.875V18.75Z" fill="#E40C25"/> <path d="M11.1048 15L10.5194 16.7565C10.4643 16.9215 10.5299 17.1026 10.678 17.1941C10.7392 17.2316 10.807 17.25 10.8753 17.25C10.972 17.25 11.0684 17.2125 11.1404 17.1401L14.5154 13.7651C14.6227 13.6579 14.6549 13.4966 14.5968 13.3564C14.539 13.2161 14.4018 13.125 14.2503 13.125H12.8155L14.5349 11.1187C14.6305 11.0077 14.6519 10.851 14.5908 10.7183C14.5297 10.5855 14.3969 10.5 14.2503 10.5H11.6253C11.4832 10.5 11.3534 10.5802 11.2897 10.7074L9.41466 14.4574C9.35653 14.5736 9.36253 14.7116 9.43116 14.8223C9.49978 14.9329 9.62016 15 9.75028 15H11.1048ZM11.857 11.25H13.435L11.7157 13.2562C11.62 13.3672 11.5987 13.524 11.6598 13.6567C11.7209 13.7895 11.8537 13.875 12.0003 13.875H13.345L11.7333 15.4868L11.9808 14.7439C12.0194 14.6295 11.9999 14.5035 11.9294 14.406C11.8589 14.3078 11.7457 14.25 11.6253 14.25H10.357L11.857 11.25Z" fill="#E40C25"/> <path d="M17.625 18H18.375V18.75H17.625V18Z" fill="#E40C25"/> <path d="M9.75 18H16.875V18.75H9.75V18Z" fill="#E40C25"/> </svg> <p v-html="enginePower + ' ' + vehicleInfo.enginePower + ' ' + ks" :title="enginePower + ' ' + vehicleInfo.enginePower + ' ' + ks"></p> </div> <div v-else class="tabs_content_first_char_box"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0019 3.10205C9.23347 3.10205 6.72307 4.22477 4.89955 6.03773C4.89163 6.04469 4.88156 6.04709 4.87411 6.05453C4.86668 6.06197 4.86428 6.07205 4.85732 6.07997C3.0446 7.90325 1.92188 10.4137 1.92188 13.1821C1.92188 15.6171 2.80147 17.9674 4.39963 19.8013C4.59403 20.0252 4.93099 20.0492 5.15539 19.8589L7.26187 18.0742C7.49299 17.8796 7.51819 17.5313 7.31803 17.305C6.31387 16.166 5.76139 14.7013 5.76139 13.1818C5.76139 9.74069 8.56051 6.94157 12.0016 6.94157C13.434 6.94157 14.8339 7.43933 15.942 8.34221C16.4932 8.79221 17.178 7.95677 16.624 7.50557C15.4636 6.55925 14.0308 5.99597 12.5416 5.88509V4.20917C17.2528 4.49093 21.0019 8.40173 21.0019 13.1821C21.0019 15.1748 20.3416 17.1056 19.1323 18.6742L17.8464 17.5899C18.8018 16.3244 19.3221 14.7795 19.3221 13.1821C19.3221 12.4719 19.2201 11.7687 19.019 11.0917C18.8131 10.4021 17.7823 10.7211 17.9839 11.3996C18.1548 11.9761 18.2419 12.5758 18.2419 13.1821C18.2419 14.7008 17.6899 16.1648 16.6872 17.3031C16.4882 17.528 16.5105 17.8762 16.744 18.073L18.8541 19.8526C19.0792 20.0432 19.4167 20.0165 19.6092 19.7943C21.2037 17.9619 22.0819 15.6135 22.0819 13.1821C22.0819 7.62389 17.56 3.10205 12.0019 3.10205ZM7.22827 7.64429L6.041 6.45725C7.50379 5.15909 9.38756 4.33325 11.4619 4.20917V5.88893C9.84979 6.00773 8.38315 6.64733 7.22827 7.64429ZM6.16027 17.5928L4.87627 18.6805C3.77395 17.2527 3.13244 15.524 3.0242 13.7221H4.70371C4.80739 15.1263 5.31163 16.4696 6.16027 17.5928ZM4.709 12.6421H3.02924C3.15332 10.5675 3.97916 8.68373 5.27732 7.22093L6.46459 8.40773C5.46739 9.56285 4.82756 11.0297 4.709 12.6421Z" fill="#E40C25"/> <path d="M13.2218 15.9306C13.7301 15.4215 17.9363 9.90609 18.4144 9.27897C18.784 8.79369 18.1843 8.16633 17.6853 8.50281C16.601 9.22497 11.1652 12.8552 10.6555 13.365C9.94818 14.0723 9.94818 15.2233 10.6555 15.9306C11.3613 16.6364 12.5128 16.6393 13.2218 15.9306ZM11.4189 14.1284C11.6551 13.8956 13.576 12.5725 15.5589 11.2309C14.0992 13.1279 12.6938 14.9307 12.4581 15.1669C11.771 15.8543 10.7315 14.8158 11.4189 14.1284Z" fill="#E40C25"/> <path d="M10.1415 18.852H13.8581C14.5729 18.852 14.5729 17.772 13.8581 17.772H10.1415C9.42679 17.772 9.42679 18.852 10.1415 18.852Z" fill="#E40C25"/> <path d="M16.544 19.8181H7.45401C6.73929 19.8181 6.73929 20.8981 7.45401 20.8981H16.544C17.2585 20.8981 17.2585 19.8181 16.544 19.8181Z" fill="#E40C25"/> </svg> <p v-html="vehicleInfo.mileage + ' км'" :title="vehicleInfo.mileage + ' км'"></p> </div> </div> <div class="tabs_content_features_wrapper"> <div class="tabs_content_features_box" v-for="option in vehicleOptions"> <svg width="14" height="10" viewbox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 3.45168L4.84199 8.67752M13 1L5.15801 9" stroke="#4CB30F" stroke-width="2" stroke-linecap="round"/> </svg> <p class="tabs_content_features-tem" v-html="option"></p> </div> </div> <a class="tabs_content_features-tem-all" href="#" v-if="vehicleInfo.optionsByEquipment?.count > 0" @click.prevent="clickFullOptions">{{ 'card_car.show_all_features'|trans({}, 'portal_base') }} </a> </div> </div> </div> <div class="tab-content tab-content-scroll"> <div class="accordion_tabs_change"> <div class="tabs_change-item"> <div class="tabs_change_ac_title" :class="{ 'active': expandIndexTechConfig == -1 }" @click.prevent="toggleExpandTechConfig(-1)"> <p class="tabs_change_ac_head">{{ 'cars.TTX'|trans({}, 'portal_base') }}</p> </div> <div class="tabs_change_ac_content" :style="expandIndexTechConfig == -1 ? 'display:block' : 'display:none'"> <div class="specifications__accordion__content__box"> <p class="accordion__content__box-left-text">{{ 'cars.engine'|trans({}, 'portal_base') }}</p> <span class="accordion__content__box-point"></span> <p class="accordion__content__box-right-text" v-html="vehicleInfo.engineVolume + ' л, ' + vehicleInfo.enginePower + ' ' + ks"></p> </div> <div class="specifications__accordion__content__box"> <p class="accordion__content__box-left-text">Тип КПП</p> <span class="accordion__content__box-point"></span> <p class="accordion__content__box-right-text" v-html="vehicleInfo.transmissionTypeName"></p> </div> <div class="specifications__accordion__content__box"> <p class="accordion__content__box-left-text">Тип приводу</p> <span class="accordion__content__box-point"></span> <p class="accordion__content__box-right-text" v-html="vehicleInfo.driveUnitTypeName"></p> </div> <div class="specifications__accordion__content__box"> <p class="accordion__content__box-left-text">{{ 'base.home.selection.fuel_type'|trans({}, 'portal_base') }}</p> <span class="accordion__content__box-point"></span> <p class="accordion__content__box-right-text" v-html="vehicleInfo.fuelTypeName"></p> </div> </div> </div> <div class="tabs_change-item" v-for="([key, configuration], index) in Object.entries(vehicleInfo?.characteristicsWithGroup || {})"> <div v-if="configuration?.characteristics.length > 0" @click.prevent="toggleExpandTechConfig(index)"> <div class="tabs_change_ac_title" :class="{ 'active': expandIndexTechConfig == index }"> <p class="tabs_change_ac_head" v-html="configuration.title"></p> </div> <div class="tabs_change_ac_content" :style="expandIndexTechConfig == index ? 'display:block' : 'display:none'" v-for="characteristic in configuration?.characteristics" :key="characteristic.id"> <div class="specifications__accordion__content__box"> <p class="accordion__content__box-left-text" v-html="characteristic.title"></p> <span class="accordion__content__box-point"></span> <p class="accordion__content__box-right-text" v-html="characteristic.value"></p> </div> </div> </div> </div> </div> </div> <div class="tab-content tab-content-scroll"> <div class="accordion_tabs_change"> {% verbatim %} <div class="tabs_change-item" v-for="([key, equipment], index) in Object.entries(vehicleInfo?.fullOptionsByEquipment || {})" :key="key"> <div v-if="equipment?.options?.length > 0" @click.prevent="toggleExpandСonfiguration(index)"> <div class="tabs_change_ac_title" :class="{ 'active': expandIndexСonfiguration == index }"> <button class="accordion-button tabs_change_ac_head" v-html="equipment.title" type="button"></button> </div> <div class="tabs_change_ac_content" :style="expandIndexСonfiguration == index ? 'display:block' : 'display:none'"> <div class="tabs_advantages_wrapper"> <div class="tabs_advantages_box" v-for="option in equipment?.options" :key="option"> <svg width="14" height="10" viewbox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 3.45168L4.84199 8.67752M13 1L5.15801 9" stroke="#4CB30F" stroke-width="2" stroke-linecap="round"/> </svg> <p class="tabs_advantages_item" v-html="option"></p> </div> </div> </div> </div> </div> {% endverbatim %} </div> </div> </div> </div> </div> {# typeCreditCal 1 && Step 1 #} <div class="calc_module_block_right" v-if="typeCreditCalc === 1 && step === 1"> <p class="module_block_right_title">{{ 'finance.credit.credit_our_proposal'|trans({}, 'portal_base') }}</p> <p class="module_block_right_sub-title">{{ 'finance.credit.credit_our_cond'|trans({}, 'portal_base') }}</p> {# <img class="module_block_right-shadow-car-img" src="{{ asset('bundles/portal/img/service/shadow-car.png') }}" alt=""> #} <div class="module_block_right-shadow-car-img shadow-car-img-bg"></div> </div> {# typeCreditCal 1 && Step 2 #} <div class="calc_module_block_right" v-if="typeCreditCalc === 1 && step === 2 && isNotEnoughDataForEstimate"> <div class="selected_car_head_wrapper"> <div class="selected_car_head_cover"> <p class="module_block_right_title module_block_right_title-last">{{ 'finance.credit.credit_our_proposal'|trans({}, 'portal_base') }}</p> <p class="module_block_right_sub-title module_block_right_sub-title-margin"> <svg width="20" height="20" viewbox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="modal_show_tooltip"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.99953 0C6.38053 0 7.63041 0.559381 8.53504 1.46401C9.43968 2.36959 10 3.61947 10 4.99953C10 6.38053 9.43968 7.63041 8.53504 8.53504C7.63041 9.43968 6.38053 10 4.99953 10C3.61947 10 2.36959 9.43968 1.46401 8.53504C0.559381 7.63041 0 6.38053 0 4.99953C0 3.61947 0.559381 2.36864 1.46401 1.46401C2.36864 0.559381 3.61947 0 4.99953 0ZM7.98321 2.01585C7.22007 1.25271 6.16451 0.780115 4.99953 0.780115C3.83454 0.780115 2.77993 1.25271 2.01585 2.01585C1.25271 2.77993 0.780115 3.83454 0.780115 4.99953C0.780115 6.16451 1.25271 7.22007 2.01585 7.98321C2.77993 8.74634 3.83454 9.21894 4.99953 9.21894C6.16451 9.21894 7.22007 8.74634 7.98321 7.98321C8.74634 7.22007 9.21894 6.16451 9.21894 4.99953C9.21894 3.83454 8.74634 2.77993 7.98321 2.01585ZM4.95614 3.1714C4.74106 3.1714 4.56655 2.99689 4.56655 2.78181C4.56655 2.5658 4.74106 2.39128 4.95614 2.39128H5.04292C5.25894 2.39128 5.43345 2.5658 5.43345 2.78181C5.43345 2.99689 5.25894 3.1714 5.04292 3.1714H4.95614ZM4.60617 4.0732C4.60617 3.85813 4.78068 3.68361 4.9967 3.68361C5.21177 3.68361 5.38628 3.85813 5.38628 4.0732V7.21819C5.38628 7.43326 5.21177 7.60872 4.9967 7.60872C4.78068 7.60872 4.60617 7.43326 4.60617 7.21819V4.0732Z" fill="#E40C25"></path> </svg> <span v-html="messageError"></span> </p> <div class="module_block_select_car_wrapper"> <div class="block_select_car_box"> <div class="block_select_car_box_content"> <div class="select_car_content_name_box"> <p class="module_block_right_sub-title" v-html="continue_first_least + formatToCurrency(needIncreaseSum)"></p> </div> </div> </div> </div> </div> </div> <div class="calc_module_btn_wrapper calc_module_btn_wrapper__width"> <button class="calc_module_btn calc_module_btn_select" @click="toggleIncreaseSumForFirstPayment">{{ 'finance.credit.credit_increase_first_payment_button'|trans({}, 'portal_base') }}</button> <button class="calc_module_btn calc_module_btn-white calc_module_btn_select" @click="showModalCallMe">{{ 'finance.credit.consult'|trans({}, 'portal_base') }}</button> </div> </div> <div class="calc_module_block_right" v-else-if="typeCreditCalc === 1 && step === 2"> <p class="module_block_right_title">{{ 'finance.credit.credit_our_proposal'|trans({}, 'portal_base') }}</p> <p class="module_block_right_sub-title">{{ 'finance.credit.credit_our_cond'|trans({}, 'portal_base') }}</p> <div class="module_block_select_car_wrapper"> <p class="module_block_select_title">{{ 'finance.credit.credit_select_auto'|trans({}, 'portal_base') }}:</p> <div class="block_select_car_box"> <img class="module_block_right-select-car-img" :src="vehicleInfo.image" alt=""> <div class="block_select_car_box_content"> <div class="select_car_content_name_box"> <p class="block_select_car_content_name" v-html="getFullNameForVehicle()"></p> <p class="block_select_car_content_price"> <span v-html="formatToCurrency(vehicleInfo.price)"></span> </p> </div> <button class="block_select_car_change" @click="setStep(1);scrollToStep();">{{ 'finance.credit.credit_change'|trans({}, 'portal_base') }}</button> </div> </div> </div> </div> {# typeCreditCal 2 && Step 1 #} <div class="calc_module_block_right" v-if="typeCreditCalc === 2 && step === 1"> <p class="module_block_right_title module_block_right_title-last">{{ 'finance.credit.credit_calc_auto_your_wallet'|trans({}, 'portal_base') }}</p> <p class="module_block_right_sub-title">{{ 'finance.credit.credit_select_next_auto'|trans({}, 'portal_base') }}</p> <div class="module_block_select_car_wrapper"> <div class="car_credit_select_wrapper"> <div class="car_credit_select_box" v-for="blurBlock in 3"> {# <img src="{{ asset('bundles/portal/img/service/shadow-car.jpg') }}" alt=""> #} <div class="shadow-car-img-bg shadow-car-img-bg-sm"></div> <div class="car_credit_select_info car_credit_select_box_blur"> <p class="car_credit_select_title">LAND ROVER DISCOVERY SPORT BASE</p> <p class="car_credit_select_tech">2.0 (163 к.с.) 2023</p> <div class="car_credit_select_price_wrapper"> <div class="car_credit_select_price_first"> <span class="price_first">1 233 340 грн</span> <p class="price_last">1 177 340 грн</p> </div> <p class="car_credit_select_price">82 458 {{ 'finance.credit.uah_month'|trans({}, 'portal_base') }}</p> <p class="car_credit_select_price">{{ 'finance.credit.select'|trans({}, 'portal_base') }}</p> </div> </div> </div> </div> </div> </div> {# typeCreditCal 2 && Step 2 #} <div class="calc_module_block_right" v-if="typeCreditCalc === 2 && step === 2"> <p class="module_block_right_title module_block_right_title-last">{{ 'base.home.selection.credit_leasing'|trans({}, 'portal_base') }}</p> <div class="module_block_select_car_wrapper"> <div class="calc_swap_money"> <div class="calc_swap_money-item" v-if="!options.unsetNewTypeVehicle" :class="{'active' : !isUsed}" @click="setTypeVehicle('new')"> <span>{{ 'base.new'|trans({}, 'portal_base') }}{% verbatim %} ({{vehiclesByWallet.notUsed.length}} авто){% endverbatim %}</span> </div> <div class="calc_swap_money-item" :class="{'active' : isUsed}" @click="setTypeVehicle('used')"> <span>{{ 'finance.credit.credit_old'|trans({}, 'portal_base') }}{% verbatim %} ({{vehiclesByWallet.used.length}} авто){% endverbatim %}</span> </div> </div> <div v-if="isUsed ? vehiclesByWallet.used.length > 0 : vehiclesByWallet.notUsed.length > 0" class="car_credit_select_wrapper"> <div class="car_credit_select_box car_credit_select_box_border" @click="selectVehicle(vehicle)" v-for="vehicle in (isUsed ? vehiclesByWallet.used : vehiclesByWallet.notUsed)"> <div class="image-car-container"> <img :src="vehicle.image" alt=""> <p v-if="vehicle?.has_in_stock" class="overlay-car-text">{{ 'finance.credit.in_salon'|trans({}, 'portal_base') }}</p> </div> <div class="car_credit_select_info"> <p class="car_credit_select_title" v-html="getFullNameForVehicle(vehicle.fullName, vehicle.equipmentTitle)"></p> <p class="car_credit_select_tech" v-html="vehicle.engineVolume + ' (' + vehicle.enginePower + ' ' + ks + ') ' + vehicle.year"></p> <div class="car_credit_select_price_wrapper"> <div class="car_credit_select_price_first"> <span class="price_first" v-if="vehicle?.hasActionPrice" v-html="formatToCurrency(vehicle.fullPrice)"></span> <p class="price_last" v-html="formatToCurrency(vehicle.price)"></p> </div> <p class="car_credit_select_price" v-html="formatToCurrency(vehicle.paymentPerMonth) + '/' + translate_month"></p> <div class="car_credit_select_price-btn">{{ 'finance.credit.select'|trans({}, 'portal_base') }}</div> </div> </div> </div> </div> <div v-else class="car_credit_select_wrapper"> <div class="selected_car_head_wrapper"> <div class="selected_car_head_cover"> <p class="module_block_right_sub-title module_block_right_sub-title-margin"> <svg width="20" height="20" viewbox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="modal_show_tooltip"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.99953 0C6.38053 0 7.63041 0.559381 8.53504 1.46401C9.43968 2.36959 10 3.61947 10 4.99953C10 6.38053 9.43968 7.63041 8.53504 8.53504C7.63041 9.43968 6.38053 10 4.99953 10C3.61947 10 2.36959 9.43968 1.46401 8.53504C0.559381 7.63041 0 6.38053 0 4.99953C0 3.61947 0.559381 2.36864 1.46401 1.46401C2.36864 0.559381 3.61947 0 4.99953 0ZM7.98321 2.01585C7.22007 1.25271 6.16451 0.780115 4.99953 0.780115C3.83454 0.780115 2.77993 1.25271 2.01585 2.01585C1.25271 2.77993 0.780115 3.83454 0.780115 4.99953C0.780115 6.16451 1.25271 7.22007 2.01585 7.98321C2.77993 8.74634 3.83454 9.21894 4.99953 9.21894C6.16451 9.21894 7.22007 8.74634 7.98321 7.98321C8.74634 7.22007 9.21894 6.16451 9.21894 4.99953C9.21894 3.83454 8.74634 2.77993 7.98321 2.01585ZM4.95614 3.1714C4.74106 3.1714 4.56655 2.99689 4.56655 2.78181C4.56655 2.5658 4.74106 2.39128 4.95614 2.39128H5.04292C5.25894 2.39128 5.43345 2.5658 5.43345 2.78181C5.43345 2.99689 5.25894 3.1714 5.04292 3.1714H4.95614ZM4.60617 4.0732C4.60617 3.85813 4.78068 3.68361 4.9967 3.68361C5.21177 3.68361 5.38628 3.85813 5.38628 4.0732V7.21819C5.38628 7.43326 5.21177 7.60872 4.9967 7.60872C4.78068 7.60872 4.60617 7.43326 4.60617 7.21819V4.0732Z" fill="#E40C25"></path> </svg> <span style="width: 100%">{{ 'finance.credit.credit_not_find'|trans({}, 'portal_base') }}</span> </p> <div class="module_block_select_car_wrapper"> <div class="block_select_car_box"> <div class="block_select_car_box_content"> <div class="select_car_content_name_box"> <p class="module_block_right_sub-title">{{ 'finance.credit.credit_try_again'|trans({}, 'portal_base') }}</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> {# typeCreditCal 1/2 && Step 3 #} <div class="calc_module_block_right" v-if="step === 3"> <p v-if="typeCreditCalc === 1" class="module_block_right_title module_block_right_title-last">{{ 'finance.credit.credit_our_proposal'|trans({}, 'portal_base') }}</p> <p v-else class="module_block_right_title module_block_right_title-last">{{ 'base.home.selection.credit_leasing'|trans({}, 'portal_base') }}</p> <div class="selected_car_head_wrapper"> <div class="selected_car_head_cover"> <div class="selected_car_head_box"> <div class="selected_car_head_box_head"> <div class="selected_car_box-title">{{ 'finance.credit.credit_select_auto'|trans({}, 'portal_base') }} <button class="block_select_car_change" @click.prevent="setStep(1);scrollToStep();">( {{ 'finance.credit.credit_change'|trans({}, 'portal_base')|lower }} )</button> :</div> </div> <div class="selected_car_head_box_info_wrapper"> <div class="selected_car_head_box_info"> <p class="head_box_info-name head_box_info-name-first" v-html="getFullNameForVehicle()"></p> <span class="head_box_info-price"> <span class="error_text_red" v-html="formatToCurrency(vehicleInfo.price)"></span> </span> </div> </div> </div> </div> <div class="selected_car_head_cover"> <div class="selected_car_head_box"> <div class="selected_car_head_box_head"> <p class="selected_car_box-title">{{ 'card_car.article.credit_calculation'|trans({}, 'portal_base') }} {{ 'card_car.article.from'|trans({}, 'portal_base') }} {% verbatim %}{{creditCalc.programElement?.bankName}}{% endverbatim %}*: </p> {% verbatim %} <span class="selected_car_box-price">{{ translate_under }} {{creditCalc.programElement?.percent}} %</span> {% endverbatim %} </div> <div class="selected_car_head_box_info_wrapper"> <div class="selected_car_head_box_info"> <p class="head_box_info-name">{{ 'card_car.article.monthly_payment'|trans({}, 'portal_base') }}</p> <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.monthPayment)"></span> </div> <div class="selected_car_head_box_info"> <p class="head_box_info-name">{{ 'finance.credit.term_credit'|trans({}, 'portal_base') }}</p> {% verbatim %} <span class="head_box_info-price">{{ showedTerm }} {{ translate_month }}</span> {% endverbatim %} </div> </div> </div> </div> <div class="selected_car_head_cover"> <div class="selected_car_head_box"> <div class="selected_car_head_box_head selected_car_head_box_head_bottom"> <div class="selected_car_head_box_head_box"> <p class="selected_car_box-title">{{ 'finance.credit.credit_once_payment_1'|trans({}, 'portal_base') }}</p> <p class="selected_car_box-title">{{ 'finance.credit.credit_once_payment_2'|trans({}, 'portal_base') }}:</p> </div> <span class="selected_car_box-price" v-html="formatToCurrency(showTotalPrice)"></span> </div> <div class="selected_car_head_box_info_wrapper"> <div class="selected_car_head_box_info"> <p class="head_box_info-name" v-html="translate_first_payment +', ' + showFirstPercent + '%'"></p> <span class="head_box_info-price" v-html="formatToCurrency(showFirstPrice)"></span> </div> <div class="selected_car_head_box_info"> {# <p class="head_box_info-name" v-html="'КАСКО, ' + creditCalc.cascoPercentName +'%' '<strong>(франшиза)</strong>'"></p> #} <p class="head_box_info-name" v-html="'КАСКО, ' + creditCalc.cascoPercentName + '% <strong>(франшиза)</strong>'"></p> <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.cascoPrice)"></span> </div> <div class="selected_car_head_box_info"> <p class="head_box_info-name">{{ 'card_car.article.time_commission'|trans({}, 'portal_base') }}</p> <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.onceComission)"></span> </div> <div class="selected_car_head_box_info"> <p v-if="isUsed" class="head_box_info-name">{{ 'card_car.article.used_registration'|trans({}, 'portal_base')|raw }}</p> <p v-else class="head_box_info-name info-name-short">{{ 'card_car.article.first_registration_strong'|trans({}, 'portal_base')|raw }}</p> <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.registrationMrev)"></span> </div> <div v-if="!isUsed && isIncludeNotaryPayment" class="selected_car_head_box_info box_info_notary_services"> <p class="head_box_info-name">{{ 'card_car.article.notary_services'|trans({}, 'portal_base') }}</p> <span class="head_box_info-price">5 000 грн</span> </div> </div> </div> </div> <p class="selected_car_head_text">* {{ 'card_car.article.current_agreement'|trans({}, 'portal_base') }}</p> </div> <div class="calc_module_btn_wrapper calc_module_btn_wrapper__width"> <button @click.prevent="sendLead" class="calc_module_btn calc_module_btn_select">{{ 'finance.credit.consult'|trans({}, 'portal_base') }}</button> <button class="calc_module_btn calc_module_btn-white calc_module_btn_select" @click.prevent="downloadSchedulePayment">{{ 'finance.credit.credit_download_payment'|trans({}, 'portal_base') }}</button> </div> </div> </div> <div class="modal fade modal__step__custom" id="increase-first-payment" tabindex="-1" role="dialog" aria-labelledby="increaseFirstPayLabel" aria-hidden="true"> <div class="modal-dialog modal__step__custom__dialog modal-dialog-centered" role="document"> <div class="modal-content modal__step__custom__content modal__step__custom-btn"> <div class="modal-header modal__step__custom__header"> <p class="modal-title modal__step__custom__title" id="increaseFirstPayLabel">{{ 'finance.credit.credit_increase_first_payment'|trans({}, 'portal_base')|capitalize }}</p> <button type="button" @click="toggleIncreaseSumForFirstPayment" class="close modal__step__custom__close" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body modal__step__custom__body"> <p class="modal__step__custom__text">{{ 'finance.credit.credit_increase_first_payment_want'|trans({}, 'portal_base') }}</p> <div class="modal__step__custom__input mb-5"> <formatted-input v-model="increaseSumForFirstPayment" :class="{'error_input' : formErrors.increaseSumForFirstPayment }" :min="needIncreaseSum" placeholder="{{ 'finance.credit.for_example'|trans({}, 'portal_base') }}, на 100 000 грн"></formatted-input> </div> </div> <div class="modal-footer modal__step__custom__footer mt-0 mb-4"> <button type="button" @click="increaseFirstPayment" :disabled="formErrors.increaseSumForFirstPayment" class="modal__step__custom__btn">{{ 'finance.credit.credit_change'|trans({}, 'portal_base') }}</button> </div> </div> </div> </div> <div class="modal fade modal__step__custom" id="application-created" tabindex="-1" role="dialog" aria-labelledby="applicationCreatedLabel" aria-hidden="true"> <div class="modal-dialog modal__step__custom__dialog modal-dialog-centered modal_dialog_two_header" role="document"> <div class="modal-content modal__step__custom__content modal__step__custom-btn modal_custom_two_header"> <div class="modal-header modal__step__custom__header"> <p class="modal-title modal__step__custom__title modal_custom_two_title" id="applicationCreatedLabel">{{ 'card_car.article.application_created'|trans({}, 'portal_base') }}</p> <button type="button" @click="toggleApplicationCreated" class="close modal__step__custom__close" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body modal__step__custom__body modal_custom_two_body"> <p class="modal__step__custom__text modal_step_custom_text_16">{{ 'card_car.article.contact_near_future'|trans({}, 'portal_base') }}</p> <p class="modal__step__custom__text modal_step_custom_text_16">{{ 'card_car.article.thank_you_choosing'|trans({}, 'portal_base') }}</p> </div> <div class="modal-footer modal__step__custom__footer modal_custom_two_btn mt-4 mb-4"> <a type="button" v-if="vehicleInfo?.href" :href="homePage + vehicleInfo?.href" class="calc_module_btn calc_module_btn_select link-like-a-button">{{ 'card_car.article.go_to_select_vehicle'|trans({}, 'portal_base') }}</a> <a type="button" :href="homePage" class="calc_module_btn calc_module_btn-white calc_module_btn_select link-like-a-button">{{ 'card_car.article.go_to_main_page'|trans({}, 'portal_base') }}</a> </div> </div> </div> </div> </div> </section> {# ========================================END======================================================= #} {# =======================================MODULE===================================================== #}</div><section class="plashka-add" id="in-compare-hint" style="display: none"> <div class="container"> <div class="row d-inline-block row text-center"> <span class="plashka-add-icon"></span> <span class="plashka-add-title">{{ 'favorite.added_favorit'|trans({}, 'portal_base') }}</span> <a href="{{ path('portal_comparison') }}">{{ 'favorite.go_favorite'|trans({}, 'portal_base') }} <span id="in-compare-footer-cnt">5</span> </a> </div> </div></section>