{# templates/entreprise/loyer_mensuel/index.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Facturation Mensuelle | {{ entreprise.raisonSociale|default('Gestion') }}{% endblock %}

{% set currency = app.user.entreprise.devise ? app.user.entreprise.devise.symbole : 'F.CFA' %}

{% block body %}
    {% set currentSort = app.request.query.get('sort', 'date') %}
    {% set currentDir = app.request.query.get('direction', 'DESC') %}
    {% set nextDirection = (currentDir == 'ASC') ? 'DESC' : 'ASC' %}

    {% set isExpired = (abonnementActuel is null or not abonnementActuel.isActive()) %}
    {% set canModify = (not isExpired) %}

    <div class="container-fluid py-4 px-md-4 page-container">
        
        {# --- EN-TÊTE --- #}
        <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">Facturation Mensuelle</h3>
                <p class="text-muted small mb-0">Suivi des encaissements et quittances de vos <strong>Appartements</strong>.</p>
            </div>
            <div class="header-actions d-flex gap-2">
                <a href="{{ path('app_entreprise_loyer_mensuel_quittances', app.request.query.all) }}" 
                   class="btn btn-outline-danger shadow-sm loyer-express-btn {% if loyers_mensuels|length == 0 %}disabled{% endif %}">
                    <i class="fas fa-file-pdf me-2"></i> IMPRIMER LES QUITTANCES
                </a>

                {% if is_granted('ROLE_ENTREPRISE_COLLAB') %}
                    <div {% if not canModify %} data-bs-toggle="tooltip" title="Abonnement expiré" {% endif %}>
                        <a href="{{ canModify ? path('app_entreprise_loyer_mensuel_new') : '#' }}" 
                           class="btn btn-success shadow-sm loyer-express-btn {{ not canModify ? 'disabled opacity-50' : '' }}">
                            <i class="fas {{ not canModify ? 'fa-lock' : 'fa-plus' }} me-2"></i> CRÉER UNE FACTURE
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>

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

        {# --- FILTRES --- #}
        <div class="card shadow-sm p-3 mb-4 card-filter">
            {% include 'entreprise/_filtre_loyer.html.twig' with {'form': filtreForm, 'reset_path': path('app_entreprise_loyer_mensuel_index')} %}
            <hr class="my-3"/>

            {# --- STATISTIQUES --- #}
            {% if loyers_mensuels|length > 0 %}
                <div class="stats-container shadow-sm">
                    <div class="row g-0">
                        <div class="col-md-4 stat-box">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon-mini bg-info-soft me-3">
                                    <i class="fas fa-file-invoice-dollar"></i>
                                </div>
                                <div>
                                    <span class="stat-label">Total Facturé</span>
                                    <div class="stat-number">
                                        {{ stats.totalDu | number_format(0, '.', ' ') }} 
                                        <span class="extra-small">{{ currency }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 stat-box">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon-mini bg-success-soft me-3">
                                    <i class="fas fa-check-double"></i>
                                </div>
                                <div>
                                    <span class="stat-label">Total Encaissé</span>
                                    <div class="stat-number text-success">
                                        {{ stats.totalPaye | number_format(0, '.', ' ') }} 
                                        <span class="extra-small">{{ currency }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 stat-box">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon-mini bg-danger-soft me-3">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div>
                                    <span class="stat-label">Reste à Percevoir</span>
                                    <div class="stat-number text-danger">
                                        {{ stats.resteAPayer | number_format(0, '.', ' ') }} 
                                        <span class="extra-small">{{ currency }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        {# --- TABLEAU --- #}
        <div class="card shadow-sm card-table-container">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-custom table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4">
                                    <a href="{{ path('app_entreprise_loyer_mensuel_index', app.request.query.all|merge({'sort': 'reference', 'direction': nextDirection})) }}" 
                                       class="sort-link {{ currentSort == 'reference' ? 'active' : '' }}">
                                        Référence & Période <i class="fas {{ currentSort == 'reference' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ path('app_entreprise_loyer_mensuel_index', app.request.query.all|merge({'sort': 'locataire', 'direction': nextDirection})) }}" 
                                       class="sort-link {{ currentSort == 'locataire' ? 'active' : '' }}">
                                        Locataire & Appartement <i class="fas {{ currentSort == 'locataire' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th class="text-end">
                                    <a href="{{ path('app_entreprise_loyer_mensuel_index', app.request.query.all|merge({'sort': 'totalDu', 'direction': nextDirection})) }}" 
                                       class="sort-link justify-content-end {{ currentSort == 'totalDu' ? 'active' : '' }}">
                                        Montant Dû <i class="fas {{ currentSort == 'totalDu' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th class="text-end">
                                    <a href="{{ path('app_entreprise_loyer_mensuel_index', app.request.query.all|merge({'sort': 'montantPaye', 'direction': nextDirection})) }}" 
                                       class="sort-link justify-content-end {{ currentSort == 'montantPaye' ? 'active' : '' }}">
                                        Réglé <i class="fas {{ currentSort == 'montantPaye' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th class="text-center">
                                    <a href="{{ path('app_entreprise_loyer_mensuel_index', app.request.query.all|merge({'sort': 'statut', 'direction': nextDirection})) }}" 
                                       class="sort-link justify-content-center {{ currentSort == 'statut' ? 'active' : '' }}">
                                        Statut <i class="fas {{ currentSort == 'statut' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th class="text-end pe-4 extra-small text-muted">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loyer in loyers_mensuels %}
                                <tr>
                                    <td class="ps-4">
                                        <div class="mb-1"><span class="ref-badge">{{ loyer.reference|default('#' ~ loyer.id) }}</span></div>
                                        <div class="fw-bold text-dark small text-uppercase">{{ loyer.mois|date_mois }} {{ loyer.annee }}</div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-placeholder me-2"><i class="fas fa-user-circle"></i></div>
                                            <div>
                                                <div class="fw-bold text-dark small">{{ loyer.location.locataire.nomComplet }}</div>
                                                <div class="text-muted extra-small">
                                                    {{ loyer.location.appartement.titre }} <span class="text-success">•</span> {{ loyer.location.appartement.immeuble.titre }} (Lot)
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-end fw-bold text-dark">{{ loyer.totalDu | number_format(0, '.', ' ') }}</td>
                                    <td class="text-end">
                                        <span class="{{ loyer.montantPaye > 0 ? 'text-success fw-bold' : 'text-muted' }}">
                                            {{ loyer.montantPaye | number_format(0, '.', ' ') }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        {% if loyer.statut == constant('App\\Entity\\Entreprise\\LoyerMensuel::STATUT_PAYE') %}
                                            <span class="badge bg-success-soft status-badge border border-success">Payé</span>
                                        {% elseif loyer.statut == constant('App\\Entity\\Entreprise\\LoyerMensuel::STATUT_EN_RETARD') %}
                                            <span class="badge bg-danger-soft status-badge border border-danger">En retard</span>
                                        {% else %}
                                            <span class="badge bg-warning-soft status-badge border border-warning">En attente</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end pe-4">
                                        <div class="d-flex justify-content-end align-items-center gap-2">
                                            
                                            {# --- MISE À JOUR : APPARITION SI STATUT != 1 (PAYÉ) --- #}
                                            {% if loyer.statut != constant('App\\Entity\\Entreprise\\LoyerMensuel::STATUT_PAYE') %}
                                                <a href="{{ canModify ? path('app_entreprise_loyer_mensuel_paiement_new', {'id': loyer.id}) : '#' }}" 
                                                   class="btn btn-action-main btn-success shadow-sm {{ not canModify ? 'disabled opacity-50' : '' }}" 
                                                   title="Encaisser">
                                                    <i class="fas fa-hand-holding-usd fa-sm"></i>
                                                </a>
                                            {% endif %}

                                            <a href="{{ path('app_entreprise_loyer_mensuel_imprimer_quittances', {'id': loyer.id}) }}" 
                                                class="btn btn-action-main btn-default shadow-sm" 
                                                target="_blank" 
                                                title="Imprimer la quittance">
                                                    <i class="fas fa-print fa-sm"></i>
                                                </a>

                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-light border dropdown-toggle shadow-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-h text-muted"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end shadow border-0">
                                                    <li>
                                                        <a class="dropdown-item" href="{{ path('app_entreprise_loyer_mensuel_show', {'id': loyer.id}) }}">
                                                            <i class="fas fa-eye me-2 "></i> Voir Détails
                                                        </a>
                                                    </li>
                                                    {% if is_granted('ROLE_ENTREPRISE_COLLAB') %}
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li>
                                                            <a class="dropdown-item {{ not canModify ? 'disabled' : '' }}" 
                                                               href="{{ canModify ? path('app_entreprise_loyer_mensuel_edit', {'id': loyer.id}) : '#' }}">
                                                                <i class="fas fa-pencil-alt me-2 text-warning"></i> Modifier
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="6" class="text-center py-5 text-muted">
                                        <i class="fas fa-folder-open fa-3x mb-3 opacity-25"></i>
                                        <p>Aucune facture trouvée.</p>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}