{%  extends "WebBackBundle::layout_lte.html.twig" %}

{% block bodytile %} Nouvelle Commande de <b> {{ user.nom }} {{ user.prenom }} </b>{% endblock %}
{% block body %}
    <!-- script data tabels -->

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>

    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

    <div class="container-fluid">

        <div class="box box-warning">
            <div class="box-header with-border">
                <h3 class="box-title">2éme étape : Remplir les formulaires multi-aéroports</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <form role="form" action="{{ path('newMultipleBooking') }}" method="post">
                    <!-- select -->
                    {% if packs is empty %}
                            <style>
                                .offers {
                                    width: 100%;
                                    padding-top: 0;
                                    padding-bottom: 0px;
                                }
                                .offers {
                                    width: 100%;
                                    padding-top: 0;
                                    padding-bottom: 0px;
                                    background: #f3f6f9;
                                }
                            </style>
                            <div class="alert alert-warning alert-dismissible fade show" role="alert" style="width: 100%;margin-top: 1%;">
                                <strong>{% trans %}Pardon!{% endtrans %}</strong> Aucun Pack FastTrack sur cet Aéroport !
                            </div>
                    {% else %}

                        <div class="box-body">
                         <input type="hidden" name="nairports" value="{{ qntAirport }}">
                            {% for i in 1..qntAirport %}
                        
                            <div class="box-group" id="accordion{{i}}">
                                {% for j in 1..qntBooking[i] %}
                                <input type="hidden" name="qntBooking{{i}}" value="{{ qntBooking[i] }}">
                                    <div class="panel box box-primary">
                                        <div class="box-header with-border">
                                            <h4 class="box-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ i }}{{ j }}" aria-expanded="false" class="collapsed">
                                                   L'Aéroport <b>{{ airport[i].abr }}</b> FastTrack {{ j }}
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse{{ i }}{{ j }}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                            <div class="box-body">
                                                <div class="row" style="padding: 12px;">
                                                    <div class="form-group">

                                                      

                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label>Pack FastTrack</label>
                                                                <select multiple="" class="form-control" name="packFastTrack{{ i }}{{ j }}" required="true">
                                                                {% set packAero = packs[i] %}
                                                                    {% for  pack in packAero %}
                                                                        <option value="{{ pack.getId }}">{{ pack.getTitle }}</option>
                                                                    {% endfor %}
                                                            </select>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label>Type FastTrack</label>
                                                                <select multiple="" class="form-control" name="typeFastTrack{{ i }}{{ j }}" required="true">
                                                                        <option value="1">Arrivé</option>
                                                                    <option value="0">Départ</option>
                                                                </select>
                                                             </div>
                                                        </div>
                                                        <br>
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Date:</label>
                                                                    <div class="input-group date">
                                                                        <div class="input-group-addon">
                                                                            <i class="fa fa-calendar"></i>
                                                                        </div>
                                                                        <input type="text" name="date{{ i }}{{ j }}" class="form-control pull-right" id="datepicker{{ i }}{{ j }}" required="true">
                                                                    </div>
                                                                    <!-- /.input group -->
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                    <div class="bootstrap-timepicker">
                                                                        <div class="form-group">
                                                                            <label>Heure :</label>

                                                                            <div class="input-group">
                                                                                <input type="text" name="heure{{ i }}{{ j }}" class="form-control timepicker" id="timepicker{{ i }}{{ j }}" required="true">

                                                                                <div class="input-group-addon">
                                                                                    <i class="fa fa-clock-o"></i>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Compagnie & N Vol</label>
                                                                    <input type="text" name="company{{ i }}{{ j }}" class="form-control" placeholder="AT8789...." required="true">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    
                                                        
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Adultes > 12ans :</label>
                                                                    <div class="input-group date">
                                                                        <div class="input-group-addon">
                                                                            <i class="fa fa-user"></i>
                                                                        </div>
                                                                        <input type="number" name="adulte{{ i }}{{ j }}" class="form-control pull-right" value="1" min="1" required="true">
                                                                    </div>
                                                                    <!-- /.input group -->
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Enfants 2ans - 12ans:</label>

                                                                    <div class="input-group">
                                                                        <div class="input-group-addon">
                                                                            <i class="fa fa-user"></i>
                                                                        </div>
                                                                        <input type="number" name="junior{{ i }}{{ j }}" class="form-control" value="0" min="0" required="true">
                                                                    </div>
                                                                    <!-- /.input group -->
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Enfants 0.9ans - 2 ans:</label>
                                                                    <div class="input-group">
                                                                        <div class="input-group-addon">
                                                                            <i class="fa fa-user"></i>
                                                                        </div>
                                                                        <input type="number" name="bebe{{ i }}{{ j }}" class="form-control" value="0" min="0" required="true">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
														<p><span style="display: inline-block;max-width: 100%;margin-bottom: 5px;font-weight: 700;padding-left: 1%;">Noms et prenoms des passagers:</span>
														( séparés par ( <b>;</b> ) SANS ESPACES . - Exemple: <span style="color: red;"> Adel SOUSSI<b>;</b>Yassine BADAOUI<b>;</b>Malika Soussi</span>)</p>
                                                            <textarea class="textarea" name="passagers{{ i }}{{ j }}" placeholder="Noms et prenoms des passagers separes par ;    Exemple:  Adel SOUSSI;Yassine BADAOUI;Malika Soussi" style="width: 95%; height: 56px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 16px; margin-left: 2%;" required="true"></textarea>
                                                        </div>
														 <div class="row">
                                                            <textarea class="textarea" name="demande{{ i }}{{ j }}" placeholder="Demande Spéciale" style="width: 95%; height: 56px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 16px; margin-left: 2%;"></textarea>
                                                        </div>
                                                        <br>
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Transport :</label>
                                                                    <select class="form-control" name="transport{{ i }}{{ j }}">
                                                                        <option value="0">Non</option>
                                                                        <option value="1">Oui</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Vehicule:</label>
                                                                    <select class="form-control" name="vehicule{{ i }}{{ j }}">
                                                                    {% set transport = transports[i] %}
                                                                        {% for trans in transport %}
                                                                            <option value="{{ trans.getId() }}">{{ trans.destination.getLieu() }} | {{ trans.getVehicule() }} | {{ trans.getPrix() }}€ | {{ trans.getNbrminplace() }}-{{ trans.getNbrplace() }}</option>
                                                                        {% endfor %}

                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Nombre :</label>

                                                                    <div class="input-group">
                                                                        <div class="input-group-addon">
                                                                            <i class="fa fa-car"></i>
                                                                        </div>
                                                                        <input type="number" name="nvehicule{{ i }}{{ j }}" class="form-control" value="1" min="0" >
                                                                    </div>
                                                                    <!-- /.input group -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <textarea class="textarea" name="pickup{{ i }}{{ j }}" placeholder="Entrer l'adresse de pickUp" style="width: 95%; height: 56px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 16px; margin-left: 2%;"></textarea>
                                                        </div>
														<br>
														<div class="row">
															<div class="form-group has-success">
																<label class="control-label" for="inputWarning"><i class="fa fa-bell-o"></i> Commentaire </label>
																<textarea class="textarea" name="commentaire{{ i }}{{ j }}" placeholder="Ecrire un commentaire..." style="width: 95%; height: 56px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 16px; margin-left: 2%;"></textarea>
															</div>
														</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                       
                       {# <input type="hidden" name="airport" value="{{  airport[i].getId()}}">  
                        <input type="hidden" name="nbookings" value="{{ qntBooking[i] }}">#}
                            {% endfor %}
                        </div>
                        <input type="hidden" name="user" value="{{ user.getId() }}">
                    
                        <div class="col-md-6 pull-right">
                            <button type="submit" class="btn btn-block btn-success btn-lg">
                                Suivant <i class="fa fa-fw fa-angle-double-right"></i>
                            </button>
                        </div>
                    {% endif %}
                </form>
            </div>
            <!-- /.box-body -->
        </div>

    </div>



{% endblock %}




{% block scripts %}
    <script>
 
        {% for i in 1..qntAirport %}
        {% for j in 1..qntBooking[i] %}
            $('#datepicker{{i}}{{ j }}').datepicker({
                autoclose: true
            });
            $('#timepicker{{ i }}{{ j }}').timepicker({
                showInputs: false,
                minuteStep: 1,
            });
        {% endfor %}
        {% endfor %}

    </script>
{% endblock %}