{%  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="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">3éme étape : Complétez le formulaire de réservation pour chaque service</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <form role="form" action="{{ path('newBooking') }}" method="post">
                    <!-- select -->
                    {% if total 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 %}Sorry!{% endtrans %}</strong> {% trans %}No offer affected to this airport.{% endtrans %}
                        </div>
                    {% else %}
                        <div class="col-md-12">
                            <div class="box box-solid">
                                <div class="box-header with-border">
                                    <h3 class="box-title">Détails des réservations sur <u>{{ airport.getTitle() }}</u></h3>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div class="box-group" id="accordion">
                                        {% for i in 1..total %}
                                            <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 }}" aria-expanded="false" class="collapsed">
                                                            FastTrack {{ i }}
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse{{ i }}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                                    <div class="box-body">
                                                           Formulaire resa {{ i }}
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->
                        </div>



                        <div class="col-lg-3 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 %}