{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Nouveau Loyer | {{ appartement.titre }}{% endblock %}

{% block body %}
{# Définition de la devise globale #}
{% set devise = app.user.entreprise.devise ? app.user.entreprise.devise.symbole : 'F.CFA' %}

<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">Définir le nouveau tarif</h3>
            <p class="text-muted small mb-0 d-none d-md-block">
                Appartement : <strong class="text-dark">{{ appartement.titre }}</strong> | 
                Lot : <span class="text-muted">{{ immeuble.titre }}</span>
            </p>
        </div>
        
        <div>
            <a href="{{ path('app_entreprise_appartement_show', {'id_immeuble': immeuble.id, 'id': appartement.id}) }}" 
               class="btn btn-sm btn-outline-secondary btn-return shadow-sm px-3">
                <i class="fas fa-arrow-left me-1"></i> Annuler
            </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">
                    
                    <div class="alert alert-info border-0 shadow-sm mb-4" style="background-color: #eef7ff;">
                        <div class="d-flex">
                            <i class="fas fa-history mt-1 me-3 text-primary"></i>
                            <p class="small mb-0 text-primary-emphasis">
                                L'enregistrement de ce nouveau tarif initialisera ou clôturera automatiquement le tarif précédent pour cet appartement. 
                                Il deviendra la référence pour les futurs contrats et factures.
                            </p>
                        </div>
                    </div>

                    {{ form_start(form) }}
                        <div class="row">
                            {# LOYER PRINCIPAL #}
                            <div class="col-12 mb-4">
                                {{ form_label(form.montantLoyer) }}
                                <div class="input-group input-group-lg shadow-sm">
                                    {{ form_widget(form.montantLoyer) }}
                                    <span class="input-group-text bg-light fw-bold">{{ devise }}</span>
                                </div>
                                {{ form_errors(form.montantLoyer) }}
                            </div>

                            <h6 class="fw-bold mb-3 mt-2 text-muted small text-uppercase"><i class="fas fa-plus-circle me-1"></i> Charges Mensuelles</h6>

                            {# CHARGES EN GRILLE #}
                            <div class="col-md-6 mb-3">
                                {{ form_label(form.chargeEau) }}
                                <div class="input-group shadow-sm">
                                    {{ form_widget(form.chargeEau) }}
                                    <span class="input-group-text bg-light text-muted small">{{ devise }}</span>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                {{ form_label(form.chargeElectricite) }}
                                <div class="input-group shadow-sm">
                                    {{ form_widget(form.chargeElectricite) }}
                                    <span class="input-group-text bg-light text-muted small">{{ devise }}</span>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                {{ form_label(form.chargeGardien) }}
                                <div class="input-group shadow-sm">
                                    {{ form_widget(form.chargeGardien) }}
                                    <span class="input-group-text bg-light text-muted small">{{ devise }}</span>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                {{ form_label(form.chargeAutre) }}
                                <div class="input-group shadow-sm">
                                    {{ form_widget(form.chargeAutre) }}
                                    <span class="input-group-text bg-light text-muted small">{{ devise }}</span>
                                </div>
                            </div>

                            <div class="col-12 mt-3 mb-3">
                                <hr class="opacity-10">
                                {{ form_label(form.dateDebut) }}
                                {{ form_widget(form.dateDebut) }}
                                <small class="text-muted italic">Date à laquelle ce nouveau tarif devient effectif.</small>
                            </div>
                        </div>
                        
                        <div class="mt-4 pt-3 border-top">
                            <button type="submit" class="btn btn-success px-5 shadow-sm fw-bold">
                                <i class="fas fa-save me-2"></i> Enregistrer le nouveau loyer
                            </button>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>

        {# --- ZONE D'INFORMATION (SIDEBAR) --- #}
        <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 gestion
                    </h6>
                    
                    <p class="small text-muted mb-3">
                        Vous configurez les conditions financières pour l'unité au sein du lot <strong>{{ immeuble.titre }}</strong>.
                    </p>

                    <div class="bg-white p-3 rounded border border-light mb-3">
                        <div class="info-label text-success mb-2">Structure du prix</div>
                        <ul class="x-small text-muted ps-3 mb-0">
                            <li><strong>Loyer :</strong> Base de calcul du bail.</li>
                            <li><strong>Charges :</strong> Provisions mensuelles ajustables.</li>
                        </ul>
                    </div>

                    <p class="small text-muted">
                        Ces montants seront repris automatiquement lors de la création d'un nouveau contrat de bail pour cet appartement.
                    </p>


                   
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}