{# templates/entreprise/appartement/edit.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Modifier {{ appartement.titre }} | {{ entreprise.raisonSociale|default('Mon Bureau') }}{% endblock %}

{% block body %}
<div class="container-fluid py-4 px-md-4">

    {# --- EN-TÊTE HARMONISÉ --- #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="page-header page-header-top mb-1">
                Modifier l'appartement
            </h3>
            <p class="text-muted small mb-0 d-none d-md-block">
                Édition de l'unité : <strong class="text-dark">{{ appartement.titre }}</strong> dans le lot <strong id="dynamic-lot-title" class="text-success">{{ immeuble.titre }}</strong>
            </p>
        </div>
        
        <div>
            <a href="{{ path('app_entreprise_appartement_index', {'immeubleId': immeuble.id}) }}" 
               id="js-btn-return"
               class="btn btn-sm btn-outline-secondary btn-return shadow-sm px-3">
                <i class="fas fa-arrow-left me-1"></i> Annuler les modifications
            </a>
        </div>
    </div>

    {% include 'flash_messages.html.twig' %}

    <div class="row g-4">
        {# --- COLONNE FORMULAIRE --- #}
        <div class="col-12 col-lg-8">
            <div class="card card-form shadow-sm">
                <div class="card-body">
                    {{ include('entreprise/appartement/_form.html.twig', {
                        'button_label': 'Mettre à jour l\'appartement',
                        'button_class': 'btn btn-success px-5 shadow-sm fw-bold'
                    }) }}
                    
                    {# --- OPTIONNEL : BOUTON SUPPRIMER --- #}
                    <div class="mt-4 pt-3 border-top d-flex justify-content-between align-items-center">
                        <small class="text-muted italic">Dernière mise à jour : {{ "now"|date("d/m/Y") }}</small>
                        {# Si vous avez un bouton de suppression, vous pouvez l'inclure ici #}
                    </div>
                </div>
            </div>
        </div>

        {# --- SIDEBAR D'AIDE (ADAPTÉE À L'ÉDITION) --- #}
        <div class="col-12 col-lg-4">
            <div class="card sidebar-info border-0 shadow-sm">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-dark mb-3">
                        <i class="fas fa-info-circle me-2 text-success"></i> Aide à la modification
                    </h6>
                    <p class="small text-muted mb-3">
                        Vous modifiez les informations de l'appartement <strong class="text-dark">{{ appartement.titre }}</strong>.
                    </p>
                    <ul class="small text-muted ps-3 mb-3">
                        <li>Les changements seront appliqués immédiatement sur la fiche de l'appartement.</li>
                        <li>Si vous changez le lot (immeuble) de rattachement, l'appartement sera déplacé dans la nouvelle liste.</li>
                    </ul>
                    <hr class="my-3 opacity-10">
                    <div class="p-3 bg-white rounded border border-light shadow-sm">
                        <small class="text-muted italic d-block">
                            <i class="fas fa-exclamation-triangle text-warning me-1"></i> 
                            <strong>Note :</strong> Modifier le titre ou les caractéristiques n'affecte pas les contrats déjà signés, mais apparaîtra sur les prochains documents générés.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# --- SCRIPT DE DYNAMISATION (Identique au New pour gérer le changement de lot) --- #}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectImmeuble = document.querySelector('select[name*="[immeuble]"]');
    const displayTitle = document.getElementById('dynamic-lot-title');
    const btnReturn = document.getElementById('js-btn-return');

    if (selectImmeuble) {
        selectImmeuble.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            const nomLot = selectedOption.text;
            const idLot = this.value;

            if (displayTitle) displayTitle.textContent = nomLot;

            if (btnReturn && idLot) {
                let baseUrl = "{{ path('app_entreprise_appartement_index', {'immeubleId': 'REPLACE_ME'}) }}";
                btnReturn.href = baseUrl.replace('REPLACE_ME', idLot);
            }
        });
    }
});
</script>
{% endblock %}