{# templates/admin/type_bien/_form.html.twig #}

<div class="card shadow-sm p-4">
    {{ form_start(form, {'attr': {'id': 'type-bien-form'}}) }}
        <div class="row">
            <div class="col-md-6">
                {{ form_row(form.code, {'label': 'Code Technique (ex: VILLA_DUPLEX)'}) }}
            </div>
            <div class="col-md-6">
                {{ form_row(form.libelle, {'label': 'Nom du type de bien'}) }}
            </div>
        </div>

        <div class="mt-4 d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
            <div>
                <h4 class="mb-0 text-primary d-inline">
                    <i class="fas fa-tasks me-2"></i>Étapes de construction
                </h4>
                <span id="total-percentage-badge" class="badge bg-danger ms-2">Total : 0%</span>
            </div>
            <button type="button" class="btn btn-outline-primary btn-sm add-etape">
                <i class="fas fa-plus"></i> Ajouter une étape
            </button>
        </div>

        {# Barre de progression #}
        <div class="progress mb-4" style="height: 10px;">
            <div id="form-progress-bar" class="progress-bar bg-danger" role="progressbar" style="width: 0%"></div>
        </div>

        <div id="etape-container" 
             data-prototype="{{ form_widget(form.etapeTemplates.vars.prototype)|e('html_attr') }}"
             class="mb-4">
            
            {% for etapeForm in form.etapeTemplates %}
                <div class="etape-row border rounded p-3 mb-3 bg-light shadow-sm position-relative">
                    {# On laisse le widget seul ici, le JS va l'habiller avec les boutons #}
                    {{ form_widget(etapeForm) }}
                </div>
            {% endfor %}
        </div>

        <div id="error-message" class="alert alert-danger d-none">
            <i class="fas fa-exclamation-triangle me-2"></i> 
            Le total des poids doit être exactement égal à <strong>100%</strong> pour pouvoir enregistrer.
        </div>

        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4 border-top pt-3">
            <a href="{{ path('app_admin_type_bien_index') }}" class="btn btn-light border me-md-2">Annuler</a>
            <button type="submit" id="submit-btn" class="btn btn-success px-5" disabled>
                <i class="fas fa-save me-2"></i>{{ button_label|default('Enregistrer le Type de Bien') }}
            </button>
        </div>
    {{ form_end(form) }}
</div>

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('#etape-container');
    const addButton = document.querySelector('.add-etape');
    const form = document.querySelector('#type-bien-form');
    const submitBtn = document.querySelector('#submit-btn');
    const totalBadge = document.querySelector('#total-percentage-badge');
    const progressBar = document.querySelector('#form-progress-bar');
    const errorMsg = document.querySelector('#error-message');

    // --- FONCTION : Calcul et validation du total ---
    const validateTotal = () => {
        let total = 0;
        const weightInputs = container.querySelectorAll('input[name*="[poids]"]');
        
        weightInputs.forEach(input => {
            total += parseInt(input.value) || 0;
        });

        totalBadge.innerText = `Total : ${total}%`;
        progressBar.style.width = `${Math.min(total, 100)}%`;

        if (total === 100) {
            totalBadge.className = "badge bg-success ms-2";
            progressBar.className = "progress-bar bg-success";
            submitBtn.disabled = false;
            errorMsg.classList.add('d-none');
        } else {
            totalBadge.className = "badge bg-danger ms-2";
            progressBar.className = "progress-bar bg-danger";
            submitBtn.disabled = true;
            if (total > 0) errorMsg.classList.remove('d-none');
        }
        
        return total === 100;
    };

    // --- FONCTION : Mise à jour des ordres ---
    const updateOrders = () => {
        container.querySelectorAll('.etape-row').forEach((row, index) => {
            const orderInput = row.querySelector('input[name*="[ordreSequence]"]');
            if (orderInput) orderInput.value = index + 1;
        });
    };

    // --- FONCTION : Ajouter les contrôles ---
    const addControls = (row) => {
        // Sécurité : ne pas ajouter deux fois si déjà présent
        if (row.querySelector('.remove-btn')) return;

        // On récupère le contenu actuel (soit brut, soit déjà dans content-fields)
        const contentFields = row.querySelector('.content-fields');
        const originalContent = contentFields ? contentFields.innerHTML : row.innerHTML;

        const controlsHtml = `
            <div class="row align-items-center">
                <div class="col-1 text-center d-flex flex-column gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary move-up"><i class="fas fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-sm btn-outline-secondary move-down"><i class="fas fa-chevron-down"></i></button>
                </div>
                <div class="col-10 content-fields">
                    ${originalContent}
                </div>
                <div class="col-1 text-end">
                    <button type="button" class="btn btn-outline-danger btn-sm remove-btn"><i class="fas fa-trash-alt"></i></button>
                </div>
            </div>`;
        
        row.innerHTML = controlsHtml;

        // Action Supprimer
        row.querySelector('.remove-btn').addEventListener('click', () => {
            row.remove();
            updateOrders();
            validateTotal();
        });

        // Action Monter
        row.querySelector('.move-up').addEventListener('click', () => {
            const prev = row.previousElementSibling;
            if (prev) { 
                container.insertBefore(row, prev); 
                updateOrders(); 
            }
        });

        // Action Descendre
        row.querySelector('.move-down').addEventListener('click', () => {
            const next = row.nextElementSibling;
            if (next) { 
                container.insertBefore(next, row); 
                updateOrders(); 
            }
        });
    };

    // Initialisation des lignes existantes
    container.querySelectorAll('.etape-row').forEach(row => addControls(row));
    updateOrders();
    validateTotal();

    // Changement de poids
    container.addEventListener('input', (e) => {
        if (e.target.name.includes('[poids]')) {
            validateTotal();
        }
    });

    // Ajouter une nouvelle étape via prototype
    addButton.addEventListener('click', () => {
        const prototype = container.dataset.prototype;
        const index = container.querySelectorAll('.etape-row').length;
        const newForm = prototype.replace(/__name__/g, index);
        
        const wrapper = document.createElement('div');
        wrapper.className = 'etape-row border rounded p-3 mb-3 bg-white shadow-sm';
        wrapper.innerHTML = newForm;
        
        addControls(wrapper);
        container.appendChild(wrapper);
        updateOrders();
        validateTotal();
    });

    // Validation finale
    form.addEventListener('submit', (e) => {
        if (!validateTotal()) {
            e.preventDefault();
            alert("Le total des poids doit être de 100% exactement.");
        }
    });
});
</script>

<style>
    .etape-row { transition: all 0.2s ease; }
    .etape-row:hover { border-color: #0d6efd !important; background-color: #f8f9fa !important; }
    /* Cache le champ ordreSequence s'il est généré par form_widget */
    div[id*="_ordreSequence"], .ordre-sequence-field { display: none !important; }
    .progress { background-color: #e9ecef; border-radius: 5px; overflow: hidden; }
</style>
{% endblock %}