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

{% block title %}Nouveau Contrat | {{ 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 flex-wrap gap-3">
        <div>
            <h3 class="page-header page-header-top mb-1">Nouveau Contrat de Location</h3>
            <p class="text-muted small mb-0 d-none d-md-block">Officialisez l'occupation d'un Appartement par un locataire.</p>
        </div>
        
        <div>
            <a href="{{ path('app_entreprise_location_index') }}" class="btn btn-sm btn-outline-secondary btn-return shadow-sm px-3">
                <i class="fas fa-arrow-left me-1"></i> Retour à la liste
            </a>
        </div>
    </div>

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

    <div class="row g-4">
        {# --- ZONE FORMULAIRE --- #}
        <div class="col-12 col-lg-8">
            <div class="card card-form shadow-sm">
                <div class="card-body">
                    {# Inclusion du formulaire partiel #}
                    {{ include('entreprise/location/_form.html.twig', {
                        'button_label': 'Enregistrer le contrat',
                        'button_class': 'btn btn-success px-5 shadow-sm fw-bold'
                    }) }}
                </div>
            </div>
        </div>

        {# --- ZONE D'INFORMATION (SIDEBAR) --- #}
        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm info-card">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-dark mb-3">
                        <i class="fas fa-file-signature me-2 text-success"></i> Le Contrat de Bail
                    </h6>
                    <p class="small text-muted mb-3">
                        Ce contrat lie un <strong>Locataire</strong> à un <strong>Appartement</strong> spécifique au sein de l'un de vos <strong>Lots</strong>.
                    </p>
                    <ul class="list-unstyled small text-muted mb-3">
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Définissez la date de prise d'effet.</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Précisez le type de bail (Habitation ou Pro).</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Fixez le jour limite de paiement des loyers.</li>
                    </ul>
                    
                    <div class="alert alert-warning border-0 small mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Vérifiez que l'<strong>Appartement</strong> est bien disponible avant de valider le contrat.
                    </div>

                    <hr class="my-3 opacity-10">
                    
                    <div class="p-2 bg-white rounded border border-light text-center">
                        <small class="text-muted">
                            <i class="fas fa-magic text-warning me-1"></i> 
                            <strong>Automatisation :</strong><br>
                            Une fois validé, le système générera automatiquement les futurs quittances de loyer.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // On récupère les IDs générés par Symfony (généralement location_dateDebut et location_dateFin)
            // Vérifiez les IDs exacts dans votre inspecteur d'élément si besoin
            const dateDebut = document.querySelector('input[type="date"][id*="_dateDebut"]');
            const dateFin = document.querySelector('input[type="date"][id*="_dateFin"]');

            if (dateDebut && dateFin) {
                // 1. Empêcher la sélection de dates passées pour le début (optionnel mais conseillé)
                // dateDebut.setAttribute('min', new Date().toISOString().split('T')[0]);

                dateDebut.addEventListener('change', function() {
                    // Si une date de début est choisie, la date de fin ne peut pas être avant
                    if (this.value) {
                        dateFin.setAttribute('min', this.value);
                        
                        // Si la date de fin actuelle est déjà renseignée et devient invalide
                        if (dateFin.value && dateFin.value < this.value) {
                            dateFin.value = this.value;
                            alert("La date de fin a été ajustée car elle ne peut pas être antérieure à la date de début.");
                        }
                    }
                });

                dateFin.addEventListener('change', function() {
                    if (dateDebut.value && this.value < dateDebut.value) {
                        alert("Erreur : La date de fin ne peut pas être antérieure à la date de début.");
                        this.value = dateDebut.value;
                    }
                });
            }
        });
    </script>
{% endblock %}
{% endblock %}