{% extends 'b_index.html.twig' %}

{% block title %}Reservations{% endblock %}
{% block stylesheets %}
    {{ encore_entry_link_tags('app_table') }}
{% endblock %}
{% block body %}
    {#    <meta name="view-transition" content="same-origin" /> #}


    <div class="row">
        <div class="col py-2 px-3 ">
            <h1>Brouillard  de caisse</h1>
        </div>
        <div class="col py-2 px-3 ">
        </div>
       {# <div class="col py-2 px-3 ">
            <button style="float: right;" type="button"
                    class="btn btn-light-primary   btn-lg px-4 fs-4 font-weight-medium" data-bs-toggle="modal"
                    data-bs-target="#ajouter"><i class="fas fa-plus"> </i> Ajouter
            </button>
        </div>#}

    </div>

    <!-- Primary header modal -->
    <!-- Primary Header Modal -->
{#
    <div id="ajouter" class="modal fade" tabindex="-1"
         aria-labelledby="primary-header-modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header modal-colored-header bg-primary text-white">
                    <h4 class="modal-title" id="primary-header-modalLabel">Ajouter Voyage
                    </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5 class="mt-0">Remplir le formulaire</h5>
                    {{ render(
                        controller(
                            'App\\Controller\\VoyageController::new'
                        )
                    ) }}
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
#}

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


        <div class="form-group row">
            <div class="col-md-12">
                {{ include('reservation/formList.html.twig') }}
            </div>
        </div>
    </form>

{#
    <div class="row mt-4">
        <!-- Column -->
        <div class="col-md-6 col-lg-3 col-xlg-3">
            <div class="card card-hover">
                <div class="p-2 rounded bg-light-primary text-center">
                    <h1 class="fw-light text-primary">{{ totalTicketsVendus }}</h1>
                    <h6 class="text-primary">Nombre Billet</h6>
                </div>
            </div>
        </div>

        <!-- Column -->
        <div class="col-md-6 col-lg-3 col-xlg-3">
            <div class="card card-hover">
                <div class="p-2 rounded bg-light-success text-center">
                    <h1 class="fw-light text-success">$ {{ totalTicketsVendusPrix }}</h1>
                    <h6 class="text-success">Billet vendus </h6>
                </div>
            </div>
        </div>
        <!-- Column -->
        <div class="col-md-6 col-lg-3 col-xlg-3">
            <div class="card card-hover">
                <div class="p-2 rounded bg-light-warning text-center">
                    <h1 class="fw-light text-warning">{{ totalmontant }}</h1>
                    <h6 class="text-warning">Charges</h6>
                </div>
            </div>
        </div>

        <!-- Column -->
        <div class="col-md-6 col-lg-3 col-xlg-3">
            <div class="card card-hover">
                <div class="p-2 rounded bg-light-danger text-center">
                    <h1 class="fw-light text-danger">0</h1>
                    <h6 class="text-danger">Non Payée</h6>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>
#}

    <div class="row mt-4">
        <!-- Column -->
        <div class="col-md-6 col-lg-3 col-xlg-3">
            <div class="card card-hover">
                <div class="p-2 rounded bg-light-primary text-center">
                    <h1 class="fw-light text-primary">{{ totalTicketsVendus }} Billets /  {{ totalTicketsVendusPrix }} CDF</h1>
                    <h6 class="text-primary">Nombre Billet</h6>
                </div>
            </div>
        </div>


        {% for stat in stats %}
            {#<div class="card mb-2">
                <div class="card-body">
                    <h5>{{ stat.moyen }}</h5>
                    <p>{{ stat.nbBillets }} Billets / {{ stat.totalMontant }} $</p>
                </div>
            </div>#}

            <div class="col-md-6 col-lg-3 col-xlg-3">
                <div class="card card-hover">
                    <div class="p-2 rounded bg-light-success text-center">
                        <h1 class="fw-light text-success">{{ stat.nbBillets }} Billets / {{ stat.totalMontant }} CDF</h1>
                        <h6 class="text-success">{{ stat.moyen }} </h6>
                    </div>
                </div>
            </div>


        {% endfor %}

        <!-- Column -->

        <!-- Column -->



        {% for statscharge in statscharges %}
            {#<div class="card mb-2">
                <div class="card-body">
                    <h5>{{ stat.moyen }}</h5>
                    <p>{{ stat.nbBillets }} Billets / {{ stat.totalMontant }} $</p>
                </div>
            </div>#}


            <div class="col-md-6 col-lg-3 col-xlg-3">
                <div class="card card-hover">
                    <div class="p-2 rounded bg-light-warning text-center">
                        <h1 class="fw-light text-warning">{{ statscharge.totalMontant }}</h1>
                        <h6 class="text-warning">Charges en {{ statscharge.moyen }} </h6>
                    </div>
                </div>
            </div>

         {#
            <div class="col-md-6 col-lg-3 col-xlg-3">
                <div class="card card-hover">
                    <div class="p-2 rounded bg-light-success text-center">
                        <h1 class="fw-light text-success">{{ stat.nbBillets }} Billets / {{ stat.totalMontant }} CDF</h1>
                        <h6 class="text-success">{{ stat.moyen }} </h6>
                    </div>
                </div>
            </div>
#}

        {% endfor %}

        <!-- Column -->
        <div class="col-md-6 col-lg-3 col-xlg-3">
            <div class="card card-hover">
                <div class="p-2 rounded bg-light-danger text-center">
                    <h1 class="fw-light text-danger">{{ totalTicketsAnnule }} Billets</h1>
                    <h6 class="text-danger">Billets Annulés</h6>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>









    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">


                </div>
                <div class="card-body">
                    <div  class="table-responsive">

                        <table id="file_export" class="table table-striped table-bordered display">
                            <thead>
                            <tr>
                                <th>Date Depart</th>
                                <th>Ville Depart</th>
                                <th>Ville  Arrivé</th>
                                <th>Total reservation</th>
                                <th>Total somme</th>
                                <th>Charges associées</th>


                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% set items=reservations %}

                            {% for item in items %}

                                <tr>

{#                                    <td>{{ item.client.nom }} {{ item.client.prenom }}</td>#}
                                    <td>{{ item.dateDepart ? item.dateDepart|date('d-m-Y') : '' }}</td>
                                    <td>{{ item.villeDepart }}</td>
                                    <td>{{ item.villeArrivee }}</td>
                                    <td>{{ item.nombreReservations }}</td>
                                    <td>$ {{ item.sommeArgent }}</td>
                                    <td>$ {{ item.sommeCharges }}</td>



                                    <td>
                                        <div class="col-md-2">

                                            <a class="btn btn-rounded btn-dark"
                                               href="{{ path('app_reservation_voyage_index', {'id': item.voyage}) }}"><i
                                                        class=" fas fa-eye"></i> </a>
                                        </div>
{#
                                        <div class="row col-md-11">

                                            <div class="col-md-2">


                                                <a class="btn btn-rounded btn-warning"
                                                   data-bs-toggle="modal" data-bs-target="#{{ 'modifier' ~item.id }}"><i
                                                            class=" fas fa-edit"></i> </a>

                                                <div id="{{ 'modifier' ~item.id }}" class="modal fade" tabindex="-1"
                                                     aria-labelledby="warning-header-modalLabel" aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header modal-colored-header bg-warning text-white">
                                                                <h4 class="modal-title" id="warning-header-modalLabel">
                                                                    Modifier Voyage
                                                                </h4>
                                                                <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal"
                                                                        aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <h5 class="mt-0">Remplir le formulaire</h5>
                                                                {{ render(
                                                                    controller(
                                                                        'App\\Controller\\VoyageController::edit',{'id':item.id}
                                                                    )
                                                                ) }}
                                                            </div>

                                                        </div><!-- /.modal-content -->
                                                    </div><!-- /.modal-dialog -->
                                                </div><!-- /.modal -->
                                            </div>

                                            <div class="col-md-2">

                                                <a class="btn btn-rounded btn-dark"
                                                   href="{{ path('app_transit_index', {'id': item.id}) }}"><i
                                                            class=" fas fa-plus"></i> </a>
                                            </div>

                                            <div class="col-md-2">

                                                <a class="btn btn-rounded btn-danger"
                                                   onclick="return confirm('Are you sure you want to delete this item?');"
                                                   href="{{ path('app_type_vehicule_edit_delete', {'id': item.id}) }}"><i
                                                            class=" fas fa-trash-alt"></i> </a>
                                            </div>

                                        </div>
#}

                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td>Pas d'enregistrement trouvé</td>




                                </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>Dates</th>
                                <th>Ville Depart</th>
                                <th>Ville  Arrivé</th>
                                <th>Total reservation</th>
                                <th>Total somme</th>
                                <th>Charges associées</th>
                                <th>Action</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{% block javascripts %}
    <!-- DataTables -->

    {{ encore_entry_script_tags('apps_table') }}
   {# <script type="text/javascript">
        $('#file_export').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass('btn btn-primary mr-1');
    </script>#}
    <script>

        // Récupérer l'élément input
        var inputElement = document.querySelector('.custom-time-input');
        var inputElements = document.querySelector('.custom-time-inputs');

        // Ajouter l'attribut type="time"
        inputElement.setAttribute('type', 'time');
        inputElements.setAttribute('type', 'time');

    </script>

{% endblock %}