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

{% block title %}Ajouter Retenue{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .form-inline .form-group {
        display: flex;
        align-items: center;
    }
    .form-inline .form-group > * {
        margin-right: 10px;
    }
    .form-group.row {
        display: flex;
        justify-content: space-between;
    }
    .delete-btn {
        cursor: pointer;
        color: red;
        font-size: 20px;
        position: absolute;
        right: 10px;
        top: -10px;
        background-color: white; /* Fond blanc */
        border: 2px solid #ccc; /* Bordure grise */
        border-radius: 50%; /* Pour arrondir les coins et créer un cercle */
        padding: 5px 10px; /* Un peu de marge intérieure pour faire un carré */
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .retenue-form {
        position: relative;
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
</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>Ajouter retenues définitives sur chantier {{ chantier.libelle }}</h1>

                        <!-- Formulaire d'ajout de retenue -->
                        {{ form_start(form) }}

                        <!-- Premier formulaire par défaut -->
                        <div class="form-row retenue-form">
                            <div class="col-md-3 mb-3">
                                {{ form_label(form.libelle, 'Intitulé de la retenue') }}
                                {{ form_widget(form.libelle, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-2 mb-3">
                                {{ form_label(form.pourcentage, 'Pourcentage') }}
                                {{ form_widget(form.pourcentage, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-3 mb-3">
                                {{ form_label(form.montant, 'Montant') }}
                                {{ form_widget(form.montant, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-2 mb-3">
                                {{ form_label(form.date, 'Date') }}
                                {{ form_widget(form.date, {'attr': {'class': 'form-control', 'type': 'date'}}) }}
                            </div>
                        </div>

                        <!-- Bouton pour ajouter une nouvelle retenue -->
                      {#}  <div class="mb-3">
                            <button type="button" class="btn btn-success" id="add-retenue">
                                <i class="fas fa-plus"></i> Ajouter une autre retenue
                            </button>
                        </div>#}

                        <!-- Conteneur où seront ajoutées les nouvelles retenues -->
                        <div id="retenue-forms"></div>

                        <button type="submit" class="btn btn-primary">Ajouter la retenue</button>

                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const addRetenueButton = document.getElementById('add-retenue');
            const retenueFormsContainer = document.getElementById('retenue-forms');

            addRetenueButton.addEventListener('click', function() {
                // Cloner le formulaire de retenue existant
                const retenueForm = `
                <div class="form-row retenue-form">
                    <span class="delete-btn">&times;</span>
                    <div class="col-md-3 mb-3">
                        <label>Intitulé de la retenue</label>
                        <input type="text" class="form-control" name="libelle[]">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label>Pourcentage</label>
                        <input type="number" class="form-control" name="pourcentage[]">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label>Montant</label>
                        <input type="text" class="form-control" name="montant[]">
                    </div>
                    <div class="col-md-2 mb-3">
                        <label>Date</label>
                        <input type="date" class="form-control" name="date[]">
                    </div>
                </div>`;
                
                // Ajouter le nouveau formulaire dans le conteneur
                retenueFormsContainer.insertAdjacentHTML('beforeend', retenueForm);
                
                // Ajouter un écouteur d'événement à la croix pour supprimer le formulaire
                attachDeleteEvent();
            });

            // Fonction pour supprimer une retenue
            function attachDeleteEvent() {
                document.querySelectorAll('.delete-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        this.closest('.retenue-form').remove();
                    });
                });
            }

            // Appliquer l'événement de suppression initialement
            attachDeleteEvent();
        });
    </script>
{% endblock %}