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

{% block title %}Liste des forfaitGD{% endblock %}

{% block header %}  
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
              .form-inline {
            display: flex;
            align-items: center;
        }
        .form-inline input, .form-inline select {
            margin-right: 10px;
            flex: 1;
        }
        .form-inline button {
            margin-left: 10px;
        }
        .full-width-button {
            width: 100%;
            text-align: center;
        }
        .table-container {
            max-width: 95%;
            margin: auto;
            overflow-x: auto;
        }
        .centered-input {
            display: block;
            margin: 0 auto;
            width: 80%; 
        }
        table {
            table-layout: auto;
            width: 100%;
        }
        th, td {
            text-align: center;
            vertical-align: middle;
            padding: 1%;
            overflow: hidden;
            white-space: nowrap;
        }
        .center-text {
            text-align: center !important;
        }

    </style>
{% endblock %}

{% block body %}
    <div class="content-page">
        <div class="content">
            <!-- Start Content-->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">            
                           <h1>Indemnités de trajet</h1></br><button id="add-button" class="btn btn-warning">Ajouter une indemnité de trajet</button></br></br></br></br>
                                <div class="tab-content"> 
                                    <div class="tab-pane show active" id="scroll-horizontal-preview">
                                       
                                        <table id="scroll-horizontal-datatable" class="table table-striped w-100 nowrap">
                                            <thead>
                                                <tr>
                                                    <th class="no-sort center-text"></th>
                                                    <th class="center-text">Durée</th>
                                                    <th class="center-text">du km</th>
                                                    <th class="center-text">au km</th>
                                                    <th class="center-text">Montant</th>
                                                    <th class="center-text">idf</th>
                                                    <th class="center-text">cotisation</th>
                                                </tr>
                                            </thead>
                                            <tbody style="vertical-align: middle;">
                                                <!-- Formulaire pour ajouter un nouvel élément -->
                                                <tr id="add-form-row" style="display:none;">
                                                    {{ form_start(form) }}
                                                         <td class="no-sort enter-text">
                                                            <ul class="list-inline">
                                                                <button type="submit" class="ajouter-custom" >
                                                                    Ajouter <i class="ri-line font-14"></i>
                                                                </button>
                                                                <button type="button" id="cancel-button" class="btn btn-secondary" ><i class="ri-reply-line font-12"></i> </button>
                                                            </ul>
                                                        </td>
                                                        <td class="center-text">{{ form_widget(form.duree, {'attr': {'class': 'centered-input'}}) }}</td>
                                                        <td class="center-text">{{ form_widget(form.kmDebut, {'attr': {'class': 'centered-input'}}) }}</td>
                                                        <td class="center-text">{{ form_widget(form.kmFin, {'attr': {'class': 'centered-input'}}) }}</td>
                                                        <td class="center-text">{{ form_widget(form.montant, {'attr': {'class': 'centered-input'}}) }}</td>
                                                        <td class="center-text">{{ form_widget(form.idf, {'attr': {'class': 'centered-input'}}) }}</td>
                                                        <td class="center-text">{{ form_widget(form.cotisation, {'attr': {'class': 'centered-input'}}) }}</td>
                                                         
                                                    {{ form_end(form) }}
                                                </tr>

                                                {% for forfaitGD in forfaitGDs %}
                                                    {% if forfaitGD.dateDelete is null %}
                                                        <tr>
                                                            <td class="no-sort center-text">
                                                                <ul class="list-inline">
                                                                    <a href="{{ path('modifier_forfait_grd_deplacement', {'id': forfaitGD.id}) }}" class="modifier-custom" >
                                                                        <i class="ri-edit-line"></i>
                                                                    </a>
                                                                
                                                                    <a href="{{ path('supprimer_forfait_grd_deplacement', {'id': forfaitGD.id}) }}" class="supprimer-custom" >
                                                                        <i class="ri-delete-bin-line"></i>
                                                                    </a>
                                                                </ul>
                                                            </td>
                                                            <td class="center-text">{{ forfaitGD.duree }}</td>
                                                            <td class="center-text">{{ forfaitGD.kmDebut }}</td>
                                                            <td class="center-text">{{ forfaitGD.kmFin }}</td>
                                                            <td class="center-text">{{ forfaitGD.montant }}</td>
                                                            <td class="center-text">{{ forfaitGD.idf ? 'Oui' : 'Non' }}</td>
                                                            <td class="center-text">{{ forfaitGD.cotisation ? 'Oui' : 'Non' }}</td>
                                                            
                                                        </tr>
                                                    {% endif %}
                                                {% endfor %}
                                            </tbody>
                                        </table> 
                                </div>
                            </div>
                       </div> 
                    </div>  
                </div> 
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.getElementById('add-button').addEventListener('click', function() {
            document.getElementById('add-form-row').style.display = 'table-row';
            document.getElementById('add-button').style.display = 'none';
        });

        document.getElementById('cancel-button').addEventListener('click', function() {
            document.getElementById('add-form-row').style.display = 'none';
            document.getElementById('add-button').style.display = 'block';
        });

    </script>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            // Sélectionnez tous les th de la table et appliquez text-align: center
            const thElements = document.querySelectorAll('#scroll-horizontal-datatable th');
            thElements.forEach((th) => {
                th.style.textAlign = 'center';
            });
        });
    </script>
{% endblock %}