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

{% block body %}
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/select2.min.css")}}">
    <link rel="stylesheet" type="text/css" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">

    <div id="main">

        <div class="page-header valign-wrapper more-p" data-parallax="active" style="background-image:url({{ asset("assets/uploads/offers/"~pack[0].getImage()~"")}});transform: translate3d(0px, 0px, 0px);">
            <div class="opacity-overlay"></div>
            <div class="container not-center">
                <div class="row valign">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="brand">
                            <h1 class="title">Fast Track : {{ airport[0].getTitle()|trans }}</h1>


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

        {% set foo = 'false' %}
        <script type="text/javascript">
            var foo = 'false';
        </script>

        {% 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>
        {% endif %}
    {% set childrenoffer = (pack[0].offrechilds)*100 %}
        <div class="container" style="margin-top: -80px; padding:0">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">

                    <div class="card card-signup">
                        <h2 class="card-title text-center">{{pack[0].title}}</h2>
                     <div style="color:red;width: 100%;margin: auto; text-align: center"><i class="fa fa-warning"></i>
                         {% 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 %}
                         </div>
                        <div class="col-md-12">


                            <div class="home-filter white">
                                <div class="header header">
                                    <div class="nav-tabs-navigation">
                                        <ul class="nav nav-pills nav-pills-rose nav-pills-icons text-center" role="tablist">

                                            <li id="tabarrival" class="active" style="width: 120px">
                                                <a class="filter" onclick="afficher_block('fast_arrive')+check_uncheck_fasttrack(1)" href="#updates" data-toggle="tab" data-filter=".category-1" aria-expanded="true">
                                                    <i class="material-icons">flight_land</i>
                                                    {% trans %}Arrival Fast track{% endtrans %}
                                                </a>
                                            </li>
                                            <li id="tabdepart" class="" style="width: 120px">
                                                <a class="filter"  href="#history"  onclick="afficher_block('fast_depart')+check_uncheck_fasttrack(2)" data-toggle="tab" data-filter=".category-2" aria-expanded="true">
                                                    <i class="material-icons">flight_takeoff</i>
                                                    {% trans %}Departure Fast track{% endtrans %}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>



                            <form class="row" id="fasttrackbook">
               <div class="row radioblock" style="opacity: 0; height: 0">

                   <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">
                                   Arrival Fast track
                               </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">
                                   Departure Fast track
                               </label>


                           </div>

                       </div>

                   </div>


               </div>
                <div class="content" style="padding: 0">

                           <div id="fstblocks">
                               <div id="fast_arrive" style="padding:0 !important" class="fast_block col-sm-12 category-1">

                                    <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">date_range</i>
                                             </span>
                                        <div class="form-group is-empty">
                                            <input rel="tooltip" title="{% trans %}Arrival DATE *{% endtrans %}" placeholder="{% trans %}Arrival DATE *{% endtrans %}" data-toggle="datepicker" class="form-control hasDatepicker" readonly="" min="{{ "now"|date("Y-m-d") }}"  required name="date_fasttrack_arriv" id="datepicker">
                                            <span class="material-input"></span></div>
                                        <span class="input-group-addon">

                                             </span>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">access_time</i>
                                             </span>
                                        <div class="form-group is-empty">
                                            <input class="form-control timepicker" {% if foo==true %} min="7:00" {% endif %}  type="time" required value="20:00" name="heure_fasttrack_arriv" id="example-time-input">
                                            <span class="material-input"></span></div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">flight_land</i>
                                             </span>
                                        <div class="form-group is-empty">
                                            <input class="form-control" type="text" required name="num_vol_arriv" placeholder="{% trans %}Company &amp; flight N°. *{% endtrans %} (EX: AT 546)" id="example-time-input" onchange="arrivalFlightchecker()">
                                            <span class="material-input"></span></div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">person</i>
                                             </span>
                                        <div class="form-group is-empty">
                                            <select class="form-control" onchange="calculerprixarriv()" name="nbr_passagers_arriv">
                                                <option value="">{% trans %}Number of adult passengers *{% endtrans %}</option>
                                                {% for i in range(1, 10) %}
                                                    <option value="{{ i }}">{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <span class="material-input"></span></div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">child_care</i>
                                             </span>
                                        <div class="form-group is-empty">
                                        <select rel="tooltip" title="{% trans %}From 0 to 1.99 year old : free of charge{% endtrans %}" style="width:100%;float:left" class="form-control" onchange="calculerprixarriv()" name="nbr_passagers_child_gt_arriv" id="nbr_passagers_child_gt_arriv">
                                            <option value="">{% trans %}Number of childreen passengers (0 - 1,99){% endtrans %}
                                            </option>
                                            {% for i in range(0, 5) %}
                                                <option value="{{ i }}">{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        <span class="material-input"></span></div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">child_care</i>
                                             </span>
                                        <div class="form-group is-empty">
                                            <select rel="tooltip" title="{% trans %}From 2 to  11.9 year old :{% endtrans %} {{ childrenoffer }} % {% trans %}price adult{% endtrans %}" style="width:100%" class="form-control" onchange="calculerprixarriv()" name="nbr_passagers_child_arriv" id="nbr_passagers_child_arriv">
                                                <option value="">{% trans %}Number of childreen passengers (2 -  11.9 ){% endtrans %}</option>
                                                {% for i in range(0, 10) %}
                                                    <option value="{{ i }}">{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <span class="material-input"></span></div>
                                    </div>

                               </div>

                               <div id="fast_depart" class="fast_block col-sm-12 category-2" style="display: none; padding: 0 !important;">
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">date_range</i>
                                             </span>
                                       <div class="form-group is-empty">
                                           <input rel="tooltip" title="{% trans %}Departure Date  *{% endtrans %}"   placeholder="{% trans %}Departure Date  *{% endtrans %}" data-toggle="datepicker" class="form-control hasDatepicker" readonly="" min="{{ "now"|date("Y-m-d") }}"  required name="date_fasttrack_dep" id="datepickerdep">
                                           <span class="material-input"></span></div>
                                   </div>
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">access_time</i>
                                             </span>
                                       <div class="form-group is-empty">
                                           <input class="form-control timepicker" {% if foo==true %} min="7:00" {% endif %} type="time" required value="20:00" name="heure_fasttrack_dep" id="example-time-input">
                                           <span class="material-input"></span></div>
                                   </div>
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">flight_takeoff</i>
                                             </span>
                                       <div class="form-group is-empty">
                                           <input class="form-control" type="text" required name="num_vol_dep" placeholder="{% trans %}Company &amp; flight N°*{% endtrans %} (EX: AT 546)"  id="example-time-input" onchange="departureFlightchecker()">
                                           <span class="material-input"></span></div>
                                   </div>
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">person</i>
                                             </span>
                                       <div class="form-group is-empty">
                                           <select class="form-control" onchange="calculerprixdep()" name="nbr_passagers_dep">
                                               <option value="">{% trans %}Number of adult passengers *{% endtrans %}</option>
                                               {% for i in range(1, 10) %}
                                                   <option value="{{ i }}">{{ i }}</option>
                                               {% endfor %}
                                           </select>
                                           <span class="material-input"></span></div>
                                   </div>
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">child_care</i>
                                             </span>
                                       <div class="form-group is-empty">
                                           <select  rel="tooltip" title="{% trans %}From 0 to 1.99 year old : free of charge{% endtrans %}"  style="width:100%;float:left" class="form-control" onchange="calculerprixdep()" name="nbr_passagers_child_gt_dep" id="nbr_passagers_child_gt_dep">
                                               <option value="">{% trans %}Number of children passengers (0 - 1,99){% endtrans %}
                                               </option>
                                               {% for i in range(0, 5) %}
                                                   <option value="{{ i }}">{{ i }}</option>
                                               {% endfor %}
                                           </select>
                                           <span class="material-input"></span></div>
                                   </div>
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">child_care</i>
                                             </span>
                                       <div class="form-group is-empty">
                                           <select rel="tooltip" title="{% trans %}From 2 to  11.9 year old :{% endtrans %} {{ childrenoffer }} % {% trans %}price adult{% endtrans %}" style="width:100%" class="form-control" onchange="calculerprixdep()" name="nbr_passagers_child_dep" id="nbr_passagers_child_dep">
                                               <option value="">{% trans %}Number of children passengers (2 - 11,99){% endtrans %}</option>
                                               {% for i in range(0, 10) %}
                                                   <option value="{{ i }}">{{ i }}</option>
                                               {% endfor %}
                                           </select>
                                           <span class="material-input"></span></div>
                                   </div>
                               </div>


                           </div>
                                    {% 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="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">drive_eta</i>
                                             </span>
                                        <div class="form-group is-empty">
                                            <select id="transfert_service" onchange="fct_transfert()" name="transfert" class="form-control">
                                                <option value="0" class="en_lang">{% trans %}Transfer Service{% endtrans %}</option>
                                                <option value="0" class="en_lang">{% trans %}No, Thanks{% endtrans %}</option>
                                                <option value="1" class="en_lang">{% trans %}Yes{% endtrans %}</option>
                                            </select>
                                            <span class="material-input"></span></div>
                                        </div>

                                    <div id="tab_service_trans" style="display: none; width: 100%">
                                        <div class="input-group">
                                             <span class="input-group-addon">
                                                  <i class="material-icons">location_on</i>
                                             </span>
                                            <div class="form-group is-empty">


                                                <select id="destination" onchange="chosir_emplacement()" name="destination" class="form-control">
                                                    <option value="0" class="en_lang">-- {% trans %}Choose a location{% endtrans %} --</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: #9c27b0; color: #fff; display: none" id="vehicule_dest_title">
                                                <th style="text-align: left;padding-left: 10px;">
                                                    <strong class="en_lang"> {% trans %}Choose{% endtrans %}</strong>

                                                </th>
                                                <th colspan="2">
                                                    <center>
                                                        <strong class="en_lang"> {% trans %}Vehicle{% endtrans %}</strong>

                                                    </center>
                                                </th>
                                                <th ><center>
                                                        <strong class="en_lang">{% trans %}Number of places{% endtrans %}</strong>

                                                    </center></th>
                                                <th style="text-align: right;padding-right: 10px;">
                                                    <strong class="en_lang"> {% trans %}Price{% endtrans %}</strong>

                                                </th>
                                            </tr>#}
                                            <style>
                                                .nopad {
                                                    padding-left: 0 !important;
                                                    padding-right: 0 !important;
                                                }
                                                /*image gallery*/
                                                .image-checkbox {
                                                    cursor: pointer;
                                                    box-sizing: border-box;
                                                    -moz-box-sizing: border-box;
                                                    -webkit-box-sizing: border-box;
                                                    border: 4px solid transparent;
                                                    margin-bottom: 0;
                                                    outline: 0;
                                                }
                                                .image-checkbox input[type="checkbox"] {
                                                    display: none;
                                                }

                                                .image-checkbox-checked {
                                                    border-color: green;
                                                    border:2px solid green;
                                                }
                                                .image-checkbox .checkfa {
                                                    position: absolute;
                                                    color: #fff;
                                                    background-color: green;
                                                    padding: 10px;
                                                    top: 0;
                                                    right: 0;
                                                }
                                                .img-responsive
                                                {
                                                    width: 200px  !important;
                                                    height: 150px !important;
                                                    border: 2px solid #fff;
                                                }
                                                .image-checkbox-checked .fa {
                                                    display: block !important;
                                                }
                                                .attritrans
                                                {
                                                    color:#000000;
                                                    font-size: 14px;
                                                }

                                            </style>
                                        <div class="container tab_service_trans">
                                            <h3 style="display: none" id="vehicule_dest_title">{% trans %}Choose{% endtrans %} {% trans %}Vehicle{% endtrans %}</h3>

                                            <div class="row">
                                                {% set counttrr=0 %}
                                                {% for trans in transport %}


                                                    {% if counttrr is divisible by(2) %}
                                        </div>
                                                    <div class="row">
                                                    {% endif %}
                                                        <div class="col-md-6 col-sm-6 col-xs-6 nopad text-center" >

                                                <label class="image-checkbox vehicule_dest" style="border-bottom: 1px dotted #eeeeee; display: none" id="dest_{{ trans.getDestination().getId() }}">
                                                    <img   class="img-responsive" src="{{ asset("assets/uploads/transports/"~trans.getPhoto()) }}" />
                                                    <input type="checkbox"  name="transfertchoisi" value="{{ trans.getId() }}|{{ trans.getPrix() }}|{{ trans.getNbrplace() }}">
                                                    <i class="fa fa-check checkfa hidden"></i>
                                                    <i class="fa attritrans fa-user" style="width: 100%"> {{ trans.getNbrminplace() }} - {{ trans.getNbrplace() }}</i>
                                                    <i class="fa attritrans fa-money"  style="width: 100%"> {{ trans.getPrix() }}€ / {{ trans.getPrix()*10 }} MAD</i>
                                                </label>

                                            </div>

                                                        {% set counttrr=counttrr+1 %}

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

                                        <div class="col-md-12" id="transfert_adresse_div" style="display: none">
                                            <div  class="form-group">

                                                <label for="transfert_adresse" class="en_lang required">{% trans %}Adress * :{% endtrans %}</label>
                                                <textarea id="transfert_adresse"   name="transfert_adresse" class="form-control" required> </textarea>

                                            </div>
                                        </div>



                                </div>

                                        </div>

                                        <div id="passengers" class="col-md-12" style="padding: 0 !important;">

                                            <div class="row">



                                                <div class="col-xs-6">



                                                    <div class="input-group input-group-lg">
                                                        <input class="form-control" type="text" required name="nom0" placeholder="{% trans %}First Name *{% endtrans %}" id="nom0">
                                                    </div>

                                                </div>

                                                <div class="col-xs-6">



                                                    <div class="input-group input-group-lg">
                                                        <input class="form-control" type="text" required name="prenom0" placeholder="{% trans %}Last Name *{% endtrans %}" 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>


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

                                        <! --- Total -->
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                         <i class="material-icons">euro_symbol</i>
                                             </span>
                                        <div class="form-group is-empty">
                                            <input class="form-control" type="text" name="totalprix" value="00,00 €" required="false" readonly="">
                                            <span class="material-input"></span></div>
                                    </div>

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


                                    <!-- If you want to add a checkbox to this form, uncomment this code -->


                                </div>


                    <div class="footer text-center m-b-40">
                        <a href="#!" class="reserver_fasttrack btn btn-primary btn-round">{% trans %}Book Now{% endtrans %}<div class="ripple-container"></div></a>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12" style="margin: 0;">



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

                        <div id="myModalconfirm" class="modal fade" role="dialog" style="opacity: 1">
                            <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">Book added successfully to cart!</p>

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

                                            <div class="col-md-12" style="color:black;">
                                                <h4>{{pack[0].title}} - Aeroport : {{airport[0].title}}</h4>
                                            </div>

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


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

                                            </div>

                                            <div class="col-md-5">
                                                <a href="{{ path("checkout_cart_mobile") }}" class="btn btn-success">Complete my order
                                                    <i class="fa fa-shopping-cart"></i>
                                                </a>
                                            </div>

                                        </div>

                                    </div>

                                </div>

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

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

            </div>



        </div>
    </div>
    <script src="{{ asset("assets/js/jquery-3.2.1.min.js")}}"></script>
    <script src="{{ asset("assets/js/select2.min.js")}}"></script>
    <script src="{{ asset("assets/styles/bootstrap4/popper.js")}}"></script>
    <script src="{{ asset("assets/styles/bootstrap4/bootstrap.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/OwlCarousel2-2.2.1/owl.carousel.js")}}"></script>
    <script src="{{ asset("assets/plugins/easing/easing.js")}}"></script>
    <script src="{{ asset("assets/js/custom.js")}}"></script>
    <script src="{{ asset("assets/js/bookoffre_custom_mobile.js")}}"></script>

    <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/sweetalert.min.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',
            autoClose: true,
            minView: 2
        });


    </script>


    <script>
        function check_uncheck_fasttrack(id)
        {
            if(id==1)
            {
                document.getElementById("tabarrival").classList.remove('active');
                document.getElementById("tabdepart").classList.remove('active');
                document.getElementById("tabarrival").classList.add('active');
                document.getElementById("arrivalradio").checked = true;
                document.getElementById("departradio").checked = false;
            }
            else
            {
                document.getElementById("tabarrival").classList.remove('active');
                document.getElementById("tabdepart").classList.remove('active');
                document.getElementById("tabdepart").classList.add('active');
                document.getElementById("arrivalradio").checked = false;
                document.getElementById("departradio").checked = true;
            }
        }

        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() {
            $('.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;

            }
          //  alert("hhhhhhhhhh : "+concatname)


            //// 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;
                }
            }



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

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

            $.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    : {{ pack[0].id }}
                    ,airport : {{airport[0].id}}
                    ,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;

        });

        $(".image-checkbox").each(function () {
            if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
                $(this).addClass('image-checkbox-checked');
            }
            else {
                $(this).removeClass('image-checkbox-checked');
            }
        });

        // sync the state to the input
        $(".image-checkbox").on("click", function (e) {
            $(this).toggleClass('image-checkbox-checked');
            var $checkbox = $(this).find('input[type="checkbox"]');
            $checkbox.prop("checked",!$checkbox.prop("checked"))
            calculeprixtrans();

                e.preventDefault();
        });
    </script>

{% endblock %}