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

{% block bodytile %}Réservez un Fast Track {% 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="{{ asset("assets/styles/select2.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 : Choix du Client & du nombre de vol pour chaque aéroport </h3>
            </div>
            <!-- /.box-header -->
            <form role="form" action="{{ path('search_offers_multiple') }}" method="POST">
                    
                    <div class="box-body">
                    <div class="row">
                        <div class="col col-md-12" style="margin-top: 1%;">
                            <div class="destination search_input" id="aeroports">
                                <strong class="select2-results__group" style="color:#000;">Votre client</strong>
                                <select class="js-example-basic-single" name="user">
									<option value="35" selected>MALIKA SOUSSI - msoussi@1001evasions.com</option>                                    
									{% for user in users %}
                                        <option value="{{ user.id }}">{{ user.nom }} {{ user.prenom }} - {{ user.email }}</option>
                                    {% endfor %}
									
                                </select>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <h5 style="font-weight: 700;"> Choisissez vos aéroports & rentrez les nombres de vols pour chaqu'un</h5>    
                    </div>
                    <div class="box-group" id="accordion">
                    <br />
                    <input type="hidden" name="qntAirport" value="{{airports}}">
                    {% for i in 1..airports%}

                <div class="panel box box-success">
                  <div class="box-header with-border">
                    <h4 class="box-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ i }}" class="collapsed" aria-expanded="false">
                        Aéroport {{ i }}
                      </a>
                    </h4>
                  </div>
                  <div id="collapse{{ i }}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                    <div class="box-body">
                   
                            <div class="col col-md-12">
                                    <div class="form-group">
                                        <label></label>
                                        <br>
                                        <select class="form-control" name="airport{{ i }}">
                                            <option value="CMN">{% trans %}Mohammed V Intl, CMN, Casablanca, Morocco {% endtrans %}</option>
                                            <option value="AGA">{% trans %}Agadir – Al Massira, AGA, Agadir, Morocco{% endtrans %}</option>
                                            <option value="OUD">{% trans %}Oujda Angads, OUD, Oujda, Morocco {% endtrans %}</option>
                                            <option value="RAK">{% trans %}Marrakesh Menara, RAK, Marrakesh, Morocco{% endtrans %}</option>
                                            <option value="RBA">{% trans %}Rabat–Salé, RBA, Salé, Morocco {% endtrans %}</option>
                                            <option value="FEZ">{% trans %}Fes–Saïss, FEZ, Fes, Morocco {% endtrans %}</option>
                                            <option value="TNG">{% trans %}Tangier Ibn Battouta, TNG, Tanger, Morocco{% endtrans %}</option>
                                            <option value="EUN">{% trans %}Laayoune Hassan 1st, EUN, Laayoune, Morocco{% endtrans %}</option>
                                            <option value="VIL">{% trans %}Dakhla Airport, Dakhla, VIL, Morocco{% endtrans %}</option>
											<option value="OZZ">{% trans %}Ouarzazate, OZZ, Morocco{% endtrans %}</option>
                                            <option value="CDG">{% trans %}Paris-Charles-de-Gaulle, CDG, France{% endtrans %}</option>
                                            <option value="ORY">{% trans %}Paris-Orly, ORY, France France{% endtrans %}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col col-md-12" >
                                    <div class="form-group">
                                        <label>Combien de Vols pour l'aéroport {{ i }} ?</label>
                                        <br>
                                        <input type="number" name="qntBooking{{ i }}" value="1" min="1">
                                    </div>
                                </div>
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>                        
                    <div class="col-md-12">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-block btn-primary btn-lg" data-toggle="modal" data-target="#modal-default">
                                Ajouter nouveau client
                            </button>
                        </div>
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-block btn-success btn-lg">
                                Suivant <i class="fa fa-fw fa-angle-double-right"></i>
                            </button>
                        </div>
                     </div>
                     </div>
             </form>
            <!-- /.box-body -->
        </div>

    </div>
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Ajouter nouveau Client</h4>
                </div>
                <div class="modal-body">

                    <form action="{{ path('newCustomer') }}" method="post">

                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" name="nom" class="form-control" placeholder="Nom">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" name="prenom" class="form-control" placeholder="Prenom">
                        </div>
                        <br>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input type="email" name="email" class="form-control" placeholder="Email">
                        </div>
                        <br>

                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                            <input type="tel" name="tel" class="form-control" placeholder="Telephone">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                            <input type="tel" name="telDriver" class="form-control" placeholder="Telephone de chauffeur">
                        </div>
                        <br>
                        <div class="input-group">
                            <button type="submit" class="btn btn-block btn-warning btn-lg pull-right"><b>Valider Enregistrement</b></button>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
                    {#<button type="button" class="btn btn-primary">Save changes</button>#}
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script src="{{ asset("assets/js/select2.min.js")}}"></script>

    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2({
                width: '100%'
            });
            $('.js-example-basic-single2').select2({
                width: '100%'
            });

        });

    </script>
{% endblock %}