{% extends 'layout.html.twig' %}
{% block title %}{{ parent() }} - Angebotsanfrage{% endblock %}
{% block javascript %}
{{ parent() }}
{{ encore_entry_script_tags('frontend_customer_request') }}
<script>
const salesTerritory = {{ sales_territory_checker.salesTerritory|json_encode()|raw }};
</script>
{% endblock %}
{% block content %}
<section class="hero is-black is-fullheight-with-navbar has-background has-overlay" style="background-image: url({{ asset('build/images/frontend/customer-request/komponents-hintergrund.png') }}); background-attachment: fixed;">
<div class="hero-body">
<div class="container has-text-centered-touch">
<div class="columns is-desktop">
<div class="column is-5-desktop is-one-third-widescreen">
<h2 class="h1 has-text-white mb-4 is-size-0-widescreen">
Schneller zum Angebot!
</h2>
<p class="has-text-grey-light mb-6">
Mit unserem Tool können Sie uns die wichtigsten Angaben bereits im Vorfeld digital übermitteln.
</p>
<a href="#app" class="button is-medium is-fullwidth is-rounded is-white is-outlined">Los geht's</a>
</div>
<div class="column">
<figure class="image is-16by9">
<iframe class="has-ratio" width="560" height="315" src="https://www.youtube.com/embed/CUbmVRAZ1hg?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>
</div>
</div>
</div>
</div>
</section>
<section class="section is-medium">
<div class="container">
<div class="columns is-desktop is-multiline is-centered is-vcentered is-variable is-8">
<div class="column is-full is-8-tablet is-offset-2-tablet is-half-desktop is-offset-0-desktop mb-5">
<div class="columns is-tablet is-vcentered has-text-centered-mobile">
<div class="column is-one-quarter">
<span class="icon is-large is-circle">
<i class="fas fa-3x fa-car-side"></i>
</span>
</div>
<div class="column">
<h2 class="h2 has-text-black">Termin bei Ihnen vor Ort</h2>
<p>Sie vereinbaren einen Termin mit uns und ein freundlicher Mitarbeiter kommt zu Ihnen, um alles zu besprechen und die Daten zu erfassen. Selbstverständlich kostenlos!</p>
</div>
</div>
</div>
<div class="column is-full is-8-tablet is-offset-2-tablet is-half-desktop is-offset-0-desktop mb-5">
<div class="columns is-tablet is-vcentered has-text-centered-mobile">
<div class="column is-one-quarter">
<span class="icon is-large is-circle">
<i class="fas fa-3x fa-lightbulb"></i>
</span>
</div>
<div class="column">
<h2 class="h2 has-text-black">Besuch bei uns im Showroom</h2>
<p>Wenn Sie sich von vornherein mit den Komponenten einer PV-Anlage vertraut machen wollen, können Sie dies in unserer Ausstellung tun. Auch dort können Sie sich beraten lassen.</p>
</div>
</div>
</div>
<div class="column is-full is-8-tablet is-offset-2-tablet is-half-desktop is-offset-0-desktop mb-5">
<div class="columns is-tablet is-vcentered has-text-centered-mobile">
<div class="column is-one-quarter">
<span class="icon is-large is-circle">
<i class="fas fa-3x fa-tablet-alt"></i>
</span>
</div>
<div class="column">
<h2 class="h2 has-text-black">Mit Tablet oder Smartphone</h2>
<p>Ganz neu und in Zeiten von Covid-19 eine Alternative zur persönlichen Beratung. Hier können Sie Ihre Objektdaten mit dem PC oder einem mobilen Endgerät selber erfassen.</p>
</div>
</div>
</div>
<div class="column is-full is-8-tablet is-offset-2-tablet is-half-desktop is-offset-0-desktop mb-5">
<div class="columns is-tablet is-vcentered has-text-centered-mobile">
<div class="column is-one-quarter">
<span class="icon is-large is-circle">
<i class="fas fa-3x fa-calculator"></i>
</span>
</div>
<div class="column">
<h2 class="h2 has-text-black">Mit Hilfe von Bauplänen</h2>
<p>Sie stecken gerade in der Planungs- oder Bauphase Ihres Objektes? Kein Problem. Anhand der Pläne können wir bereits ein aussagekräftiges Angebot erstellen.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="app" class="section is-medium has-background-light">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths-desktop is-two-thirds-widescreen px-6 py-6 has-background-white">
{{ form_start(customerRequestForm, {'attr': {'id': 'customer_request'}}) }}
<progress class="progress is-small is-primary" value="0" max="100">0%</progress>
<div class="tab">
<h1>Ihre Adress- und Objektdaten</h1>
<label class="label">Name</label>
<div class="columns is-variable is-1">
<div class="column">
<div class="select">
{{ form_widget(customerRequestForm.contact_address) }}
</div>
</div>
<div class="column">
{{ form_widget(customerRequestForm.contact_first_name, {'attr': {'class': 'input', 'placeholder': 'Vorname'}}) }}
</div>
<div class="column">
{{ form_widget(customerRequestForm.contact_last_name, {'attr': {'class': 'input', 'placeholder': 'Nachname'}}) }}
</div>
</div>
<label class="label">Anschrift</label>
<div class="columns is-variable is-1">
<div class="column">
{{ form_widget(customerRequestForm.address.street, {'attr': {'class': 'input', 'placeholder': 'Straße u. Hausnummer'}}) }}
</div>
<div class="column">
{{ form_widget(customerRequestForm.address.zip, {'attr': {'class': 'input', 'placeholder': 'PLZ'}}) }}
</div>
<div class="column">
{{ form_widget(customerRequestForm.address.city, {'attr': {'class': 'input', 'placeholder': 'Ort'}}) }}
</div>
</div>
<label class="label">Kontaktdaten</label>
<div class="columns is-variable is-1">
<div class="column">
{{ form_widget(customerRequestForm.contact_phone, {'attr': {'class': 'input phone-group', 'placeholder': 'Telefonnummer'}}) }}
</div>
<div class="column">
{{ form_widget(customerRequestForm.contact_mobile, {'attr': {'class': 'input phone-group', 'placeholder': 'Mobil'}}) }}
</div>
</div>
<div class="columns is-variable is-1">
<div class="column">
{{ form_widget(customerRequestForm.contact_email, {'attr': {'class': 'input', 'placeholder': 'E-Mail-Adresse'}}) }}
</div>
</div>
</div>
<div class="tab">
<h1>Frage 1: Um was für ein Objekt handelt es sich?</h1>
{% form_theme customerRequestForm.building_type 'form/choice_image_widget.html.twig' %}
{{ form_widget(customerRequestForm.building_type, {'attr': {'class': 'columns'}}) }}
</div>
<div class="tab">
<h1>Frage 2: Was für eine Dachart hat das Objekt? <small class="is-size-7 has-text-grey">(Mehrfachauswahl möglich)</small></h1>
{% form_theme customerRequestForm.roof_types 'form/choice_image_widget.html.twig' %}
{{ form_widget(customerRequestForm.roof_types, {'attr': {'class': 'columns'}}) }}
<div class="dependency" data-choice-id="customer_request_customer_roof_types_4">
<div class="field">
<label class="label">Folgende Dachart:</label>
<div class="control">
{{ form_widget(customerRequestForm.custom_roof, {'attr': {'class': 'input'}}) }}
</div>
</div>
<div class="file has-name">
<label class="file-label">
{{ form_widget(customerRequestForm.img_custom_roof, {'attr': {'class': 'file-input'}}) }}
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Bild hinzufügen
</span>
</span>
<span class="file-name">
Kein Bild hochgeladen
</span>
<button type="button" class="delete is-small ml-2 is-invisible"></button>
</label>
</div>
</div>
</div>
<div class="tab">
<h1>Frage 3: Die Maße vom Dach</h1>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Länge</label>
<div class="control">
{{ form_widget(customerRequestForm.length, {'attr': {'class': 'input', 'min': 0, 'step': 'any', 'onkeypress': 'return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 44)'}}) }}
</div>
<p class="help">Länge des Hauses [m]</p>
</div>
<div class="field">
<label class="label">Dachneigung</label>
<div class="control">
{{ form_widget(customerRequestForm.tilt, {'attr': {'class': 'input', 'min': 0, 'step': 1, 'onkeypress': 'return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))'}}) }}
</div>
<p class="help">Dachneigung [Grad] z.B. 45 Grad</p>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Breite</label>
<div class="control">
{{ form_widget(customerRequestForm.width, {'attr': {'class': 'input', 'min': 0, 'step': 'any', 'onkeypress': 'return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 44)'}}) }}
</div>
<p class="help">Breite des Hauses [m]</p>
</div>
</div>
<div class="column">
<img id="roof-size" src="{{ asset('build/images/frontend/customer-request/roof-size.png') }}">
</div>
</div>
<div class="field">
<label class="label">Datei hochladen oder ein Foto machen</label>
<div class="file has-name">
<label class="file-label">
{{ form_widget(customerRequestForm.img_roof, {'attr': {'class': 'file-input'}}) }}
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Bild hinzufügen
</span>
</span>
<span class="file-name">
Kein Bild hochgeladen
</span>
<button type="button" class="delete is-small ml-2 is-invisible"></button>
</label>
</div>
<p class="help">An dieser Stelle benötigen wir für eine genaue Berechnung ein Foto von Ihrem Dach. Sollte es für Sie nicht möglich sein, ein Foto zu übermitteln, können Sie durch die Größenangabe trotzdem einen Vorab-Preis erhalten.</p>
</div>
</div>
<div class="tab">
<h1>Frage 4: Die Traufhöhe</h1>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Traufhöhe (ca.)</label>
<div class="control">
{{ form_widget(customerRequestForm.eaves_height, {'attr': {'class': 'input', 'min': 0, 'step': 'any', 'onkeypress': 'return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 44)'}}) }}
</div>
<p class="help">Die Traufhöhe ist dann der Abstand des Traufpunktes vom Gelände an der Außenwand. Als Traufpunkt wird der Schnittpunkt zwischen der senkrechten Außenfläche (Oberfläche der Außenwand) und der Dachhaut bezeichnet. [m]</p>
</div>
<div class="field">
<label class="label">Optional können Sie hier zusätzlich noch ein Foto hochladen?</label>
<div class="file has-name">
<label class="file-label">
{{ form_widget(customerRequestForm.img_eaves_height, {'attr': {'class': 'file-input'}}) }}
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Bild hinzufügen
</span>
</span>
<span class="file-name">
Kein Bild hochgeladen
</span>
<button type="button" class="delete is-small ml-2 is-invisible"></button>
</label>
</div>
</div>
</div>
<div class="column is-one-third">
<img id="roof-size" src="{{ asset('build/images/frontend/customer-request/traufhoehe.png') }}">
</div>
</div>
</div>
<div class="tab">
<h1>Frage 5: Angaben zu Ihrem aktuellen Stromverbrauch</h1>
<p class="help">Ein Stromverteiler (auch Verteilerkasten, Sicherungskasten oder Zählerkasten genannt) dient der Verteilung elektrischer Energie im Haus.</p>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Ihr Stromverbrauch im Jahr</label>
<div class="control">
{{ form_widget(customerRequestForm.electricity_consumption_year, {'attr': {'class': 'input', 'min': 0, 'step': 1, 'onkeypress': 'return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))'}}) }}
</div>
<p class="help">Geben Sie den Stromverbrauch in Kilowattstunden an.</p>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Der Strompreis pro Kilowattstunde</label>
<div class="control">
{{ form_widget(customerRequestForm.electricity_price_per_kwh, {'attr': {'class': 'input', 'min': 0, 'step': 1, 'onkeypress': 'return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))'}}) }}
</div>
<p class="help">Geben Sie den Strompreis in Cent (brutto) an.</p>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Der Grundpreis Ihres Anbieters</label>
<div class="control">
{{ form_widget(customerRequestForm.electricity_basic_price, {'attr': {'class': 'input', 'min': 0, 'step': 'any', 'onkeypress': 'return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 44)'}}) }}
</div>
<p class="help">Geben Sie den jährlichen Grundpreis in Euro. (brutto) an.</p>
</div>
</div>
</div>
<div class="field">
<label class="label">Stromrechnung hochladen oder fotografieren</label>
<div class="file has-name">
<label class="file-label">
{{ form_widget(customerRequestForm.img_electricity_bill, {'attr': {'class': 'file-input'}}) }}
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Bild hinzufügen
</span>
</span>
<span class="file-name">
Kein Bild hochgeladen
</span>
<button type="button" class="delete is-small ml-2 is-invisible"></button>
</label>
</div>
</div>
</div>
<div class="tab">
{# <h1>Frage 6: Ihre besonderen Wünsche</h1>
<label class="label">Die Optik welcher Module spricht Sie mehr an?</label> #}
<h1>Frage 6: Die Optik welcher Module spricht Sie mehr an?</h1>
{% form_theme customerRequestForm.solar_modules_color 'form/choice_image_widget.html.twig' %}
{{ form_widget(customerRequestForm.solar_modules_color, {'attr': {'class': 'columns'}}) }}
{# <div class="field">
<label class="label">Sind Sie an einer Ladesäule interessiert?</label>
<div class="control">
<label class="checkbox">
{{ form_widget(customerRequestForm.battery_storage) }}
Ja
</label>
</div>
</div> #}
</div>
<div class="mt-6" style="overflow:auto;">
<div style="float:right;">
<button class="button is-light" type="button" id="prevBtn">zurück</button>
<button class="button is-light" type="button" id="nextBtn">weiter</button>
<button type="submit" id="customer_request_customer_save" class="button is-primary has-text-white" style="display: inline;">Angaben senden</button>
</div>
</div>
{{ form_end(customerRequestForm) }}
</div>
</div>
</div>
</section>
<section class="section has-background-black has-text-centered">
<div class="container">
<div class="columns is-desktop is-centered is-vcentered is-variable is-8">
<div class="column is-narrow">
<p class="h1 has-text-white is-size-3">Lieber persönliche Beratung vor Ort?</p>
</div>
<div class="column is-one-third-dektop is-one-quarter-widescreen">
<a href="tel:+495771914990" class="button is-medium is-rounded is-white is-fullwidth"><span class="icon"><i class="fas fa-phone"></i></span><span>Jetzt Termin vereinbaren</span></a>
</div>
</div>
</div>
</section>
<section id="faq" class="hero is-large is-white has-text-centered">
<div class="hero-body">
<div class="container">
<div class="columns is-desktop is-vcentered">
<div class="column is-10-tablet is-offset-1-tablet is-8-desktop is-offset-2-desktop">
<h1 class="h1">
FAQ
</h1>
<div class="card faq">
<a href="#faq-card-1" data-action="collapse" aria-label="mehr erfahren">
<header class="card-header">
<p class="card-header-title">
Kann ich nur über das Tool ein Angebot einholen?
</p>
<div class="card-header-icon">
<span class="icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</div>
</header>
</a>
<div id="faq-card-1" class="is-collapsible" aria-expanded="false">
<div class="card-content has-text-left">
<p class="p">Es gibt verschiedene Möglichkeiten, um Ihnen ein Angebot zu erstellen.</p>
<ul>
<li>Der Kundentermin bei Ihnen vor Ort</li>
<li>Die Berechnung anhand von Bauplänen</li>
<li>Mithilfe des Tools</li>
</ul>
</div>
</div>
</div>
<div class="card faq">
<a href="#faq-card-2" data-action="collapse" aria-label="mehr erfahren">
<header class="card-header">
<p class="card-header-title">
Was passiert mit meinen Daten?
</p>
<div class="card-header-icon">
<span class="icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</div>
</header>
</a>
<div id="faq-card-2" class="is-collapsible" aria-expanded="false">
<div class="card-content has-text-left">
<p class="p">Wir werden Ihre Daten ausschließlich für die Erstellung eines Angebotes verwenden.</p>
<p class="p">Diese Daten sind für ein beschränktes Zeitfenster bei uns hinterlegt damit wir ggf. durch eine Terminverschiebung diese weiter nutzen können.</p>
</div>
</div>
</div>
<div class="card faq">
<a href="#faq-card-3" data-action="collapse" aria-label="mehr erfahren">
<header class="card-header">
<p class="card-header-title">
Wie geht es nach dem Angebot weiter?
</p>
<div class="card-header-icon">
<span class="icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</div>
</header>
</a>
<div id="faq-card-3" class="is-collapsible" aria-expanded="false">
<div class="card-content has-text-left">
Nach dem Angebot haben sie alle Zeit der Welt sich für oder auch gegen eine Photovoltaikanlage zu entscheiden. Erst wenn das Angebot Ihren Wünschen und Anforderungen gerecht wird und sie uns einen Auftrag erteilen, beginnen wir mit der Planung.
</div>
</div>
</div>
<div class="card faq">
<a href="#faq-card-4" data-action="collapse" aria-label="mehr erfahren">
<header class="card-header">
<p class="card-header-title">
Kommen irgendwelche Kosten auf mich zu?
</p>
<div class="card-header-icon">
<span class="icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</div>
</header>
</a>
<div id="faq-card-4" class="is-collapsible" aria-expanded="false">
<div class="card-content has-text-left">
<p class="p">Nein, das Tool ist nur dafür da, um Ihnen ein Angebot bereit zu stellen.</p>
<p class="p">Auch ein Beratungstermin durch einen Mitarbeiter bei Ihnen vor Ort ist bei uns kostenlos!</p>
</div>
</div>
</div>
<div class="card faq">
<a href="#faq-card-5" data-action="collapse" aria-label="mehr erfahren">
<header class="card-header">
<p class="card-header-title">
Ich habe die gesuchten Angaben im Tool nicht gefunden
</p>
<div class="card-header-icon">
<span class="icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</div>
</header>
</a>
<div id="faq-card-5" class="is-collapsible" aria-expanded="false">
<div class="card-content has-text-left">
<p class="p">Das ist auch kein Problem. Hier ist es ratsam das ein Mitarbeiter einen kostenlosen vor-Ort-Termin durchführt.</p>
<p class="p">Rufen Sie an und vereinbaren Sie einen Termin mit uns.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% include 'frontend/_sections/_showroom.html.twig' %}
{% endblock %}
{% block modals %}
{{ parent() }}
{# error message: not in sales territory #}
{% embed "_components/_modal.html.twig" with {'modal_id': 'not_in_sales_territory'} %}
{% block modal_content %}
<div class="box p-5 has-text-centered">
<p class="h1 is-size-3">Es tut uns Leid</p>
<p>Die angegeben Adresse liegt leider nicht in unserem aktuellen Verkaufsgebiet.</p>
<div class="mt-6">
<button type="button" class="button modal-close-button is-light">Neue Adresse eingeben</button>
<a class="button is-primary has-text-white" href="{{ path('frontend_index') }}">zurück zur Startseite</a>
</div>
</div>
{% endblock %}
{% endembed %}
{% endblock %}