src/DcSiteBundle/Resources/views/Modules/insurance.html.twig line 1

Open in your IDE?
  1. <section class="insurance-page-calc landing-padding bg-grey" id="calculator">
  2.     <div class="container">
  3.         <div class="row ">
  4.             <div class="col-md-12">
  5.                 <div class="sticky-top insurance-calc-head" v-if="showAmount">
  6.                     <div class="container">
  7.                         <div class="row justify-content-center">
  8.                             <div class="{% if bigSize is defined and bigSize %}col-md-6{% else %}col-md-4{% endif %}">
  9.                                 <div class="form__title">{{ 'pages.insurance.selected_config'|trans({}, 'dc_subaru') }}</div>
  10.                                 <div class="box__price form__config-price">
  11.                                     <span><b>{{ 'pages.insurance.kasko_price'|trans({}, 'dc_subaru') }}:</b></span>
  12.                                     <span><b class="configPricInsurance main-color"> {% verbatim %}{{ amount.toLocaleString() }}{% endverbatim %} грн *</b></span>
  13.                                 </div>
  14.                             </div>
  15.                             <div class="{% if bigSize is defined and bigSize %}col-md-6{% else %}col-md-4{% endif %}">
  16.                                 <a href="#" data-bs-toggle="modal" data-toggle="modal" data-bs-target="#modalFullInsuranceOrder" data-target="#modalFullInsuranceOrder" class="btn btn-primary btn-blue float-right">{{ 'pages.insurance.get_consult'|trans({}, 'dc_subaru') }}</a>
  17.                             </div>
  18.                         </div>
  19.                     </div>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </div>
  24.     <div class="container">
  25.         <div class="row justify-content-center forms">
  26.             <div class="{% if bigSize is defined and bigSize %}col-md-12{% else %}col-md-8{% endif %}">
  27.                 <section id="ins-calc" class="credit-calc-page">
  28.                     <div class="col-md-12 overfl-custom" v-if="brands && !brand">
  29.                         <div class="calculation_module-title">{{ 'finance.insurance.choose_brand'|trans({}, 'portal_base') }}:</div>
  30.                     </div>
  31.                     <div class="col-md-12" v-if="brands && !brand">
  32.                         <div class="row row-calculation_module mobile-scroll">
  33.                             <div class="col-md-2 calculation_module-col calculation_module-brand" v-for="brandItem in brands" v-on:click="setBrand(brandItem,brandItem.dealerId)">
  34.                                 <div class="calculation_module-style" :class="brand && brand.id == brandItem.id ? 'active' : ''">
  35.                                     <div class="calculation_module-item-img">
  36.                                         <img :src="brandItem.image" :alt="brandItem.name">
  37.                                     </div>
  38.                                     <div class="calculation_module-info" v-if="brandItem.dealers">
  39.                                         <div class="calculation_module-info-head">
  40.                                             <div class="calculation_module-title mb-2"><span class="dealer-active" v-html="brandItem.name"></span>Оберіть дилера</div>
  41.                                         </div>
  42.                                         <div v-on:click.stop.prevent="setBrand(brandItem,dealer.id)" class="calculation_module-info-brand" v-for="dealer in brandItem.dealers">
  43.                                             <span class="calculation_module-info-brand-name" v-html="dealer.title"></span>
  44.                                             <span class="calculation_module-info-brand-addr" v-html="dealer.adres"></span>
  45.                                         </div>
  46.                                     </div>
  47.                                 </div>
  48.                             </div>
  49.                         </div>
  50.                     </div>
  51.                     <div class="col-md-12" v-if="dealer && cars">
  52.                         <div class="row">
  53.                             <div class="col-md-12 overfl-custom">
  54.                                 <div class="calculation_module-title">Модель:
  55.                                     <span :class="options.disableCarChange !== true ? 'calculation_module-title-selected' : ''" v-on:click="setBrand(null)" v-if="brand" v-html="brand.name"></span>
  56.                                     <span class="" v-if="equipment"> </span>
  57.                                     <span :class="options.disableCarChange !== true ? 'calculation_module-title-selected' : ''" v-on:click="setCar(null)" v-if="selectCar" v-html="selectCar.carName"></span>
  58.                                     <span class="" v-if="equipment">,</span>
  59.                                     <span class="calculation_module-title-selected" v-on:click="setEquipment(null)" v-if="equipment" v-html="equipment.title"></span>
  60.                                     <span class="" v-if="variation && !selectCar.isUsed">,</span>
  61.                                     <span class="calculation_module-title-selected" v-on:click="variation = null" v-if="variation  && !selectCar.isUsed">{% verbatim %}{{ variation.price.toLocaleString() }}{% endverbatim %} грн</span>
  62.                                 </div>
  63.                             </div>
  64.                         </div>
  65.                     </div>
  66.                     <div class="col-md-12" v-if="cars && group && !selectCar">
  67.                         <div class="menu-select-car swappy-radios mobile-scroll" role="radiogroup" v-if="Object.keys(cars).length > 1">
  68.                             <label v-for="groupItem in cars">
  69.                                 <input type="radio" v-model="group" :value="groupItem.id" name="group" />
  70.                                 <span v-html="groupItem.title"></span>
  71.                             </label>
  72.                         </div>
  73.                         <div class="row row-calculation_module row-calculation_module--cars mobile-scroll">
  74.                             <div class="col-md-3 calculation_module-col" v-for="carItem in cars[group].cars" v-on:click="setCar(carItem, true)">
  75.                                 <div class="calculation_module-style" :class="car && car.id == carItem.id ? 'active' : ''">
  76.                                     <div class="calculation_module-item-img">
  77.                                         <picture :alt="carItem.carName">
  78.                                             <source :srcset="carItem.image_webp" type="image/webp">
  79.                                             <source :srcset="carItem.image">
  80.                                             <img :src="carItem.image" :alt="carItem.carName" class="w-100" style="visibility: visible">
  81.                                         </picture>
  82.                                     </div>
  83.                                     <span class="calculation_module-item-name" v-html="carItem.carName"></span>
  84.                                     <span class="calculation_module-item-price"><span v-if="!carItem.isUsed">{{ 'credit.from'|trans({}, 'dc_landrover') }}</span> {% verbatim %}{{ carItem.priceFrom.toLocaleString() }}{% endverbatim %} {{ 'modules.uah'|trans({}, 'dc_base') }}</span>
  85.                                 </div>
  86.                             </div>
  87.                         </div>
  88.                     </div>
  89.                     <div class="col-md-12" >
  90.                         <div v-if="equipments && !equipment && !price">
  91.                             <span class="calculation_module-title">{{ 'credit.equipment'|trans({}, 'dc_base') }}</span>
  92.                             <div class="row row-calculation_module mobile-scroll">
  93.                                 <div class="col-md-3 calculation_module-col" :class="equipment && equipment.id == equipmentItem.id ? 'active' : ''"  v-on:click="setEquipment(equipmentItem)" v-for="equipmentItem in equipments">
  94.                                     <div class="calculation_module-style ">
  95.                                         <span class="calculation_module-item-name" v-html="equipmentItem.title"></span>
  96.                                         <span class="calculation_module-item-price">{{ 'credit.from'|trans({}, 'dc_landrover') }} {% verbatim %}{{ equipmentItem.priceFrom.toLocaleString() }}{% endverbatim %} {{ 'modules.uah'|trans({}, 'dc_base') }}</span>
  97.                                     </div>
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  101.                         <div v-if="variations && !variation">
  102.                             <span class="calculation_module-title">{{ 'credit.midification'|trans({}, 'dc_base') }}</span>
  103.                             <div class="row row-calculation_module mobile-scroll">
  104.                                 <div class="col-md-3 calculation_module-col" v-on:click="setVariation(varItem)" v-for="varItem in variations">
  105.                                     <div class="calculation_module-style">
  106.                                         <span class="calculation_module-modif-name" v-html="varItem.fuel"></span>
  107.                                         <span class="calculation_module-comlect-desc" v-html="varItem.body"></span>
  108.                                         <span class="calculation_module-comlect-desc"  v-html="varItem.drive"></span>
  109.                                         <span class="calculation_module-comlect-desc" v-html="varItem.transmission"></span>
  110.                                         <span class="calculation_module-modif-price">{% verbatim %}{{ varItem.price.toLocaleString() }}{% endverbatim %} грн</span>
  111.                                     </div>
  112.                                 </div>
  113.                             </div>
  114.                         </div>
  115.                     </div>
  116.                     <div class="insurance-calc" v-if="price">
  117.                         <div class="row">
  118.                             <div class="col-md-12">
  119.                                 <div class="form insurance">
  120.                                     <div class="form__label pt-0">
  121.                                         {{ 'pages.insurance.select_base_price'|trans({}, 'dc_subaru') }}:
  122.                                     </div>
  123.                                     <div class=" d-flex form__radio-box mobile-scroll">
  124.                                         {% verbatim %}
  125.                                         <span class="mr-0" v-for="(item,index) in baseCoefficients">
  126.                                             <input :id="'base-i-'+index" v-on:change="changeOptions" hidden="" v-model="selectOptions.baseCoefficient" type="radio" :value="item.params.coefficient">
  127.                                             <label class="form-control" :for="'base-i-'+index"> {{item.params.franchise}} % </label>
  128.                                         </span>
  129.                                         {% endverbatim %}
  130.                                     </div>
  131.                                     <div class="form__options">
  132.                                         {% verbatim %}
  133.                                             <span v-for="(item,index) in optionCoefficients">
  134.                                                 <input type="checkbox" :id="'option-i-'+index"  v-on:change="changeOptions" v-model="selectOptions.options[index]" true-value="1" :false-value="item.params.coefficient" hidden="">
  135.                                                 <label :for="'option-i-'+index"><span>{{item.title}}</span></label>
  136.                                             </span>
  137.                                         {% endverbatim %}
  138.                                     </div>
  139.                                     {% verbatim %}
  140.                                     <div v-for="item in listCoefficients">
  141.                                         <div class="form__label">{{item.title}}:</div>
  142.                                         <div class="form__radio-inline">
  143.                                             <span v-for="(param,index) in item.params">
  144.                                                 <input :id="'list-i-' + item.id + '-' + index"  v-on:change="changeOptions"  v-model="selectOptions.list[item.id]" type="radio" :value="param.coefficient" hidden="">
  145.                                                 <label :for="'list-i-' + item.id + '-' + index"><span>{{param.title}}</span></label>
  146.                                             </span>
  147.                                         </div>
  148.                                     </div>
  149.                                     {% endverbatim %}
  150.                                     <hr class="form__separator">
  151.                                     <div class="form__note"><b class="color-red">*</b> - {{ 'pages.insurance.note'|trans({}, 'dc_subaru') }}</div>
  152.                                 </div>
  153.                             </div>
  154.                         </div>
  155.                     </div>
  156.                 </section>
  157.             </div>
  158.         </div>
  159.     </div>
  160.     <div class="modal fade modal-fw-window" v-if="showAmount" id="modalFullInsuranceOrder" tabindex="-1" role="dialog" aria-labelledby="modalTestDrive" aria-hidden="true">
  161.         <div class="modal-dialog" role="document">
  162.             <div class="modal-content">
  163.                 <div class="modal-header">
  164.                     <p class="modal-title" id="modalTestDrive">{{ 'forms.insurance_app'|trans({}, 'automarket_base') }}</p>
  165.                     <p class="modal-sub-title">{{ 'forms.insurance_check'|trans({}, 'automarket_base')|raw }}</p>
  166.                     <button type="button" class="close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
  167.                         <span aria-hidden="true">
  168.                             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  169.                                 <path d="M15.8107 0.189305C15.5583 -0.0631016 15.1491 -0.0631016 14.8967 0.189305L0.189305 14.8967C-0.0631016 15.1491 -0.0631016 15.5583 0.189305 15.8107C0.315492 15.9369 0.48093 16 0.646336 16C0.811743 16 0.977149 15.9369 1.10337 15.8107L15.8107 1.10331C16.0631 0.85093 16.0631 0.441711 15.8107 0.189305Z" fill="#A1A1A1"/>
  170.                                 <path d="M15.8107 14.8976L1.10331 0.190281C0.85093 -0.062125 0.44168 -0.062125 0.189305 0.190281C-0.0631016 0.442656 -0.0631016 0.851875 0.189305 1.10428L14.8967 15.8117C15.0229 15.9379 15.1883 16.001 15.3537 16.001C15.5191 16.001 15.6846 15.9379 15.8107 15.8117C16.0631 15.5593 16.0631 15.15 15.8107 14.8976Z" fill="#A1A1A1"/>
  171.                             </svg>
  172.                         </span>
  173.                     </button>
  174.                 </div>
  175.                 <div class="modal-body">
  176.                     <div class="form-wrapper forms">
  177.                         <div class="container">
  179.                             <div class="forms-sm">
  180.                                 <span><b>{{ 'forms.insurance_car'|trans({}, 'automarket_base') }}: </b>{% verbatim %}{{ selectCar.carName }}{% endverbatim %}</span>
  181.                                 <br>
  182.                                 <br>
  183.                                 <span><b>{{ 'forms.insurance_est_cost'|trans({}, 'automarket_base') }}: </b><b class="color-red">{% verbatim %}{{ amount.toLocaleString() }}{% endverbatim %} грн</b></span>
  184.                                 <br>
  185.                                 <br>
  186.                                 <div class="forms__fieldset">
  187.                                     <div class="forms__legend">{{ 'forms.insurance_contact'|trans({}, 'automarket_base') }}</div>
  188.                                     <div class="form-group">
  189.                                         <div class="sonata-ba-field sonata-collection-row-without-label">
  190.                                             <input v-model="uName" id="casco_name" type="text" placeholder="{{ 'small_words.name'|trans({}, 'automarket_base') }}">
  191.                                         </div>
  192.                                     </div>
  193.                                     <div class="form-group">
  194.                                         <div class="sonata-ba-field sonata-collection-row-without-label">
  195.                                             <input id="casco_phone" v-mask="'+38(###)###-##-##'" v-model="uPhone" type="tel" placeholder="Телефон">
  196.                                         </div>
  197.                                     </div>
  198.                                     <div class="form-group">
  199.                                         <div class="sonata-ba-field sonata-collection-row-without-label">
  200.                                             <input id="casco_email" v-model="uEmail" type="text" placeholder="E-mail">
  201.                                         </div>
  202.                                     </div>
  204.                                     <div class="checkbox style-b" v-show="privacyUrl">
  205.                                         <label class="checkboxes__item-privacy">
  206.                                             <input type="checkbox" v-model="checkPrivacy" id="check_privacy"/>
  207.                                             <div class="checkbox__checkmark form-control" :class="{ error: checkPrivacyError }"></div>
  208.                                             <div class="checkbox__body">
  209.                                                 {{ 'callback_widget.privacy'|trans({}, 'dc_base') }}
  210.                                                 <a :href="privacyUrl" target="_blank">
  211.                                                     {{ 'callback_widget.privacy_link'|trans({}, 'dc_base') }}
  212.                                                 </a>
  213.                                             </div>
  214.                                         </label>
  215.                                     </div>
  216.                                     <button @click="sendLead" class="btn btn-primary btn-send send-btn-form-fw">{{ 'forms.insurance_send'|trans({}, 'automarket_base') }}</button>
  217.                                 </div>
  218.                             </div>
  219.                         </div>
  220.                     </div>
  221.                 </div>
  222.             </div>
  223.         </div>
  224.     </div>
  225. </section>