{#{% extends 'admin.html.twig' %}#}
{# @var fewo_lodging \AppBundle\Entity\FewoLodging #}
{% extends get_base_template() %}

{% 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 body %}

    <section class="clearfix">
        <div class="content-copy">

            <h1>{{ fewo_lodging.name }}</h1>

            {#
                ********* SLIDER *********
            #}

            <section class="section fullscreen background padding-0 margin-bottom-20">
                <div id="myCarousel" class="carousel slide fewo">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        {% for lodging_image in slider_imgs %}
                            <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 lodging_image in slider_imgs %}
                            <div class="item{% if loop.first %} active{% endif %}">
                                <div class="fill" style="background-image:url({{ asset('_uploads/images/' ~ lodging_image.file) }});background-position: center center">
                                    <span class="image-title">{{ lodging_image.fileName }}</span>
                                </div>
                            </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_lodging_program_tab_bar %}
                <div class="scroller-nav-tabs scroller-left-nav-tabs"><i class="glyphicon glyphicon-chevron-left"></i></div>
                <div class="scroller-nav-tabs scroller-right-nav-tabs"><i class="glyphicon glyphicon-chevron-right"></i></div>
                <div class="wrapper-nav-tabs">
                    <ul class="nav nav-tabs nav-justified list-nav-tabs">
                        <li class="">
                            <a href="#travel-description-content-tab" aria-controls="travel-description-content-tab" role="tab" data-toggle="tab">
                                Beschreibung
                            </a>
                        </li>
                        <li>
                            <a href="#travel-equipment-content-tab" aria-controls="travel-equipment-content-tab" role="tab" data-toggle="tab">
                                Ausstattung
                            </a>
                        </li>
                        <li class="active">
                            <a href="#travel-dates-content-tab" aria-controls="travel-dates-content-tab" role="tab" data-toggle="tab">
                                Termine <i class="fa fa-star"></i> Preise <i class="fa fa-star"></i> Mieten
                            </a>
                        </li>
                    </ul>
                </div>
            {% endblock travel_lodging_program_tab_bar %}

            <div class="tab-content">

                {#
                    ********* BESCHREIBUNG *********
                #}

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

                    <h3>Allgemeines</h3>

                    <div class="table-responsive" id="no-more-tables">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Typ</th>
                                <th>Adresse</th>
                                <th>PLZ</th>
                                <th>Ort</th>
                                <th>Max. Personenanzahl</th>
                                <th>Kaution</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td data-title="Typ">
                                    {{ fewo_lodging.type }}
                                </td>
                                <td data-title="Adresse">
                                    {{ fewo_lodging.adress1 }}
                                    {% if fewo_lodging.adress2 is not empty %}
                                        {{ fewo_lodging.adress2 }}
                                    {% endif %}
                                </td>
                                <td data-title="PLZ">
                                    {{ fewo_lodging.zipCode }}
                                </td>
                                <td data-title="Ort">
                                    {% if fewo_lodging.city is not empty %}
                                        {{ fewo_lodging.city }}
                                    {% endif %}
                                </td>
                                <td data-title="Max. Personenanzahl">
                                    {% if fewo_lodging.maximumPersons is not empty %}
                                        {{ fewo_lodging.maximumPersons }}
                                    {% endif %}
                                </td>
                                <td data-title="Kaution">
                                    {% if fewo_lodging.deposit is not empty %}
                                        {{ fewo_lodging.deposit|number_format(2, ',', '.') }} €
                                    {% endif %}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    {% if fewo_lodging.description is not empty %}
                        <hr>
                        <div>
                            {{ fewo_lodging.description|raw }}
                        </div>
                    {% endif %}

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

                {#
                    ********* AUSSTATTUNG *********
                #}

                <div role="tabpanel" class="tab-pane" id="travel-equipment-content-tab">
                    <div>
                        {{ fewo_lodging.equipment|raw }}
                    </div>
                </div>  <!-- END tabpanel -->

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

                <div role="tabpanel" class="tab-pane active" id="travel-dates-content-tab">
                    <h3>Saisons</h3>
                    <div class="table-responsive" id="no-more-tables">

                        {% if fewo_lodging.prices is not empty %}
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Beginn</th>
                                    <th>Ende</th>
                                    <th>Mindestbelegung</th>
                                    <th>Preis pro Nacht</th>
                                    <th>Service-Gebühr</th>
                                    <th>Kaution</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for price in fewo_lodging.prices %}
                                    {% if price.season is not empty %}
                                    <tr>
                                        <td data-title="Name">
                                            <strong class="small">
                                                {{ price.season.name }}
                                            </strong>
                                        </td>
                                        <td data-title="Beginn">
                                            <a class="default scroll-to-jump" href="#jump-{{ price.season.fromDate|date("n-Y") }}">
                                            {{ price.season.fromDate|date }}
                                            </a>
                                        </td>
                                        <td data-title="Ende">
                                            <a class="default scroll-to-jump" href="#jump-{{ price.season.toDate|date("n-Y") }}">
                                            {{ price.season.toDate|date }}
                                            </a>
                                        </td>
                                        <td data-title="Mindestbelegung">
                                            {{ price.season.minimumStay }} {{ price.season.minimumStay < 2 ? 'Nacht' : 'Nächte' }}
                                        </td>
                                        <td data-title="Preis p.P pro Nacht">
                                            {{ price.perNight|number_format(2, ',', '.') }} €
                                        </td>
                                        <td data-title="Service-Gebühr">
                                            {{ price.flatPrice|number_format(2, ',', '.') }} €
                                        </td>
                                        <td data-title="Kaution">
                                            {% if fewo_lodging.deposit is not empty %}
                                                {{ fewo_lodging.deposit|number_format(2, ',', '.') }} €
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endif %}
                                {% endfor %}
                                </tbody>
                            </table>
                        {% else %}
                            Momentan sind für dieses Programm keine Termine verfügbar.
                        {% endif %}
                    </div>

                    <h3>Buchung</h3>

                    <p>Bitte klicken Sie einen Anreisetermin (grüne Zahl), um zur Buchungsmaske zu gelagen.</p>

                    {% include 'default/pages/cms/calendarLodgingProgram.html.twig' %}

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

        </div>
    </section><!-- end section -->
{% endblock body %}