{% extends 'base.html.twig' %}

{% block title %}Accueil{% endblock %}

{% block body %}
    <!-- Header moderne avec gradient -->
    <div class="header-gradient">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center py-2">
                <!-- Logo et titre -->
                <div class="d-flex align-items-center">
                    <div class="logo-container me-3">
                        <a href="{{ path('app_beneficiaire_index') }}" aria-label="Accueil">
                            <img src="{{ asset('images/favicon.png') }}" alt="APSI Logo" class="logo-img">
                        </a>
                    </div>
                    <div>
                        <a href="{{ path('app_beneficiaire_index') }}">
                            <img src="{{ asset('images/apsi.png') }}" alt="APSI Logo" class="logo-apsi">
                        </a>
                    </div>
                </div>

                <!-- Info utilisateur et déconnexion -->
                <div class="d-flex align-items-center gap-3">
                    {% if app.user is defined and app.user %}
                        <div class="user-details">
                            <div class="user-avatar-circle">
                                {{ app.user.prenom|slice(0, 1)|upper }}{{ app.user.nom|slice(0, 1)|upper }}
                            </div>
                            <div class="user-name">
                                <p class="text-header">{{ app.user.prenom }} {{ app.user.nom }}</p>
                            </div>
                        </div>
                        <a href="{{ path('app_logout') }}" class="btn btn-logout deco">
                            <i class="fas fa-sign-out-alt me-1"></i>
                            Déconnexion
                        </a>
                    {% else %}
                        <a href="{{ path('app_login') }}" class="btn btn-logout">
                            <i class="fas fa-sign-in-alt me-1"></i>
                            Connexion
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Contenu principal -->
    <div class="main-container">
        <div class="container-fluid" style="background: white" data-controller="beneficiaire-search">
            <!-- Barre d'actions -->
            <div class="action-bar">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h2 class="page-title">
                            <i class="fas fa-users me-2"></i>
                            Mes bénéficiaires
                        </h2>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="{{ path('app_beneficiaire_new') }}" class="btn btn-action btn-success">
                            <i class="fa-solid fa-plus"></i>
                            Nouveau bénéficiaire
                        </a>
                    </div>
                </div>

                <!-- Barre de recherche et filtre -->


                    <!-- Filtres modernes -->
                    <div class="filter-container d-flex gap-3 align-items-center mt-4 justify-content-between">
                            <!-- Barre de recherche -->
                            <div class="search-bar-modern flex-grow-1">
                                <i class="fas fa-search search-icon"></i>
                                <input type="text"
                                       class="search-input"
                                       placeholder="Rechercher un bénéficiaire par nom ou prénom..."
                                       id="searchInput"
                                       data-beneficiaire-search-target="searchInput"
                                       data-action="input->beneficiaire-search#search"
                                       autocomplete="off">
                                <div class="search-loader"
                                     id="searchLoader"
                                     data-beneficiaire-search-target="searchLoader">
                                    <i class="fas fa-spinner fa-spin"></i>
                                </div>
                            </div>
                            <form method="get" class="filter-form-modern">
                                <div class="filter-header">
                                    <i class="fas fa-filter" style="font-size: 20px"></i>
                                   <!-- <span>Filtrer</span> -->
                                </div>

                                <div class="filter-inputs">
                                    <!-- Filtre par psychologue -->
                                    {% if psychologues is defined and psychologues|length > 0 %}
                                        <div class="filter-group">
                                            <label for="psychologue">Psychologue</label>
                                            <select name="psychologue" id="psychologue" class="filter-select">
                                                <option value="">Tous les psychologues</option>
                                                {% for psy in psychologues %}
                                                    <option value="{{ psy.id }}"
                                                            {% if selectedPsychologue == psy.id %}selected{% endif %}>
                                                        {{ psy.prenom }} {{ psy.nom }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    {% endif %}

                                    <!-- Filtres par date -->
                                    <div class="filter-group">
                                        <label for="date_debut">Du</label>
                                        <input type="date"
                                               name="date_debut"
                                               id="date_debut"
                                               class="filter-date"
                                               value="{{ dateDebut }}">
                                    </div>

                                    <div class="filter-group">
                                        <label for="date_fin">Au</label>
                                        <input type="date"
                                               name="date_fin"
                                               id="date_fin"
                                               class="filter-date"
                                               value="{{ dateFin }}">
                                    </div>
                                </div>

                                <div class="filter-actions">
                                    <button type="submit" class="btn-filter-apply">
                                        <i class="fas fa-check me-1"></i>
                                        Appliquer
                                    </button>

                                    {% if selectedPsychologue or dateDebut or dateFin %}
                                        <a href="{{ path('app_beneficiaire_index') }}"
                                           class="btn-filter-reset"
                                           title="Réinitialiser les filtres">
                                            <i class="fas fa-times me-1"></i>
                                            Réinitialiser
                                        </a>
                                    {% endif %}
                                </div>
                            </form>
                    </div>
                </div>

            {% if beneficiaires is defined and beneficiaires is not empty %}
                <!-- Grille de cartes moderne -->
                <div class="beneficiaires-grid"
                     id="beneficiairesContainer"
                     data-beneficiaire-search-target="container">

                    {% for beneficiaire in beneficiaires %}
                        <div class="beneficiaire-card-wrapper"
                             data-beneficiaire-search-target="card"
                             data-nom="{{ beneficiaire.nom|lower|escape('html_attr') }}"
                             data-prenom="{{ beneficiaire.prenom|lower|escape('html_attr') }}">
                            <div class="beneficiaire-card">
                                <!-- Badge créateur (en haut à droite) -->
                                {% if beneficiaire.relation is defined and beneficiaire.relation %}
                                    <div class="creator-badge">
                                        <i class="fas fa-user-check me-1"></i>
                                        {{ beneficiaire.relation.prenom }} {{ beneficiaire.relation.nom }}
                                    </div>
                                {% endif %}

                                <!-- Badge période terminée (en haut à gauche) -->
                                {% if beneficiaire.isPeriodeFinie() %}
                                    <div class="periode-terminee-badge">
                                        <i class="fas fa-check-circle"></i>
                                        <span>Période terminée</span>
                                    </div>
                                {% endif %}

                                <!-- En-tête de carte avec avatar -->
                                <div class="card-header-modern">
                                    <div class="beneficiaire-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="beneficiaire-info">
                                        <h5 class="beneficiaire-name">
                                            {{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}
                                            {{ beneficiaire.nom }} {{ beneficiaire.prenom }}
                                        </h5>
                                        {% if beneficiaire.dateAccueil %}
                                            <div class="beneficiaire-date">
                                                <i class="fas fa-calendar-alt me-1"></i>
                                                Accueilli le {{ beneficiaire.dateAccueil|date('d/m/Y') }}
                                            </div>
                                        {% else %}
                                            <div class="beneficiaire-date text-muted">
                                                <i class="fas fa-info-circle me-1"></i>
                                                Date d'accueil non renseignée
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- Pied de carte avec action -->
                                <div class="card-footer-modern">
                                    <a href="{{ path('app_dossier_beneficiaire', {'id': beneficiaire.id}) }}"
                                       class="btn-open-dossier">
                                        <i class="fa-solid fa-folder icon-folder me-2"></i>
                                        Ouvrir le dossier
                                        <i class="fas fa-arrow-right ms-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <!-- Compteur de résultats -->
                <div class="results-counter" id="resultsCounter">
                    <i class="fas fa-users me-2"></i>
                    <span id="totalCount"
                          data-beneficiaire-search-target="totalCount">{{ beneficiaires|length }}</span> bénéficiaire(s) affiché(s)
                </div>
            {% else %}
                <!-- Message quand filtres appliqués mais aucun résultat -->
                {% if selectedPsychologue or dateDebut or dateFin %}
                    <div class="alert alert-info text-center mt-4">
                        <i class="fas fa-filter me-2"></i>
                        Aucun bénéficiaire ne correspond aux critères de filtrage sélectionnés
                    </div>
                    <div class="text-center mt-3">
                        <a href="{{ path('app_beneficiaire_index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>
                            Réinitialiser les filtres
                        </a>
                    </div>
                {% else %}
                    <!-- État vide moderne (aucun bénéficiaire du tout) -->
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <h3 class="empty-title">Aucun bénéficiaire enregistré</h3>
                        <p class="empty-description">
                            Commencez par ajouter votre premier bénéficiaire<br>
                            pour débuter l'accompagnement psychologique
                        </p>
                        <a href="{{ path('app_beneficiaire_new') }}" class="btn btn-action btn-success">
                            <i class="fas fa-plus-circle me-2"></i>
                            Ajouter un bénéficiaire
                        </a>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>

    <footer>
        <div class="footer-content">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="text-center text-md-center" style="font-weight: bold">
                        <p class="mb-0"> Version 2.0 |
                            Copyright © {{ 'now'|date('Y') }}  <a href="https://cfp02.info/" target="_blank" class="bash">
                                CFP02
                            </a> | Tous droits réservés |
                            <a href="https://www.linkedin.com/in/basheer-elkurdi/" target="_blank" class="bash">
                                Création : Basheer El kurdi <i class="fa-brands fa-linkedin"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
{% endblock %}