377 lines
No EOL
23 KiB
Twig
377 lines
No EOL
23 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block breadcrumb %}
|
|
{{ include('default/components/breadcrumb.html.twig') }}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<section class="clearfix">
|
|
|
|
<div class="content-copy">
|
|
|
|
<h1>Buchungsformular</h1>
|
|
|
|
<div class="pull-right">
|
|
<a href="{{ page.urlPath }}" class="btn btn-primary btn-sm"><< zurück zu Termine und Preise</a>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
|
|
<h2 style="margin-top:10px">{{ travel_program.title }}</h2>
|
|
|
|
|
|
<div id="booking_form" class="booking_form">
|
|
|
|
<form id="contactform" class="" action="#" name="contactform" method="post">
|
|
<div id="message"></div>
|
|
|
|
<div class="form-box">
|
|
<div class="table-responsive" id="no-more-tables_first">
|
|
<table class="table first-table">
|
|
<tbody>
|
|
<tr>
|
|
<td>Reiseprogramm</td>
|
|
<td>
|
|
{{ travel_program.title }}
|
|
{#<br class="visible-xs"><a href="#" data-toggle="modal" data-target="#myModal">(Reisebeschreibung aufrufen)</a>#}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Kategorie</td>
|
|
<td>Standard {# #TODO #}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Reisezeitraum</td>
|
|
<td>{{ travel_date.start|date }} - {{ travel_date.end|date }} ({{ travel_date.name }})</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{ form_label(form.departure, 'Abflugort') }}</td>
|
|
<td>
|
|
<div class="dropdown">
|
|
{{ form_widget(form.departure, {'attr': {
|
|
'class': 'selectpicker',
|
|
'data-style': 'btn-white'
|
|
}}) }}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{ form_label(form.travelerCount, 'Reiseteilnehmer') }}</td>
|
|
<td><div class="dropdown">
|
|
Erwachsene<br>
|
|
{{ form_widget(form.travelerCount) }}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Reiseversicherung</td>
|
|
<td>
|
|
<div class="radio">
|
|
<input id="radio1" type="radio" name="radio">
|
|
<label for="radio1">
|
|
keine Reiseversicherung
|
|
</label>
|
|
</div>
|
|
|
|
{% for insuranceForm in form.insurance %}
|
|
{% include 'default/components/booking/insurance.html.twig' with {
|
|
'form': insuranceForm,
|
|
'insurance': form.insurance.vars.choices[insuranceForm.vars.value].data
|
|
} %}
|
|
{% endfor %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Zubuchbare Leistungen</td>
|
|
<td>
|
|
{% if form.comfort is defined %}
|
|
<div class="checkbox">
|
|
{{ form_widget(form.comfort) }}
|
|
<label for="{{ form.comfort.vars.id }}">
|
|
Komfort-Kategorie (4 Sterne)
|
|
(<a href="#" data-toggle="modal" data-target="#st-comfort-booking-option-modal">Details</a>)
|
|
</label>
|
|
{% embed "default/components/embed/modal.html.twig" with {
|
|
'title': 'Komfort-Kategorie (4 Sterne)',
|
|
'id': 'comfort-booking-option'
|
|
} %}
|
|
{% block body %}
|
|
<h4>Aufpreise für Kategorie</h4>
|
|
<ul>
|
|
{% for price in travel_date.prices %}
|
|
{# @var price \AppBundle\Entity\TravelPeriodPrice #}
|
|
<li>
|
|
p.P. {{ price.priceComfort|number_format(2) }} €
|
|
{{ price_type_by_id[price.priceType.id].name }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endblock %}
|
|
{% endembed %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for travelOptionForm in form.travelOptions %}
|
|
{% include 'default/components/booking/travelOption.html.twig' with {
|
|
'travelOptionForm': travelOptionForm,
|
|
'travelOption': form.travelOptions.vars.choices[travelOptionForm.vars.value].data
|
|
} %}
|
|
{% endfor %}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="col-xs-12">
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
<h3>Ihr gewähltes Angebot</h3>
|
|
<table class="st-booking-table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="st-position-price-col">-700,00 €</td>
|
|
<td class="st-position-name-col">
|
|
Abzug für Abfahrts-/Abflugort "Eigenanreise" (2 x -350,00 €):
|
|
<strong>-700,00 €</strong>
|
|
</td>
|
|
</tr>
|
|
<tr class="st-total-tr">
|
|
<td class="st-position-price-col">
|
|
<span class="st-total-price">= 3.921,68 €</span>
|
|
</td>
|
|
<td class="st-position-name-col">Gesamtpreis der Reise</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-box">
|
|
<div class="">
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<h5>Reiseleistungen</h5>
|
|
</div>
|
|
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<div class="accordion-toggle-2">
|
|
<div class="panel-group" id="accordion">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true">
|
|
<h3><span>Reiseleistungen einblenden</span><i class="indicator pull-right icon-plus"></i></h3>
|
|
</a>
|
|
<div id="collapse1" class="panel-collapse collapse" aria-expanded="true" style="">
|
|
<div class="panel-body">
|
|
<h3>Eingeschlossene Leistungen</h3>
|
|
<ul class="c1">
|
|
{% for travel_program_service in travel_program.included|replace({'*': '<img src="/bundles/app/images/star-mini.png" >'})|split('\n') %}
|
|
<li>{{ travel_program_service|raw }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<h3>Nicht eingeschlossene / zubuchbare Leistungen</h3>
|
|
<ul class="c1">
|
|
{% for travel_program_service in travel_program.excluded|split('\n') %}
|
|
<li>{{ travel_program_service|raw }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<h3>Hinweise</h3>
|
|
<ul class="c1">
|
|
{% for travel_program_service in travel_program.advices|split('\n') %}
|
|
<li>{{ travel_program_service|raw }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- accordion -->
|
|
</div>
|
|
</div>
|
|
<div class="form-box">
|
|
<div class="">
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<h5>Reiseanmelder</h5>
|
|
</div>
|
|
|
|
<div class="form-group col-md-12 col-sm-12 col-xs-12">
|
|
<div class="dropdown">
|
|
<select name="salutation" id="salutation" class="selectpicker" data-style="btn-white" data-dropup-auto="false">
|
|
<option value="" selected="selected">Anrede (Bitte wählen)</option>
|
|
<option value="1">Herr</option>
|
|
<option value="2">Frau</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6 col-xs-12">
|
|
<input type="text" name="firstname" id="firstname" class="form-control" placeholder="Vorname *">
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6 col-xs-12">
|
|
<input type="text" name="lastname" id="lastname" class="form-control" placeholder="Nachname *">
|
|
</div>
|
|
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<input type="text" name="street" id="street" class="form-control" placeholder="Straße, Hausnummer">
|
|
</div>
|
|
|
|
|
|
<div class="col-md-6 col-sm-6 col-xs-12">
|
|
<input type="text" name="plz" id="plz" class="form-control" placeholder="PLZ">
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6 col-xs-12">
|
|
<input type="text" name="ort" id="ort" class="form-control" placeholder="Ort">
|
|
</div>
|
|
|
|
<div class="form-group col-md-12 col-sm-12 col-xs-12">
|
|
<div class="dropdown">
|
|
<select name="country" class="selectpicker" data-style="btn-white" data-dropup-auto="false">
|
|
<option value="" selected="selected">Land (Bitte wählen)</option>
|
|
<option value="27">Deutschland</option>
|
|
<option value="34">Österreich</option>
|
|
<option value="181">Schweiz</option>
|
|
<option value="196">Niederlande</option>
|
|
<option value="197">Sonstiges</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6 col-xs-12">
|
|
<input type="text" name="firstname" id="firstname" class="form-control" placeholder="Telefon tagsüber *">
|
|
</div>
|
|
|
|
<div class="col-md-6 col-sm-6 col-xs-12">
|
|
<input type="text" name="lastname" id="lastname" class="form-control" placeholder="Fax (optional)">
|
|
</div>
|
|
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<input type="text" name="email" id="email" class="form-control" placeholder="E-Mail-Adresse *">
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- end form-box -->
|
|
|
|
<div class="form-box">
|
|
<div class="">
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<h5>Reiseteilnehmer</h5>
|
|
<p>Bitte geben Sie Ihre Vornamen und Nachnamen in die beiden Felder "Vornamen" und "Nachnamen" ein, wie diese im maschinenlesbaren Teil in Ihrem Reisepass eingetragen sind.</p>
|
|
</div>
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
|
|
<div class="table-responsive" id="no-more-tables">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nr.</th>
|
|
<th>Geschlecht</th>
|
|
<th>Vorname</th>
|
|
<th>Nachname</th>
|
|
<th>Geburtsdatum (TT.MM.JJJJ)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-title="Nr.">
|
|
<button class="btn btn-primary btn-sm border-radius">1</button>
|
|
</td>
|
|
<td data-title="Geschlecht">
|
|
<div class="dropdown">
|
|
<select name="salutation" id="salutation1" class="selectpicker" data-style="btn-white" data-dropup-auto="false">
|
|
<option value="" selected="selected">Anrede (Bitte wählen)</option>
|
|
<option value="1">Herr</option>
|
|
<option value="2">Frau</option>
|
|
</select>
|
|
</div>
|
|
</td>
|
|
<td data-title="Vorname">
|
|
<input type="text" name="firstname" id="firstname1" class="form-control" placeholder="Vorname">
|
|
</td>
|
|
<td data-title="Nachname">
|
|
<input type="text" name="firstname" id="firstname1" class="form-control" placeholder="Nachname">
|
|
</td>
|
|
<td data-title="Geburtsdatum">
|
|
<input type="text" name="firstname" id="firstname1" class="form-control" placeholder="Geburtsdatum">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-title="Nr.">
|
|
<button class="btn btn-primary btn-sm border-radius">2</button>
|
|
</td>
|
|
<td data-title="Geschlecht">
|
|
<div class="dropdown">
|
|
<select name="salutation" id="salutation2" class="selectpicker" data-style="btn-white" data-dropup-auto="false">
|
|
<option value="" selected="selected">Anrede (Bitte wählen)</option>
|
|
<option value="2">Herr</option>
|
|
<option value="2">Frau</option>
|
|
</select>
|
|
</div>
|
|
</td>
|
|
<td data-title="Vorname">
|
|
<input type="text" name="firstname" id="firstname2" class="form-control" placeholder="Vorname">
|
|
</td>
|
|
<td data-title="Nachname">
|
|
<input type="text" name="firstname" id="firstname2" class="form-control" placeholder="Nachname">
|
|
</td>
|
|
<td data-title="Geburtsdatum">
|
|
<input type="text" name="firstname" id="firstname2" class="form-control" placeholder="Geburtsdatum">
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end form-box -->
|
|
|
|
<div class="form-box">
|
|
<div class="">
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<h5>Mitteilungen / Sonstiges (optional)</h5>
|
|
</div>
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<textarea class="form-control" name="comments" id="comments" rows="6" placeholder=""></textarea>
|
|
</div>
|
|
</div>
|
|
</div><!-- end form-box -->
|
|
|
|
<div class="form-box">
|
|
<div class="">
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<h5>Zahlung</h5>
|
|
|
|
<p>Die gewünschte Zahlungsart (Rechnung, Überweisung, Sofortüberweisung, Kreditkarten, Barzahlung) stimmen wir mit Ihnen im Anschluss an Ihre Buchung ab.</p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div><!-- end form-box -->
|
|
|
|
<div class="form-box">
|
|
<div class="">
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<h5>Allgemeine Geschäftsbedingungen</h5>
|
|
<div class="checkbox">
|
|
<input id="checkbox4" type="checkbox">
|
|
<label for="checkbox4">
|
|
Ich habe alle Daten und Angaben auf Richtigkeit überprüft. Ich habe die <a href="#">Allgemeinen Geschäftsbedingungen des Reiseveranstalters</a> SKR sowie die <a href="#">Allgemeinen Geschäftsbedingungen des Reisevermittlers</a> gelesen und akzeptiert. Zugleich erkenne ich diese für alle Reiseteilnehmer an.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 col-sm-12 col-xs-12">
|
|
<button type="submit" value="SEND" id="submit" class="aligncenter btn btn-primary btn-lg border-radius">kostenpflichtig<br class="visible-xs"> buchen</button>
|
|
</div>
|
|
</div>
|
|
</div><!-- end form-box -->
|
|
|
|
</form>
|
|
|
|
</div><!-- end contact-form -->
|
|
|
|
</div>
|
|
|
|
</section>
|
|
{% endblock body %} |