{% 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>Broullard de colis </h1>
        </div>
        <div class="col py-2 px-3 ">
        </div>
        {% if voyage.actif == 1 %}

        <div class="col-md-2">
            <a class="btn btn-rounded btn-dark"
               href="{{ path('app_reservation_colis_info_paiement', {'id': voyage.id}) }}"><i
                        class=" fas fa-plus"></i>  Ajouter</a>
        </div>
        {% endif %}

    </div>
    {#{% if item.actif == 1 and disponibilite > 0 %}
        <li>
            <a class="dropdown-item"
               href="{{ path('app_reservation_info_paiement', {'id': item.id}) }}">
                <i class="fas fa-plus me-2"></i> Ajouter réservation
            </a>
        </li>
    {% endif %}



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

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



{#
    <div class="col-md-12 col-lg-8 d-flex align-items-stretch">
        <div class="card w-100">

            <div class="">
                <div class="card">
                    <div class="d-flex align-items-center p-3">
                        <h5 class="card-title mb-0">Encaissement (Billets vendus)</h5>
                        <div class="ms-auto">

                        </div>
                    </div>
                    <div class="p-3 bg-light">
                        <div class="d-flex align-items-center">
                            <div>
                                <h2 class="fw-normal">{{ "now"|format_datetime(locale='fr', pattern='EEEE')|capitalize }} {{ "now"|format_datetime(locale='fr', pattern='d') }}</h2>
                                <p class="mb-2 text-muted fs-3 fw-normal">{{ "now"|format_datetime(locale='fr', pattern='MMMM')|capitalize }} {{ "now"|format_datetime(locale='fr', pattern='Y')|capitalize }}</p>
                            </div>

                        </div>
                    </div>
                    <div class="p-3">
                        <div class="table-responsive">
                            <table class="table mb-0 no-wrap recent-table table-hover">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Passager</th>
                                    <th>Numéro billet</th>
                                    <th>Prix</th>
                                </tr>
                                </thead>
                                <tbody>

                                {% set items=reservations %}

                                {% for item in items %}
                                    <tr>
                                        <td>{{ loop.index }}</td>
                                        <td class="txt-oflo">{{ item.client.nom }}</td>
                                        <td class="txt-oflo">{{ item.billnumber }}</td>
                                        <td><span class="text-success">$ {{ item.transit.prix }}</span></td>

                                    </tr>

                                {% else %}
                                    <tr>
                                        <td colspan="4">Pas d'enregistrement trouvé</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>

                                    </tr>
                                {% endfor %}

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </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 -->
#}

    {#{% 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>
    {% endfor %}#}


    <form method="post"
          action="{{ path("app_reservation_voyage_index",{'id':voyage.id}) }}">


        <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 }} Colis /  {{ totalTicketsVendusPrix }} CDF</h1>
                    <h6 class="text-primary">Nombre Colis</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 }} Colis / {{ stat.totalMontant }} CDF</h1>
                        <h6 class="text-success">{{ stat.moyen }} </h6>
                    </div>
                </div>
            </div>


        {% endfor %}

        <!-- Column -->

        <!-- 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 }} CDF</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">{{ totalTicketsAnnule }} Billets</h1>
                    <h6 class="text-danger">Colis 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">
                        <h3>Encaissement (Billets vendus)</h3>

                        <table id="file_export" class="table table-striped table-bordered display">
                            <thead>
                            <tr>
                                <th style="width: 5px;">#</th>
                                <th style="width: 20px;">Date</th>
                                <th style="width: 20px;">Code</th>
                                <th style="width: 20px;">Expediteur</th>
                                <th style="width: 20px;">Description</th>
                                <th style="width: 20px;">Net à payer</th>
                                <th style="width: 20px;">Montant payé
                                <th style="width: 20px;">BP</th>
                                <th style="width: 20px;">Moyen paiement</th>
                                <th style="width: 20px;">Destinateur</th>
                                <th style="width: 20px;">Contact</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% set items=colis %}

                            {% for item in items %}

                                <tr>

                                    <td>{{ loop.index }}</td>
                                    <td>{{ item.dateReservation ? item.dateReservation|date('d-m-Y') : '' }}</td>
                                    <td class="txt-oflo">{{ item.code }}</td>
                                    <td class="txt-oflo">{{ item.client.nom }} {{ item.client.prenom }}</td>
                                    <td class="txt-oflo">{{ item.naturecolis }}</td>
                                    <td class="txt-oflo">{{ item.montantpaye }} CDF</td>
                                    <td class="txt-oflo">{{ item.montant }} CDF</td>
                                    <td class="txt-oflo">{{ item.montantdu }} CDF</td>
                                    <td class="txt-oflo">{{ item.moyenpaiement.nom }}</td>
                                    <td class="txt-oflo">{{ item.destinateur }}</td>
                                    <td class="txt-oflo">{{ item.phonedestinateur }}</td>




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





                                </tr>
                            {% endfor %}
                            </tbody>
                            <tfoot>
                            <tr>
                                <th style="width: 5px;">#</th>
                                <th style="width: 20px;">Date</th>
                                <th style="width: 20px;">Code</th>
                                <th style="width: 20px;">Expediteur</th>
                                <th style="width: 20px;">Description</th>
                                <th style="width: 20px;">Net à payer</th>
                                <th style="width: 20px;">Montant payé
                                <th style="width: 20px;">BP</th>
                                <th style="width: 20px;">Moyen paiement</th>
                                <th style="width: 20px;">Destinateur</th>
                                <th style="width: 20px;">Contact</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>


    </div>


{% endblock %}

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

    {{ encore_entry_script_tags('apps_table') }}

    <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 %}