{# templates/entreprise/location/bail_edit.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Rédaction du Bail | {{ location.locataire.nomComplet }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .ck-editor__editable {
            min-height: 700px;
            font-family: 'Times New Roman', serif;
            font-size: 1.1rem;
        }
        .contract-sidebar {
            background-color: #f8f9fa;
            border-left: 4px solid #0dcaf0;
            position: sticky;
            top: 20px;
        }
        .extra-small { font-size: 0.75rem; }
    </style>
{% endblock %}

{% block body %}
{# Définition d'une variable pour simplifier la logique de détection #}
{% set TYPE_PRO = constant('App\\Entity\\Entreprise\\Location::TYPE_PROFESSIONNEL') %}
{% set isProfessional = (location.typeBail == TYPE_PRO) %}

<div class="container-fluid py-4 px-md-4">
    
    {# --- EN-TÊTE --- #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="page-header mb-1">Contrat de Bail</h3>
            <p class="text-muted small mb-0">
                <i class="fas fa-info-circle me-1"></i> 
                Édition du document juridique pour <strong>{{ location.locataire.nomComplet }}</strong>
            </p>
        </div>
        <a href="{{ path('app_entreprise_location_show', {'id': location.id}) }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-times me-1"></i> Annuler
        </a>
    </div>

    <div class="row">
        {# --- ZONE D'ÉDITION --- #}
        <div class="col-lg-9">
            <form method="post">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-0">
                        <textarea name="contenu_bail" id="editor">
                            {% if location.contenuBail %}
                                {{ location.contenuBail|raw }}
                            {% else %}
                                {# Chargement automatique basé sur le type détecté #}
                                {% if isProfessional %}
                                    {% include 'entreprise/location/modeles/_professionnel.html.twig' %}
                                {% else %}
                                    {% include 'entreprise/location/modeles/_habitation.html.twig' %}
                                {% endif %}
                            {% endif %}
                        </textarea>
                    </div>
                    <div class="card-footer bg-white py-3 d-flex justify-content-between align-items-center">
                        <span class="text-muted small">
                            <i class="fas fa-sync-alt me-1"></i> Les modifications ne sont effectives qu'après enregistrement.
                        </span>
                        <button type="submit" class="btn btn-info text-white px-5 fw-bold shadow-sm">
                            <i class="fas fa-save me-2"></i>Enregistrer le contrat
                        </button>
                    </div>
                </div>
            </form>
        </div>

        {# --- BARRE LATÉRALE DE RAPPEL --- #}
        <div class="col-lg-3">
            <div class="card contract-sidebar shadow-sm border-0">
                <div class="card-body">
                    <h6 class="fw-bold mb-3 border-bottom pb-2 small text-uppercase text-info">Rappel des données</h6>
                    
                    <div class="mb-3">
                        <label class="extra-small text-muted d-block">Locataire</label>
                        <span class="small fw-bold">{{ location.locataire.nomComplet }}</span>
                    </div>

                    <div class="mb-3">
                        <label class="extra-small text-muted d-block">Logement</label>
                        <span class="small fw-bold">{{ location.appartement.titre }}</span>
                    </div>

                    <div class="mb-3">
                        <label class="extra-small text-muted d-block">Type de bail</label>
                        <span class="badge bg-soft-info text-info small">
                            {% if isProfessional %}
                                <i class="fas fa-briefcase me-1"></i> Professionnel
                            {% else %}
                                <i class="fas fa-home me-1"></i> Habitation
                            {% endif %}
                        </span>
                    </div>

                    <hr>

                    <div class="mt-4">
                        <p class="small text-muted fw-bold mb-2">ACTIONS MODÈLE</p>
                        <button type="button" id="btn-reload-template" class="btn btn-outline-warning btn-sm w-100 mb-3">
                            <i class="fas fa-sync-alt me-1"></i> Recharger le modèle par défaut
                        </button>
                        
                        <div class="alert alert-light border small text-muted">
                            <i class="fas fa-exclamation-triangle text-warning me-1"></i>
                            <strong>Attention :</strong> Le rechargement effacera vos modifications en cours.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# --- BLOC MASQUÉ : Pour le rechargement JS via le bouton --- #}
<div id="default-template-hidden" style="display: none;">
    {% if isProfessional %}
        {% include 'entreprise/location/modeles/_professionnel.html.twig' %}
    {% else %}
        {% include 'entreprise/location/modeles/_habitation.html.twig' %}
    {% endif %}
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
    <script>
        let editorInstance;

        ClassicEditor
            .create(document.querySelector('#editor'), {
                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo' ],
                placeholder: 'Rédaction du bail...'
            })
            .then(editor => {
                editorInstance = editor;
            })
            .catch(error => {
                console.error(error);
            });

        document.getElementById('btn-reload-template').addEventListener('click', function() {
            const confirmation = confirm("Réinitialiser le contenu avec le modèle par défaut ?");
            
            if (confirmation && editorInstance) {
                const defaultContent = document.getElementById('default-template-hidden').innerHTML;
                editorInstance.setData(defaultContent);
                
                this.classList.replace('btn-outline-warning', 'btn-success');
                this.innerHTML = '<i class="fas fa-check"></i> Modèle chargé';
                setTimeout(() => {
                    this.classList.replace('btn-success', 'btn-outline-warning');
                    this.innerHTML = '<i class="fas fa-sync-alt me-1"></i> Recharger le modèle';
                }, 2000);
            }
        });
    </script>
{% endblock %}