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

{% block title %}Liste des transportZone{% 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 transport</h1></br><button id="add-button" class="btn btn-warning">Ajouter une indemnité de transport</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" style="padding: 15px 30px 15px 15px"></th>
                                                    <th class="center-text">Code</th>
                                                    <th class="center-text">Libelle</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">Exonere</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>
                                                            <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.code, {'attr': {'class': 'centered-input'}}) }}</td>
                                                        <td class="center-text">{{ form_widget(form.libelle, {'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.exonere, {'attr': {'class': 'centered-input'}}) }}</td>
                                                       
                                                    {{ form_end(form) }}
                                                </tr>

                                                {% for transportZone in transportZones %}
                                                    {% if transportZone.dateDelete is null %}
                                                        <tr>
                                                            <td>
                                                                <ul class="list-inline">
                                                                    <a href="{{ path('modifier_transport_zone', {'id': transportZone.id}) }}" class="modifier-custom" >
                                                                        <i class="ri-edit-line"></i>
                                                                    </a>
                                                                
                                                                    <a href="{{ path('supprimer_transport_zone', {'id': transportZone.id}) }}" class="supprimer-custom" >
                                                                        <i class="ri-delete-bin-line"></i>
                                                                    </a>
                                                                </ul>
                                                            </td>
                                                            <td class="center-text">{{ transportZone.code }}</td>
                                                            <td class="center-text"> {{ transportZone.libelle }}</td>
                                                            <td class="center-text">{{ transportZone.kmDebut }}</td>
                                                            <td class="center-text">{{ transportZone.kmFin }}</td>
                                                            <td class="center-text">{{ transportZone.montant }}</td>
                                                            <td class="center-text">{{ transportZone.exonere ? '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>
{% endblock %}