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

{% block title %}Impression Quittances | {{ entreprise.raisonSociale|default('Gestion') }}{% endblock %}

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

{% block body %}
    <div class="container-fluid py-4 px-md-4">
        {# --- 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">Impression des Quittances</h3>
                <p class="text-muted small mb-0">Sélectionnez les documents à générer pour vos <strong>Appartements</strong>.</p>
            </div>
            <a href="{{ path('app_entreprise_loyer_mensuel_index') }}?{{ filtre_params }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
                <i class="fas fa-arrow-left me-1"></i> Retour à la liste
            </a>
        </div>

        {# --- BLOC FILTRE --- #}
        <div class="card shadow-sm p-3 mb-4 card-filter">
             {% include 'entreprise/_filtre_loyer.html.twig' with {'form': filtre_form, 'reset_path': path('app_entreprise_loyer_mensuel_quittances')} %}
        </div>

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

        {% if factures is empty %}
            <div class="card shadow-sm text-center py-5 border-0">
                <div class="mb-3 opacity-25">
                    <i class="fas fa-search fa-4x text-muted"></i>
                </div>
                <h5 class="text-muted">Aucune quittance trouvée</h5>
                <p class="text-secondary small">Ajustez vos filtres pour afficher les données.</p>
                <div class="mt-2">
                    <a href="{{ path('app_entreprise_loyer_mensuel_quittances') }}" class="btn btn-light border btn-sm">Réinitialiser</a>
                </div>
            </div>
        {% else %}
            <form id="quittance-form" action="{{ path('app_entreprise_loyer_mensuel_imprimer_quittances') }}" method="POST" target="_blank">
                
                {# --- BARRE D'ACTION --- #}
                <div class="card shadow-sm mb-4 border-0 border-start border-4 border-success">
                    <div class="card-body d-flex justify-content-between align-items-center py-3 flex-wrap gap-3">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-3 fa-lg"></i>
                            <span class="text-dark fw-medium">Cochez les éléments à inclure dans le PDF groupé.</span>
                        </div>
                        <button type="submit" class="btn btn-success px-4 fw-bold shadow-sm loyer-express-btn" id="submit-print-btn">
                            <i class="fas fa-print me-2"></i> GÉNÉRER (<span id="selected-count">0</span>)
                        </button>
                    </div>
                </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 style="width: 50px;" class="ps-4">
                                            <input type="checkbox" class="form-check-input shadow-none" id="select-all" checked>
                                        </th>
                                        <th>Locataire & Bien</th>
                                        <th>Période</th>
                                        <th>Détails Paiement</th>
                                        <th class="text-end">Montant</th>
                                        <th class="text-center">Statut</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for loyer in factures %}
                                        {# --- CAS 1 : IMPAYÉ (Ligne orange) --- #}
                                        {% if loyer.paiements is empty %}
                                            {% set resteADevoir = loyer.totalDu - loyer.montantPaye %}
                                            <tr class="bg-light-warning">
                                                <td class="ps-4">
                                                    <input class="form-check-input quittance-checkbox shadow-none" type="checkbox" name="loyer_ids[]" value="{{ loyer.id }}" id="loyer-{{ loyer.id }}" checked>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="avatar-placeholder-sm me-2"><i class="fas fa-user"></i></div>
                                                        <div>
                                                            <label class="d-block fw-bold text-dark small mb-0 cursor-pointer" for="loyer-{{ loyer.id }}">
                                                                {{ loyer.location.locataire.prenom|default('') }} {{ loyer.location.locataire.nom|default('') }}
                                                            </label>
                                                            <small class="text-muted extra-small">
                                                                {{ loyer.location.appartement.titre }} <span class="text-success">•</span> {{ loyer.location.appartement.immeuble.titre }}
                                                            </small>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><span class="badge bg-white text-dark border fw-normal text-uppercase">{{ loyer.mois }}/{{ loyer.annee }}</span></td>
                                                <td><span class="text-muted small fst-italic">En attente de paiement</span></td>
                                                <td class="text-end fw-bold text-danger">{{ resteADevoir|number_format(0, '.', ' ') }} <small>{{ currency }}</small></td>
                                                <td class="text-center"><span class="badge bg-danger-soft status-badge border border-danger">Impayé</span></td>
                                            </tr>
                                        {% else %}
                                            {# --- CAS 2 : PAIEMENTS (Affichage de la facture cumulée) --- #}
                                            <tr>
                                                <td class="ps-4">
                                                    <input class="form-check-input quittance-checkbox shadow-none" type="checkbox" name="loyer_ids[]" value="{{ loyer.id }}" id="loyer-{{ loyer.id }}" checked>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="avatar-placeholder-sm me-2"><i class="fas fa-user-check"></i></div>
                                                        <div>
                                                            <label class="d-block fw-bold text-dark small mb-0 cursor-pointer" for="loyer-{{ loyer.id }}">
                                                                {{ loyer.location.locataire.prenom|default('') }} {{ loyer.location.locataire.nom|default('') }}
                                                            </label>
                                                            <small class="text-muted extra-small">
                                                                {{ loyer.location.appartement.titre }} <span class="text-success">•</span> {{ loyer.location.appartement.immeuble.titre }}
                                                            </small>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td><span class="badge bg-white text-dark border fw-normal text-uppercase">{{ loyer.mois }}/{{ loyer.annee }}</span></td>
                                                <td class="small">
                                                    {{ loyer.paiements|length }} versement(s) <br>
                                                    <small class="text-muted">Dernier le {{ loyer.paiements.last.datePaiement|date('d/m/Y') }}</small>
                                                </td>
                                                <td class="text-end fw-bold text-success">{{ loyer.montantPaye|number_format(0, '.', ' ') }} <small>{{ currency }}</small></td>
                                                <td class="text-center">
                                                    {% if loyer.montantPaye >= loyer.totalDu %}
                                                        <span class="badge bg-success-soft status-badge border border-success">Soldée</span>
                                                    {% else %}
                                                        <span class="badge bg-info-soft status-badge border border-info">Partiel</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end mt-4 mb-5">
                    <button type="submit" class="btn btn-success btn-lg px-5 fw-bold shadow loyer-express-btn" id="submit-print-btn-bottom">
                        <i class="fas fa-file-pdf me-2"></i> GÉNÉRER LES QUITTANCES (<span id="selected-count-bottom">0</span>)
                    </button>
                </div>
            </form>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxes = document.querySelectorAll('.quittance-checkbox');
            const selectAll = document.getElementById('select-all');
            const submitButtons = document.querySelectorAll('#submit-print-btn, #submit-print-btn-bottom');
            const countSpans = document.querySelectorAll('#selected-count, #selected-count-bottom');

            function updateCount() {
                const selectedCount = document.querySelectorAll('.quittance-checkbox:checked').length;
                countSpans.forEach(span => span.textContent = selectedCount);
                
                submitButtons.forEach(button => {
                    button.disabled = (selectedCount === 0);
                    button.style.opacity = (selectedCount === 0) ? "0.5" : "1";
                });
                
                if (selectAll) {
                    selectAll.checked = (selectedCount === checkboxes.length && checkboxes.length > 0);
                }
            }

            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateCount);
            });

            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    checkboxes.forEach(cb => cb.checked = selectAll.checked);
                    updateCount();
                });
            }

            updateCount();
        });
    </script>
{% endblock %}