{% extends '@Portal/template.html.twig' %}
{% block head %}
{% if brand is not defined and model is not defined %}
<title>{{ 'seo.to.title'|trans({}, 'portal_base') }}</title>
<meta name="description" content="{{ 'seo.to.description'|trans({}, 'portal_base') }}"/>
{% elseif brand is defined and model is not defined %}
<title>{{ 'seo.to_brand.title'|trans({'%brand%': brand.name },'portal_base') }}</title>
<meta name="description" content="{{ 'seo.to_brand.description'|trans({'%brand%': brand.name}, 'portal_base') }}"/>
{% elseif brand is defined and model is defined %}
<title>{{ 'seo.to_model.title'|trans({'%brand%': brand.name, '%model%' : model.title },'portal_base') }}</title>
<meta name="description" content="{{ 'seo.to_model.description'|trans({'%brand%': brand.name, '%model%' : model.title}, 'portal_base') }}"/>
{% endif %}
<link rel="stylesheet" href="{{ asset('bundles/dcsite/css/modules/service/widget-order-to.css') }}">
<style>
.recording__service-calendar-day span,
.recording__service-calendar-head span {
width: 40px;
}
</style>
<link rel="stylesheet" type="text/css" href="/dist/{{ MODE }}/portal/css/portalServiceRegulationTo.css?{{ VERSION }}">
{% endblock head %}
{% block ogtagDynamic %}
{% if brand is not defined and model is not defined %}
<meta property="og:title" content="{{ 'seo.to.title'|trans({}, 'portal_base') }}">
<meta name="og:description" content="{{ 'seo.to.description'|trans({}, 'portal_base') }}"/>
{% elseif brand is defined and model is not defined %}
<meta property="og:title" content="{{ 'seo.to_brand.title'|trans({'%brand%': brand.name },'portal_base') }}">
<meta name="og:description" content="{{ 'seo.to_brand.description'|trans({'%brand%': brand.name}, 'portal_base') }}"/>
{% elseif brand is defined and model is defined %}
<meta property="og:title" content="{{ 'seo.to_model.title'|trans({'%brand%': brand.name, '%model%' : model.title },'portal_base') }}">
<meta name="og:description" content="{{ 'seo.to_model.description'|trans({'%brand%': brand.name, '%model%' : model.title}, 'portal_base') }}"/>
{% endif %}
{% endblock ogtagDynamic %}
{% block content %}
<section class="breadcrumbs__new">
<div class="container">
<ol class="vidi_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ path('portal_homepage') }}">
<span class="breadcrumbs__link" itemprop="name">VIDI.UA</span>
</a>
<meta itemprop="position" content="1"/>
</li>
<div class="arrow-bc"></div>
<li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ path('portal_service') }}">
<span class="breadcrumbs__link" itemprop="name">{{ 'service.all.service'|trans({}, 'portal_base') }}</span>
</a>
<meta itemprop="position" content="2"/>
</li>
<div class="arrow-bc"></div>
<li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
{% if brand is not defined and model is not defined %}
<span style="color: #ABABAB" class="breadcrumbs__link" itemprop="name">{{ 'service.to.title'|trans({}, 'portal_base') }}</span>
{% else %}
<a itemprop="item" href="{{ path('portal_service_to') }}">
<span class="breadcrumbs__link" itemprop="name">{{ 'service.to.title'|trans({}, 'portal_base') }}</span>
</a>
{% endif %}
<meta itemprop="position" content="3"/>
</li>
{% if brand is defined %}
<div class="arrow-bc"></div>
<li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
{% if model is not defined %}
<span style="color: #ABABAB" class="breadcrumbs__link" itemprop="name">{{ brand.name }}</span>
{% else %}
<a itemprop="item" href="{{ path('portal_service_to_brand', { 'brand': brand.url}) }}">
<span class="breadcrumbs__link" itemprop="name">{{ brand.name }}</span>
</a>
{% endif %}
<meta itemprop="position" content="4"/>
</li>
{% endif %}
{% if model is defined %}
<div class="arrow-bc"></div>
<li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span style="color: #ABABAB" class="breadcrumbs__link" itemprop="name">{{ model.title }}</span>
<meta itemprop="position" content="5"/>
</li>
{% endif %}
</ol>
</div>
</section>
<div id="regulationToModule">
<section class="section_search_number">
<div class="container">
<div class="search_number_wrapper">
<div id="search_number_preloader" class="secton__number-col number-col-flex">
{% if model is defined %}
<h1 class="number-bg-title">{{ 'base.reglament_to'|trans({}, 'portal_base') }}{{ brand.name is defined ? ' ' ~ brand.name: '' }}{{ model.title is defined ? ' ' ~ model.title : '' }}</h1>
{% else %}
<h1 class="number-bg-title">{{ 'reglament_to.calculation_maintenance'|trans({}, 'portal_base') }}{{ brand.name is defined ? ' ' ~ brand.name: '' }}{{ model.title is defined ? ' ' ~ model.title : '' }}</h1>
{% endif %}
{# <h1 class="number-bg-title">{{ 'reglament_to.calculation_maintenance'|trans({}, 'portal_base') }}{{ brand.name is defined ? ' ' ~ brand.name: '' }}{{ model.title is defined ? ' ' ~ model.title : '' }}</h1>#}
<p class="number-bg-sub-title">{{ 'reglament_to.enter_registration_number'|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>
{% include '@Portal/Modules/search-number-form.twig' %}
</div>
<div class="car__search__link" @click="scrollTo('section_calc_to'); clearCalcForm()">{{ 'reglament_to.dont_remember_number'|trans({}, 'portal_base') }}</div>
<div class="widgets__button" @click="findVehicle()">{{ 'reglament_to.next_to'|trans({}, 'portal_base') }}</div>
</div>
<img src="{{ asset('bundles/portal/img/service/banner-to.jpg') }}" alt="banner-to">
</div>
</div>
</section>
<section ref="section_calc_to" class="section_calc_to">
<div id="calc_preloader" class="container">
<p class="calculation_title">{{ 'reglament_to.online_calculator'|trans({}, 'portal_base') }}</p>
<div class="calc_to_module">
<p class="calc_to_module_name">{{ 'reglament_to.enter_necessary_parameters'|trans({}, 'portal_base') }}</p>
<div class="calc_to_wrapper">
<select class="calc_module_select" v-model="carData.brandId" @change="changeBrand(findCar = false)" :disabled="Object.keys(form.brands).length < 1">
<option value="null">Марка</option>
<option v-for="item in form.brands" :value="item.id" v-html="item.title"></option>
</select>
<select class="calc_module_select" v-model="carData.modelId" @change="changeModel(findCar = false)" :disabled="Object.keys(form.models).length < 1 || carData.brandId === null">
<option value="null">Модель</option>
<option v-for="item in form.models" :value="item.id" v-html="item.title"></option>
</select>
<select class="calc_module_select" v-model="carData.dealerId" @change="changeDealer(findCar = false)" :disabled="Object.keys(form.dealers).length < 1 || carData.modelId === null">
<option value="null">{{ 'reglament_to.service_station'|trans({}, 'portal_base') }}</option>
<option v-for="item in form.dealers" :value="item.id" v-html="item.title"></option>
</select>
<select class="calc_module_select" v-model="carData.makeYear" @change="changeYear(findCar = false)" :disabled="Object.keys(form.makeYears).length < 1 || carData.dealerId === null">
<option value="null">{{ 'reglament_to.graduation_year'|trans({}, 'portal_base') }}</option>
<option v-for="item in form.makeYears" :value="item.id" v-html="item.title"></option>
</select>
<select class="calc_module_select" v-model="carData.variationId" @change="changeVariation(findCar = false)" :disabled="Object.keys(form.variations).length < 1 || carData.makeYear === null">
<option value="null">{{ 'reglament_to.modification'|trans({}, 'portal_base') }}</option>
<option v-for="item in form.variations" :value="item.id" v-html="item.title"></option>
</select>
<select class="calc_module_select" v-model="carData.workId" @change="changeWork(findCar = false)" :disabled="Object.keys(form.works).length < 1 || carData.variationId === null">
<option value="null">{{ 'reglament_to.run'|trans({}, 'portal_base') }}</option>
<option v-for="item in form.works" :value="item.id" v-html="item.title"></option>
</select>
</div>
<div class="widgets__button widgets__button__calc_module" @click="getOrderService()">{{ 'reglament_to.get_calculation'|trans({}, 'portal_base') }}</div>
</div>
</div>
</section>
<section ref="section_your_calculation" class="section_your_calculation">
<div class="container" v-if="regulationWork">
<p class="calculation_title">{{ 'reglament_to.your_calculation'|trans({}, 'portal_base') }}</p>
<div class="accordion__site">
<div class="accordion-item accordion-item-calc" v-if="regulationWork.works">
<div class="accordion__header accordion__header__wrapper" :class="{ active: showWorks }" @click="showWorks = !showWorks">
<h2 class="accordion__title accordion__title__calc" itemprop="name">{{ 'reglament_to.cost_works'|trans({}, 'portal_base') }}</h2>
<span class="accordion__title accordion__title__calc title__calc-right">
<span v-html="regulationWork.cost.costWorks.toLocaleString()"></span>
грн</span>
</div>
<div class="accordion__content accordion__content__calc" :class="{ active: showWorks }">
<div itemprop="text" v-for="work in regulationWork.works">
<p class="service_accordion_text service_accordion_text_calc" v-html="work.title">{{ 'reglament_to.undercarriage_oil'|trans({}, 'portal_base') }}</p>
</div>
</div>
</div>
<div class="accordion-item accordion-item-calc" v-if="regulationWork.parts">
<div class="accordion__header accordion__header__wrapper" :class="{ active: showParts }" @click="showParts = !showParts">
<h2 class="accordion__title accordion__title__calc">{{ 'reglament_to.cost_parts'|trans({}, 'portal_base') }}</h2>
<span class="accordion__title accordion__title__calc title__calc-right">
<span v-html="regulationWork.cost.costParts.toLocaleString()"></span>
грн</span>
</div>
<div class="accordion__content accordion__content__calc" :class="{ active: showParts }">
<div itemprop="text" v-for="part in regulationWork.parts">
<p class="service_accordion_text service_accordion_text_calc" v-html="part.title">{{ 'reglament_to.plug_asm_oil'|trans({}, 'portal_base') }}</p>
</div>
</div>
</div>
</div>
<div class="your_calculation_info">
<div class="calculation_info_price_wrapper">
<p class="info_price_title">{{ 'reglament_to.estimated_cost_maintenance'|trans({}, 'portal_base') }}</p>
<span class="info_price">
<span v-html="regulationWork.cost.costRegulationWork.toLocaleString()"></span>
грн</span>
</div>
<p class="calculation_info_text">{{ 'reglament_to.prices_include'|trans({}, 'portal_base') }}
{{ "now"|date("d.m.Y") }}.</p>
<p class="calculation_info_text">{{ 'reglament_to.specified_price'|trans({}, 'portal_base') }}</p>
<p class="calculation_info_text">{{ 'reglament_to.cost_work_indicative'|trans({}, 'portal_base') }}</p>
<div class="calculation_btn_wrapper">
<div class="widgets__button modal-toggle" @click="regulationModal()">{{ 'reglament_to.sign_up_to'|trans({}, 'portal_base') }}</div>
<div class="widgets__button widgets__button__white" @click="regulationsDownload()">{{ 'reglament_to.view_details'|trans({}, 'portal_base') }}</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div id="modal-regulation-to" class="modal-form">
<div class="modal-overlay modal-toggle"></div>
<div class="modal-wrapper modal-transition">
<div id="modal_preloader" class="modal_form_body modal_form_body_error">
<button class="modal-close modal-toggle" @click="regulationModal()">
<svg width="13" height="12" viewbox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5 11L1.5 1M11.5 1L1.5 11" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<template
v-if="regulationStep == -1">
<p class="modal-sub-heading-error">{{ 'reglament_to.could_not_car_service'|trans({}, 'portal_base') }}</p>
<a href="{{ path('portal_new_catalog', {state:'new' ,type:'car', _locale: app.request.locale}) }}" class="widgets__button widgets__button-error widgets__button-error-c">{{ 'reglament_to.catalog_new_cars'|trans({}, 'portal_base') }}</a>
</template>
<template
v-if="regulationStep == 0">
<p class="modal-sub-heading-error">{{ 'reglament_to.could_not_car'|trans({}, 'portal_base') }}</p>
<p class="modal-sub-heading-error">{{ 'reglament_to.enter_required_parameters'|trans({}, 'portal_base') }}</p>
<button class="widgets__button widgets__button-error widgets__button-error-c" @click="scrollTo('section_calc_to');regulationModal()">{{ 'reglament_to.enter_parameters_manually'|trans({}, 'portal_base') }}</button>
</template>
<template v-if="regulationStep == 1">
<p class="modal-heading">{{ 'reglament_to.registration_maintenance'|trans({}, 'portal_base') }}</p>
<p class="modal-sub-heading">{{ 'reglament_to.dear_customer_registration'|trans({}, 'portal_base') }}</p>
<form class="modal_form_wrapper">
<input id="regulation-phone" class="modal_input" type="tel" v-model="user.phone" v-mask="'+38(###)###-##-##'" placeholder="Телефон*">
<input id="regulation-name" class="modal_input" type="text" v-model="user.name" placeholder="{{ 'reglament_to.to_name'|trans({}, 'portal_base') }}*">
<div class="data_wrap" @click="calendarActive()">
<input id="regulation-date" class="modal_input input_date_icon" type="text" placeholder="Дата" v-model="userDate" readonly/>
<template v-if="calendarIsActive">
{% include '@DcSite/Modules/service-calendar.html.twig' %}
</template>
</div>
<template>
{% include '@DcSite/Modules/service-time-new.html.twig' %}
</template>
<template v-if="isNight">
<input id="regulation-carRegNumber" class="modal_input" type="text" v-model="carNumber" maxlength="8" placeholder="{{ 'reglament_to.enter_registration_number_1'|trans({}, 'portal_base') }}"/>
<label class="checkbox style-b evac_text">
<input type="checkbox" v-model="isTruck"/>
<div class="checkbox__checkmark"></div>
<div class="checkbox__body checkbox__body_custom">{{ 'reglament_to.tow_truck'|trans({}, 'portal_base') }}
</div>
</label>
<input v-if="isTruck" id="regulation-truckRegNumber" class="modal_input" type="text" v-model="truckRegNumber" maxlength="8" placeholder="{{ 'reglament_to.registration_number_truck'|trans({}, 'portal_base') }}"/>
</template>
</form>
<div class="checkboxes__item">
<label class="checkbox style-b checkbox_style_custom">
<input v-model="confirm" type="checkbox"/>
<div id="regulation-confirmLabel" class="checkbox__checkmark"></div>
<div class="checkbox__body ">{{ 'reglament_to.consent_collection'|trans({}, 'portal_base') }}
<a class="checkbox__body_custom" :href="privacyUrl" target="_blank">{{ 'reglament_to.learn_more_about'|trans({}, 'portal_base') }}</a>
</div>
<div v-if="isNight" class="checkbox__body">{{ 'reglament_to.learn_more_service'|trans({}, 'portal_base') }}
<a class="checkbox__body_custom" :href="privacyNightUrl" target="_blank">{{ 'reglament_to.reception_cars_non_working'|trans({}, 'portal_base') }}</a>
</div>
</label>
</div>
<button class="widgets__button" @click="booking">{{ 'reglament_to.sign_up'|trans({}, 'portal_base') }}</button>
</template>
<template v-if="regulationStep == 2">
<p class="modal-heading">{{ 'reglament_to.registration_maintenance'|trans({}, 'portal_base') }}</p>
<p class="modal_info_change_title mb-4">{{ 'reglament_to.your_phone_number'|trans({}, 'portal_base') }}
<span class="modal_info_change_your_tel" v-html="user.phone"></span>
<button class="modal_info_change_tel" @click="goBack()">{{ 'reglament_to.change_phone'|trans({}, 'portal_base') }}</button>
{{ 'reglament_to.sent_sms_code'|trans({}, 'portal_base') }}
</p>
<p class="modal_info_change_sub_title">{{ 'reglament_to.enter_received_entry'|trans({}, 'portal_base') }}</p>
<input class="modal_input modal_info_code_input" type="text" v-model="confirmCode" class="form-control" placeholder="{{ 'modules.online-booking.confirmation_code'|trans({},'dc_base') }}">
<button class="widgets__button" @click="confirmBooking">{{ 'reglament_to.confirm_registration'|trans({}, 'portal_base') }}</button>
</template>
<template v-if="regulationStep == 3">
<p class="modal-heading">{{ 'reglament_to.application_created'|trans({}, 'portal_base') }}</p>
<p class="modal_info_change_sub_title mb-3">{{ 'reglament_to.our_manager'|trans({}, 'portal_base') }}</p>
<p class="modal_info_change_sub_title mb-5">{{ 'reglament_to.thank_choosing'|trans({}, 'portal_base') }}</p>
<a :href="options.catalogUrl" class="widgets__button">{{ 'reglament_to.catalog_new_cars'|trans({}, 'portal_base') }}</a>
</template>
</div>
</div>
</div>
</div>
{% if serviceBrands is defined %}
<section class="section_brands_serve">
<div class="container">
<p class="calculation_title">{{ 'reglament_to.brands_serve'|trans({}, 'portal_base') }}</p>
<div class="brands_serve_wrapper">
{% for brand in serviceBrands %}
<a href="{{ path('portal_service_to_brand', { 'brand': brand.url}) }}" class="brands_serve_box">
<img class="brands_serve_logo" src="{{ sonata_path(brand.logo, 'reference') }}" alt="{{ brand.name }}">
<p class="brands_serve_name">{{ brand.name }}</p>
</a>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% if serviceModels is defined %}
<section class="section_brands_serve">
<div class="container">
<p class="calculation_title">{{ 'reglament_to.models_to'|trans({}, 'portal_base') }}
{{ brand.name }},
{{ 'reglament_to.which_we_serve'|trans({}, 'portal_base') }}</p>
<div class="model_serve_wrapper">
{% for model in serviceModels %}
<a href="{{ path('portal_service_to_brand_model', { 'brand': brand.url, 'model': model.url}) }}" class="model_serve_box">
<img class="model_serve_logo" src="{{ sonata_path(model.image, 'reference') }}" alt="{{ model.title }}">
<p class="model_serve_name">{{ model.title }}</p>
</a>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% if app.request.locale == 'ru' %}
{% include '@Portal/Service/translations/accordion-to-faq_ru.html.twig' %}
{% else %}
{% include '@Portal/Service/translations/accordion-to-faq_ua.html.twig' %}
{% endif %}
{% endblock %}
{% block script %}
<script src="/dist/{{ MODE }}/portal/js/portalServiceRegulationTo.js?{{ VERSION }}"></script>
<script>
$(() => {
const obj = new portal.portalServiceRegulationTo.RegulationTo();
obj.init();
obj.initRegulationTo({
initToRegulationToUrl: '{{ path('base_regulation_init_regulation_to') }}',
checkDealersByModelUrl: '{{ path('base_dealers_by_model') }}',
getVariationsRegulationToByFilterUrl: '{{ path('base_regulation_variations_by_filter') }}',
getRegulationVariationsWorkUrl: '{{ path('base_regulation_variations_work') }}',
findVehicleUrl: '{{ path('online-service-find') }}',
regulationsDownloadUrl: '{{ path('base_regulation_download') }}',
getTimesUrl: '{{ path('online-service-get-time') }}',
bookingUrl: '{{ path('online-service-booking') }}',
regulationToUrl: '{{ path('portal_service_to') }}',
regulationToBrandUrl: '{{ brand is defined ? path('portal_service_to_brand', {brand: brand.url}) : null }}',
catalogUrl: '{{ path('portal_new_catalog', {state: 'new', type: 'car'} ) }}',
confirmBookingUrl: '{{ path('online-service-booking-confirm') }}',
privacyUrl: '{{ path('portal_privacy_policy') }}',
privacyNightUrl: '{{ path('my_profile_night_service_agreement') }}',
locale: '{{ app.request.locale }}',
brandId: {% if brand is defined %}{{ brand.id }}{% else %}null{% endif%},
modelId: {% if model is defined %}{{ model.id }}{% else %}null{% endif%},
carNumberLength: 8,
newSelectTime: true
});
});
</script>
{% endblock script %}