{% extends 'base.html.twig' %}

{% block canonical_tag %}{% endblock %}

{% block body %}

	 <section class="clearfix">

        <div class="content-copy">

 			<h1>Vielen Dank für Ihren Buchungsauftrag!</h1>

            <div class="pull-right">
                <a href="/" class="btn btn-primary btn-sm"><< Zurück zur Startseite</a>
            </div>
            <div class="clearfix"></div>

            <h2 style="margin-top:10px">{{ travel_program.title }}</h2>


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

                <form class="st-booking-form" 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>{{ booking.selectedStartDate|date }} - {{ booking.selectedEndDate|date }}</td>
                                </tr>
                                <tr>
                                    <td>Abflugort</td>
                                    <td>
                                        {{ booking.selectedDeparture.name }}
                                    </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/summary.html.twig' with {
                                            'summary': summary,
                                            'total_price': total_price
                                        } %}
                                    </div>
                                </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="table-responsive" id="no-more-tables_first">
                            <table class="table first-table">
                                <tbody>
                                <tr>
                                    <td>Anrede</td>
                                    <td>
                                        {% if booking.salutation == 1 %}
                                            Herr
                                        {% elseif booking.salutation == 2 %}
                                            Frau
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Vorname</td>
                                    <td>{{ booking.firstName }}</td>
                                </tr>
                                <tr>
                                    <td>Nachname</td>
                                    <td>{{ booking.lastName }}</td>
                                </tr>
                                <tr>
                                    <td>Vorname</td>
                                    <td>{{ booking.firstName }}</td>
                                </tr>
                                <tr>
                                    <td>Straße, Hausnummer</td>
                                    <td>{{ booking.street }} {{ booking.houseNr }}</td>
                                </tr>
                                <tr>
                                    <td>PLZ</td>
                                    <td>{{ booking.zipCode }}</td>
                                </tr>
                                <tr>
                                    <td>Ort</td>
                                    <td>{{ booking.city }}</td>
                                </tr>
                                 <tr>
                                    <td>Land</td>
                                    <td>{{ booking.country }}</td>
                                </tr>
                                 <tr>
                                    <td>Telefon tagsüber</td>
                                    <td>{{ booking.phone }}</td>
                                </tr>
                                 <tr>
                                    <td>Fax (optional)</td>
                                    <td>{{ booking.fax }}</td>
                                </tr>
                                 <tr>
                                    <td>E-Mail-Adresse</td>
                                    <td>{{ booking.mail }}</td>
                                </tr>
                                </tbody>
                            </table>
                        	</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 style="text-align: left;">Nr.</th>
                                            <th style="text-align: left;">Geschlecht</th>
                                            <th style="text-align: left;">Vorname</th>
                                            <th style="text-align: left;">Nachname</th>
                                            <th style="text-align: left;">Geburtsdatum (TT.MM.JJJJ)</th>
                                        </tr>
                                        </thead>
                                        <tbody class="st-travelers">

                                        {% for participant in booking.participants %}
                                            <tr class="st-traveler st-traveler-{{ loop.index }}"
                                                data-st-traveler-index="{{ loop.index }}"
                                                style="display: ;"
                                            >
                                                <td>
                                                    <button class="btn btn-primary btn-sm border-radius st-traveller-index"
                                                            type="button"
                                                    >
                                                        {{ loop.index ?? '' }}
                                                    </button>
                                                </td>
                                                <td  style="text-align: left;">
                                                    {% if participant.sex == 1 %}
                                                        männlich
                                                    {% elseif participant.sex == 2 %}
                                                        weiblich
                                                    {% endif %}
                                                </td>
                                                <td  style="text-align: left;">
                                                    {{ participant.firstName }}
                                                </td>
                                                <td  style="text-align: left;">
                                                    {{ participant.lastName }}
                                                </td>
                                                <td  style="text-align: left;">
                                                    {{ participant.birthDate|date }}
                                                </td>
                                            </tr>
                                        {% endfor %}

                                        </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">
                                <p>{{ booking.comments }}</p>
                            </div>
                        </div>
                    </div><!-- end form-box -->


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

  			<div class="pull-right">
                <a href="/" class="btn btn-primary btn-sm"><< Zurück zur Startseite</a>
            </div>

        </div>

    </section>
   
{% endblock %}