{%  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">1ére étape : Choix du Client & de l'aéroport</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <form role="form" action="{{ path('search_offers') }}" method="get">
                    <!-- select -->
                    <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 class="col col-md-12" style="margin-top: 1%;">
                        <div class="form-group">
                            <label>Nos Aéroports</label>
                            <br>
                            <select class="form-control" name="airport">
                                <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" style="margin-top: 1%;">
                        <div class="form-group">
                            <label>Combien de Vols ?</label>
                            <br>
                            <input type="number" name="qntBooking" value="1" min="1">
                        </div>
                    </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>

                </form>
            </div>
            <!-- /.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-user"></i></span>
                            <input type="text" name="ice" class="form-control" placeholder="ICE">
                        </div>
                        <br>
						
						<div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" name="entreprise" class="form-control" placeholder="Entreprise">
                        </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 %}