templates/tarifrechner/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %} - Tarifrechner{% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="{{ asset('dist/css/tom-select.css')}}"/>
  7. {% endblock %}
  9. {% block body %}
  10.     {% include 'menu/topbar.html.twig' %}
  11.     <div class="content container mx-auto">
  12.         <div class="intro-y flex items-center mt-8">
  13.             <h2 class="text-lg font-medium mr-auto">
  14.                     Finden Sie ihr passendes Produkt
  15.             </h2>
  16.     </div>
  17.         <div class="grid grid-cols-12 gap-6 mt-5">
  18.             <div class="intro-y col-span-12 lg:col-span-12">
  19.                     <!-- BEGIN: Wizard Layout -->
  20.                     <div class="intro-y box py-10 sm:py-20 mt-5">
  21.                     {% include 'global/steps.html.twig' %}
  23.                     <form action="{{ path('app_tarifrechner') }}" method="post" id="form_tarifrechner" class="mt-3">
  24.                         <input type="hidden" name="formSend" value="1"/>
  25.                         <input type="hidden" id="step" name="step" value="{{step}}"/>
  26.                         <input type="hidden" id="tarifrechner_gewerbeprodukte" name="tarifrechner_gewerbeprodukte" value="{{ gewerbeprodukte }}"/>
  27.                         
  28.                         <div class="px-5 sm:px-20 mt-10 pt-10 pb-10 border-t border-slate-200/60 dark:border-darkmode-400 stepcontent">
  29.                             <div class="font-medium text-base">
  30.                                 Tarifrechner
  31.                             </div>
  32.                             
  33.                             {# Sparte #}
  34.                             <select id="select_sparte" class="form-select sm:mt-2 sm:mr-2" aria-label=".form-select-lg example" name="sparte" required>
  35.                                 {% for key,value in spartenkennung %}
  36.                                         <option value="{{ key }}" {% if sparte is defined and key == sparte %}selected{% endif %}>{{ value }}</option>
  37.                                 {% endfor %}
  38.                             </select>
  39.                         
  40.                             <div id="form_parameter" class="flex flex-col mt-5">
  41.                                 {# Kundentyp #}
  42.                                 <div class="mb-10">
  43.                                     <div class="font-medium">Ich bin</div>
  44.                                     <div id="radio_box_kundentyp" class="flex flex-row sm:flex-col-6 mt-2">
  45.                                         <div class="grid grid-cols-12 gap-4 gap-y-5">
  46.                                             <div class="col-span-12 lg:col-span-4">
  47.                                                 <div class="form-check mr-10">
  48.                                                     <input id="radio_kundentyp_privat" class="form-check-input radio_kundentypen" type="radio" name="kundentyp" value="privat" {% if kundentyp == "privat" or kundentyp is empty %}checked="true"{% endif %} {% if warenkorbExists is not empty %}disabled="true"{% endif %}>
  49.                                                     <label class="form-check-label" for="radio_kundentyp_privat">ein neuer Privatkunde</label>
  50.                                                 </div>
  51.                                             </div>
  53.                                             <div class="col-span-12 lg:col-span-4">
  54.                                                 <div class="form-check mr-10">
  55.                                                     <input id="radio_kundentyp_gewerbe" class="form-check-input radio_kundentypen" type="radio" name="kundentyp" value="gewerbe" {% if kundentyp == "gewerbe" %}checked="true"{% endif %} {% if warenkorbExists is not empty %}disabled="true"{% endif %}>
  56.                                                     <label class="form-check-label" for="radio_kundentyp_gewerbe">ein neuer Gewerbekunde</label>
  57.                                                 </div>
  58.                                             </div>
  60.                                             <div class="col-span-12 lg:col-span-4">
  61.                                                 <div class="form-check mr-10">
  62.                                                     <input id="radio_kundentyp_bestand" class="form-check-input radio_kundentypen" type="radio" name="kundentyp" value="kunde" {% if warenkorbExists is not empty %}disabled="true"{% endif %}>
  63.                                                     <label class="form-check-label" for="radio_kundentyp_bestand">bereits Kunde</label>
  64.                                                 </div>
  65.                                             </div>
  66.                                         </div>
  67.                                     </div>
  68.                                 </div>
  70.                                 <div id="content_tarif_finden">
  71.                                     <div class="intro-y grid grid-cols-12 gap-4 gap-y-5">
  72.                                         <div class="col-span-12 lg:col-span-6">
  73.                                             <div class="font-medium">Bitte wählen Sie die Anzahl der Personen</div>
  74.                                             <div class="flex flex-col">
  75.                                                 {# Personen im Haushalt #}
  76.                                                 {% include 'global/personenimhaushalt.html.twig' %}
  77.                                             </div>
  78.                                         </div>
  79.                                     </div>
  81.                                     {# Tarifrechner Passwort #}
  82.                                     {% if tarifrechner_passwort == true %}                                
  83.                                     <div class="intro-y grid grid-cols-12 gap-4 gap-y-5 mt-5">
  84.                                         <div class="col-span-12 lg:col-span-6">
  85.                                             <div class="mt-3">
  86.                                                 <label for="input_produktkennung" class="form-label">Produktkennung</label>
  87.                                                 <input id="input_produktkennung" type="text" class="form-control" placeholder="Produktkennung" required name="tarifrechner_passwort">
  88.                                             </div>
  89.                                         </div>
  90.                                     </div>
  91.                                     {% endif %}
  93.                                     <div class="intro-y grid grid-cols-12 gap-4 gap-y-5 mt-5">
  94.                                         <div class="col-span-12 lg:col-span-6">
  95.                                             {# Jahresverbrauch #}
  96.                                             <div class="mt-3">
  97.                                                 <label for="input_jahresverbrauch" class="form-label">Jahresverbrauch in <span class="unit">kWh</span><span class="red"> *</span></label>
  98.                                                 <input id="input_jahresverbrauch" type="number" class="form-control" placeholder="Jahresverbrauch" value="{% if jahresverbrauch is defined and jahresverbrauch is not empty %}{{ jahresverbrauch }}{% endif %}" min="1" step="1" name="jahresverbrauch">
  99.                                             </div>
  101.                                             {# Adresse #}
  102.                                             <div class="mt-3">
  103.                                                 <label for="p_PostCode" class="form-label">Postleitzahl<span class="red"> *</span></label>
  104.                                                 <input type="text" class="form-control" name="plz" placeholder="Postleitzahl" id="p_PostCode" value="{{ plz }}" {% if warenkorbExists is not empty %}readonly{% endif %} minlength="5" maxlength="5">
  105.                                             </div>
  107.                                             {% if 'Ort' in einzugsgebiet or 'Straße' in einzugsgebiet or 'Anschlussobjekt' in einzugsgebiet %}
  108.                                             <div class="mt-3">
  109.                                                 <label for="p_CityName" class="form-label">Ort<span class="red"> *</span></label>
  110.                                                 <div class="relative">
  111.                                                     <input type="text" value="{{ ort }}" id="p_CityName" class="form-control" name="ort" placeholder="Ort" data-cityno="" role="combobox" aria-controls="cityOptions" aria-expanded="false" {% if warenkorbExists is not empty %}readonly{% endif %}>
  113.                                                     <button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
  114.                                                         <!-- Heroicon name: mini/chevron-up-down -->
  115.                                                         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  116.                                                                 <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
  117.                                                         </svg>
  118.                                                     </button>
  119.                                                     <ul class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm hidden" id="cityOptions" role="listbox">
  120.                                                             <!-- Search Results -->
  121.                                                     </ul>
  122.                                                 </div>
  123.                                             </div>
  124.                                             {% endif %}
  125.                                         </div>
  126.                                         
  127.                                         <div class="col-span-12 lg:col-span-6">
  128.                                             {% if 'Straße' in einzugsgebiet or 'Anschlussobjekt' in einzugsgebiet %}
  129.                                             <div class="mt-3">
  130.                                                 <label for="p_StreetName" class="form-label">Straße<span class="red"> *</span></label>
  131.                                                 <div class="relative">
  132.                                                     <input type="text" value="{{ strasse }}" id="p_StreetName" class="form-control" name="strasse"  placeholder="Straße" role="combobox" aria-controls="streetOptions" aria-expanded="false" {% if warenkorbExists is not empty %}readonly{% endif %}>
  134.                                                     <button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
  135.                                                         <!-- Heroicon name: mini/chevron-up-down -->
  136.                                                         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  137.                                                                 <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
  138.                                                         </svg>
  139.                                                     </button>
  141.                                                     <ul class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm hidden" id="streetOptions" role="listbox">
  142.                                                             <!-- Search Results -->
  143.                                                     </ul>
  144.                                                 </div>
  145.                                             </div>
  146.                                             {% endif %}
  148.                                             {% if 'Anschlussobjekt' in einzugsgebiet %}
  149.                                             <div class="mt-3">
  150.                                                 <label for="p_HouseNo" class="form-label">Hausnummer<span class="red"> *</span></label>
  151.                                                 <input id="p_HouseNo" type="text" class="form-control" onkeypress="return /^-?[0-9]*$/.test(this.value+event.key)" placeholder="Hausnummer" name="hausnr" value="{% if requestData.p_HouseNo is defined and requestData.p_HouseNo > 0 %}{{requestData.p_HouseNo}}{% endif %}" {% if warenkorbExists is not empty %}readonly{% endif %}>
  152.                                             </div>
  153.                                             {% endif %}
  155.                                             {% if 'Anschlussobjekt' in einzugsgebiet %}
  156.                                             <div class="mt-3">
  157.                                                 <label for="p_HouseNumberAddition" class="form-label">Hausnummer Zusatz</label>
  158.                                                 <input id="p_HouseNumberAddition" type="text" class="form-control" placeholder="Hausnummer Zusatz" name="hausnrzusatz" value="{% if requestData.p_HouseNumberAddition is defined and requestData.p_HouseNumberAddition is not empty %}{{requestData.p_HouseNumberAddition}}{% endif %}" {% if warenkorbExists is not empty %}readonly{% endif %}>
  159.                                             </div>
  160.                                             {% endif %}
  161.                                         </div>
  163.                                         <div class="intro-y col-span-12 flex items-center justify-center sm:justify-end mt-5">
  164.                                             <button id="tarifFinden" type="submit" class="btn btn-primary w-56 ml-2">Tarif finden</button>
  165.                                         </div>
  166.                                     </div>
  167.                                 </div>
  169.                                 <div id="content_gewerbekunde" class="hidden">
  170.                                     <div class="intro-y mt-8">
  171.                                         {{ text_gewerbeprodukte|raw }}
  172.                                     </div>
  173.                                 </div>
  174.                                 
  175.                                 <div id="content_bereits_kunde" class="hidden">
  176.                                     <div class="intro-y mt-8">
  177.                                         {{ text_bereits_kunde|raw }}
  178.                                     </div>
  179.                                     <div class="intro-y flex flex-col md:flex-row mt-8 items-center justify-center sm:justify-end">
  180.                                         <a class="btn btn-primary w-40 md:w-56 md:ml-2" href="/">Weiter zum Login</a>
  181.                                         <a class="btn btn-dark-soft w-40 md:ml-3 mt-2 md:mt-0" href="/?target_action=register">Jetzt registrieren</a>
  182.                                     </div>
  183.                                 </div>
  184.                             </div>
  185.                         </div>
  186.                     </form>
  188.                     {# Produktübersicht #}
  189.                     {% include 'global/produktuebersicht.html.twig' %}
  190.                     
  191.                     <div class="px-5 sm:px-20 border-t border-slate-200/60 dark:border-darkmode-400">
  192.                         <div class="intro-y col-span-12 flex flex-col md:flex-row items-center justify-between sm:justify-between mt-5">
  193.                             <a class="btn btn-secondary w-40" href="/">zurück zur Startseite</a>
  194.                             <div class="flex flex-col md:flex-row">
  195.                                 <button id="btn_restart_tarifrechner" type="button" class="btn btn-secondary w-40 mt-2 md:mt-0">Tarifwahl neu starten</button>
  196.                                 {% if warenkorbExists %}
  197.                                     <a class="btn btn-dark-soft w-40 md:ml-3 mt-2 md:mt-0" href="/tarifrechner/tarif-waehlen">Zum Warenkorb</a>
  198.                                 {% endif %}
  199.                             </div>
  200.                         </div>
  201.                     </div>
  202.                 </div>
  203.                 
  204.                 {% include 'global/footerlinks-login.html.twig' %}
  205.             </div>
  206.         </div>
  207.     </div>
  208.     <!-- END: Content -->
  210. {% endblock %}
  212. {% block scripts %}
  213.     <script src="{{ asset('/js/tarifrechner/tariffinden.js')}}"></script>
  214.     <script src="{{ asset('/js/steps.js')}}"></script>
  215. {% endblock %}