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

{% block title %}Archives - Bénéficiaires{% 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">
						<a href="{{ path('app_beneficiaire_index') }}" aria-label="Accueil">
							<img src="{{ asset('images/favicon.png') }}" alt="APSI Logo" class="logo-img">
						</a>
					</div>
					<div class="header-separator"></div>
					<div>
						<a href="{{ path('app_beneficiaire_index') }}">
							<img src="{{ asset('images/logo-apsi-modern.png') }}" alt="APSI Logo" class="logo-apsi" style="width: 75px;">
						</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-action btn-danger">
							<i class="fas fa-sign-out-alt me-1"></i>
							Déconnexion
						</a>
					{% endif %}
				</div>
			</div>
		</div>
	</div>

	<!-- Contenu principal -->
	<div class="main-container">
		<div class="container-fluid" style="background: #f9f9f9" 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="fa-solid fa-box-archive me-2"></i>
							Archives — Périodes terminées
						</h2>
					</div>
					<div class="col-md-6 text-end">
						<a href="{{ path('app_beneficiaire_index') }}" class="btn btn-action btn-retour">
							<i class="fas fa-arrow-left me-1"></i>
							Retour aux bénéficiaires
						</a>
					</div>
				</div>

				<!-- Filtres -->
				<div class="filter-container d-flex gap-3 align-items-end 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 archivé 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="fa-solid fa-filter" style="font-size: 20px; color: #64748b;"></i>
						</div>

						<div class="filter-inputs">
							{% 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 %}

							{% if structures is defined and structures|length > 0 %}
								<div class="filter-group">
									<label for="structure">UTAS</label>
									<select name="structure" id="structure" class="filter-select">
										<option value="">Toutes les structures</option>
										{% for s in structures %}
											<option value="{{ s }}" {% if selectedStructure == s %} selected {% endif %}>{{ s }}</option>
										{% endfor %}
									</select>
								</div>
							{% endif %}

							<div class="filter-group" data-controller="flatpickr" data-flatpickr-mode-value="range">
								<label for="date-range">Période</label>
								<input type="text" id="date-range" class="filter-date w-100" placeholder="Sélectionner" style="cursor: pointer;" data-flatpickr-target="input">
								<input type="hidden" name="date_debut" data-flatpickr-target="start" value="{{ dateDebut }}">
								<input type="hidden" name="date_fin" data-flatpickr-target="end" 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 or selectedStructure %}
								<a href="{{ path('app_beneficiaire_archives') }}" 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 %}
				<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" style="opacity: 0.85;">

								{% if beneficiaire.relation is defined and beneficiaire.relation %}
									<div class="creator-badge">
										<i class="fa-solid fa-user-pen"></i>
										{{ beneficiaire.relation.prenom }} {{ beneficiaire.relation.nom }}
									</div>
								{% endif %}

								<div class="periode-terminee-badge">
									<i class="fas fa-check-circle"></i>
									<span>Période terminée</span>
								</div>

								<div class="card-header-modern">
									<div class="beneficiaire-avatar" style="background: #94a3b8;">
										<i class="fa-solid 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>

								<div class="card-footer-modern d-flex gap-2">
									<a href="{{ path('app_dossier_beneficiaire', {'id': beneficiaire.id}) }}" class="btn-open-dossier" style="flex:1;">
										<i class="fa-solid fa-folder icon-folder me-2"></i>
										Ouvrir le dossier
										<i class="fas fa-arrow-right ms-2"></i>
									</a>
									<a href="{{ path('app_print_select', {'id': beneficiaire.id}) }}" title="Imprimer" class="btn-action btn-retour" style="display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex-shrink:0;">
										<i class="fas fa-print" style="padding-left:6px;"></i>
									</a>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>

				<div class="results-counter" id="resultsCounter">
					<i class="fa-solid fa-box-archive me-2"></i>
					<span id="totalCount" data-beneficiaire-search-target="totalCount">{{ beneficiaires|length }}</span>
					dossier(s) archivé(s)
				</div>
			{% else %}
				<div class="empty-state">
					<div class="empty-icon">
						<i class="fa-solid fa-box-archive"></i>
					</div>
					<h3 class="empty-title">Aucun dossier archivé</h3>
					<p class="empty-description">
						Les bénéficiaires dont la période est terminée apparaîtront ici.
					</p>
					<a href="{{ path('app_beneficiaire_index') }}" class="btn btn-action btn-retour">
						<i class="fas fa-arrow-left me-2"></i>
						Retour aux bénéficiaires
					</a>
				</div>
			{% 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 %}