Symfony Profiler

{% extends 'base.html.twig' %}
{% block title %}
Kalkulátor – krok 1 | BO!Reality
{% endblock %}
{% block description %}
Vyplňte základní údaje o své nemovitosti a během pár minut získáte bezplatnou
kalkulaci její ceny. Stačí odpovědět na 3 otázky.
{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block body %}
<div class="modal-wrapper">
<div class="col modal" data-modal-help="rating">
<svg class="modal-close-btn">
<use xlink:href="#modal-close"></use>
</svg>
<p>
<strong>Neobyvatelný</strong> - Dům je určený k demolici nebo kompletní
rekonstrukci.<br /><br />
<strong>Před rekonstrukcí</strong> - Nejméně 25 let zde neproběhla žádná
rekonstrukce. Modernizaci si zaslouží interiér i exteriér.<br /><br />
<strong>Průměrný</strong> - Dům lze pohodlně využívat, přestože v posledních
letech neprošel žádnou rekonstrukcí.<br /><br />
<strong>Velmi dobrý</strong> - Dům je po kompletní rekonstrukci.<br /><br />
<strong>Novostavba</strong> - Nová nebo téměř nová nemovitost ve skvělém
stavu, nabízená prvním majitelem nebo developerem.<br /><br />
<strong>Luxusní</strong> - Jsou použity velmi drahé technologie a materiály.
Cena by měla být mnohem vyšší než u běžných novostaveb v okolí.
</p>
</div>
<div class="col modal" data-modal-help="construction">
<svg class="modal-close-btn">
<use xlink:href="#modal-close"></use>
</svg>
<p>
Pokud jste nenašli vyhovující materiál, vyberte který je vlastnostmi
nejblíže nebo zvolte možnost "Jiné".
</p>
</div>
<div class="col modal" data-modal-help="floor-area">
<svg class="modal-close-btn">
<use xlink:href="#modal-close"></use>
</svg>
<p>
<strong>Podlahová plocha</strong> - Zadejte pouze rozlohu užitné (obytné)
plochy. Rozloha pozemku a jiných součástí se uvádí v bodech níže.
</p>
</div>
<div class="col modal" data-modal-help="garden-area">
<svg class="modal-close-btn">
<use xlink:href="#modal-close"></use>
</svg>
<p>
<strong>Plocha pozemku</strong> - Uveďte celkovou plochu pozemku, včetně
zastavěných ploch.
</p>
</div>
<div class="col modal" data-modal-help="other-area">
<svg class="modal-close-btn">
<use xlink:href="#modal-close"></use>
</svg>
<p>
<strong>Jiné</strong> - Sklep, dílna, lodžie nebo jiná součást celkové
výměry, kterou jste zatím neuvedli v žádném z předchozích bodů.
</p>
</div>
<div class="col modal" data-modal-help="local-type">
<svg class="modal-close-btn">
<use xlink:href="#modal-close"></use>
</svg>
<p>
Pokud jste nenašli v nabídce ideální dispozici, vyberte tu, která ji
je neblíže, nebo zvolte možnost "Jiná".
</p>
</div>
</div>
{% if flow.getCurrentStepNumber() == 1 %}
<div class="container">
<div class="form-header">
<h3>
Údaje o nemovitosti
</h3>
<p>
Vyplňte základní údaje o vaší stavbě. V případě nejasností
použijte nápovědu vedle otázky.
</p>
<div class="step-vis">
<img src="{{ asset('assets/svg/step1.png') }}" alt="" />
<img class="link"
src="{{ asset('assets/img/link-disabled.png') }}"
alt="" />
<img src="{{ asset('assets/svg/step2-inactive.png') }}" alt="" />
<img class="link"
src="{{ asset('assets/img/link-disabled.png') }}"
alt="" />
<img src="{{ asset('assets/svg/step3-inactive.png') }}" alt="" />
</div>
</div>
</div>
{% endif %}
{% if flow.getCurrentStepNumber() == 2 %}
<div class="container col">
<div class="form-header">
<h3>
Detailní údaje o nemovitosti
</h3>
<p>
Uveďte doplňující informace o nemovitosti, díky kterým bude náš
odhad přesnější. Pokud vám stačí pouze orientační cena, můžete
tento krok přeskočit.
</p>
<div class="step-vis">
<img src="{{ asset('assets/svg/step1.png') }}" alt="" />
<img class="link"
src="{{ asset('assets/img/link-enabled.png') }}"
alt="" />
<img src="{{ asset('assets/svg/step2-active.png') }}" alt="" />
<img class="link"
src="{{ asset('assets/img/link-disabled.png') }}"
alt="" />
<img src="{{ asset('assets/svg/step3-inactive.png') }}" alt="" />
</div>
</div>
</div>
{% endif %}
{% if flow.getCurrentStepNumber() == 3 %}
<div class="container col">
<div class="form-header">
<h3>
Kontaktní údaje
</h3>
<p>
Uveďte kontaktní údaje, na které vám zašleme vypracovaný odhad
ceny nemovitosti.
</p>
<div class="step-vis">
<img src="{{ asset('assets/svg/step1.png') }}" alt="" />
<img class="link"
src="{{ asset('assets/img/link-enabled.png') }}"
alt="" />
<img src="{{ asset('assets/svg/step2-active.png') }}" alt="" />
<img class="link"
src="{{ asset('assets/img/link-enabled.png') }}"
alt="" />
<img src="{{ asset('assets/svg/step3-active.png') }}" alt="" />
</div>
</div>
</div>
{% endif %}
{% if flow.getCurrentStepNumber() == 4 %}
<div class="container col">
<div class="form-header">
<h4>
Kalkulace ceny vaší nemovitosti je dokončená. Za pár minut ve
vaší e-mailové schránce přistane vypracovaná kalkulace. Děkujeme
za důvěru. V případě jakýchkoliv dotazů se na nás neváhejte
obrátit na XY.
</h4>
</div>
</div>
{% endif %}
<div class="container col">
<div class="form-outer-wrapper">
{{ form_start(form) }}
{{ form_errors(form) }}
{% if flow.getCurrentStepNumber() == 1 %}
<div class="form-wrapper">
<div>
{{ form_label(form.property_type) }}
<div class="radios-wrapper">
{% for child in form.property_type %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
required
name="{{
form.vars.id ~ '[' ~ form.property_type.vars.name
~ ']'
}}"
{% if flow.getFormData().property_type is defined and flow.getFormData().property_type == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
<div id="house-type">
{{ form_label(form.house_type) }}
<div class="radios-wrapper">
{% for child in form.house_type %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
name="{{
form.vars.id ~ '[' ~ form.house_type.vars.name
~ ']'
}}"
{% if flow.getFormData().house_type is defined and flow.getFormData().house_type == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
<div>
{{ form_label(form.place) }}
{{ form_widget(form.place) }}
</div>
{{ form_widget(form.coordinates) }}
<div>
<div class="row">
{{ form_label(form.floor_area) }}
{# <button type="button"
class="tooltip"
data-modal="modal"
data-question="floor-area">
?
</button> #}
</div>
<p class="small">
Zadejte pouze plochu bez balkónu, sklepu a garáže. <br> Rozloha pozemku a jiných součástí se uvádí v bodech níže.
</p>
{{ form_widget(form.floor_area) }}
</div>
<div id="garden-area">
<div class="row">
{{ form_label(form.garden_area) }}
<button type="button"
class="tooltip"
data-modal="modal"
data-question="garden-area">
?
</button>
</div>
{{ form_widget(form.garden_area) }}
</div>
<div id="ownership-wrapper">
{{ form_label(form.ownership) }}
<div class="radios-wrapper">
{% for child in form.ownership %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
name="{{
form.vars.id ~ '[' ~ form.ownership.vars.name
~ ']'
}}"
{% if flow.getFormData().ownership is defined and flow.getFormData().ownership == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
<div id="localType-wrapper">
<div class="row">
{{ form_label(form.local_type) }}
<button type="button"
class="tooltip"
data-modal="modal"
data-question="local-type">
?
</button>
</div>
<div class="radios-wrapper">
{% for child in form.local_type %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
name="{{
form.vars.id ~ '[' ~ form.local_type.vars.name
~ ']'
}}"
{% if flow.getFormData().local_type is defined and flow.getFormData().local_type == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
<div>
{{ form_label(form.kind) }}
<div class="radios-wrapper">
{% for child in form.kind %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
required
name="{{
form.vars.id ~ '[' ~ form.kind.vars.name
~ ']'
}}"
{% if flow.getFormData().kind is defined and flow.getFormData().kind == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
<div class="">
<div class="row">
{{ form_label(form.rating) }}
<button type="button"
class="tooltip"
data-modal="modal"
data-question="rating">
?
</button>
</div>
<div class="radios-wrapper">
{% for child in form.rating %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
required
name="{{
form.vars.id ~ '[' ~ form.rating.vars.name
~ ']'
}}"
{% if flow.getFormData().rating is defined and flow.getFormData().rating == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
<div id="garage">
{{ form_label(form.garages) }}
{{ form_widget(form.garages) }}
</div>
<div id="parking-space">
{{ form_label(form.parking_spaces) }}
{{ form_widget(form.parking_spaces) }}
</div>
<div id="balcony-area">
{{ form_label(form.balcony_area) }}
{{ form_widget(form.balcony_area) }}
</div>
<div class="last">
<div class="row">
{{ form_label(form.other_area) }}
<button type="button"
class="tooltip"
data-modal="modal"
data-question="other-area">
?
</button>
</div>
{{ form_widget(form.other_area) }}
</div>
{{ form_widget(form.isSkipped) }}
</div>
<div class="btns-wrapper">
<button class="btn" type="submit" id="calculate-btn">
Vypočítat cenu
</button>
{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
craue_formflow_button_class_last: 'btn btn-first-next btn-reset',
craue_formflow_button_render_reset: false,
craue_formflow_button_render_finish: true,
craue_formflow_button_label_last: 'Chci přesnější cenu',
craue_formflow_button_label_back: 'Zpět',
craue_formflow_button_label_finish: 'Vypočítat cenu'
} %}
</div>
{% endif %}
{% if flow.getCurrentStepNumber() == 2 %}
<div class="form-wrapper">
{% if form.local_type is defined %}
<div>
<div class="row">
{{ form_label(form.local_type) }}
<button type="button"
class="tooltip"
data-modal="modal"
data-question="local-type">
?
</button>
</div>
<div class="radios-wrapper">
{% for child in form.local_type %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
name="{{
form.vars.id ~ '[' ~ form.local_type.vars.name
~ ']'
}}"
{% if flow.getFormData().local_type is defined and flow.getFormData().local_type == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
{% endif %}
<div>
<div class="row">
{{ form_label(form.construction) }}
<button type="button"
class="tooltip"
data-modal="modal"
data-question="construction">
?
</button>
</div>
<div class="radios-wrapper">
{% for child in form.construction %}
<label class="radio w-33">
<input type="radio"
id="{{ child.vars.id }}"
name="{{
form.vars.id ~ '[' ~ form.construction.vars.name
~ ']'
}}"
{% if flow.getFormData().construction is defined and flow.getFormData().construction == child.vars.value %}
checked
{% endif %}
class="checkbox"
value="{{ child.vars.value }}" />
<span>{{ child.vars.label|raw }}</span>
</label>
{% endfor %}
</div>
</div>
{% if form.lift is defined %}
<div class="checkbox">
{{ form_label(form.lift) }}
{{ form_widget(form.lift) }}
</div>
{% endif %}
{% if form.floor is defined %}
<div>
{{ form_label(form.floor) }}
{{ form_widget(form.floor) }}
</div>
{% endif %}
{% if form.total_floors is defined %}
<div class="last">
{{ form_label(form.total_floors) }}
{{ form_widget(form.total_floors) }}
</div>
{% endif %}
</div>
<div class="btns-wrapper">
{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
craue_formflow_button_class_last: 'btn btn-next',
craue_formflow_button_class_back: 'btn-reset',
craue_formflow_button_render_reset: false,
craue_formflow_button_render_finish: true,
craue_formflow_button_label_last: 'Vypočítat cenu',
craue_formflow_button_label_back: 'Zpět',
craue_formflow_button_label_finish: 'Vypočítat'
} %}
</div>
{% endif %}
{% if flow.getCurrentStepNumber() == 3 %}
<div class="form-wrapper middle step-3">
<div>
{{ form_label(form.name) }}
{{ form_widget(form.name) }}
</div>
<div>
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
</div>
<div class="">
{{ form_label(form.phone) }}
{{ form_widget(form.phone) }}
</div>
<div class="last checkbox">
{{ form_widget(form.gdpr) }}
{{
form_label(
form.gdpr,
'
Souhlasím se zasíláním marketingových sdělení.
Souhlasím se zpracováním mých osobních údajů dle <a target="_blank" href="'
~ path('gdpr')
~ '">GDPR</a>',
{
label_html: true
}
)
}}
</div>
</div>
{% include '@CraueFormFlow/FormFlow/buttons.html.twig' with {
craue_formflow_button_class_last: 'btn',
craue_formflow_button_class_back: 'btn-reset',
craue_formflow_button_render_reset: false,
craue_formflow_button_render_finish: true,
craue_formflow_button_label_last: 'Odeslat',
craue_formflow_button_label_back: 'Zpět',
craue_formflow_button_label_finish: 'Vypočítat'
} %}
{% endif %}
{{ form_widget(form.flow_calculator_instance) }}
{{ form_widget(form.flow_calculator_step) }}
{{ form_widget(form._token) }}
{{
form_end(
form,
{
render_rest: false
}
)
}}
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
$('#calculate-btn').on('click', function () {
$('#calculator_isSkipped').prop("checked", true); });
$(".btn-first-next").on('click', function () {
$('#calculator_isSkipped').prop("checked", false); })
</script>
{% if flow.getCurrentStepNumber() == 1 %}
<script src="{{ asset('assets/js/geocoding.js') }}"></script>
<script async
src="https://maps.googleapis.com/maps/api/js?key={{ googleApiKey }}&region=CZ&language=cz&callback=initAutocomplete&libraries=places"></script>
{% endif %}
<script src="https://unpkg.com/validator@latest/validator.min.js"></script>
<script>
var formStepErrors = 0;
$('input').data('hasError', 'false');
$('input').on('focusout', function(e) {
const inputType = $(this).data('input-type');
var isValid;
switch (inputType) {
case 'int':
isValid = validator.isInt($(this).val());
break;
case 'name':
const regexp = /[a-zA-Z]+\s+[a-zA-Z]+/g;
isValid = regexp.test(
$(this)
.val()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
);
break;
case 'email':
isValid = validator.isEmail($(this).val());
break;
}
if (isValid === false) {
$(this).css('border', '2px solid red');
if ($(this).data('hasError') === 'false') {
formStepErrors++;
$(this).data('hasError', 'true');
}
} else {
if ($(this).data('hasError') === 'true') {
formStepErrors--;
$(this).css('border', '2px solid');
$(this).data('hasError', 'false');
}
}
});
$('#calculator_place').on('focusout', function(){
setTimeout(() => {
if ($('#calculator_coordinates').val() === ''){
if ($('#calculator_place').data('hasError') === 'false'){
formStepErrors++;
}
$('#calculator_place').css('border', '2px solid red');
$('#calculator_place').data('hasError', 'true');
}else{
if ($('#calculator_place').data('hasError') === 'true'){
formStepErrors--;
$('#calculator_place').css('border', '2px solid');
$('#calculator_place').data('hasError', 'false');
}
}
}, 1000)
})
$('button[type=submit]').click(function(e) {
if (formStepErrors > 0) {
//e.preventDefault();
//alert('V formuláři se nacházejí chyby');
} else {
formStepErrors = false;
}
});
</script>
<script src="{{ asset('assets/js/form.js') }}"></script>
<script src="{{ asset('assets/js/modal.js') }}"></script>
{% endblock %}

templates/calculator/index.html.twig line 1