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

{% block stylesheets %}
    <style>.box-slider .slide:not(.active) {display: none;}</style>{# TODO Move to custom.css #}
    <link rel="stylesheet" href="{{ asset('css/my-fewo.css?v') }}{{ get_file_last_time('css/my-fewo.css') }}">
{% endblock stylesheets %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/fewoBooking-min.js?v') }}{{ get_file_last_time('js/fewoBooking-min.js') }}"></script>
{% 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" style="">

                <form class="st-booking-form" method="post" data-toggle="validator">

                    {{ form_errors(form) }}
                     {{ form_errors(form.email) }}

                    <input type="hidden" name="hidden_toDate" id="hidden_toDate" value="{{ lastSeason.toDate|date('d-m-y') }}">
                    <input type="hidden" name="hidden_reservationDays" id="hidden_reservationDays" value='{{ reservationDays|json_encode|raw }}'>
                    <input type="hidden" name="hidden_customDays" id="hidden_customDays" value='{{ classByDays|json_encode|raw }}'>


                    <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><label class="st-required control-label required">Datum</label></td>
                                    <td style="white-space: normal;">
                                        <div class="form-group" style="margin-bottom:0;">
                                            <div class="input-daterange input-group" id="date-range">
                                                {{ form_widget(form.fromDate) }}
                                                <span class="input-group-addon bg-info b-0 text-white">bis</span>
                                                {{ form_widget(form.toDate) }}
                                            </div>
                                        </div>
                                        <div class="small alert alert-success" style="margin-bottom: 0; padding-top: 6px; padding-bottom: 6px">Bei Datumsänderung, erst immer das Anreisedatum, dann das Abreisedatum im Kalender auswählen.</div>
                                    </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.travelerCountAdult, 'Reiseteilnehmer Erwachsene') }}</td>
                                    <td>
                                        <div style="max-width: 180px;">
                                        {{ form_widget(form.travelerCountAdult) }}
                                        {{ form_errors(form.travelerCountAdult) }}
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{{ form_label(form.travelerCountChild, 'Reiseteilnehmer Kinder') }}</td>
                                    <td>
                                        <div style="max-width: 180px;">
                                            {{ form_widget(form.travelerCountChild) }}
                                            {{ form_errors(form.travelerCountChild) }}
                                        </div>
                                    </td>
                                </tr>
                               <!-- <tr>
                                    <td>{{ form_label(form.travelerCount, 'Reiseteilnehmer') }}</td>
                                    <td>
                                        <div style="max-width: 180px;">
                                            {{ form_widget(form.travelerCount) }}
                                            {{ form_errors(form.travelerCount) }}
                                        </div>
                                    </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">
                                  <div class="form-group">
                                     <div class="required">
                                {{ form_field_pho(form.firstName, 'Vorname') }}
                                </div>
                                      <div class="help-block with-errors"></div>
                                 </div>
                            </div>

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

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

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

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                  <div class="form-group">
                                     <div class="required">
                                {{ form_field_pho(form.city, 'Ort') }}
                                </div>
                                      <div class="help-block with-errors"></div>
                                 </div>
                            </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">
                                  <div class="form-group">
                                     <div class="required">
                                {{ form_field_pho(form.phone, 'Telefon tagsüber') }}
                                </div>
                                      <div class="help-block with-errors"></div>
                                 </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-12">
                                {{ form_field_pho(form.mobile, 'Handynummer (Bitte angeben)') }}
                            </div>

                            <div class="col-md-12 col-sm-12 col-xs-12">
                                  <div class="form-group">
                                     <div class="required">
                                {{ form_field_pho(form.email, 'E-Mail-Adresse') }}
                                </div>
                                      <div class="help-block with-errors"></div>
                                 </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>Unverbindliche Anmerkungen</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>Datenschutz</h5>
                             <div class="form-group">
                                <div class="checkbox">
                                    {{ form_widget(form.acceptPrivacy) }}
                                        <label for="{{ form.acceptPrivacy.vars.id }}">
                                           Hiermit willige ich in die im Rahmen der 
                                           <a href="/datenschutz" target="_blank">
                                                Datenschutzerklärung
                                            </a> genannte Datenverarbeitung ein.
                                        </label>
                                    <span class="checkbox_marker"></span>
                                    {{ form_errors(form.acceptPrivacy) }}
                                        <div class="help-block with-errors"></div>
                                </div>
                             </div>
                             <div class="form-group">

                                 <div class="checkbox">
                                     {{ form_widget(form.acceptRentalConditions) }}
                                     <label for="{{ form.acceptRentalConditions.vars.id }}">
                                         Ich bin einverstanden mit den
                                         <a href="/pdf/Stern-Tours-Mietbedingungen.pdf" target="_blank">
                                             Mietbedingungen.
                                         </a>
                                     </label>
                                     <span class="checkbox_marker"></span>
                                     {{ form_errors(form.acceptRentalConditions) }}
                                     <div class="help-block with-errors"></div>
                                 </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 btn-booking-form"
                                >
                                    <span class="btn-booking-submit"><i class="fa fa-angle-double-right" style="margin-bottom:-1px!important;"></i>  zahlungspflichtig<br class="visible-xs"> mieten</span>
                                    <span class="btn-booking-loading hide"><i class="fa fa-spinner" style="margin-bottom:-1px!important;"></i>  Formular <br class="visible-xs"> wird gesendet</span>
                                </button>
                            </div>
                        </div>
                    </div><!-- end form-box -->


                    {{ form_rest(form) }}
                    </div>
                </form>

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


        </div>

    </section>



{% endblock body %}