{%  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")}}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_responsive.css") }}">

    <link rel="stylesheet" type="text/css" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">

{% endblock %}

{% block body %}

<style type="text/css">
::-webkit-input-placeholder { /* Chrome */
  color: red;
}
</style>

    <!-- Home -->

    <div class="home">
        <div id="overlay"></div>
        <div class="home_background parallax-window" style="background-image:url({{ asset("assets/uploads/offers/"~pack[0].getImage()~"")}})" data-parallax="scroll" data-image-src=""></div>
        <div class="home_content">
            <div class="home_title" style="text-shadow: 0 0 10px black;">{{pack[0].title}} : {{ airport[0].getTitle() }}  </div>
            <div style="
                color: red;
                font-size: 15px;
                background-color: #efff01;
                padding: 1%;
                text-align: center;
                font-weight: 700;
            ">
                {% trans %}
                We disclaim all responsibility for the execution of the service if the information provided on this form is false. Clients who provide incorrect information in order to book a service less than 24 hours in advance will neither benefit from the service nor receive a refund.
                {% endtrans %}
                
            </div>
        </div>

    </div>

    <!-- Offers -->

    <!-- Contact -->

    <div class="contact_form_section">
        <div class="container">
            <div class="row">
                <div class="col">

                    <!-- Contact Form -->
                    <div class="contact_form_container">
                     {#   <div class="language">
                            <span id="en_lang" ><img src="{{ asset("assets/images/uk.png")}}"> </span>
                            <span id="fr_lang" ><img src="{{ asset("assets/images/fr.png")}}"> </span>
                        </div>#}
                        <div class="contact_title text-center">{{pack[0].title}}</div>


                        <form class="row" id="fasttrackbook" onsubmit="return validationBookDate()">
                            <div class="radio_button col-sm-12">
                                <div class="row radioblock">
                                    {% if pack[0].title == "Fast Track & Lounge"  or pack[0].title == "Pass Lounge VIP" %}
                                    {#
                                    
                                    <div class="form-check col-lg-6 col-md-6 col-sm-12" >

                                      <div class="row">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-1">
                                          <input class="form-check-input" type="radio" onclick="afficher_block('fast_arrive')" name="radiotypedast" id="arrivalradio" value="option1" checked >
                                        </div>

                                        <div class="col-md-8">
                                          <label class="en_lang form-check-label" for="arrivalradio">
                                              {% trans %}Arrival Fast track{% endtrans %}
                                          </label>

                                          <label class="fr_lang form-check-label" for="arrivalradio">
                                            Fast track Arrivé
                                          </label>
                                        </div>

                                      </div>

                                    </div>

                                    #}
                                    <div class="form-check col-lg-6 col-md-6 col-sm-12" >

                                      <div class="row">
                                        <div class="col-md-3"></div>

                                        <div class="col-md-1">
                                          <input class="form-check-input" type="radio" onclick="afficher_block('fast_depart')" name="radiotypedast" id="departradio" value="option2" checked>
                                        </div>

                                        <div class="col-md-8">
                                            <label class="en_lang form-check-label" for="departradio" id="departLabel2">
                                                {% trans %}Departure Fast track{% endtrans %}
                                            </label>

                                            <label class="fr_lang form-check-label" for="departradio">
                                              Fast track Départ
                                            </label>
                                        </div>

                                      </div>

                                    </div>
                                    {% else %}

                                    
                                    
                                    
                                    <div class="form-check col-lg-6 col-md-6 col-sm-12" >

                                      <div class="row">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-1">
                                          <input class="form-check-input" type="radio" onclick="afficher_block('fast_arrive')" name="radiotypedast" id="arrivalradio" value="option1" checked >
                                        </div>

                                        <div class="col-md-8">
                                          <label class="en_lang form-check-label" for="arrivalradio">
                                              {% trans %}Arrival Fast track{% endtrans %}
                                          </label>

                                          <label class="fr_lang form-check-label" for="arrivalradio">
                                            Fast track Arrivé
                                          </label>
                                        </div>

                                      </div>

                                    </div>

                                    
                                    <div class="form-check col-lg-6 col-md-6 col-sm-12" >

                                      <div class="row">
                                        <div class="col-md-3"></div>

                                        <div class="col-md-1">
                                          <input class="form-check-input" type="radio" onclick="afficher_block('fast_depart')" name="radiotypedast" id="departradio" value="option2">
                                        </div>

                                        <div class="col-md-8">
                                            <label class="en_lang form-check-label" for="departradio" id="departLabel2">
                                                {% trans %}Departure Fast track{% endtrans %}
                                            </label>

                                            <label class="fr_lang form-check-label" for="departradio"  id="departLabel2">
                                              Fast track Départ
                                            </label>
                                        </div>

                                      </div>

                                    </div>

                                    {% endif %}
                                    {#
                                    <div class="form-check col-lg-3 col-md-6 col-sm-12">
                                      <input class="form-check-input" type="radio" onclick="afficher_block('deparr')" name="radiotypedast" id="departarrivradio" value="option3">

                                      <label class="en_lang form-check-label" for="departarrivradio">
                                        Departure and Arrival fast track
                                      </label>

                                      <label class="fr_lang form-check-label" for="departarrivradio">
                                        Fast Track Départ et arrivé
                                      </label>

                                    </div>
                                    <div class="form-check col-lg-3 col-md-6 col-sm-12">
                                      <input class="form-check-input" type="radio" onclick="afficher_block('arrdep')" name="radiotypedast" id="arrivrdepartadio" value="option3">

                                      <label class="en_lang form-check-label" for="arrivrdepartadio">
                                        Arrival and Departure fast track
                                      </label>

                                      <label class="fr_lang form-check-label" for="arrivrdepartadio">
                                        Fast Track arrivé et Départ
                                      </label>

                                    </div>

                                    #}

                                </div>
                            </div>

                            {% set childrenoffer = (pack[0].offrechilds)*100 %}

                            <style type="text/css">
                                h3.blink {
                                  -webkit-animation-name: blink !important;
                                     -moz-animation-name: blink !important;
                                       -o-animation-name: blink !important;
                                          animation-name: blink !important;
                                  -webktit-animation-timing-function: linear !important;
                                      -moz-animation-timing-function: linear !important;
                                        -o-animation-timing-function: linear !important;
                                           animation-timing-function: linear !important;
                                  -webkit-animation-duration: 1s !important;
                                     -moz-animation-duration: 1s !important;
                                       -o-animation-duration: 1s !important;
                                          animation-duration: 1s !important;
                                }

                                h3.blink-infinite {
                                  -webkit-animation-iteration-count: infinite;
                                     -moz-animation-iteration-count: infinite;
                                       -o-animation-iteration-count: infinite;
                                          animation-iteration-count: infinite;
                                }

                                @-webkit-keyframes blink {
                                  50% {
                                    opacity: 0;
                                  }
                                }
                                @-moz-keyframes blink {
                                  50% {
                                    opacity: 0;
                                  }
                                }
                                @-o-keyframes blink {
                                  50% {
                                    opacity: 0;
                                  }
                                }
                                @keyframes blink {
                                  50% {
                                    opacity: 0;
                                  }
                                }


                            </style>

                            <div style="text-align:  center;color: #67e458bf;font-weight:  bold;">
                                    {% set foo = 'false' %}
                                    <script type="text/javascript">
                                        var foo = 'false';
                                    </script>

                              {#
                                <h3 class="en_lang blink blink-infinite" style=";font-weight:  bold;color:#ffffff;padding-left: 8%;padding-right: 8%;">
                                    {% if(app.request.getLocale()=='fr') %}
                                        Toute demande de service Fast Track doit être faite 24 heures à l'avance!
                                    {% else %}
                                        Any request for Fast Track service must be made 24 hours in advance!
                                    {% endif %}
                                 </h3>
                                #}
                                 {#
                                    <h3 class="en_lang blink blink-infinite" style=";font-weight:  bold;color:#f2982b;padding-left: 8%;padding-right: 8%;"> {#Any request for Fast Track service must be made 24 hours in advance#}
                                {#       {% if airport[0].getAbr() =='CDG' or airport[0].getAbr()=='ORY' or airport[0].getAbr()=='RAK' %}
                                           {% set foo = airport[0].getAbr() %}
                                           <script type="text/javascript">
                                               var foo = "{{airport[0].getAbr()}}";
                                           </script>
                                       <br /> <span style="color: #eee;"> {% trans %}Reservations made 5 hours in advance must be confirmed by phone and will incur a 50% surcharge after the request has been sent {% endtrans %}
                                           </span>
                                       {% endif %}
                                   </h3>

                               <h3 class="fr_lang blink blink-infinite" style="font-weight:  bold;color:#f2982b;padding-left: 8%;padding-right: 8%;">{# Toute demande de service  Fast Track doit être faite 24 heures à l'avance #}
                                {#          {% if airport[0].getAbr() =='CDG' or airport[0].getAbr()=='ORY' or airport[0].getAbr()=='RAK' %}
                                          <br /> <span style="color: #eee;">Les réservations effectuées 5 heures à l'avance doivent être confirmées par téléphone et subirons une majoration de 50% après l'envoi de la demande</span>
                                          {% endif %}
                                      </h3>
                                  #}
                            </div>

                            <div id="fstblocks">
                                
                                <div id="fast_arrive" class="fast_block col-sm-12">
                                    <div class="row">

                                        <div class="col-md-12">

                                            <h3 class="en_lang box-title" style="float:left"><i class="fa fa-arrow-down"></i> {% trans %}Arrival Fast track{% endtrans %}</h3>
                                            <h3 class="fr_lang box-title" style="float:left"><i class="fa fa-arrow-down"></i> Fast track Arrivé</h3>

                                        </div>

                                        <div class="col col-md-6 col-sm-12 col-lg-4">

                                            <label for="datepicker" class="en_lang col-2 col-form-label control-label">{% trans %}Arrival DATE *{% endtrans %}</label>
                                            <label for="datepicker" class="fr_lang col-2 col-form-label control-label">Date Arrivée *</label>

                                            <div class="docs-datepicker">

                                            <div class="input-group input-group-lg">

                                                <input placeholder="yyyy-mm-dd" data-toggle="datepicker" class="form-control hasDatepicker" required name="date_fasttrack_arriv" id="datepicker" onchange="checkToDayHour()" readonly>
                                                    
                                                    <span class="input-group-addon span-icon" id="sizing-addon1">

                                                      <label for="datepicker" style="display: inline-block;"> 
                                                        <i class="fa fa-calendar icon-color" aria-hidden="true"></i>
                                                      </label>
                                                    </span>

                                                </div>

                                            </div>

                                        </div>

                                        <div class="col col-md-6 col-sm-12 col-lg-4">

                                            <label for="example-time-input" class="en_lang col-2 col-form-label control-label">{% trans %}Arrival Time *{% endtrans %}</label>
                                            <label for="example-time-input" class="fr_lang col-2 col-form-label control-label">Heure D'arrivé *</label>

                                            <div class="input-group input-group-lg">
                                                <input class="form-control timepicker" type="time" required value="20:00" name="heure_fasttrack_arriv" id="example-time-input">
                                                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-clock-o icon-color" aria-hidden="true"></i></span>
                                            </div>
                                        </div>

                                        <div class="col col-md-10 col-sm-12 col-lg-4">

                                            <label for="example-time-input" class="en_lang col-2 col-form-label control-label">{% trans %}Company &amp; flight N°. *{% endtrans %}</label>
                                            <label for="example-time-input" class="fr_lang col-2 col-form-label control-label">Compagnie &amp; N°. de Vol *</label>

                                            <div class="input-group input-group-lg">
                                                <input class="form-control" type="text" required name="num_vol_arriv" placeholder="EX: AT 546" id="example-time-input" onchange="arrivalFlightchecker()">
                                                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-plane icon-color" aria-hidden="true"></i></span>
                                            </div>
                                        </div>


                                        <div class="col col-md-4 col-sm-12 col-lg-4">

                                        <label for="example-time-input" class="en_lang col-2 col-form-label">{% trans %}Number of adult passengers *{% endtrans %}</label>
                                        <label for="example-time-input" class="fr_lang col-2 col-form-label">Nombre de passagers Adulte *</label>

                                        <select class="form-control" onchange="calculerprixarriv()" name="nbr_passagers_arriv">
                                            <option value=""></option>
                                            {% for i in range(1, 10) %}
                                                <option value="{{ i }}">{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        </div>

                                        <div class="col col-md-8 col-sm-12 passagers_block">

                                            <div class="row">

                                                <div class="col-md-6">
                                                    <label for="example-time-input" class="en_lang col-2 col-form-label">{% trans %}Number of childreen passengers (0 - 2){% endtrans %} </label>
                                                    <label for="example-time-input" class="fr_lang col-2 col-form-label">Nombre de passagers Enfant (0-2) </label>

                                                    <i></i>

                                                    <select style="width:100%;float:left" class="form-control" onchange="calculerprixarriv()" name="nbr_passagers_child_gt_arriv" id="nbr_passagers_child_gt_arriv">
                                                            <option value="">
                                                            </option>
                                                        {% for i in range(0, 10) %}
                                                            <option value="{{ i }}">{{ i }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="example-time-input" class="en_lang col-2 col-form-label">{% trans %}Number of childreen passengers (2 - 12){% endtrans %} </label>
                                                    <label for="example-time-input" class="fr_lang col-2 col-form-label">Nombre de passagers Enfant (2 - 12) </label>

                                                    <select style="width:100%" class="form-control" onchange="calculerprixarriv()" name="nbr_passagers_child_arriv" id="nbr_passagers_child_arriv">
                                                        <option value="">
                                                        </option>
                                                        {% for i in range(0, 10) %}
                                                            <option value="{{ i }}">{{ i }} </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                        </div>
                                            <i style="font-size: 12px; font-weight: bold;color: white;" class="en_lang">{% trans %}(From 0 to 1.99 year old : free of charge,
                                                From 2 to  11.9 year old :{% endtrans %} {{ childrenoffer }} % {% trans %}price adult){% endtrans %}
                                            </i>
                                            <i style="font-size: 12px; font-weight: bold;color: white;" class="fr_lang">(de 0 à 1.99 ans : Gratuit,
                                                De 2 à  11.9 ans : {{ childrenoffer }} % du tarif adulte)
                                            </i>
                                        </div>

                                        <div class="col-md-4"></div>


                                        <div class="col-md-5 totalpaye">
                                            <label for="example-date-input" class="en_lang col-2 col-form-label">{% trans %}Total Arrival Service{% endtrans %}</label><br>
                                            <label for="example-date-input" class="fr_lang col-2 col-form-label">Total service Arrivée</label><br>
                                            <div class="input-group input-group-lg">
                                                <input class="form-control" type="text" name="totalarriv" value="00,00 €" required="false" readonly="">
                                                <span class="input-group-addon span-icon" id="sizing-addon1"><i class="fa fa-money icon-color" aria-hidden="true"></i></span>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                
                                <div id="fast_depart" class="fast_block col-sm-12">
                                    <div class="row">

                                        <div class="col-md-12">

                                            <h3 class="en_lang box-title" style="float:left"  id="departLabel1"><i class="fa fa-arrow-down"></i>{% trans %}Departure Fast track{% endtrans %}</h3>

                                            <h3 class="fr_lang box-title" style="float:left"><i class="fa fa-arrow-down"></i>Fast track Dèpart</h3>
                                            
                                        </div>

                                        <p class="en_lang" style="color:yellow; margin: auto">{% trans %}Attention for the execution of the service, you must absolutely call the agent to the mobile phone communicated on the confirmation{% endtrans %}</p>

                                        <p class="fr_lang" style="color:yellow; margin: auto">{% trans %}Attention pour l’exécution du service, vous devez absolument appeler l’agent au GSM communiqué sur la confirmation{% endtrans %}</p>

                                        <div class="col col-md-6 col-sm-12 col-lg-4">

                                            <label for="example-date-input" class="en_lang col-2 col-form-label control-label">{% trans %}Departure Date  *{% endtrans %}</label>
                                            <label for="example-date-input" class="fr_lang col-2 col-form-label control-label">Date de Dèpart *</label>


                                            <div class="docs-datepicker">

                                            <div class="input-group input-group-lg">
                                                {#min="{{ "now"|date("Y-m-d") }}"#}
                                                <input placeholder="yyyy-mm-dd" data-toggle="datepicker" class="form-control hasDatepicker"  required name="date_fasttrack_dep" id="datepickerdep" readonly>
                                                    
                                                    <span class="input-group-addon span-icon" id="sizing-addon1">
                                                      <label for="datepickerdep" style="display: inline-block;"> 
                                                        <i class="fa fa-calendar icon-color" aria-hidden="true"></i>
                                                      </label>
                                                    </span>

                                                </div>

                                            </div>

                                            <!-- <div class="input-group input-group-lg">
                                                <input class="form-control hasDatepicker" min="{{ "now"|date("Y-m-d") }}" type="date" required name="date_fasttrack_dep" id="datepicker">
                                                <span class="input-group-addon" id="sizing-addon1"> <i class="fa fa-calendar icon-color" aria-hidden="true"></i></span>
                                            </div> -->
                                        </div>

                                        <div class="col col-md-6 col-sm-12 col-lg-4">

                                            <label for="example-time-input" class="en_lang col-2 col-form-label control-label">{% trans %}Departure Time *{% endtrans %}</label>
                                            <label for="example-time-input" class="fr_lang col-2 col-form-label control-label">Heure de Départ *</label>

                                            <div class="input-group input-group-lg">
                                                <input class="form-control timepicker" type="time" required value="20:00" name="heure_fasttrack_dep" id="example-time-input">
                                                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-clock-o icon-color" aria-hidden="true"></i></span>
                                            </div>
                                        </div>

                                        <div class="col col-md-10 col-sm-12 col-lg-4">

                                            <label for="example-time-input" class="en_lang col-2 col-form-label control-label">{% trans %}Company &amp; flight N°*{% endtrans %}</label>
                                            <label for="example-time-input" class="fr_lang col-2 col-form-label control-label">Compagnie &amp; N° de Vol *</label>

                                            <div class="input-group input-group-lg">
                                                <input class="form-control" type="text" required name="num_vol_dep" placeholder="EX: AT 546"  id="example-time-input" onchange="departureFlightchecker()">
                                                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-plane icon-color" aria-hidden="true"></i></span>
                                            </div>
                                        </div>

                                        <div class="col col-md-4 col-sm-12 col-lg-4">

                                        <label for="example-time-input" class="en_lang col-2 col-form-label">{% trans %}Number of adult passengers *{% endtrans %}</label>
                                        <label for="example-time-input" class="fr_lang col-2 col-form-label">Nombre de passagers Adulte *</label>

                                        <select class="form-control" onchange="calculerprixdep()" name="nbr_passagers_dep">
                                                <option value="">( > 12 )</option>
                                            {% for i in range(1, 10) %}
                                                <option value="{{ i }}">{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        </div>

                                        <div class="col col-md-8 col-sm-12 passagers_block">

                                        <div class="row">

                                            <div class="col-md-6">
                                                <label for="example-time-input" class="en_lang col-2 col-form-label">{% trans %}Number of children passengers (0 - 1,99){% endtrans %}</label>
                                                <label for="example-time-input" class="fr_lang col-2 col-form-label">Nombre de passagers Enfants (0-1,99)</label>

                                                <i></i>
                                                <select style="width:100%;float:left" class="form-control" onchange="calculerprixdep()" name="nbr_passagers_child_gt_dep" id="nbr_passagers_child_gt_dep">
                                                <option value="">
                                                </option>
                                                    {% for i in range(0, 10) %}
                                                        <option value="{{ i }}">{{ i }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label for="example-time-input" class="en_lang col-2 col-form-label">{% trans %}Number of children passengers (2 - 11,99){% endtrans %}</label>
                                                <label for="example-time-input" class="fr_lang col-2 col-form-label">Nombre de passagers Enfants (2-11,99)</label>

                                                <i></i>

                                                <select style="width:100%" class="form-control" onchange="calculerprixdep()" name="nbr_passagers_child_dep" id="nbr_passagers_child_dep">
                                                    <option value="">
                                                    </option>
                                                    {% for i in range(0, 10) %}
                                                        <option value="{{ i }}">{{ i }}</option>
                                                    {% endfor %}
                                                </select>

                                            </div>

                                        </div>


                                            <i class="en_lang" style="font-size: 12px; font-weight: bold;color: white;">{% trans %}(From 0 to 1.99 ans : free of charge,
                                                From 2 to 11.99 Years old :{% endtrans %} {{ childrenoffer }} % {% trans %}adult price){% endtrans %}
                                            </i>
                                            <i class="fr_lang" style="font-size: 12px; font-weight: bold;color: white;">(de 0 to 1.99 ans : Gratuit,
                                                de 2 à 11.99 Year old : {{ childrenoffer }} % du tarif adulte)
                                            </i>
                                        </div>

                                        <div class="col-md-4"></div>

                                        <div class="col-md-5 totalpaye">
                                            <label for="example-date-input" class="en_lang col-2 col-form-label">{% trans %}Total Departure Service{% endtrans %}</label><br>
                                            <label for="example-date-input" class="fr_lang col-2 col-form-label">Total service Dèpart</label><br>
                                            <div class="input-group input-group-lg">
                                                <input class="form-control" type="text" name="totaldepart" value="00,00 €" required="false" readonly="">
                                                <span class="input-group-addon span-icon" id="sizing-addon1"><i class="fa fa-money icon-color" aria-hidden="true"></i></span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <!----------------------- Service de transfert début ---------------------------->

                            {% if transport is not empty %}
                            <div class="fast_block row" style="width: 100%" >
                            {% else %}
                                    <div class="fast_block row" style="display: none" >
                             {% endif %}
                                <div class="col-md-12">

                                    <h3 class="en_lang box-title" style="float:left"><i class="fa fa-car"></i> {% trans %}Transfer Service{% endtrans %}</h3>
                                    <h3 class="fr_lang box-title" style="float:left"><i class="fa fa-car"></i> Service de Transfert</h3>

                                </div>
                                <div class="col-md-12">
                                    <div  class="form-group">
                                        <label for="transfert_service" class="en_lang required">{% trans %}Transfer :{% endtrans %}</label>
                                        <label for="transfert_service" class="fr_lang required">Transfert :</label>
                                        <select id="transfert_service" onchange="fct_transfert()" name="transfert" class="form-control">
                                            <option value="0" class="en_lang">{% trans %}No, Thanks{% endtrans %}</option>
                                            <option value="1" class="en_lang">{% trans %}Yes{% endtrans %}</option>
                                            <option value="0" class="fr_lang">Non, merci</option>
                                            <option value="1" class="fr_lang">Oui</option>

                                        </select>

                                    </div>

                                </div>

                                <div id="tab_service_trans" style="display: none; width: 100%">
                                    <div class="col-md-12">
                                        <div  class="form-group">
                                            <label for="transfert_service" class="en_lang required">{% trans %}City :{% endtrans %}</label>
                                            <label for="transfert_service" class="fr_lang required">Ville :</label>
                                            <select id="destination" onchange="chosir_emplacement()" name="destination" class="form-control">
                                                <option value="0" class="en_lang">-- {% trans %}Choose a location{% endtrans %} --</option>
                                                <option value="0" class="fr_lang">-- Choisir un emplacement --</option>
                                                {% for dest in destination %}
                                                     <option value="{{ dest.getId() }}">{{ dest.getLieu() }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <table width="100%" id="" class="tab_service_trans" style="width: 100%;">
                                        <tr style="background-color: #0a0a0a; color: #fff; display: none" id="vehicule_dest_title">
                                            <th>
                                                <strong class="en_lang"> {% trans %}Choose{% endtrans %}</strong>
                                                <strong class="fr_lang"> Choisir</strong>
                                            </th>
                                            <th colspan="2">
                                                <center>
                                                <strong class="en_lang"> {% trans %}Vehicle{% endtrans %}</strong>
                                                <strong class="fr_lang"> Véhicule</strong>
                                                </center>
                                            </th>
                                            <th ><center>
                                                    <strong class="en_lang">{% trans %}Number of places{% endtrans %}</strong>
                                                    <strong class="fr_lang">Nombre de places</strong>
                                                </center></th>
                                            <th style="text-align: right;padding-right: 20px;">
                                                <strong class="en_lang"> {% trans %}Price{% endtrans %}</strong>
                                                <strong class="fr_lang"> Prix</strong>
                                            </th>
                                        </tr>
                                        {% for trans in transport %}

                                            <tr style="border-bottom: 1px dotted #eeeeee; display: none" class="vehicule_dest" id="dest_{{ trans.getDestination().getId() }}">
                                                <td width="50px">
                                                    <center><input type="checkbox" onclick="calculeprixtrans()" name="transfertchoisi" value="{{ trans.getId() }}|{{ trans.getPrix() }}|{{ trans.getNbrplace() }}"></center>
                                                </td>
                                                <td width="250px">
                                                    <img src="{{ asset("assets/uploads/transports/"~trans.getPhoto()) }}"  width="250px">
                                                </td>
                                                <td style="vertical-align: top;padding-left: 20px;">
                                                    <h3>{{ trans.getVehicule() }}</h3>
                                                </td>
                                                <td style="vertical-align: top;padding-left: 20px;">
                                                    <center> <h3>{{ trans.getNbrminplace() }} - {{ trans.getNbrplace() }}</h3></center>
                                                </td>
                                                <td style="vertical-align: top;padding-right: 20px;text-align: right">
                                                    <h3>{{ trans.getPrix() }}€ / {{ trans.getPrix()*10 }} MAD</h3>
                                                </td>
                                            </tr>

                                        {% endfor %}
                                    </table>

                                    <div class="col-md-12" id="transfert_adresse_div" style="display: none">
                                        <div  class="form-group">
                                            <label for="transfert_adresse" class="fr_lang required">{% trans %}Adress * :{% endtrans %}</label>
                                            <label for="transfert_adresse" class="en_lang required">Adress * :</label>
                                            <textarea id="transfert_adresse"   name="transfert_adresse" class="form-control" required> </textarea>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!----------------------- Service de transfert Fin ---------------------------->
                            <div id="passengers" class="col-md-12">

                                <div class="row">

                                    <div class="col-lg-2"></div>

                                    <div class="col col-md-6 col-sm-12 col-lg-4">

                                        <label for="nom0" class="en_lang col-2 col-form-label control-label">{% trans %}First Name *{% endtrans %}</label>
                                        <label for="nom0" class="fr_lang col-2 col-form-label control-label">Nom *</label>
                                        <div class="input-group input-group-lg">
                                            <input class="form-control" type="text" required name="nom0" placeholder="Yassine" id="nom0">
                                        </div>

                                    </div>

                                    <div class="col col-md-6 col-sm-12 col-lg-4">

                                        <label for="prenom0" class="en_lang col-2 col-form-label control-label">{% trans %}Last Name *{% endtrans %}</label>
                                        <label for="prenom0" class="fr_lang col-2 col-form-label control-label">Prénom *</label>

                                        <div class="input-group input-group-lg">
                                            <input class="form-control" type="text" required name="prenom0" placeholder="ESSOUSSI" id="prenom0">
                                        </div>

                                    </div>

                                </div>

                            </div>



                                <div class="col-md-12">

                                    <label for="example-date-input" class="en_lang col-2 col-form-label">{% trans %}Special request{% endtrans %}</label><br>
                                    <label for="example-date-input" class="fr_lang col-2 col-form-label">Demande particulière</label><br>

                                    <textarea class="form-control" name="demande" id="demande"></textarea>
                                </div>

                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-1"></div>
                                    <div class="col-md-5 col-lg-4">

                                        <!-- <i class="en_lang" style="font-size: 12px; font-weight: bold;color: white;">In case of a large amount of passengers , please leave us a message in " special request " box with their names 
                                        </i>
                                        <i class="fr_lang" style="font-size: 12px; font-weight: bold;color: white;">En cas de plusieurs passagers, merci de nous communiquer dans la case "Demande particulière" les autres noms et prénoms 
                                        </i> -->

                                    </div>

                            </div>
                    </div>
                            <div class="col-md-4"></div>
                            <div class="col-md-5 col-lg-5 totalpaye">

                                <label for="example-date-input" class="en_lang col-2 col-form-label">{% trans %}Total to pay{% endtrans %}</label>
                                <label for="example-date-input" class="fr_lang col-2 col-form-label">Total à payer</label>

                                <br>
                                <div class="input-group input-group-lg">
                                    <input class="form-control" type="text" name="totalprix" value="00,00 €" required="false" readonly="">
                                    <span class="input-group-addon span-icon" id="sizing-addon1"><i class="fa fa-money icon-color" aria-hidden="true"></i></span>
                                </div>

                            </div>

                            <div class="col-md-4"></div>



                            <div class="col-lg-4 col-md-6 col-sm-12" style="margin: 0;">
                                <!--
                                <button class="btn btn-primary" type="submit" style="height: 63%;margin:15px;padding:10px 15px;border-radius:5;font-size:24px;background-color:#0eb493">
                                    <h3>Réservez maintenant  
                                        <i class="fa fa-money icon-color" aria-hidden="true">
                                        </i>
                                   </h3>
                                </button>
                                -->

                                <div class="button home_slider_button" style="width: 100%;text-align: center;">
                                    <div class="button_bcg"></div>
                                    
                                    <a class="reserver_fasttrack en_lang"  style="cursor:  pointer;">{% trans %}Book Now{% endtrans %}<span></span><span></span><span></span></a>

                                    <a class="reserver_fasttrack fr_lang"   style="cursor:  pointer;">Réservez Maintenent<span></span><span></span><span></span></a>

                                </div>

                                <button style="display:none;"  id="button_confirm" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModalconfirm">{% trans %}Open Modal{% endtrans %}</button>

                                <div id="myModalconfirm" class="modal fade" role="dialog">
                                  <div class="modal-dialog">

                                    <!-- Modal content-->
                                    <div class="modal-content">
                                      
                                      <div class="modal-body" style="text-align: center;">
                                        <div class="row">
                                            <p class="col-md-12" style="color: green;font-size: 20px;font-family: 'Beyond';text-shadow: 0 0 5px;">{% trans %}Book added successfully to cart!{% endtrans %}</p>

                                            <div class="col-md-12" style="padding: 20px;">
                                                <img style="width: 65%;border-radius: 10px;" src="{{ asset("assets/uploads/offers/"~pack[0].getImage()~"")}}">
                                            </div>

                                            <div class="col-md-12" style="color:black;">
                                               <h4 style="text-shadow: 0 0 2px;">{{pack[0].title}} - {% trans %}Airport{% endtrans %} : {{airport[0].title}}</h4>
                                            </div>

                                            <div class="col-md-5">
                                                <a href="{{ path("web_front_default_index") }}" class="btn btn-primary">{% trans %}Continue shopping{% endtrans %}</a>
                                            </div>

                                            <input type="hidden" name="finalpriceperperso" id="finalpriceperperso" value="{{pack[0].priceAdlt}}">

                                            <div class="col-md-2">
                                                
                                            </div>

                                            <div class="col-md-5">
                                                <a href="{{ path("checkout_cart") }}" class="btn btn-success">{% trans %}Complete my order{% endtrans %}
                                                </a>
                                            </div>

                                        </div>
                                        
                                      </div>
                                      
                                    </div>

                                  </div>
                                </div>
                            </div>
                        </form>

                    </div>

                </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/plugins/greensock/TweenMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/TimelineMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/scrollmagic/ScrollMagic.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/animation.gsap.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/ScrollToPlugin.min.js")}}"></script>
    <script src="{{ asset("assets/js/select2.min.js")}}"></script>
    <script src="{{ asset("assets/js/sweetalert.min.js")}}"></script>

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

{#
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
    #}

<script type="text/javascript">

    $('[data-toggle="datepicker"]').datepicker({
      format: 'yyyy-mm-dd'
    });


    function isWithin24Hours(date, time) {
    // Combine the date and time strings
    var dateTimeString = date + ' ' + time;
    var inputDateTime = new Date(dateTimeString);
    
    // Get the current date and time
    var currentDateTime = new Date();
    
    // Calculate the difference in milliseconds
    var timeDifference = inputDateTime - currentDateTime;
    
    // Convert the difference to hours
    var hoursDifference = timeDifference / (1000 * 60 * 60);
    
    // Return true if the date is within 24 hours
    return hoursDifference > 24;
}

</script>




<script>


    var days = { '1' : '01','2' : '02', '3' : '03', '4' : '04', '5' : '05', '6' : '06', '7' : '07', '8' : '08', '9' : '09', '10' : '10', '11' : '11', '12' : '12', '13' : '13', '14' : '14', '15' : '15', '16' : '16', '17' : '17', '18' : '18', '19' : '19', '20' : '20', '21' : '21', '22' : '22',
        '23' : '23', '24' : '24', '25' : '25', '26' : '26', '27' : '27', '28' : '28', '29' : '29', '30' : '30', '31' : '31' };

    var mounths = { '1' : '01', '2' : '02', '3' : '03', '4' : '04', '5' : '05', '6' : '06', '7' : '07', '8' : '08', '9' : '09','10' : '10', '11' : '11', '12' : '12'};

    var hours = { '0' : '00' , '1' : '01', '2' : '02', '3' : '03', '4' : '04', '5' : '05', '6' : '06', '7' : '07', '8' : '08', '9' : '09','10' : '10', '11' : '11', '12' : '12' , '13' : '13'  , '14' : '14' , '15' : '15' , '16' : '16' , '17' : '17' , '18' : '18' , '19' : '19' , '20' : '20' , '21' : '21' , '22' : '22' , '23' : '23' , '24' : '24'};

    var minutes = { '0' : '00' , '1' : '01', '2' : '02', '3' : '03', '4' : '04', '5' : '05', '6' : '06', '7' : '07', '8' : '08', '9' : '09','10' : '10', '11' : '11', '12' : '12' , '13' : '13'  , '14' : '14' , '15' : '15' , '16' : '16' , '17' : '17' , '18' : '18' , '19' : '19' , '20' : '20' , '21' : '21' , '22' : '22' , '23' : '23' , '24' : '24' , '25' : '25' , '26' : '26' , '27' : '27' , '28' : '28' , '29' : '29' , '30' : '30' , '31' : '31' , '32' : '32' , '33' : '33' , '34' : '34' , '35' : '35' , '36' : '36' , '37' : '37' , '38' : '38' , '39' : '39' , '40' : '40' , '41' : '41' , '42' : '42' , '43' : '43' , '44' : '44' , '45' : '45' , '46' : '46' , '47' : '47' , '48' : '48' , '49' : '49' , '50' : '50' , '51' : '51' , '52' : '52' , '53' : '53' , '54' : '54' , '55' : '55' , '56' : '56' , '57' : '57' , '58' : '58' , '59' : '59'};

    var priceperperso = {{pack[0].priceAdlt}};

    var finalpriceperperso = priceperperso ;
    var offre = {{pack[0].offrechilds}};

    $(document).ready(function() {

        {% if pack[0].title == "Fast Track & Lounge" %}
            afficher_block('fast_depart');
        {% endif %}

        {% if pack[0].title == "Pass Lounge VIP" %}
            afficher_block('fast_depart');
            var labelElement = document.getElementById('departLabel1');
            var labelElement2 = document.getElementById('departLabel2');
            
            {% if app.request.getLocale() == 'fr' %}
                    labelElement.innerText = "Départ";
                    labelElement2.innerText = "Départ";

            {% else %}
                labelElement.innerText = "Departure";
                labelElement2.innerText = "Departure";
            {% endif %}

        {% endif %}

        $('.js-example-basic-single').select2({
            width: '100%'
        });

        $( "#nbr_passagers_child_arriv").prop("disabled", true);
        $( "#nbr_passagers_child_gt_arriv").prop('disabled', true);
        $( "#nbr_passagers_child_gt_dep").prop('disabled', true);
        $( "#nbr_passagers_child_dep").prop('disabled', true);

    });

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


    $('.reserver_fasttrack').click(function() {

        var nbrepasse = ($('#passengers .en_lang').length)/2;

        var concatname = '';

        for (var i = 0 ; i < nbrepasse ; i++) {

            var variab = 'input[name="nom'+i+'"]';
            var nom = $(variab).val();
            variab = 'input[name="prenom'+i+'"]';
            var prenom = $(variab).val();

            concatname += '||'+nom+'//'+prenom;

        }



        //// Partie transport //////////////////////////////////////
        var list_of_transport="";
        var nbrmaxperso=0;
        $("input:checkbox[name=transfertchoisi]:checked").each(function(){
            list_of_transport += ','+$(this).val().split('|')[0];
            nbrmaxperso=nbrmaxperso+parseInt($(this).val().split('|')[2]);
        });
        var adress_trans=document.getElementById("transfert_adresse").value

        //// Fin Partie transport //////////////////////////////////////

        var date_fasttrack_arriv = $('input[name="date_fasttrack_arriv"]').val();
        var heure_fasttrack_arriv = $('input[name="heure_fasttrack_arriv"]').val();
        var num_vol_arriv = $('input[name="num_vol_arriv"]').val();

        var date_fasttrack_dep = $('input[name="date_fasttrack_dep"]').val();
        var heure_fasttrack_dep = $('input[name="heure_fasttrack_dep"]').val();
        var num_vol_dep = $('input[name="num_vol_dep"]').val();

        var nbr_passagers_arriv = $('select[name="nbr_passagers_arriv"]').val();

        var nbr_passagers_child_gt_arriv = $('select[name="nbr_passagers_child_gt_arriv"]').val();
        if(!nbr_passagers_child_gt_arriv){
            nbr_passagers_child_gt_arriv = 0;
        }

        var nbr_passagers_child_arriv = $('select[name="nbr_passagers_child_arriv"]').val();
        if(!nbr_passagers_child_arriv){
            nbr_passagers_child_arriv = 0;
        }

        var nbr_passagers_dep = $('select[name="nbr_passagers_dep"]').val();

        var nbr_passagers_child_gt_dep = $('select[name="nbr_passagers_child_gt_dep"]').val();
        if(!nbr_passagers_child_gt_dep){
            nbr_passagers_child_gt_dep = 0;
        }

        var nbr_passagers_child_dep = $('select[name="nbr_passagers_child_dep"]').val();
        if(!nbr_passagers_child_dep){
            nbr_passagers_child_dep = 0;
        }

        var demande = $('input[name="demande"]').val();
        var demand = document.getElementById("demande").value

        var nom0 = $('input[name="nom0"]').val();
        var prenom0 = $('input[name="prenom0"]').val();

        if(document.getElementById("transfert_service").value==1)
        {
            nbrpass_arr=parseInt(nbr_passagers_arriv)+parseInt(nbr_passagers_child_gt_arriv)+parseInt(nbr_passagers_child_arriv);
            nbrpass_dep=parseInt(nbr_passagers_dep)+parseInt(nbr_passagers_child_gt_dep)+parseInt(nbr_passagers_child_dep);
            if(list_of_transport=="") {
                swal('Please select at least one vehicle  \n \n Veuillez choisir au moins un véhicule');
                return false;
            }

            if($("#arrivalradio").is(':checked'))
            {
                if(nbrmaxperso<nbrpass_arr) {
                    swal('\n' +
                        'The number of people is greater than the number of places available on the means of transfer chosen, please choose another vehicle \n \n Le nombre de personnes est supérieur au nombre de places disponible sur les moyens de transfert choisi, veuillez chosir un autre véhicule');
                   return false;
                }

            }
            if($("#departradio").is(':checked'))
            {

                if(nbrmaxperso<nbrpass_dep) {
                    swal('\n' +
                        'The number of people is greater than the number of places available on the means of transfer chosen, please choose another vehicle \n \n Le nombre de personnes est supérieur au nombre de places disponible sur les moyens de transfert choisi, veuillez chosir un autre véhicule');
                    return false;
                }

            }
            if($("#transfert_adresse").val().trim().length < 1)

            {
                swal("Please enter the address field \n \n Veuillez saisir le champ adresse");
                return false;
            }

        }
        if($("#arrivalradio").is(':checked')){
            if( date_fasttrack_arriv=='' || heure_fasttrack_arriv=='' || num_vol_arriv=='' || nbr_passagers_arriv=='' || nom0=='' || prenom0==''  ){
                //alert('Veuillez remplir les champs obligatoires!');

                swal("Please complete all required fields! \n \n  Veuillez remplir les champs obligatoires!");

                return false;
            }
        }

        if($("#departradio").is(':checked')){
            if(date_fasttrack_dep=='' || heure_fasttrack_dep=='' || num_vol_dep=='' || nbr_passagers_dep=='' ||nom0=='' || prenom0==''){
                //alert('Veuillez remplir les champs obligatoires!');
                swal("Please complete all required fields! \n \n  Veuillez remplir les champs obligatoires!");
                return false;
            }
        }

        if( $("#departarrivradio").is(':checked') || $("#arrivrdepartadio").is(':checked') ){
            if(date_fasttrack_dep=='' || heure_fasttrack_dep=='' || num_vol_dep=='' || nbr_passagers_dep=='' || date_fasttrack_arriv=='' || heure_fasttrack_arriv=='' || num_vol_arriv=='' || nbr_passagers_arriv=='' || nom0=='' || prenom0==''){
                //alert('Veuillez remplir les champs obligatoires!');
                swal("Please complete all required fields! \n \n  Veuillez remplir les champs obligatoires!");
                return false;
            }
        }


            // -------------------------------------------------------------

                var departureRadio = document.getElementById('departradio');
                var arrivalRadio = document.getElementById('arrivalradio');

                var currentDateTime = new Date(); // Get current date and time

                if(departureRadio.checked){
                    
                    var dateTimeStringDepart = date_fasttrack_dep + ' ' + heure_fasttrack_dep; // E.g., '2024-10-07 14:00'
                    var inputDateTime = new Date(dateTimeStringDepart);

                    var timeDifferenceInHours = (inputDateTime - currentDateTime) / (1000 * 60 * 60);

                    if(timeDifferenceInHours<24){
                        alert("Please ensure that the departure date is at least 24 hours from the current time.");
                        return false;   
                    }
            
                }


                    // Control to add if is just a departure
                    if(arrivalRadio){

                        if(arrivalRadio.checked){

                    
                        var dateTimeString2 = date_fasttrack_arriv + ' ' + heure_fasttrack_arriv; // E.g., '2024-10-07 14:00'
                        var inputDateTime2 = new Date(dateTimeString2);
                        var timeDifferenceInHours = (inputDateTime2 - currentDateTime) / (1000 * 60 * 60);

                            if(timeDifferenceInHours<24){
                                alert("Please ensure that the arrival date is at least 24 hours from the current time.");
                                return false;   
                            }   

                        }

                    }


           //------------------------------------------------------------------
        
        finalpriceperpersoo = $('#finalpriceperperso').val();

              $('.home_slider_button').css('display', 'none');
        var packID      =  {{ pack[0].id }} ;
        var airportID   =  {{ airport[0].id }} ;
        $.ajax({
            url:"{{path('fasttrack_submit')}}",
            type: "POST",
            dataType: "json",
            data: {
                date_fasttrack_dep  : date_fasttrack_dep
                ,heure_fasttrack_dep  : heure_fasttrack_dep
                ,num_vol_dep :  num_vol_dep

                ,date_fasttrack_arriv :  date_fasttrack_arriv
                ,heure_fasttrack_arriv :  heure_fasttrack_arriv
                ,num_vol_arriv :  num_vol_arriv

                ,nbr_passagers_arriv  :  nbr_passagers_arriv
                ,nbr_passagers_child_gt_arriv  :  nbr_passagers_child_gt_arriv
                ,nbr_passagers_child_arriv  :  nbr_passagers_child_arriv

                ,nbr_passagers_dep  :  nbr_passagers_dep
                ,nbr_passagers_child_gt_dep  :  nbr_passagers_child_gt_dep
                ,nbr_passagers_child_dep  :  nbr_passagers_child_dep

                ,demande :   demand
                ,pack    :   packID
                ,airport :   airportID
                ,finalpriceperpersone : finalpriceperpersoo
                ,passagers : concatname
                ,trans:list_of_transport
                ,adress_trans:adress_trans
            },
            async: true,
            success: function (data)
            {

                /*console.log(data); return false;*/
                $('.panier h5').text('Mon Panier('+data+')');

                $('.home_slider_button').css('display', '');

                $('#button_confirm').click();

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
        return false;
        

    });
</script>


<script>
        function validationBookDate() {
            const input = document.getElementById('datepicker').value;
            if (!input) {
                alert("Veuillez sélectionner une date."); // Alert in French
                return false;
            }

            const enteredDate = new Date(input);
            const now = new Date();
            const minDate = new Date(now.getTime() + 24 * 60 * 60 * 1000); // Now + 24 hours
            const maxDate = new Date('2024-12-31');

            if (enteredDate < minDate || enteredDate > maxDate) {
                alert(`La date doit être entre ${minDate.toLocaleDateString()} et ${maxDate.toLocaleDateString()}.`);
                return false;
            }

            return true; // Allow form submission
        }
    </script>
{% endblock %}