{# Ajout fichier base.html.twig #}
{% extends 'base.html.twig'%}

{# Titre de la page #}
{% block title %}
    Lista de casas
{% endblock %}

{% block head %}
    <!-- Script JS et CSs pour afficher le tableau (DataTables) -->
    <link href="{{ asset("vendor/datatables/dataTables.bootstrap4.min.css") }}" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs4/jq-3.7.0/dt-1.13.8/b-2.4.2/sp-2.2.0/datatables.js"></script>
{% endblock %}

{# Corps de la page #}
{% block body %}

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Lista de abastecimentos</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Localidade</th>
                        <th>Data</th>
                        <th>KMS</th>
                        <th>Litros</th>
                        <th>Camiao</th>
                        <th>Utilisador</th>
                    </tr>
                </thead>
                

                <tbody>

                    {% for fuelSupply in fuelSupplyList %}
                    <tr>    
                        <td>{{ fuelSupply.id }}</td>
                    
                        <td>{{ fuelSupply.locality }}</td>
                        <td>{{ fuelSupply.date|date('d/m/Y') }}</td>
                        <td>{{ fuelSupply.kms }}</td>
                        <td>{{ fuelSupply.litters }}</td>
                        <td>{{ fuelSupply.truck.truckName }} - {{ fuelSupply.truck.truckPlate }}</td>
                        <td>{{ fuelSupply.user.username }}</td>

                    </tr> 
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
    
{% endblock %}


    {# Block Script Javascript de la page #}
    {% block script %}
        <!-- Script Javascript du tableau (DataTables) -->
        <script src="{{ asset("vendor/datatables/jquery.dataTables.min.js") }}"></script>
        <script src="{{ asset("vendor/datatables/dataTables.bootstrap4.min.js") }}"></script>


        <!-- Script pour filter les données du tableau -->
        <script>
            //initialisation le tableau
            $(document).ready(function () {
            var table = $('#dataTable').DataTable({
                // Filtrer choix nombre ligne par page du tableau
                lengthMenu: [[10,25,50,-1],[10,25,50,"Tout"]],
                //Langue du tableau (Francais)
                language:{
                    url:'//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json',
                }
            })
                table.draw();
            });

        </script>
    {% endblock %}