src/PortalBundle/Resources/views/Modules/credit-calc-car-card.html.twig line 1

Open in your IDE?
  1. <div id="creditCalc" v-show="isLoaded">
  3.     {# ============================MODULE========================== #}
  5.     <section class="calc_module">
  6.         <div id="preloader">
  7.             <p class="credit_sub_text">{{ 'finance.credit.calculate_loan_your'|trans({}, 'portal_base') }}</p>
  8.             <div class="calc_module_btn_head">
  9.                 <div>
  10.                     <template v-if="step > 1">
  11.                         <svg @click="backStep" class="module_btn_head_back" width="74" height="16" viewbox="0 0 74 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  12.                             <path d="M4.99997 7.99997C4.99997 8.12784 5.04884 8.25584 5.14647 8.35347L10.1465 13.3535C10.3418 13.5488 10.6582 13.5488 10.8535 13.3535C11.0487 13.1581 11.0488 12.8417 10.8535 12.6465L6.20697 7.99997L10.8535 3.35347C11.0488 3.15809 11.0488 2.84172 10.8535 2.64647C10.6581 2.45122 10.3417 2.45109 10.1465 2.64647L5.14647 7.64647C5.04884 7.74409 4.99997 7.87209 4.99997 7.99997Z" fill="#181716"/>
  13.                             <path d="M28.0297 13.5V2.3H29.3097V7.148H34.9417V2.3H36.2217V13.5H34.9417V8.364H29.3097V13.5H28.0297ZM41.5003 13.628C39.7723 13.628 38.5883 12.604 38.5883 11.116V11.084C38.5883 9.308 40.3003 8.38 43.6923 8.38H44.4443V7.804C44.4443 6.828 43.6603 6.236 42.3963 6.236H42.3643C41.4523 6.236 40.3483 6.572 39.5963 7.116L39.0043 6.14C40.0603 5.468 41.1963 5.036 42.4283 5.036H42.4603C44.3803 5.036 45.6283 6.092 45.6283 7.708V12.14C45.6283 12.588 45.7723 13.148 45.9163 13.5H44.7003C44.6043 13.26 44.5083 12.844 44.4763 12.476C43.6123 13.244 42.5563 13.628 41.5003 13.628ZM41.5163 12.444C42.7323 12.444 43.7723 11.916 44.4443 11.148V9.484H43.9323C41.0683 9.484 39.8043 9.996 39.8043 11.1V11.132C39.8043 11.916 40.4923 12.444 41.5163 12.444ZM51.3111 13.596C49.7431 13.596 48.2871 12.972 47.5671 11.708L48.5431 11.1C49.0551 11.948 49.8871 12.444 51.1191 12.444H51.2151C52.3671 12.444 53.1351 11.9 53.1351 11.164V11.084C53.1351 10.284 52.4631 9.804 51.3111 9.804H49.8871V8.716H51.3591C52.2231 8.716 52.7991 8.204 52.7991 7.516V7.436C52.7991 6.748 52.1591 6.252 51.1511 6.252H51.0711C49.9351 6.252 49.1671 6.732 48.7671 7.58L47.7271 6.972C48.3351 5.82 49.5351 5.084 51.0871 5.084H51.1991C52.7831 5.084 54.0311 5.98 54.0311 7.26V7.468C54.0311 8.14 53.6471 8.7 52.9591 9.132C53.8551 9.452 54.3831 10.3 54.3831 11.1V11.228C54.3831 12.588 53.1351 13.596 51.4551 13.596H51.3111ZM58.6253 13.628C56.8973 13.628 55.7133 12.604 55.7133 11.116V11.084C55.7133 9.308 57.4253 8.38 60.8173 8.38H61.5693V7.804C61.5693 6.828 60.7853 6.236 59.5213 6.236H59.4893C58.5773 6.236 57.4733 6.572 56.7213 7.116L56.1293 6.14C57.1853 5.468 58.3213 5.036 59.5533 5.036H59.5853C61.5053 5.036 62.7533 6.092 62.7533 7.708V12.14C62.7533 12.588 62.8973 13.148 63.0413 13.5H61.8253C61.7293 13.26 61.6333 12.844 61.6013 12.476C60.7373 13.244 59.6813 13.628 58.6253 13.628ZM58.6413 12.444C59.8573 12.444 60.8973 11.916 61.5693 11.148V9.484H61.0573C58.1933 9.484 56.9293 9.996 56.9293 11.1V11.132C56.9293 11.916 57.6173 12.444 58.6413 12.444ZM64.4041 15.548V12.38H65.0281C65.7481 11.996 66.1001 9.708 66.1001 5.18H72.0041V12.38H73.0921V15.548H71.9401V13.5H65.5561V15.548H64.4041ZM66.3401 12.38H70.8201V6.3H67.2521C67.2041 10.092 66.8521 12.028 66.3401 12.38Z" fill="#181716"/>
  14.                         </svg>
  15.                     </template>
  16.                 </div>
  17.                 <div class="module_btn_head_step">
  18.                     <template>
  19.                         <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">
  20.                             <g clip-path="url(#clip0_2128_9093)">
  21.                                 <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"/>
  22.                             </g>
  23.                             <defs>
  24.                                 <clipPath id="clip0_2128_9093">
  25.                                     <rect width="20" height="20" fill="white" transform="translate(20) rotate(90)"/>
  26.                                 </clipPath>
  27.                             </defs>
  28.                         </svg>
  29.                     </template>
  30.                     <span>{{ 'finance.credit.credit_step'|trans({}, 'portal_base') }}</span>
  31.                     <span v-html="step"></span>
  32.                     <span>{{ 'finance.credit.credit_of'|trans({}, 'portal_base') }}
  33.                         2</span>
  34.                 </div>
  35.             </div>
  37.             {# MAIN STEP 0 #}
  38.             <div class="calc_module_wrapper">
  39.                 <div v-if="step === 1" class="calc_module_block_left">
  40.                     <p class="module_block_left_title module_block_left_title-last">{{ 'finance.credit.credit_your_conditions'|trans({}, 'portal_base') }}</p>
  41.                     <div class="calc_swap_money">
  42.                         <div class="calc_swap_money-item calc_swap_money-item-mob" :class="{'active' : tabPay === 1}" @click="setTabPay(1)">
  43.                             <span>{{ 'finance.credit.credit_own_money_1'|trans({}, 'portal_base') }}</span>
  44.                             <span>{{ 'finance.credit.credit_own_money_2'|trans({}, 'portal_base') }}</span>
  45.                         </div>
  46.                         <div class="calc_swap_money-item calc_swap_money-item-mob" :class="{'active' : tabPay === 2}" @click="setTabPay(2)">
  47.                             <span>{{ 'finance.credit.credit_own_car_first_payment_1'|trans({}, 'portal_base') }}</span>
  48.                             <span>{{ 'finance.credit.credit_own_car_first_payment_2'|trans({}, 'portal_base') }}</span>
  49.                         </div>
  50.                     </div>
  51.                     <div class="calc_module_form_wrapper-step-2" v-if="tabPay === 1">
  52.                         <span v-if="messageError" v-html="messageError" :class="{ 'error_text_red': messageError }"></span>
  53.                         <div class="calc_module_form_wrapper">
  54.                             <select v-if="creditCalc.arrPercent" v-model="creditCalc.percent" @change="changePercent()" :class="{'error_input' : formErrors.percent }" class="calc_module_form_select">
  55.                                 <option value="null" disabled>{{ 'finance.credit.down_first_payment_uah'|trans({}, 'portal_base') }}</option>
  56.                                 <template v-for="item in creditCalc.arrPercent">
  57.                                     <option :value="item">
  58.                                         <span v-html="item"></span>% (<span v-html="formatToCurrency(getCreditPrice(item))"></span>)
  59.                                     </option>
  60.                                 </template>
  61.                             </select>
  62.                             <select v-model="creditCalc.term" @change="cancelAllError" :disabled="creditCalc.programToPercent === null" class="calc_module_form_select" :class="{'error_input' : formErrors.term }">
  63.                                 <option value="null" disabled>{{ 'finance.credit.term_months_short'|trans({}, 'portal_base') }}</option>
  64.                                 <template v-for="program,key in (creditCalc.percent ? creditCalc.arrPrograms[creditCalc.percent] : creditCalc.programToPercent)">
  65.                                     <option :value="key">
  66.                                         <span v-html="key + ' ' + translate_month"></span>
  67.                                     </option>
  68.                                 </template>
  69.                             </select>
  70.                         </div>
  72.                         <div class="calc_module_form_wrapper calc_module_form_wrapper-step-2 calc_step_two_top">
  73.                             <p class="calc_module_form-text">{{ 'form.contacts'|trans({}, 'portal_base') }}</p>
  74.                             <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(___)*">
  75.                             <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') }}">
  76.                         </div>
  77.                         <div class="checkboxes_rating_check">
  78.                             <label class="checkbox rating_check_b">
  79.                                 <input v-model="user.approveTerm" @change="cancelAllError" type="checkbox"/>
  80.                                 <div class="checkbox_rating_check" :class="{'error_input' : formErrors.approveTerm }"></div>
  81.                                 <div class="checkbox_rating_body">{{ 'finance.credit.credit_agree_to_collection'|trans({}, 'portal_base') }}
  82.                                     <a href="{{ privacyUrl }}" target="_blank">{{ 'finance.credit.credit_know_more'|trans({}, 'portal_base') }}</a>
  83.                                 </div>
  84.                             </label>
  85.                         </div>
  86.                     </div>
  87.                     <template v-if="tabPay === 2">
  88.                         <div v-if="!status.isNotHaveNumberVehicle" class="calc_module_form_wrapper calc_module_form_wrapper-step-2 calc_module_form_for_mob">
  89.                             <p class="calc_module_form-text">{{ 'finance.credit.credit_car_evaluation'|trans({}, 'portal_base') }}
  90.                             </p>
  91.                             <div class="search__number__form__wrapper">
  92.                                 <svg class="search__number-icon" width="35" height="58" viewbox="0 0 35 58" fill="none" xmlns="http://www.w3.org/2000/svg">
  93.                                     <path d="M0 6C0 2.68629 2.68629 0 6 0H35V58H6C2.68629 58 0 55.3137 0 52V6Z" fill="#0057B8"/>
  94.                                     <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"/>
  95.                                     <rect x="8" y="10" width="19" height="7" fill="#42ADDE"/>
  96.                                     <rect x="8" y="17" width="19" height="7" fill="#FFD800"/>
  97.                                 </svg>
  98.                                 <form class="search__number__form" id="vehicleNumberForEstimate">
  99.                                     <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)">
  100.                                 </form>
  101.                             </div>
  102.                             <button class="calc_module_form-not_search" @click="noHaveVehicleNumber">{{ 'finance.credit.credit_not_remember_auto_number'|trans({}, 'portal_base') }}</button>
  103.                         </div>
  104.                         <div v-show="status.isNotHaveNumberVehicle" class="calc_module_form_wrapper calc_module_form_wrapper-step-2 selected_car_head_wrapper transit_head_step">
  105.                             <div v-if="tradeInData.estimated.priceBuy !== 0 || isNeedIncreaseFirstPayment" class="selected_car_head_wrapper">
  106.                                 <p class="calc_module_form-text">{{ 'finance.credit.credit_first_payment_auto_price'|trans({}, 'portal_base') }}
  107.                                     <span v-if="isError" v-html="messageError" class="error_text_red"></span>
  108.                                     <span v-if="firstСontributionMore" class="error_text_red">{{ 'finance.credit.first_contribution_more'|trans({}, 'portal_base') }}</span>
  109.                                 </p>
  110.                                 <div class="calc_module_form_wrapper">
  111.                                     <div @click="toggleIncreaseSumForFirstPayment($event)" style="position: relative;" class="calc_module_form_select module_form_select_mobile_position tooltip-container" :class="{ 'error_text_red': isError, 'error_input' : formErrors.percent}">
  112.                                         {% verbatim %}
  113.                                             <span class="calc_module_form_select_text">{{ tradeInData.estimated.percentOfFirstPayment }}% ({{ formatToCurrency(tradeInData.estimated.priceBuy) }})</span>
  114.                                         {% endverbatim %}
  115.                                         <div class="push_to_input" @click.prevent="openTooltipInput($event)">
  116.                                             <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  117.                                                 <g clip-path="url(#clip0_2132_12524)">
  118.                                                     <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"/>
  119.                                                     <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"/>
  120.                                                     <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"/>
  121.                                                 </g>
  122.                                                 <defs>
  123.                                                     <clipPath id="clip0_2132_12524">
  124.                                                         <rect width="16" height="16" fill="white"/>
  125.                                                     </clipPath>
  126.                                                 </defs>
  127.                                             </svg>
  128.                                         </div>
  129.                                         <div class="form_select_tooltip">
  130.                                             <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>
  131.                                             <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>
  132.                                             <p v-else-if="isIncreaseFirstPayment" class="form_select_tooltip_text">{{ 'finance.credit.pre_estimate_plus_money'|trans({}, 'portal_base') }}</p>
  133.                                             <p v-else-if="firstСontributionMore" class="form_select_tooltip_text error_text_red" v-html="translate_max_first_payment + ' ' + formatToCurrency(maxFirstPayment) + '.' + ' ' + translate_change_sum"></p>
  134.                                             <p v-else class="form_select_tooltip_text" v-html="translate_pre_estimate_count_1 + ' ' + tradeInData.estimated.countItems + ' ' + translate_pre_estimate_count_2 "></p>
  135.                                             <button class="form_select_tooltip_close" @click.prevent="closeTooltipInput($event)">
  136.                                                 <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  137.                                                     <path d="M11 11L1 1M11 1L1 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
  138.                                                 </svg>
  139.                                             </button>
  140.                                         </div>
  141.                                     </div>
  142.                                     <select v-model="creditCalc.term" class="calc_module_form_select" :class="{'error_input' : formErrors.term }" @change="cancelAllError">
  143.                                         <template>
  144.                                             <option :value="null">
  145.                                                 <span v-html="translate_term_months_short"></span>
  146.                                             </option>
  147.                                         </template>
  148.                                         <template v-for="program,key in (tradeInData.estimated.percentOfFirstPayment >= 20 || tradeInData.estimated.percentOfFirstPayment <= 70 ? creditCalc.arrPrograms[tradeInData.estimated.percentOfFirstPaymentRounded] : creditCalc.programToPercent)">
  149.                                             <option :value="key">
  150.                                                 <span v-html="key + ' ' + translate_month"></span>
  151.                                             </option>
  152.                                         </template>
  153.                                     </select>
  154.                                     <div class="calc_module_select-link-box calc_module_select-link-btn-mobile">
  155.                                         <button class="calc_module_form-link-btn calc_module_select-link-btn-mobile" @click="toggleIncreaseSumForFirstPayment">
  156.                                             {{ 'finance.credit.credit_increase_first_payment'|trans({}, 'portal_base') }}
  157.                                         </button>
  158.                                         <span class="error_text_red" v-if="isNeedIncreaseFirstPayment || minFirstPayment > tradeInData.estimated.priceBuy" v-html="'(' + translate_min + ' на ' + formatToCurrency(needIncreaseSum) + ')'" :class="{ 'error_text_red': messageError }"></span>
  159.                                     </div>
  160.                                 </div>
  162.                                 <div class="calc_module_form_wrapper calc_module_form_wrapper-step-2">
  163.                                     <p class="calc_module_form-text">{{ 'form.contacts'|trans({}, 'portal_base') }}</p>
  164.                                     <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(___)*">
  165.                                     <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') }}">
  166.                                 </div>
  167.                                 <div class="checkboxes_rating_check">
  168.                                     <label class="checkbox rating_check_b">
  169.                                         <input type="checkbox" v-model="user.approveTerm" @change="cancelAllError"/>
  170.                                         <div class="checkbox_rating_check" :class="{'error_input' : formErrors.approveTerm }"></div>
  171.                                         <div class="checkbox_rating_body">{{ 'finance.credit.credit_agree_to_collection'|trans({}, 'portal_base') }}
  172.                                             <a href="{{ privacyUrl }}" target="_blank">{{ 'finance.credit.credit_more_condition'|trans({}, 'portal_base') }}</a>
  173.                                         </div>
  174.                                     </label>
  175.                                 </div>
  176.                             </div>
  177.                             <div v-show="tradeInData.estimated.priceBuy === 0 && !tradeInData.estimated.isWasRequest" class="calc_module_form_wrapper calc_module_gap_two">
  178.                                 <p class="calc_module_form-text calc_module_form-text-mb">{{ 'finance.credit.credit_car_estimate'|trans({}, 'portal_base') }}</p>
  179.                                 <select id="brand-ria" class="calc_module_form_select" v-model="tradeInData.brand" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.brand }"></select>
  180.                                 <select id="model-ria" class="calc_module_form_select" v-model="tradeInData.model" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.model }"></select>
  181.                                 <select id="fuel" class="calc_module_form_select" v-model="tradeInData.fuel" data-live-search="true" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.fuel }">
  182.                                     <option :value="null" disabled>{{ 'trade_in.fuel'|trans({}, 'dc_base') }}*
  183.                                     </option>
  184.                                     {% verbatim %}
  185.                                         <option v-if="fuel.id < 7" :value="fuel.id" v-for="fuel in tradeInData.fuels">{{ fuel.title }}</option>
  186.                                     {% endverbatim %}
  187.                                 </select>
  189.                                 <select id="mileage" class="calc_module_form_select" v-model="tradeInData.mileage" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.mileage }">
  190.                                     <option :value="null" disabled>{{ 'trade_in.yardage'|trans({}, 'dc_base') }}*
  191.                                     </option>
  192.                                     {% verbatim %}
  193.                                         <option :value="item.id" v-for="item in tradeInData.mileages">{{ item.title }}</option>
  194.                                     {% endverbatim %}
  195.                                 </select>
  197.                                 <select class="calc_module_form_select" v-model="tradeInData.year" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.year }">
  198.                                     <option :value="null" disabled>
  199.                                         {{ 'form.year'|trans({}, 'dc_base') }}*
  200.                                     </option>
  201.                                     {% verbatim %}
  202.                                         <option :value="year" v-for="year in tradeInData.years">{{ year }}</option>
  203.                                     {% endverbatim %}
  204.                                 </select>
  206.                                 <select class="calc_module_form_select" v-model="tradeInData.transmission" @change="cancelAllError" :class="{'error_input' : formErrors.tradeIn.transmission }">
  207.                                     <option :value="null" disabled>
  208.                                         {{ 'trade_in.trans'|trans({}, 'dc_base') }}
  209.                                     </option>
  210.                                     {% verbatim %}
  211.                                         <option v-if="transmission.id < 3" :value="transmission.id" v-for="transmission in tradeInData.transmissions">{{ transmission.title }}</option>
  212.                                     {% endverbatim %}
  213.                                 </select>
  214.                             </div>
  215.                         </div>
  216.                     </template>
  217.                     <button v-if="tabPay === 2 && !status.isNotHaveNumberVehicle" class="calc_module_btn" @click="tradeInEstimate">
  218.                         {{ 'leads.estimate'|trans({}, 'portal_base')|capitalize }}
  219.                     </button>
  220.                     <button v-else-if="tabPay === 2 && status.isNotHaveNumberVehicle && !tradeInData.estimated.isWasRequest" class="calc_module_btn" @click="tradeInEstimate">
  221.                         {{ 'leads.estimate'|trans({}, 'portal_base')|capitalize }}
  222.                     </button>
  223.                     <button v-else class="calc_module_btn" @click="onButtonClick2" :disabled="isDisabledCalcButton">{{ 'finance.credit.credit_calc'|trans({}, 'portal_base') }}</button>
  224.                 </div>
  226.                 {# typeCreditCal 1 && Step 2 #}
  227.                 <div class="calc_module_block_right" v-if="step === 2">
  228.                     <p class="module_block_right_title module_block_right_title-last">{{ 'finance.credit.credit_our_proposal'|trans({}, 'portal_base') }}</p>
  229.                     <div class="selected_car_head_wrapper">
  230.                         <div class="selected_car_head_cover">
  231.                             <div class="selected_car_head_box">
  232.                                 <div class="selected_car_head_box_head">
  233.                                     <div
  234.                                         class="selected_car_box_hed">
  235.                                         {# <div class="selected_car_box-title">{{ 'finance.credit.credit_select_auto'|trans({}, 'portal_base') }}
  236.                                                                                                     </div> #}
  237.                                         <p class="head_box_info-name head_box_info-name-first" v-html="getFullNameForVehicle()"></p>
  238.                                     </div>
  240.                                     <div class="selected_car_head_box_info_wrapper">
  241.                                         <div class="selected_car_head_box_info">
  243.                                             <span class="head_box_info-price">
  244.                                                 <span class="error_text_red" v-html="formatToCurrency(vehicleInfo.price)"></span>
  245.                                             </span>
  246.                                         </div>
  248.                                     </div>
  249.                                 </div>
  250.                             </div>
  252.                             <div class="selected_car_head_cover">
  253.                                 <div class="selected_car_head_box">
  254.                                     <div class="selected_car_head_box_head">
  255.                                         <p class="selected_car_box-title">{{ 'card_car.article.credit_calculation'|trans({}, 'portal_base') }}
  256.                                             {{ 'card_car.article.from'|trans({}, 'portal_base') }}
  257.                                             {% verbatim %}
  258.                                                 {{creditCalc.programElement?.bankName}}
  259.                                             {% endverbatim %}
  260.                                             *:
  261.                                         </p>
  262.                                         {% verbatim %}
  263.                                             <span class="selected_car_box-price">{{ translate_under }}
  264.                                                 {{creditCalc.programElement?.percent}}
  265.                                                 %</span>
  266.                                         {% endverbatim %}
  267.                                     </div>
  268.                                     <div class="selected_car_head_box_info_wrapper">
  269.                                         <div class="selected_car_head_box_info">
  270.                                             <p class="head_box_info-name">{{ 'card_car.article.monthly_payment'|trans({}, 'portal_base') }}</p>
  271.                                             <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.monthPayment)"></span>
  272.                                         </div>
  273.                                         <div class="selected_car_head_box_info">
  274.                                             <p class="head_box_info-name">{{ 'finance.credit.term_credit'|trans({}, 'portal_base') }}</p>
  275.                                             {% verbatim %}
  276.                                                 <span class="head_box_info-price">{{ showedTerm }}
  277.                                                     {{ translate_month }}</span>
  278.                                             {% endverbatim %}
  279.                                         </div>
  280.                                     </div>
  281.                                 </div>
  282.                             </div>
  284.                             <div class="selected_car_head_cover">
  285.                                 <div class="selected_car_head_box">
  286.                                     <div class="selected_car_head_box_head selected_car_head_box_head_bottom">
  287.                                         <div class="selected_car_head_box_head_box">
  288.                                             <p class="selected_car_box-title">{{ 'finance.credit.credit_once_payment_1'|trans({}, 'portal_base') }}</p>
  289.                                             <p class="selected_car_box-title">{{ 'finance.credit.credit_once_payment_2'|trans({}, 'portal_base') }}
  290.                                                 :</p>
  291.                                         </div>
  292.                                         <span class="selected_car_box-price" v-html="formatToCurrency(showTotalPrice)"></span>
  293.                                     </div>
  295.                                     <div class="selected_car_head_box_info_wrapper">
  296.                                         <div class="selected_car_head_box_info">
  297.                                             <p class="head_box_info-name" v-html="translate_first_payment +', ' + showFirstPercent + '%'"></p>
  298.                                             <span class="head_box_info-price" v-html="formatToCurrency(showFirstPrice)"></span>
  299.                                         </div>
  300.                                         <div
  301.                                             class="selected_car_head_box_info">
  302.                                             {# <p class="head_box_info-name" v-html="'КАСКО, ' + creditCalc.cascoPercentName +'%' '<strong>(франшиза)</strong>'"></p> #}
  303.                                             <p class="head_box_info-name" v-html="'КАСКО, ' + creditCalc.cascoPercentName + '% <strong>(франшиза)</strong>'"></p>
  304.                                             <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.cascoPrice)"></span>
  305.                                         </div>
  306.                                         <div class="selected_car_head_box_info">
  307.                                             <p class="head_box_info-name">{{ 'card_car.article.time_commission'|trans({}, 'portal_base') }}</p>
  308.                                             <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.onceComission)"></span>
  309.                                         </div>
  310.                                         <div class="selected_car_head_box_info">
  311.                                             <p v-if="isUsed" class="head_box_info-name">{{ 'card_car.article.used_registration'|trans({}, 'portal_base')|raw }}</p>
  312.                                             <p v-else class="head_box_info-name info-name-short">{{ 'card_car.article.first_registration_strong'|trans({}, 'portal_base')|raw }}</p>
  313.                                             <span class="head_box_info-price" v-html="formatToCurrency(creditCalc.registrationMrev)"></span>
  314.                                         </div>
  315.                                         <div v-if="!isUsed" class="selected_car_head_box_info">
  316.                                             <p class="head_box_info-name">{{ 'card_car.article.notary_services'|trans({}, 'portal_base') }}</p>
  317.                                             <span class="head_box_info-price">5 000 грн</span>
  318.                                         </div>
  319.                                     </div>
  320.                                 </div>
  321.                             </div>
  323.                             <p class="selected_car_head_text">
  324.                                 *
  325.                                 {{ 'card_car.article.current_agreement'|trans({}, 'portal_base') }}</p>
  326.                         </div>
  327.                         <div class="calc_module_btn_wrapper calc_module_btn_wrapper__width">
  328.                             <button @click.prevent="sendLead" class="calc_module_btn calc_module_btn_select">{{ 'finance.credit.consult'|trans({}, 'portal_base') }}</button>
  329.                             <button class="calc_module_btn calc_module_btn-white calc_module_btn_select credit_down_paym_btn" @click.prevent="downloadSchedulePayment">
  330.                                 <svg width="21" height="20" viewbox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  331.                                     <path d="M20.5 15.9192V7.44263C20.4991 6.61411 20.1695 5.8198 19.5837 5.23396C18.9978 4.64811 18.2035 4.31857 17.375 4.31763H13.9961C13.8303 4.31763 13.6714 4.38347 13.5542 4.50068C13.4369 4.6179 13.3711 4.77687 13.3711 4.94263C13.3711 5.10839 13.4369 5.26736 13.5542 5.38457C13.6714 5.50178 13.8303 5.56763 13.9961 5.56763H17.375C17.8721 5.56818 18.3487 5.76591 18.7002 6.11742C19.0517 6.46893 19.2494 6.94552 19.25 7.44263V15.9192C19.2494 16.4163 19.0517 16.8929 18.7002 17.2444C18.3487 17.5959 17.8721 17.7936 17.375 17.7942H3.625C3.12789 17.7936 2.6513 17.5959 2.29979 17.2444C1.94828 16.8929 1.75056 16.4163 1.75 15.9192V7.44263C1.75056 6.94552 1.94828 6.46893 2.29979 6.11742C2.6513 5.76591 3.12789 5.56818 3.625 5.56763H7.24008C7.40584 5.56763 7.56481 5.50178 7.68202 5.38457C7.79923 5.26736 7.86508 5.10839 7.86508 4.94263C7.86508 4.77687 7.79923 4.6179 7.68202 4.50068C7.56481 4.38347 7.40584 4.31763 7.24008 4.31763H3.625C2.79649 4.31857 2.00218 4.64811 1.41633 5.23396C0.830483 5.8198 0.500941 6.61411 0.5 7.44263V15.9192C0.500931 16.7477 0.830469 17.542 1.41632 18.1279C2.00217 18.7137 2.79648 19.0433 3.625 19.0442H17.375C18.2035 19.0433 18.9978 18.7137 19.5837 18.1279C20.1695 17.542 20.4991 16.7477 20.5 15.9192ZM13.9729 8.89071C14.098 8.9995 14.1747 9.1535 14.1862 9.31886C14.1977 9.48421 14.1431 9.64736 14.0343 9.77243L10.9716 13.2936C10.9129 13.361 10.8404 13.4151 10.7591 13.4522C10.6777 13.4892 10.5894 13.5084 10.5 13.5084C10.4106 13.5084 10.3223 13.4892 10.2409 13.4522C10.1596 13.4151 10.0871 13.361 10.0284 13.2936L6.96566 9.77235C6.85773 9.64717 6.80378 9.48432 6.81562 9.31945C6.82746 9.15458 6.90413 9.00112 7.02885 8.89264C7.15357 8.78416 7.31619 8.72951 7.4811 8.74065C7.64602 8.75178 7.79982 8.82779 7.90883 8.95204L9.875 11.2125V1.58099C9.875 1.41522 9.94085 1.25625 10.0581 1.13904C10.1753 1.02183 10.3342 0.955986 10.5 0.955986C10.6658 0.955986 10.8247 1.02183 10.9419 1.13904C11.0592 1.25625 11.125 1.41522 11.125 1.58099V11.2125L13.0912 8.95204C13.145 8.89011 13.2106 8.8394 13.284 8.80279C13.3575 8.76619 13.4375 8.74442 13.5193 8.73872C13.6012 8.73301 13.6834 8.74349 13.7612 8.76956C13.8391 8.79563 13.911 8.83677 13.9729 8.89063V8.89071Z" fill="#E40C25"/>
  332.                                 </svg>
  333.                                 <span>
  334.                                     {{ 'finance.credit.credit_down_paym'|trans({}, 'portal_base') }}
  335.                                 </span>
  336.                             </button>
  337.                         </div>
  338.                     </div>
  339.                 </div>
  341.                 <div class="modal fade modal__step__custom" id="increase-first-payment" tabindex="-1" role="dialog" aria-labelledby="increaseFirstPayLabel" aria-hidden="true">
  342.                     <div class="modal-dialog modal__step__custom__dialog modal-dialog-centered" role="document">
  343.                         <div class="modal-content modal__step__custom__content modal__step__custom-btn">
  344.                             <div class="modal-header modal__step__custom__header">
  345.                                 <p class="modal-title modal__step__custom__title" id="increaseFirstPayLabel">{{ 'finance.credit.credit_increase_first_payment'|trans({}, 'portal_base')|capitalize }}</p>
  346.                                 <button type="button" @click="toggleIncreaseSumForFirstPayment" class="close modal__step__custom__close" aria-label="Close">
  347.                                     <span aria-hidden="true">&times;</span>
  348.                                 </button>
  349.                             </div>
  350.                             <div class="modal-body modal__step__custom__body">
  351.                                 <p class="modal__step__custom__text">{{ 'finance.credit.credit_increase_first_payment_want'|trans({}, 'portal_base') }}</p>
  352.                                 <div class="modal__step__custom__input mb-5">
  353.                                     <formatted-input v-model="increaseSumForFirstPayment" :class="{'error_input' : formErrors.increaseSumForFirstPayment }" :min="needIncreaseSum" placeholder="{{ 'finance.credit.for_example'|trans({}, 'portal_base') }}, на 100 000 грн"></formatted-input>
  354.                                 </div>
  355.                             </div>
  356.                             <div class="modal-footer modal__step__custom__footer mt-0 mb-4">
  357.                                 <button type="button" @click="increaseFirstPayment" :disabled="formErrors.increaseSumForFirstPayment" class="modal__step__custom__btn">{{ 'finance.credit.credit_change'|trans({}, 'portal_base') }}</button>
  358.                             </div>
  359.                         </div>
  360.                     </div>
  361.                 </div>
  363.                 <div class="modal fade modal__step__custom" id="application-created" tabindex="-1" role="dialog" aria-labelledby="applicationCreatedLabel" aria-hidden="true">
  364.                     <div class="modal-dialog modal__step__custom__dialog modal-dialog-centered modal_dialog_two_header" role="document">
  365.                         <div class="modal-content modal__step__custom__content modal__step__custom-btn modal_custom_two_header">
  366.                             <div class="modal-header modal__step__custom__header">
  367.                                 <p class="modal-title modal__step__custom__title modal_custom_two_title" id="applicationCreatedLabel">{{ 'card_car.article.application_created'|trans({}, 'portal_base') }}</p>
  368.                                 <button type="button" @click="toggleApplicationCreated" class="close modal__step__custom__close" aria-label="Close">
  369.                                     <span aria-hidden="true">&times;</span>
  370.                                 </button>
  371.                             </div>
  372.                             <div class="modal-body modal__step__custom__body modal_custom_two_body">
  373.                                 <p class="modal__step__custom__text modal_step_custom_text_16">{{ 'card_car.article.contact_near_future'|trans({}, 'portal_base') }}</p>
  374.                                 <p class="modal__step__custom__text modal_step_custom_text_16">{{ 'card_car.article.thank_you_choosing'|trans({}, 'portal_base') }}</p>
  375.                             </div>
  376.                             <div class="modal-footer modal__step__custom__footer modal_custom_two_btn mt-4 mb-4">
  377.                                 <a type="button" :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>
  378.                                 <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>
  379.                             </div>
  380.                         </div>
  381.                     </div>
  382.                 </div>
  383.             </div>
  384.         </div>
  385.     </section>
  387.     {# ========================================END======================================================= #}
  388.     {# =======================================MODULE===================================================== #}
  389. </div>