{%  extends "WebFrontBundle::layout.html.twig" %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_responsive.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/select2.min.css")}}">

{% endblock %}

{% block body %}



<!-- Home -->

<div class="home">

    <div class="home_background parallax-window" data-parallax="scroll" data-image-src="{{ asset("assets/uploads/airports/"~airport[0].getAbr()~".jpg")}}"></div>
    <div class="home_content">
        <div class="home_title" style="font-size: 36px;"> {{ airport[0].getTitle() }}</div>
    </div>

</div>

<!-- Offers -->

<div class="offers">

    <!-- Offers -->

    <div class="container">
        <div class="row">
            <div class="col-lg-1 temp_col"></div>
            {#
            <div class="col-lg-11">

                <!-- Offers Sorting -->
                <div class="offers_sorting_container">
                    <ul class="offers_sorting">
                        <li>
                            <span class="sorting_text">price</span>
                            <i class="fa fa-chevron-down"></i>
                            <ul>
                                <li class="sort_btn" data-isotope-option='{ "sortBy": "original-order" }' data-parent=".price_sorting"><span>show all</span></li>
                                <li class="sort_btn" data-isotope-option='{ "sortBy": "price" }' data-parent=".price_sorting"><span>ascending</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="sorting_text">location</span>
                            <i class="fa fa-chevron-down"></i>
                            <ul>
                                <li class="sort_btn" data-isotope-option='{ "sortBy": "original-order" }'><span>default</span></li>
                                <li class="sort_btn" data-isotope-option='{ "sortBy": "name" }'><span>alphabetical</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="sorting_text">stars</span>
                            <i class="fa fa-chevron-down"></i>
                            <ul>
                                <li class="filter_btn" data-filter="*"><span>show all</span></li>
                                <li class="sort_btn" data-isotope-option='{ "sortBy": "stars" }'><span>ascending</span></li>
                                <li class="filter_btn" data-filter=".rating_3"><span>3</span></li>
                                <li class="filter_btn" data-filter=".rating_4"><span>4</span></li>
                                <li class="filter_btn" data-filter=".rating_5"><span>5</span></li>
                            </ul>
                        </li>
                        <li class="distance_item">
                            <span class="sorting_text">distance from center</span>
                            <i class="fa fa-chevron-down"></i>
                            <ul>
                                <li class="num_sorting_btn"><span>distance</span></li>
                                <li class="num_sorting_btn"><span>distance</span></li>
                                <li class="num_sorting_btn"><span>distance</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="sorting_text">reviews</span>
                            <i class="fa fa-chevron-down"></i>
                            <ul>
                                <li class="num_sorting_btn"><span>review</span></li>
                                <li class="num_sorting_btn"><span>review</span></li>
                                <li class="num_sorting_btn"><span>review</span></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            #}

            {% if packs is empty %}
                <style>
                    .offers {
                        width: 100%;
                        padding-top: 0;
                         padding-bottom: 0px;
                    }

                    .offers {
                        width: 100%;
                        padding-top: 0;
                        padding-bottom: 0px;
                        background: #f3f6f9;
                    }
                </style>
                <div class="alert alert-warning alert-dismissible fade show" role="alert" style="width: 100%;margin-top: 1%;">
                    <strong>{% trans %}Sorry!{% endtrans %}</strong> {% trans %}No offer affected to this airport.{% endtrans %}
                   {# <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                #}</div>
            {% else %}
                {% for pack in packs %}
                    <div class="col-lg-12">
                        <!-- Offers Grid -->
                        <div class="offers_grid">
                            <style>
                                .offers_grid {
                                    padding: 2%;
                                    border-radius: 10px;
                                    box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc, 0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999, 0px 7px 2px rgb(0 0 0 / 50%), 0px 7px 2px rgb(0 0 0 / 10%), 0px 7px 2px rgb(0 0 0 / 73%), 0px 3px 5px rgb(0 0 0 / 30%), 0px 5px 10px rgb(0 0 0 / 37%), 0px 10px 10px rgb(0 0 0 / 10%), 0px 20px 20px rgb(0 0 0 / 10%);
                                }
                            </style>
                            <!-- Offers Item -->
                            <div class="offers_item rating_4">
                                <div class="row">
                                    <div class="col-lg-1 temp_col"></div>
                                    <div class="col-lg-3 col-1680-4">
                                        <div class="offers_image_container">
                                            <div class="offers_image_background"
                                                 style="border-radius: 10px; background-image:url({{ asset("assets/uploads/offers/"~pack.getImage()~"")}});"
                                            ></div>
                                            <div class="offer_name"><a href="#">{{ pack.getTitle() }}</a></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="offers_content">
                                            {% set europrice =  pack.getPriceAdlt() %}
                                            {% set madprice =  europrice*10 %}
                                            <div class="offers_price"> {{ europrice|round }} € / {{ madprice }} MAD  <span>{% trans %}Per person & per way{% endtrans %}</span></div>
                                            <div class="rating_r rating_r_4 offers_rating" data-rating="4">
                                                <i></i>
                                                <i></i>
                                                <i></i>
                                                <i></i>
                                                <i></i>
                                            </div>
                                            {% set description = pack.getDescription()|split('/') %}
                                            {% set abrAero = airport[0].getAbr() %}
                                            <p class="offers_text">

                                                {% if app.request.getLocale() == 'fr'  %}
                                                    {{ description[1] }}.
													
                                                        {% if pack.getTitle() != "Fast Track" %}
                                                        
                                                           {% if abrAero == "CMN" or abrAero == "TNG" or abrAero == "AGA" or abrAero == "OUD" or abrAero == "VIL" or abrAero == "EUN" %}
                                                            
														<p style="color:red"><b>Suite au Covid 19, le salon à l'arrivée est suspendu.</b></p>

                                                           {% endif %} 

													   {% endif %}

                                                {% endif %}

                                                {% if app.request.getLocale() == 'en'  %}

                                                    {{ description[0] }}.

													{% if pack.getTitle() != "Fast Track" %}

                                                        {% if abrAero == "CMN" or abrAero == "TNG" or abrAero == "AGA" or abrAero == "OUD" or abrAero == "VIL" or abrAero == "EUN" %}
                                                        
														<p style="color:red"><b>Following the Covid 19, the arrival lounge is suspended.</b></p> 

                                                        {% endif %}

													{% endif %}

                                                {% endif %}

                                                
                                                
                                            </p>
                                            <div class="offers_icons">
                                                {#             <ul class="offers_icons_list">
                                                                 <li class="offers_icons_item"><img src="{{ asset("assets/images/post.png")}}" alt=""></li>
                                                                 <li class="offers_icons_item"><img src="{{ asset("assets/images/compass.png")}}" alt=""></li>
                                                                 <li class="offers_icons_item"><img src="{{ asset("assets/images/bicycle.png")}}" alt=""></li>
                                                                 <li class="offers_icons_item"><img src="{{ asset("assets/images/sailboat.png")}}" alt=""></li>
                                                             </ul>

                                                  #}
                                            </div>
                                            <div class="button book_button" style="float: right;"><a style="font-size: 20px;" href="{{ path("book_fasttrack",{"airport":airport[0].getAbr(),"fasttrack":pack.getTitle(),"idpack":pack.getId()}) }}">{% trans %}Book{% endtrans %}<span></span><span></span><span></span></a></div>
                                            <div class="offer_reviews">
                                                <div class="offer_reviews_content">
                                                    <div class="offer_reviews_title">{% trans %}very good{% endtrans %}</div>
                                                    <div class="offer_reviews_subtitle">{% trans %}100 reviews{% endtrans %}</div>
                                                </div>
                                                <div class="offer_reviews_rating text-center">9.1</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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


        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script src="{{ asset("assets/plugins/parallax-js-master/parallax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/Isotope/isotope.pkgd.min.js")}}"></script>

    <script src="{{ asset("assets/js/select2.min.js")}}"></script>

    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2({
                width: '100%'
            });

        });
        $('.alert').alert();

    </script>
{% endblock %}