{%  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/RAK.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">
        <p style="
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    animation: flash;
    color: red;
">Any reservation made less than 24 hours before the service time does not guarantee that the service can be provided, even if the online payment has been completed.</p>
             <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>

            {% if airport[0].getAbr() == "OZZ" %}


                <div class="row">
                    <div class="col-lg-12 alert alert-danger" role="alert" style="font-size: x-large;">
                       <center> All services are suspended at the moment! Thank you. </center>
                    </div>
                </div>



            
            {% else %}
         
                {% for pack in packs %}
                    {% if pack.getTitle() == "Pass Lounge VIP" %}
                    <div class="row">
                    <div class="col-lg-12">
                        <!-- Offers Grid -->
                        
                        <div class="offers_grid">
                           
                            <!-- 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/fast_track_vip_cmn.jpg")}});"></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 %} <b>(HT)</b></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>

                                            <div>
                                            

                                                <p class="offers_text">
                                                    Need to unwind before your flight? <u>Choose the VIP lounge</u>. With a 3-hour access, indulge in delicious snacks and a variety of beverages, or catch up on last-minute emails with our free WiFi. 
                                                    Smoking areas are also available for your convenience.                                                
                                                </p>

                                            
                                            </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>
                             <!-- Offers Item -->
                            </div>
                    </div>
                    {% endif %}
            {% endfor %}
        {% endif %}

</div>
</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>
    <style>
    .offers_text {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        margin-top: 3px;
        margin-bottom: 0px;
    }
    </style>
{% endblock %}