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

{% block title %}Modifier le suivi - {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

{% block body %}
    {% set objectifs = objectifs|default([]) %}

    <div class="d-flex">
        <!-- Include de la sidebar -->
        {% include '_sidebar.html.twig' with {
            'beneficiaire': beneficiaire,
            'sectionActive': 'suivi'
        } %}

        <!-- Contenu principal -->
        <div class="main-content">
            <!-- Header cohérent avec le reste de l'application -->
            <div class="dossier-header" style="padding: 13.5px 30px;">
                <div class="d-flex justify-content-between align-items-center">
                    <!-- Section gauche : Nom bénéficiaire -->
                    <div class="d-flex align-items-center">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0">
                                <i class="fas fa-edit me-2"></i>
                                Modifier le suivi d'entretien
                            </h4>
                        </div>
                    </div>
                    <!-- Section droite : Actions contextuelles -->
                    <div class="header-actions">
                        <button type="button" class="btn-action btn-success" id="ajouterLigne">
                            <i class="fa-regular fa-square-plus"></i>
                            <span>Ajouter une ligne</span>
                        </button>
                        <a href="{{ path('app_dossier_beneficiaire', {'id': beneficiaire.id, 'section': 'suivi'}) }}" class="btn-action btn-retour">
                            <i class="fa-solid fa-x"></i>
                            <span>Annuler</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contenu du formulaire -->
            <div class="container-fluid p-4">
                <!-- Info utilisateur qui édite -->
                {% if app.user %}
                    <div class="alert alert-info mb-4">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Information :</strong> Vous éditez en tant que
                        <strong>{{ app.user.prenom }} {{ app.user.nom }}</strong>.
                        Toutes les modifications seront enregistrées avec votre nom.
                    </div>
                {% endif %}

                <div class="card border-0 shadow-sm">
                    <div class="card-header purple text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-clipboard-list me-2"></i>
                                Tableau de suivi des objectifs et compétences
                            </h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" id="suiviForm">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead class="table-light">
                                    <tr>
                                        <th style="width: 15%">Dates</th>
                                        <th style="width: 40%">Objectifs / Compétences</th>
                                        <th style="width: 20%">Sources</th>
                                        <th style="width: 20%">Résultats</th>
                                        <th style="width: 5%">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody id="objectifsTableBody">
                                    {% if objectifs is empty %}
                                        <tr class="objectif-row">
                                            <td>
                                                <input type="date"
                                                       name="objectifs[0][date]"
                                                       class="form-control form-control-sm">
                                            </td>
                                            <td>
                                                <textarea name="objectifs[0][objectif]"
                                                          class="form-control form-control-sm"
                                                          rows="3"
                                                          placeholder="Décrivez l'objectif ou la compétence..."></textarea>
                                            </td>
                                            <td>
                                                <textarea name="objectifs[0][source]"
                                                          class="form-control form-control-sm"
                                                          rows="3"
                                                          placeholder="Source d'information..."></textarea>
                                            </td>
                                            <td>
                                                <textarea name="objectifs[0][resultat]"
                                                          class="form-control form-control-sm"
                                                          rows="3"
                                                          placeholder="Résultats obtenus..."></textarea>
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-outline-danger btn-sm supprimer-ligne" title="Supprimer cette ligne">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    {% else %}
                                        {% for index, objectif in objectifs %}
                                            <tr class="objectif-row">
                                                <td>
                                                    <input type="date"
                                                           name="objectifs[{{ index }}][date]"
                                                           class="form-control form-control-sm"
                                                           value="{{ objectif.date is defined and objectif.date ? objectif.date|date('Y-m-d') : '' }}">
                                                </td>
                                                <td>
                                                    <textarea name="objectifs[{{ index }}][objectif]"
                                                              class="form-control form-control-sm"
                                                              rows="3"
                                                              placeholder="Décrivez l'objectif ou la compétence...">{{ objectif.objectif|default('') }}</textarea>
                                                </td>
                                                <td>
                                                    <textarea name="objectifs[{{ index }}][source]"
                                                              class="form-control form-control-sm"
                                                              rows="3"
                                                              placeholder="Source d'information...">{{ objectif.source|default('') }}</textarea>
                                                </td>
                                                <td>
                                                    <textarea name="objectifs[{{ index }}][resultat]"
                                                              class="form-control form-control-sm"
                                                              rows="3"
                                                              placeholder="Résultats obtenus...">{{ objectif.resultat|default('') }}</textarea>
                                                </td>
                                                <td class="text-center">
                                                    <button type="button" class="btn-action btn-danger btn-sm supprimer-ligne" title="Supprimer cette ligne">
                                                        <i class="fas fa-trash m-0"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-flex justify-content-start align-items-center mt-3">
                                <div class="btn-group">
                                    <button type="submit" class="btn btn-save-inline">
                                        <i class="fas fa-save me-1"></i>
                                        Sauvegarder
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div> <!-- /container-fluid -->
        </div> <!-- /main-content -->
    </div> <!-- /d-flex -->

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // ligneIndex sûr : default([]) + length, puis fallback 1, puis json_encode pour un littéral JS valide
            let ligneIndex = {{ ((objectifs|default([]))|length ?: 1)|json_encode }};
            const MAX_LIGNES = 50; // Limite pour éviter surcharge
            let formModified = false;

            const tbody = document.getElementById('objectifsTableBody');
            const rowCount = document.getElementById('rowCount');
            const form = document.getElementById('suiviForm');

            function updateRowCount() {
                const lignes = document.querySelectorAll('.objectif-row');
                if (rowCount) {
                    rowCount.textContent = lignes.length + ' ligne(s)';
                }
            }

            document.getElementById('ajouterLigne').addEventListener('click', function () {
                const lignes = document.querySelectorAll('.objectif-row');

                if (lignes.length >= MAX_LIGNES) {
                    alert(`Vous avez atteint la limite de ${MAX_LIGNES} lignes.`);
                    return;
                }

                const nouvelleLigne = `
<tr class="objectif-row">
    <td>
        <input type="date"
               name="objectifs[${ligneIndex}][date]"
               class="form-control form-control-sm">
    </td>
    <td>
        <textarea name="objectifs[${ligneIndex}][objectif]"
                  class="form-control form-control-sm"
                  rows="3"
                  placeholder="Décrivez l'objectif ou la compétence..."></textarea>
    </td>
    <td>
        <textarea name="objectifs[${ligneIndex}][source]"
                  class="form-control form-control-sm"
                  rows="3"
                  placeholder="Source d'information..."></textarea>
    </td>
    <td>
        <textarea name="objectifs[${ligneIndex}][resultat]"
                  class="form-control form-control-sm"
                  rows="3"
                  placeholder="Résultats obtenus..."></textarea>
    </td>
    <td class="text-center">
        <button type="button" class="btn btn-outline-danger btn-sm supprimer-ligne" title="Supprimer cette ligne">
            <i class="fas fa-trash"></i>
        </button>
    </td>
</tr>`;
                tbody.insertAdjacentHTML('beforeend', nouvelleLigne);
                ligneIndex++;
                formModified = true;

                attachSupprimerEvents();
                updateRowCount();
            });

            function attachSupprimerEvents() {
                document.querySelectorAll('.supprimer-ligne').forEach(button => {
                    button.removeEventListener('click', supprimerLigne);
                    button.addEventListener('click', supprimerLigne);
                });
            }

            function supprimerLigne(e) {
                const btn = e.currentTarget;
                const row = btn.closest('tr');
                const lignes = document.querySelectorAll('.objectif-row');

                if (lignes.length <= 1) {
                    alert('Vous devez garder au moins une ligne.');
                    return;
                }

                const inputs = row.querySelectorAll('input, textarea');
                let hasContent = false;
                inputs.forEach(input => {
                    if ((input.value || '').trim() !== '') {
                        hasContent = true;
                    }
                });

                if (hasContent && !confirm('Cette ligne contient des données. Êtes-vous sûr de vouloir la supprimer ?')) {
                    return;
                }

                row.remove();
                formModified = true;
                updateRowCount();
            }

            attachSupprimerEvents();
            updateRowCount();

            if (form) {
                const inputs = form.querySelectorAll('input, textarea');
                inputs.forEach(input => {
                    input.addEventListener('change', () => {
                        formModified = true;
                    });
                });

                form.addEventListener('submit', function (e) {
                    const lignes = document.querySelectorAll('.objectif-row');

                    if (lignes.length === 0) {
                        e.preventDefault();
                        alert('Vous devez avoir au moins une ligne d\'objectif.');
                        return false;
                    }

                    formModified = false;

                    const submitBtn = form.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Enregistrement...';
                    }
                });
            }

            window.addEventListener('beforeunload', function (e) {
                if (formModified) {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });
        });
    </script>
{% endblock %}