{# @var travel_program \AppBundle\Entity\TravelProgram #}
{% extends get_base_template() %}

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

{% block body %}

    <section class="clearfix">
        <div class="content-copy">
            <h1>{{ travel_program.title|default(page.pagetitle)|default(page.title) }}</h1>
            <section class="section fullscreen background padding-0 margin-bottom-20">
                <div class="in-section-holder">
                    {% if travel_program.lowestPrice > 0 %}
                        <div class="price-over-slider">
                            <div class="cprice">ab {{ travel_program.lowestPrice|number_format }} € p.P.</div>
                        </div>
                    {% endif %}

                    {% if travel_program.sliderInfo is not empty %}
                        <div class="price-over-slider next-over">
                            <div class="cprice">{{ travel_program.sliderInfo|raw }}</div>
                        </div>
                    {% endif %}

                    {% if travel_program.travelDates is not empty %}
                        <div class="pull-right btn-over-slider">
                            <button type="button"
                                    class="btn btn-primary btn-lg border-radius st-slider-booking-btn" id="st-slider-booking-events-scroll">
                                Termine <i class="fa fa-star faa-burst animated" style="margin-top: -5px"></i> Preise
                            </button>
                        </div>
                    {% endif %}

                    <div class="pull-right btn-over-slider btn-over-slider-bottom">
                        <a href="{{ page.slug }}/pdf" title="Reisebeschreibung als PDF herunterladen"
                           class="btn btn-primary btn-sm border-radius st-slider-booking-btn st-slider-booking-btn-bottom">
                            <i class="fa fa-print" style="margin-top: -3px;"></i> Katalogseite zum Drucken
                        </a>
                    </div>
                </div>

                <div id="myCarousel" class="carousel slide">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        {% for travel_program_image in travel_program.images %}
                            <li data-target="#myCarousel" data-slide-to="{{ loop.index-1 }}" {% if loop.first %}class="active"{% endif %}></li>
                        {% endfor %}
                    </ol>
                    <!-- Wrapper for Slides -->
                    <div class="carousel-inner">
                        {% for travel_program_image in travel_program.images %}
                            {# @var image \AppBundle\Entity\TravelProgramImage #}
                            <div class="item{% if loop.first %} active{% endif %}">
                                <!-- Set the first background image using inline CSS below. -->
                                {% set image_url = asset('uploads/travel_program/' ~ travel_program_image.fileNameWithExtension) %}
                                <div class="fill lozad"
                                     data-background-image="{{ image(image_url|trim('/')).cropResize(848).guess(75) }}"
                                     style="background-image:url({{ asset('images/placeholder-image.png') }}); background-position: center {{ travel_program_image.position }}"></div>
                                <noscript>
                                    <div class="fill"
                                         style="background-image:url({{ image(image_url|trim('/')).cropResize(848).guess(75) }}); background-position: center {{ travel_program_image.position }};"></div>
                                </noscript>

                            </div>
                        {% endfor %}
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>

                </div>
            </section><!-- end section -->

            {#
                ********* TAB BAR *********
            #}

            {% block travel_program_tab_bar %}
                <div class="wrapper-nav-tabs">
                    <ul class="nav nav-tabs nav-justified list-nav-tabs">
                        <li class="active">
                            <a href="#travel-description-content-tab" aria-controls="travel-description-content-tab"
                               role="tab" data-toggle="tab" class="child-first">
                                <span>1</span> Reiseablauf
                            </a>
                        </li>
                        {% if travel_program.included is not empty or
                            travel_program.excluded is not empty or
                            travel_program.classDescription is not empty %}
                            <li>
                                <a href="#travel-service-content-tab" aria-controls="travel-service-content-tab"
                                   role="tab" data-toggle="tab" class="child-sec">
                                    <span>2</span> Leistungen
                                </a>
                            </li>

                        {% endif %}
                        {% if travel_program.travelDates is not empty %}
                            <li>
                                <a href="#travel-dates-content-tab" aria-controls="travel-dates-content-tab" role="tab"
                                   data-toggle="tab" class="child-sec">
                                    <span>3</span> Termine <i class="fa fa-star faa-burst animated"></i> Preise
                                </a>
                            </li>
                        {% endif %}
                        {% if travel_program.hasMap %}
                            <li>
                                <a href="#travel-map-content-tab" aria-controls="travel-map-content-tab" role="tab"
                                   data-toggle="tab">
                                    Karte
                                </a>
                            </li>
                        {% endif %}
                        <li>
                            <a href="#travel-info-content-tab" aria-controls="travel-info-content-tab" role="tab"
                               data-toggle="tab">
                                Landinfos
                            </a>
                        </li>
                    </ul>
                </div>
            {% endblock travel_program_tab_bar %}


            <div class="tab-content">
                <div id="position-scroll-tab"></div>

                {#
                    ********* REISEABLAUF *********
                #}

                <div role="tabpanel" class="tab-pane active" id="travel-description-content-tab">

                    {{ travel_program.htmlDescription|raw|keywords|lozad }}
                    <br clear="all">

                    {% if (travel_program.advices is not empty) or (travel_program.generalnote is not empty) %}
                        <h3>Hinweise</h3>
                        <ul>
                            {% if travel_program.generalnote is not empty %}
                                {% for notes in travel_program.generalnote.text|trim|split('\n') %}
                                    {% if notes is not empty %}
                                        <li>{{ notes|raw }}</li>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                            {% for travel_program_advice in travel_program.advices|trim|split('\n') %}
                                {% if travel_program_advice is not empty %}
                                    <li>{{ travel_program_advice|raw }}</li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    {% endif %}

                </div> <!-- END tabpanel -->

                {#
                    ********* LEISTUNGEN *********
                #}

                <div role="tabpanel" class="tab-pane" id="travel-service-content-tab">

                    <h2>Eingeschlossene Leistungen</h2>
                    <ul>
                        {% 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>

                    {% if travel_program.classDescription is not empty %}
                        {{ travel_program.classDescription|replace({'*': '<img src="/bundles/app/images/star-mini.png" >'})|raw }}
                    {% endif %}

                    {% if travel_program.excluded is not empty %}
                        <h2>Nicht eingeschlossene / zubuchbare Leistungen</h2>
                        <ul>
                            {% for travel_program_service in travel_program.excluded|replace({'*': '<img src="/bundles/app/images/star-mini.png" >'})|split('\n') %}
                                <li>{{ travel_program_service|raw }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                </div>  <!-- END tabpanel -->

                {#
                    ********* TERMINE UND PREISE *********
                #}

                <div role="tabpanel" class="tab-pane" id="travel-dates-content-tab">

                    <h2>{{ travel_program.subtitle }}</h2>

                    <div class="table-responsive" id="no-more-tables">

                        {% if travel_program.travelDates is not empty %}
                            {% set has_three_bed_room = (travel_program.travelDates|first).prices[5] is defined %}
                            {% set has_double_bed_room = (travel_program.travelDates|first).prices[3] is defined %}
                            {% set has_singel_bed_room = (travel_program.travelDates|first).prices[1] is defined %}

                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Nr.</th>
                                    <th>Beginn <span class="small-table-show">- Ende</span></th>
                                    <th class="small-table-hidden">Ende</th>
                                    {% if has_three_bed_room %}
                                        <th>Preis p.P im Dreibettzimmer</th>{% endif %}
                                    {% if has_double_bed_room %}
                                        <th>Preis p.P im Doppelzimmer</th>{% endif %}
                                    {% if has_singel_bed_room %}
                                        <th>Preis p.P im Einzelzimmer</th>{% endif %}
                                    <th>Abflugorte / Zuschläge</th>
                                    <th>Verfügbarkeit</th>
                                    <th>Buchungsformular</th>
                                </tr>
                                </thead>
                                <tbody>

                                {% set last_name = "" %}
                                {% for travel_date in travel_program.travelDates if travel_date.status >= 0 %}

                                    {% if last_name != travel_date.name %}
                                        {% set last_name = travel_date.name %}

                                        {# @var travel_date \AppBundle\Entity\TravelDate #}
                                        <tr>
                                            <td data-title="Nr."><strong class="small">{{ travel_date.name }}</strong>
                                            </td>
                                            <td data-title="Beginn">{{ travel_date.start|date }} <span class="small-table-show">{{ travel_date.end|date }}</span></td>
                                            <td data-title="Ende" class="small-table-hidden">{{ travel_date.end|date }}</td>
                                            {% if has_three_bed_room %}
                                                <td data-title="Preis p.P. im Dreibettzimmer" class="price">
                                                    {% if  travel_date.prices[5] is defined %}
                                                        {% if travel_date.prices[5].available == "1" %}
                                                            {% if travel_date.prices[5] is defined %}

                                                                <span class="block">
                                                                    <span class="{% if travel_date.prices[5].effectiveDiscountPrice %}old_price{% endif %}">
                                                                        {% if travel_date.prices[5].effectiveDiscountPrice %}
                                                                        <i class="icons-percent"></i>
                                                                        {% endif %}
                                                                        ab {{ travel_date.prices[5].effectivePrice|number_format }} €
                                                                </span>
                                                                    {% if travel_date.prices[5].effectiveDiscountPrice %}
                                                                        <span class="new_price">
                                                                        ab {{ travel_date.prices[5].effectiveDiscountPrice|number_format }}
                                                                            €
                                                                    </span>
                                                                    {% endif %}
                                                             </span>
                                                            {% endif %}
                                                        {% else %}
                                                            nicht verfügbar
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                            {% endif %}
                                            {% if has_double_bed_room %}
                                                <td data-title="Preis p.P im Doppelzimmer" class="price">
                                                    {% if  travel_date.prices[3] is defined %}
                                                        {% if travel_date.prices[3].available == "1" %}
                                                            <span class="block">
                                                                <span class="{% if travel_date.prices[3].effectiveDiscountPrice %}old_price{% endif %}">
                                                                    {% if travel_date.prices[3].effectiveDiscountPrice %}
                                                                    <i class="icons-percent"></i>
                                                                    {% endif %}
                                                                    ab {{ travel_date.prices[3].effectivePrice|number_format }} €
                                                                </span>
                                                                {% if travel_date.prices[3].effectiveDiscountPrice %}
                                                                    <span class="new_price">
                                                                    ab {{ travel_date.prices[3].effectiveDiscountPrice|number_format }}
                                                                        €
                                                                </span>
                                                                {% endif %}
                                                        </span>
                                                        {% else %}
                                                            nicht verfügbar
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                            {% endif %}

                                            {% if has_singel_bed_room %}
                                                <td data-title="Preis p.P im Einzelzimmer" class="price">
                                                    {% if  travel_date.prices[1] is defined %}
                                                        {% if  travel_date.prices[1].available == "1" %}
                                                            <span class="block">
                                                                <span class="{% if travel_date.prices[1].effectiveDiscountPrice %}old_price{% endif %}">
                                                                    {% if travel_date.prices[1].effectiveDiscountPrice %}
                                                                        <i class="icons-percent"></i>
                                                                    {% endif %}
                                                                    ab {{ travel_date.prices[1].effectivePrice|number_format }}
                                                                    €
                                                                </span>
                                                                {% if travel_date.prices[1].effectiveDiscountPrice %}
                                                                    <span class="new_price">
                                                                    ab {{ travel_date.prices[1].effectiveDiscountPrice|number_format }}
                                                                        €
                                                                </span>
                                                                {% endif %}
                                                        </span>
                                                        {% else %}
                                                            nicht verfügbar
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                            {% endif %}
                                            <td data-title="Abflugorte / Zuschläge">
                                                <a href="#" class="btn btn-primary  btn-sm border-radius st-slider-booking-btn" data-toggle="modal"
                                                   data-target="#st-departures-modal-{{ loop.index0 }}">
                                                    Flughäfen
                                                </a>

                                                {% include 'default/components/departuresModal.html.twig' with {
                                                    'departures': travel_date.departures,
                                                    'id': loop.index0,
                                                    'startWeekday': travel_date.startWeekday,
                                                    'travelName': travel_date.name
                                                } %}
                                            </td>

                                            {% if travel_date.effectiveStatus == 0 %}
                                                <td data-title="Verfügbarkeit" colspan="2">
                                                    <div style="">
                                                        <img src="/images/icons/available-{{ travel_date.effectiveStatus }}.png"
                                                             style="height: 24px; width: 24px;vertical-align:middle"
                                                             alt="">
                                                        AUSGEBUCHT
                                                    </div>

                                                </td>
                                            {% else %}
                                                <td data-title="Verfügbarkeit">
                                                    <div style="font-size: 0.95em">
                                                        <img src="/images/icons/available-{{ travel_date.effectiveStatus }}.png"
                                                             style="height: 24px; width: 24px;vertical-align:middle"
                                                             alt="">
                                                        {% if travel_date.effectiveStatus == 1 %}
                                                            BUCHBAR
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 2 %}
                                                            BUCHBAR
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 3 %}
                                                            GARANTIERT
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 4 %}
                                                            WENIGE PLÄTZE
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 5 %}
                                                            NUR NOCH <span style="white-space: nowrap">1 PLATZ</span>
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 6 %}
                                                            NUR NOCH <span style="white-space: nowrap">2 PLÄTZE</span>
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 7 %}
                                                            NUR NOCH <span style="white-space: nowrap">3 PLÄTZE</span>
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 8 %}
                                                            NUR NOCH <span style="white-space: nowrap">4 PLÄTZE</span>
                                                        {% endif %}
                                                        {% if travel_date.effectiveStatus == 9 %}
                                                            NUR NOCH <span style="white-space: nowrap">5 PLÄTZE</span>
                                                        {% endif %}
                                                    </div>

                                                </td>
                                                <td data-title="">
                                                    <a href="{{ page.urlPath ~ '/buchen?nr=' ~ travel_date.name }}"
                                                       class="btn btn-primary btn-md border-radius btn-booking-form"
                                                       rel="nofollow"
                                                    >
                                                        <i class="fa fa-angle-double-right"></i>  Buchungs-<br class="hidden"><span class="hidden" style="margin-left: 5px;">&nbsp;</span>Formular
                                                    </a>
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endif %}

                                {% endfor %}
                                </tbody>
                            </table>
                        {% else %}
                            Momentan sind für dieses Programm keine Termine verfügbar.
                        {% endif %}
                    </div>

                </div>  <!-- END tabpanel -->

                {#
                    ********* LANDKARTE *********
                #}

                {% if travel_program.hasMap %}
                    <div role="tabpanel" class="tab-pane" id="travel-map-content-tab">

                        {% if travel_program.mapHtml is not empty %}
                            {{ travel_program.mapHtml|raw|stripslashes }}
                        {% else %}
                            <img src="{{ asset('/images/dummy.png') }}"
                                 data-src="/uploads/maps/{{ travel_program.mapImage ~ travel_program.mapImageExt }}"
                                 alt="Karte zum Reiseablauf" class="img-responsive lozad">
                            <br clear="all">
                        {% endif %}

                    </div>  <!-- END tabpanel -->
                {% endif %}

                {#
                    ********* LANDINFOS *********
                #}

                <div role="tabpanel" class="tab-pane" id="travel-info-content-tab">

                    {% for country in travel_program.countries %}

                        <h2>{{ country.name }}</h2>
                        {{ country.htmlInformation|raw|lozad }}
                    {% endfor %}

                </div>  <!-- END tabpanel -->

            </div>

            {{ block('travel_program_tab_bar') }}
        </div>
    </section><!-- end section -->
{% endblock body %}