{% extends 'base.html.twig' %}
{% form_theme form 'default/form/theme.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets 'bundles/app/css/booking.css' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% javascripts '@AppBundle/Resources/public/js/fewoBooking.js' %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% block body %}
    <section class="clearfix">

        <div class="content-copy">

            <h1>Buchungsformular FeWo</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">{{ lodging.name }}</h2>


            <div id="booking_form" class="booking_form">

                <form class="st-booking-form" method="post">

                    {{ form_errors(form) }}

                    <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>Ferienwohnung</td>
                                    <td>
                                        {{ lodging.name }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Saison</td>
                                    <td>
                                        {{ fewo_price.season.name }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Reisebeginn</td>
                                    <td>{{ fromDate|date }}</td>
                                </tr>
                                <tr>
                                    <td>{{ form_label(form.toDate, 'Reiseende') }}</td>
                                    <td>
                                        {{ form_widget(form.toDate, {attr: {'data-allowed-dates': allowed_to_dates}}) }}
                                        {{ form_errors(form.toDate) }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Mindestbelegung</td>
                                    <td>
                                        {{ fewo_price.season.minimumStay }} {{ fewo_price.season.minimumStay < 2 ? 'Nacht' : 'Nächte' }}
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ form_label(form.travelerCount, 'Reiseteilnehmer') }}</td>
                                    <td>
                                        {{ form_widget(form.travelerCount) }}
                                        {{ form_errors(form.travelerCount) }}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="col-xs-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <h3>Ihr gewähltes Angebot</h3>
                                    <div class="st-booking-summary">
                                        {% include 'default/components/booking/fewoSummary.html.twig' with {
                                        'fewo_booking_request' : fewo_booking_request,
                                        'fewo_lodging' : fewo_lodging,
                                        'fewo_price' : fewo_price,
                                        'total_price' : total_price,
                                        'total_price_per_night' : total_price_per_night,
                                        } %}
                                    </div>
                                </div>
                            </div>
                        </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">
                                {{ form_field_pho(form.salutation, 'Anrede', {'label_attr': {class: 'sr-only'}}) }}
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                {{ form_field_pho(form.firstName, 'Vorname') }}
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                {{ form_field_pho(form.lastName, 'Nachname') }}
                            </div>

                            <div class="col-md-12 col-sm-12 col-xs-12">
                                {{ form_field_pho(form.streetAddress, 'Straße, Hausnummer') }}
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                {{ form_field_pho(form.zipCode, 'PLZ') }}
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                {{ form_field_pho(form.city, 'Ort') }}
                            </div>

                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                {{ form_field_pho(form.nation, 'Land') }}
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                {{ form_field_pho(form.phone, 'Telefon tagsüber') }}
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                {{ form_field_pho(form.fax, 'Fax (optional)') }}
                            </div>

                            <div class="col-md-12 col-sm-12 col-xs-12">
                                {{ form_field_pho(form.email, '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>Mitteilungen / Sonstiges (optional)</h5>
                            </div>
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                {{ form_field(form.notes, 'Mitteilungen / Sonstiges (optional)', {
                                    'label_attr': {'class': 'sr-only'},
                                    'attr': {'rows': '6'}
                                }) }}
                            </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">
                                    {{ form_widget(form.acceptTerms) }}
                                    <label for="{{ form.acceptTerms.vars.id }}">
                                        Ich habe alle Daten und Angaben auf Richtigkeit überprüft. Ich habe die
                                        <a href="/uploads/{{ terms_filename }}" target="_blank">
                                            Allgemeinen Geschäftsbedingungen des Reisevermittlers
                                        </a>
                                        gelesen und akzeptiert. Zugleich erkenne ich diese für alle Reiseteilnehmer an.
                                    </label>
                                    {{ form_errors(form.acceptTerms) }}
                                </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_rest(form) }}
                </form>

            </div><!-- end contact-form -->

        </div>

    </section>
{% endblock body %}