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

{% block title %}Liste des Indemnités Autres{% 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;
        }
        .full-width-button {
            width: 100%;
            text-align: center;
        }
        .table-container {
            max-width: 95%;
            margin: auto;
            overflow-x: auto;
        }
        table {
            table-layout: auto;
            width: 100%;
        }
        th, td {
            text-align: center;
            vertical-align: middle;
            padding: 1%;
            white-space: nowrap;
        }
        .center-text {
            text-align: center !important;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <h1>Liste des Indemnités Autres</h1>
                            </br>
                            <button id="add-button" class="custom-link">Ajouter une indemnité</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">Entreprise</th>
                                                <th class="center-text">Panier Repas</th>
                                                <th class="center-text">Prime Conduite</th>
                                                <th class="center-text">Indemnité Logement</th>
                                                <th class="center-text">Prime Découché</th>
                                                <th class="center-text">Panier Repas Grand Déplacement</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Formulaire pour ajouter un nouvel élément -->
                                            <tr id="add-form-row" style="display:none;">
                                                {{ form_start(form) }}
                                                <td class="no-sort center-text">
                                                    <ul class="list-inline">
                                                        <button type="submit" class="ajouter-custom" style="padding: 0px 5px;">
                                                            Ajouter <i class="ri-line font-14"></i>
                                                        </button>
                                                        <button type="button" id="cancel-button" class="retour-custom" style="padding: 0px 5px;">
                                                            <i class="ri-reply-line font-14"></i>
                                                        </button>
                                                    </ul>
                                                </td>
                                                <td class="center-text">{{ form_widget(form.entreprise, {'attr': {'class': 'centered-input'}}) }}</td>
                                                <td class="center-text">{{ form_widget(form.panierRepas, {'attr': {'class': 'centered-input'}}) }}</td>
                                                <td class="center-text">{{ form_widget(form.primeConduite, {'attr': {'class': 'centered-input'}}) }}</td>
                                                <td class="center-text">{{ form_widget(form.indemniteLogement, {'attr': {'class': 'centered-input'}}) }}</td>
                                                <td class="center-text">{{ form_widget(form.primeDecouche, {'attr': {'class': 'centered-input'}}) }}</td>
                                                <td class="center-text">{{ form_widget(form.panierRepasGD, {'attr': {'class': 'centered-input'}}) }}</td>
                                                {{ form_end(form) }}
                                            </tr>

                                            <!-- Boucle pour afficher les indemnités -->
                                            {% for indemnite in indemnites %}
                                                <tr>
                                                    <td class="no-sort center-text">
                                                        <ul class="list-inline">
                                                            <a href="{{ path('indemnites_autres_edit', {'id': indemnite.id}) }}" class="modifier-custom" style="padding: 0px 5px;">
                                                                <i class="ri-edit-line"></i>
                                                            </a>
                                                           
                                                        </ul>
                                                    </td>
                                                    <td class="center-text">{{ indemnite.entreprise.nom }}</td>
                                                    <td class="center-text">{{ indemnite.panierRepas }}</td>
                                                    <td class="center-text">{{ indemnite.primeConduite }}</td>
                                                    <td class="center-text">{{ indemnite.indemniteLogement }}</td>
                                                    <td class="center-text">{{ indemnite.primeDecouche }}</td>
                                                    <td class="center-text">{{ indemnite.panierRepasGD }}</td>
                                                </tr>
                                            {% 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 %}