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

{% block bodytile %} Commande de <b> {{ user.nom }} {{ user.prenom }} </b> Pour <u>{{  airport[0].title }}</u>{% 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</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <form role="form" action="{{ path('newDealerOrder') }}" 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">
                            <div class="box-group" id="accordion">
                                {% for j in 0..resas-1 %}
                                    <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{{ j }}" aria-expanded="false" class="collapsed">
                                                    FastTrack {{ j+1 }}
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse{{ 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-4">
                                                                <label>Pack Fast Track :</label>
                                                                <select multiple="" class="form-control" name="packFastTrack{{ j }}" required="true">
                                                                    {% for pack in packs %}
                                                                        <option value="{{ pack.getId }}">{{ pack.getTitle }}</option>
                                                                    {% endfor %}
                                                            </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label>Type Fast Track :</label>
                                                                <select multiple="" class="form-control" name="typeFastTrack{{ j }}" required="true">
                                                                        <option value="1">Arrivé</option>
                                                                    <option value="0">Départ</option>
                                                                </select>
                                                             </div>
                                                              <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Transport :</label>
                                                                    <select multiple="" class="form-control" name="transport{{ j }}" required="true">
                                                                        <option value="0">Non</option>
                                                                        <option value="1">Oui</option>
                                                                    </select>
                                                                </div>
                                                            </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{{ j }}" class="form-control pull-right" id="datepicker{{ 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{{ j }}" class="form-control timepicker" id="timepicker{{ 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{{ 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{{ 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{{ 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{{ 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{{ 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{{ 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>
                                                     {#   
                                                     
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="form-group">
                                                                    <label>Transport :</label>
                                                                    <select class="form-control" name="transport{{ 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{{ j }}">
                                                                        {% for trans in transports %}
                                                                            <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{{ j }}" class="form-control" value="1" min="0" >
                                                                    </div>
                                                                    <!-- /.input group -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <textarea class="textarea" name="pickup{{ 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{{ 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>
                        </div>
                        <input type="hidden" name="user" value="{{ user.getId() }}">
                        <input type="hidden" name="airport" value="{{  airport[0].getId()}}">
                        <input type="hidden" name="nbookings" value="{{ resas }}">
                        <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 k in 0..resas-1 %}
        $('#datepicker{{ k }}').datepicker({
            autoclose: true
        });
        $('#timepicker{{ k }}').timepicker({
            showInputs: false,
			minuteStep: 1,
        });
        {% endfor %}

    </script>


{% endblock %}