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

{% block stylesheets %}
{{ parent() }}
<style>
    <style>
    /* Adapter la largeur des colonnes */
    table.table {
        width: 100%; /* Utiliser toute la largeur du conteneur */
    }

    td:first-child {
        width: 37%; /* La première colonne (nom du fichier) prend 30% */
    }

    td:nth-child(2) {
        width: 48%; /* La deuxième colonne (iframe) prend 50% */
    }

    td:last-child {
        width: 15%; /* La troisième colonne (bouton) prend 20% */
    }

    /* Ajuster la taille de l'iframe */
    iframe {
        width: 100%; /* Faire en sorte que l'iframe prenne toute la place disponible */
        height: 400px; /* Ajuster la hauteur selon les besoins */
        border: 1px solid #ccc;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
        border-radius: 4px;
    }

    /* Styliser l'input de renommage */
    input[id^="new-name-"] {
        background-color: #f9f9f9;
        color: #000;
        border: 1px solid #ccc;
        padding: 10px;
        width: 100%;
        margin-top: 10px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Bouton de renommage */
    .btn-success {
        background-color: #28a745;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease;
    }

    .btn-success:hover {
        background-color: #218838;
    }
</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>Prévisualisation et renommage des factures</h1>

                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Nom du fichier</th>
                                        <th>Prévisualisation</th>
                                        <th>Renommer</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for file in files %}
                                     {% if file.path is not empty %}
                                        <tr id="row-{{ loop.index }}">
                                            <td>
                                                <!-- Nom actuel -->
                                                <p id="current-name-{{ loop.index }}">{{ file.name }}</p>
                                                <!-- Champ de renommage -->
                                                <input type="text" id="new-name-{{ loop.index }}" value="{{ file.name }}" placeholder="Nouveau nom" class="form-control" style="width: 100%; margin-top: 10px;">
                                            </td>
                                            <td>
                                               <iframe src="{{ file.path }}" width="100%" height="400"></iframe>

                                            </td>
                                            <td>
                                                <!-- Bouton pour renommer -->
                                                <button class="btn btn-success" onclick="renameFile('{{ file.name }}', {{ loop.index }})">Renommer</button>
                                                <!-- Affichage du nouveau nom après renommage -->
                                                <p id="new-name-display-{{ loop.index }}" style="margin-top: 10px; color: green;"></p>
                                            </td>
                                        </tr>
                                        {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>

                            <form id="rename-form" action="{{ path('facture_rename') }}" method="POST" style="display: none;">
                                <input type="hidden" name="file_name" id="file-name-input">
                                <input type="hidden" name="new_name" id="new-name-input">
                            </form>

                            <br>

                            <button class="btn btn-primary" onclick="window.location.href='{{ path('facture_zip_final') }}'">Zipper les fichiers corrigés</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function renameFile(fileName, index) {
            let newName = document.getElementById('new-name-' + index).value;
            if (newName.trim() === '') {
                alert('Veuillez entrer un nouveau nom.');
                return;
            }

            // On utilise Ajax pour envoyer la demande sans recharger la page
            $.ajax({
                url: "{{ path('facture_rename') }}",
                method: "POST",
                data: {
                    file_name: fileName,
                    new_name: newName
                },
                success: function(response) {
                    // Mettre à jour le nom affiché dans la cellule sous le bouton "Renommer"
                    $('#new-name-display-' + index).text("Renommé en : " + newName);
                    $('#current-name-' + index).text(newName); // Met à jour le nom original dans la colonne

                    // Laisser la possibilité de renommer à nouveau
                    document.getElementById('new-name-' + index).value = newName; // Remet à jour le champ de texte avec le nouveau nom

                    // Optionnel : ajouter une animation ou une confirmation visuelle discrète
                    $('#new-name-display-' + index).fadeIn().delay(2000).fadeOut();
                },
                error: function(xhr) {
                    // Afficher un message d'erreur
                    alert('Erreur : ' + xhr.responseJSON.error);
                }
            });
        }
    </script>
{% endblock %}