{% extends '@AdminLTE/layout/mesodd-layout.html.twig' %}

{% block page_title %}{% trans %}evaluation.title{% endtrans %}{% endblock %}


{% block page_content %}
    {{ form_start(form) }}
  
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                <div class="text-right">
                    <a href="{{ path('app_notations', { 'id': actionId }) }}" class="btn btn-primary">
                        <i class="fas fa-angle-double-left"></i> {% trans %}basics.processus{% endtrans %}
                    </a>
                     <button id="amelioration-ia-btn" type="button" class="btn btn-primary">
                            {% trans %}basics.suggestionia{% endtrans %} <i class="fas fa-angle-double-right"></i>
                        </button>
                        <a href="{{ path('app_recommandation', { 'id': actionId }) }}" class="btn btn-primary">
                    {% trans %}basics.voirsuggestionia{% endtrans %}  <i class="fas fa-angle-double-right"></i>
                </a>
                </div><br>
                {% if is_granted('ROLE_MANAGER') %}
                    {{ form_row(form.type) }}
                    {{ form_row(form.entite) }}
                {% endif %}
                {% if is_granted('ROLE_DDD') %}
                    {{ form_row(form.entite) }}
                {% endif %}
                {{ form_row(form.programm) }}
                {{ form_row(form.action) }}
            {% endblock %}
        {% endembed %}
     
        {% if actionId > 0 %}
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
           
                <table id="planAppreciationTable" class="table table-striped">
    <thead>
        <th>Activité</th>
        <th>Nature</th>
        <th>Cible</th>
        <th style="width: 50px">{{(app.session.get('_commune') or app.session.get('_departement')) ? '# Arr.' : '# Com.'}}</th>
        <th style="width: 75px">Sensibilité</th>
        <th style="width: 75px">Appréciation</th>
        <th>Suggestion</th> {# nouvelle colonne #}
        {% if (is_granted('ROLE_MANAGER')) %}
        <th style="width:100px"></th>
        {% endif %}
    </thead>
    {% for notation in notations %}
    <tr>
        <td>{{ notation.activity.code }} - {{ notation.activity.name }}</td>
        <td>{{ notation.nature.name }}</td>
        <td>
            {% if notation.target %}
                {{ notation.target.name }}
            {% endif %}
        </td>
        <td class="text-center">{{ notation.nbOfLocation }}</td>
        <td class="text-right">{{ notation.sensitivity|number_format(2) }} %</td>
        <td class="text-left"><span class="badge bg-{{ notation.appreciation.flag }}">{{ notation.appreciation.name }}</span></td>

        {# --- 🔹 Colonne suggestion avec modal formaté --- #}
        <td>
            {% set suggestion = suggestions[notation.activity.id] ?? null %}
            {% if suggestion %}
                {% set formattedSuggestion = suggestion
                    |replace({'**': '<strong>'})
                    |replace({'**': '</strong>'})
                    |replace({'1.': '<br><br><strong>1.</strong>'})
                    |replace({'2.': '<br><br><strong>2.</strong>'})
                    |replace({'3.': '<br><br><strong>3.</strong>'})
                    |raw
                %}
                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#suggestionModal-{{ notation.activity.id }}">
                    Lire
                </button>

                <div class="modal fade" id="suggestionModal-{{ notation.activity.id }}" tabindex="-1" role="dialog" aria-labelledby="suggestionModalLabel-{{ notation.activity.id }}" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="suggestionModalLabel-{{ notation.activity.id }}">Suggestion pour {{ notation.activity.name }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body" style="white-space: pre-line; line-height: 1.6; font-size: 15px;">
                        {{ formattedSuggestion|raw }}
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                      </div>
                    </div>
                  </div>
                </div>
            {% else %}
                <span class="text-muted">Aucune suggestion</span>
            {% endif %}
        </td>

        {# Colonne actions (reste inchangée) #}
        {% if (is_granted('ROLE_MANAGER') or is_granted('ROLE_FOCAL')) %}
        <td class="text-center mb-2">
            <a href="{{ path('app_notation_edit', { 'id': notation.id }) }}" class="btn btn-sm btn-secondary">{% trans %}basics.update{% endtrans %}</a>
            <br><br>
            {% if notation.duplicated %}
                <!-- modal delete etc. -->
            {% else %}
                <a href="{{ path('app_notation_duplicate', { 'id': notation.id }) }}" class="btn btn-sm btn-default">{% trans %}basics.duplicate{% endtrans %}</a>
            {% endif %}
        </td>
        {% endif %}
    </tr>
    {% endfor %}
</table>


            {% endblock %}
        {% endembed %}

        {% else %}
        <div class="alert alert-info" role="alert">
            {% trans %}Veuillez sélectionner une action  pour voir ces activités{% endtrans %}
        </div>
        {% endif %}
              
    {{ form_end(form) }}

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('plugins/datatables/French.json') }}"></script>
    <script>
        
        $(document).on('change', '#evaluation_type, #evaluation_entite, #evaluation_programm', function () {
            let $type = $('#evaluation_type')
            let $entite = $('#evaluation_entite')
            let $form = $(this).closest('form')

            let data = {}
            data[$type.attr('name')] = $type.val()
            data[$entite.attr('name')] = $entite.val()
            data[$(this).attr('name')] = $(this).val()
            
            let $field = $(this).attr('id')
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    if ($field == 'evaluation_type') {
                        $('#evaluation_entite').replaceWith(
                            $(html).find('#evaluation_entite')
                        )
                        $('#evaluation_programm').replaceWith(
                            $(html).find('#evaluation_programm')
                        )
                        $('#evaluation_action').replaceWith(
                            $(html).find('#evaluation_action')
                        )
                    }
                    if ($field == 'evaluation_entite') { 
                        $('#evaluation_programm').replaceWith(
                            $(html).find('#evaluation_programm')
                        )
                        $('#evaluation_action').replaceWith(
                            $(html).find('#evaluation_action')
                        )
                    }
                    if ($field == 'evaluation_programm') {
                        $('#evaluation_action').replaceWith(
                            $(html).find('#evaluation_action')
                        )
                    }
                }
            });
        });

        $(function () {
            $("#planAppreciationTable").DataTable({
                "searching": false,
                "pageLength": 25,
                "language": {
                        "url": "{{ asset('plugins/datatables/French.json') }}"
                    },
                "lengthChange": false,
                "columnDefs": [
                  { "orderable": false, "targets": -1 }
                ]
            });
        });
        
        $(document).ready(function() {
            // Setup - add a text input to each footer cell
            /*$('#planAppreciationTable thead tr').clone(true).appendTo( '#planAppreciationTable thead' );
            $('#planAppreciationTable thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        
                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        
            var table = $('#planAppreciationTable').DataTable( {
                orderCellsTop: true,
                fixedHeader: true
            } );*/

            $('#planAppreciationTables').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );

        } );
       

    </script>
     <script>
     // ========================================
// 🔹 TEST DE CHARGEMENT DU SCRIPT
// ========================================
console.log("Script de suggestion IA chargé");

// ========================================
// 🔹 FONCTION DE COLLECTE DES ACTIVITÉS DEPUIS LE TABLEAU
// ========================================
function collectActivities() {
    console.log("collectActivities() appelée");
    let activities = [];

    $("#planAppreciationTable tbody tr").each(function() {
        let $row = $(this);

        // Colonnes principales
        let activityText = $row.find("td").eq(0).text().trim();
        let nature = $row.find("td").eq(1).text().trim();
        let cible = $row.find("td").eq(2).text().trim();
        let nbLocation = $row.find("td").eq(3).text().trim();
        let sensitivity = $row.find("td").eq(4).text().trim();
        let appreciation = $row.find("td").eq(5).text().trim();

        // Lien de modification → mise à jour du sélecteur
        let editLink = $row.find("a[href*='/app/notation/edit/']").attr("href");
        let notationId = null;

        if (editLink) {
            let matches = editLink.match(/\/(\d+)$/);
            if (matches) {
                notationId = parseInt(matches[1]);
            }
        }

        // Nettoyage sensibilité (%)
        sensitivity = sensitivity.replace('%', '').trim();

        console.log("Ligne trouvée:", {
            activityText,
            nature,
            cible,
            notationId,
            sensitivity
        });

        // Ajouter l’activité seulement si un ID est trouvé
        if (activityText && notationId) {
            activities.push({
                notation_id: notationId,
                activity_name: activityText,
                nature: nature,
                cible: cible,
                nb_location: nbLocation,
                sensitivity: parseFloat(sensitivity) || 0,
                appreciation: appreciation
            });
        }
    });

    console.log("Total activités collectées:", activities.length);
    return activities;
}

// ========================================
// 🔹 FONCTION DE CRÉATION DE LA BARRE DE PROGRESSION
// ========================================
function createProgressBar() {
    console.log("createProgressBar() appelée");
    // Supprimer une éventuelle barre de progression existante
    $("#suggestion-ia-progress-container").remove();
    
    let progressHtml = `
        <div id="suggestion-ia-progress-container" class="mt-3" style="display: none;">
            <div class="progress">
                <div id="suggestion-ia-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                     role="progressbar" style="width: 0%"></div>
            </div>
            <div id="suggestion-ia-progress-text" class="text-center mt-2">
                <small>Génération des suggestions en cours...</small>
            </div>
        </div>
    `;
    
    $("#amelioration-ia-btn").after(progressHtml);
    return $("#suggestion-ia-progress-container");
}

// ========================================
// 🔹 FONCTION DE MISE À JOUR DE LA BARRE DE PROGRESSION
// ========================================
function updateProgressBar(percent) {
    $("#suggestion-ia-progress-bar").css("width", percent + "%");
    $("#suggestion-ia-progress-bar").attr("aria-valuenow", percent);
}

// ========================================
// 🔹 FONCTION DE SIMULATION DE PROGRESSION
// ========================================
function simulateProgress(duration) {
    console.log("simulateProgress() appelée");
    return new Promise((resolve) => {
        let progress = 0;
        let interval = setInterval(() => {
            progress += 5;
            if (progress >= 90) {
                clearInterval(interval);
            }
            updateProgressBar(progress);
        }, duration / 18);
        
        setTimeout(() => {
            clearInterval(interval);
            resolve();
        }, duration);
    });
}

// ========================================
// 🔹 FONCTION D'AFFICHAGE DES RÉSULTATS
// ========================================
function displaySuggestionResults(response) {
    console.log("displaySuggestionResults() appelée avec:", response);
    // Supprimer un éventuel conteneur de résultats existant
    $("#suggestion-ia-results").remove();
    
    let resultsHtml = `
        <div id="suggestion-ia-results" class="mt-4">
            <div class="card">
                <div class="card-header bg-success">
                    <h5 class="mb-0"><i class="fas fa-check-circle"></i> Suggestions IA générées avec succès</h5>
                </div>
                <div class="card-body">
                    <p><strong>Total traité :</strong> ${response.total}</p>
                    <p><strong>Succès :</strong> <span class="badge badge-success">${response.success}</span></p>
                    <p><strong>Erreurs :</strong> <span class="badge badge-danger">${response.errors}</span></p>
                    <p><strong>Ignorés :</strong> <span class="badge badge-warning">${response.skipped}</span></p>
                    <p class="mt-3 text-muted">Les suggestions ont été enregistrées en base de données.</p>
                </div>
            </div>
        </div>
    `;
    
    $("#suggestion-ia-progress-container").after(resultsHtml);
}

// ========================================
// 🔹 GESTION DU CLIC SUR LE BOUTON "SUGGESTION IA" (avec debug + délais prolongés)
// ========================================
$(document).ready(function() {
    console.log("✅ Document ready - Initialisation du bouton suggestion IA");

    $("#amelioration-ia-btn").on("click", async function() {
        console.log("🟢 CLIC détecté sur le bouton 'SUGGESTION IA'");

        const button = $(this);
        const originalHtml = button.html();
        button.prop("disabled", true).html('<i class="fas fa-spinner fa-spin"></i> Génération en cours...');

        try {
            // Étape 1 : Collecte des activités
            console.log("📦 Début de la collecte des activités...");
            let activities = collectActivities();
            console.log("✅ Activités collectées :", activities);

            if (activities.length === 0) {
                alert("Aucune activité trouvée pour générer des suggestions.");
                button.prop("disabled", false).html(originalHtml);
                return;
            }

            // Étape 2 : Barre de progression
            const progressContainer = createProgressBar();
            progressContainer.show();

            // Étape 3 : URLs
            const apiUrl = "{{ path('generate_activity_suggestions') }}";
            const redirectUrl = "{{ path('app_recommandation', { 'id': actionId }) }}";
            console.log("🌐 API URL :", apiUrl);
            console.log("🔀 Redirect URL :", redirectUrl);

            // Étape 4 : Simulation + Appel AJAX
            const progressPromise = simulateProgress(300000); // ⏱️ 10 secondes

            const apiPromise = $.ajax({
                url: apiUrl,
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ activities: activities }),
                timeout: 18000000, // ⏳ 3 minutes
                beforeSend: function() {
                    console.log("📤 Envoi de la requête AJAX vers :", apiUrl);
                }
            })
            .done(function(response) {
                console.log("✅ [SUCCESS] Réponse AJAX complète :", response);
            })
            .fail(function(xhr, status, error) {
                console.error("❌ [FAIL] Erreur AJAX détectée :", { status, error });
                console.log("🧾 Réponse brute du serveur :", xhr.responseText);

                // Si c’est une erreur HTML de Symfony
                if (xhr.responseText && xhr.responseText.includes("<html")) {
                    console.warn("⚠️ Le serveur a retourné une page HTML (erreur Symfony probable)");
                }

                throw new Error("Erreur AJAX : " + status + " - " + error);
            })
            .always(function() {
                console.log("🧩 [COMPLETE] Fin de la requête AJAX");
            });

            // Étape 5 : Attente
            const [_, response] = await Promise.all([progressPromise, apiPromise]);
            console.log("✅ Promesses terminées avec succès. Réponse finale :", response);

            updateProgressBar(100);
            $("#suggestion-ia-progress-text small").text("Suggestions générées avec succès !");
            
            // Étape 6 : Redirection (attente prolongée)
            console.log("🟢 Redirection prévue dans 5 secondes vers :", redirectUrl);
            setTimeout(() => {
                window.location.href = redirectUrl;
            }, 5000);

        } catch (error) {
            console.group("❌ GESTION D'ERREUR GLOBALE");
            console.error("Erreur attrapée :", error);
            if (error.stack) console.error("Stack :", error.stack);
            console.groupEnd();

            updateProgressBar(100);
            $("#suggestion-ia-progress-bar")
                .removeClass("progress-bar-animated")
                .addClass("bg-danger");
            $("#suggestion-ia-progress-text small")
                .text("Erreur lors de la génération des suggestions");

            alert("⚠️ Une erreur est survenue : " + error.message);
        } finally {
            button.prop("disabled", false).html(originalHtml);
            console.log("🔁 Réinitialisation du bouton terminée.");
        }
    });
});


      </script>

    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
    <style>
        /* ✅ Amélioration visuelle du texte dans le modal */
        .modal-body strong {
            color: #2c3e50;
            font-weight: 600;
        }
        .modal-body {
            padding: 15px 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
{% endblock %}