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

{% block title %}Gestion des Locataires | {{ entreprise.raisonSociale|default('Mon Bureau') }}{% endblock %}

{# Décommentez la ligne suivante si vous n'utilisez pas Webpack Encore #}
{# {% block stylesheets %}<link rel="stylesheet" href="{{ asset('css/locataire.css') }}">{% endblock %} #}

{% block body %}

{# --- LOGIQUE DE TRI & CONTRÔLE (Inchangée) --- #}
{% set currentSort = app.request.query.get('sort', 'nom') %}
{% set currentDir = app.request.query.get('direction', 'ASC') %}
{% set nextDirection = (currentDir == 'ASC') ? 'DESC' : 'ASC' %}

{% set plan = (abonnementActuel and abonnementActuel.abonnement) ? abonnementActuel.abonnement : null %}
{% set isExpired = (abonnementActuel is null or not abonnementActuel.isActive()) %}
{% set totalLocataires = locataires|length %}
{% set quotaAtteint = (plan and plan.limiteLocataire > 0 and totalLocataires >= plan.limiteLocataire) %}
{% set canAddLocataire = (not isExpired and not quotaAtteint) %}
{% 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">Locataires
                <span class="ms-2 badge bg-light text-dark border badge-quota">
                    <strong>{{ totalLocataires }}</strong> / {{ (plan and plan.limiteLocataire > 0) ? plan.limiteLocataire : 'illimité' }}
                </span>
            </h3>
            <p class="text-muted small mb-0 page-description">Suivi des occupants de votre patrimoine.</p>
        </div>

        {% if is_granted('ROLE_ENTREPRISE_COLLAB') %}
            <div {% if not canAddLocataire %} data-bs-toggle="tooltip" title="Quota atteint ou abonnement expiré" {% endif %}>
                <a href="{{ canAddLocataire ? path('app_entreprise_locataire_new') : path('app_entreprise_abonnement_plans') }}" 
                   class="btn btn-success shadow-sm px-4 loyer-express-btn {{ not canAddLocataire ? 'disabled opacity-50' : '' }}">
                    <i class="fas {{ not canAddLocataire ? 'fa-lock' : 'fa-plus' }} me-1"></i> Nouveau Locataire
                </a>
            </div>
        {% endif %}
    </div>

    {% include 'flash_messages.html.twig' %}
    
    {# --- BARRE DE RECHERCHE --- #}
    <div class="card shadow-sm p-3 mb-4 card-filter">
        <form method="GET" action="{{ path('app_entreprise_locataire_index') }}" class="row g-2">
            <div class="col-md-10">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0 text-muted"><i class="fas fa-search"></i></span>
                    <input type="search" name="q" class="form-control border-start-0" placeholder="Nom, email ou téléphone..." value="{{ searchTerm|default('') }}">
                    <input type="hidden" name="sort" value="{{ currentSort }}">
                    <input type="hidden" name="direction" value="{{ currentDir }}">
                    <button class="btn btn-success px-4 loyer-express-btn" type="submit">Filtrer</button>
                </div>
            </div>
            <div class="col-md-2">
                <a href="{{ path('app_entreprise_locataire_index') }}" class="btn btn-outline-secondary w-100 loyer-express-btn">Effacer</a>
            </div>
        </form>
    </div>

    {# --- TABLEAU --- #}
    <div class="card shadow-sm card-table-container">
        <div class="card-body card-body-visible p-0">
            {% if locataires is empty %}
                <div class="text-center py-5">
                    <i class="fas fa-user-friends fa-3x text-light mb-3"></i>
                    <p class="text-muted">Aucun locataire trouvé.</p>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table table-custom table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>
                                    <a href="{{ path('app_entreprise_locataire_index', app.request.query.all|merge({'sort': 'civilite', 'direction': nextDirection})) }}" 
                                       class="sort-link {{ currentSort == 'civilite' ? 'active' : '' }}">
                                        Civ. <i class="fas {{ currentSort == 'civilite' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ path('app_entreprise_locataire_index', app.request.query.all|merge({'sort': 'nom', 'direction': nextDirection})) }}" 
                                       class="sort-link {{ currentSort == 'nom' ? 'active' : '' }}">
                                        Locataire <i class="fas {{ currentSort == 'nom' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ path('app_entreprise_locataire_index', app.request.query.all|merge({'sort': 'telephone', 'direction': nextDirection})) }}" 
                                       class="sort-link {{ currentSort == 'telephone' ? 'active' : '' }}">
                                        Téléphone <i class="fas {{ currentSort == 'telephone' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="{{ path('app_entreprise_locataire_index', app.request.query.all|merge({'sort': 'email', 'direction': nextDirection})) }}" 
                                       class="sort-link {{ currentSort == 'email' ? 'active' : '' }}">
                                        E-mail <i class="fas {{ currentSort == 'email' ? (currentDir == 'ASC' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort' }}"></i>
                                    </a>
                                </th>
                                <th class="text-end pe-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for locataire in locataires %}
                                <tr>
                                    <td class="ps-4">
                                        <span class="badge bg-light text-dark border fw-normal">
                                            {% if locataire.civilite == 1 %}M.
                                            {% elseif locataire.civilite == 2 %}Mme
                                            {% elseif locataire.civilite == 3 %}Mlle
                                            {% else %}-{% endif %}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-placeholder me-3">
                                                {{ locataire.nom|slice(0,1)|upper }}
                                            </div>
                                            <div class="fws-bold text-dark">{{ locataire.nom|upper }} {{ locataire.prenom }}</div>
                                        </div>
                                    </td>
                                    <td class="small">
                                        <i class="fas fa-phone me-2 text-muted"></i>{{ locataire.telephone }}
                                    </td>
                                    <td class="small text-muted">
                                        <i class="fas fa-envelope me-2 text-muted"></i>{{ locataire.email }}
                                    </td>
                                    <td class="text-end pe-4">
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-light border dropdown-toggle shadow-sm" type="button" data-bs-toggle="dropdown" aria-haspopup="true" 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_locataire_show', {'id': locataire.id}) }}">
                                                        <i class="fas fa-eye me-2 text-default"></i> Voir la fiche
                                                    </a>
                                                </li>
                                                {% if is_granted('ROLE_ENTREPRISE_COLLAB') %}
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <a class="dropdown-item {{ not canModify ? 'disabled opacity-50' : '' }}" 
                                                           href="{{ canModify ? path('app_entreprise_locataire_edit', {'id': locataire.id}) : '#' }}">
                                                            <i class="fas fa-pencil-alt me-2 text-default"></i> Modifier
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <form method="post" action="{{ path('app_entreprise_locataire_delete', {'id': locataire.id}) }}" 
                                                              onsubmit="return confirm('Confirmer la suppression de ce locataire ?');" class="btn-delete-item">
                                                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ locataire.id) }}">
                                                            <button type="submit" class="dropdown-item text-danger {{ not canModify ? 'disabled' : '' }}">
                                                                <i class="fas fa-trash-alt me-2"></i> Supprimer
                                                            </button>
                                                        </form>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}