{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans " GLOCAL IMPACT 3A - Nos Projets" %} {% endblock %}

<!--<script>
alert("JavaScript chargé");
</script>-->

{% block content %}

<section class="projets-section py-5">
    <div class="container">
        
        <!-- ===== EN-TÊTE ===== -->
        <div class="section-header text-center mb-5">
            <h1 class="display-4 fw-bold">{% trans "NOS PROJETS" %}</h1>
            <p class="lead text-muted">{% trans "Réalisations concrètes pour un impact durable" %}</p>
            <div class="divider mx-auto" style="width: 80px; height: 4px; background: #28a745;"></div>
        </div>
        
        <!-- ===== FILTRES ===== -->
        <div class="filters-section mb-4">
            <div class="d-flex flex-wrap justify-content-center gap-2">
                {% for secteur in secteurs %}
                <a href="?secteur={% if secteur.slug != 'tous' %}{{ secteur.slug }}{% endif %}" 
                   class="btn {% if secteur.active %}btn-success{% else %}btn-outline-success{% endif %} rounded-pill px-4">
                    {{ secteur.icon }} {{ secteur.nom }}
                </a>
                {% endfor %}
            </div>
        </div>
        
        <!-- ===== STATISTIQUES ===== -->
        <div class="impact-stats mb-5 p-4 bg-light rounded-4">
            <h2 class="text-center mb-4">{% trans "NOTRE IMPACT EN CHIFFRES__TEST123" %}</h2>
            <div class="row g-4 text-center">
                <div class="col-6 col-md-3">
                    <div class="stat-card p-3 bg-white rounded-3 shadow-sm">
			<span class="stat-number display-6 fw-bold text-success">
  		<span class="stat-number display-6 fw-bold text-success">
  DEBUG stats={{ stats|default:"(stats absent)" }}
</span>		
			
                        <span class="stat-number display-6 fw-bold text-success">{{ stats.nombre_projets }}</span>
                        <p class="stat-label text-muted small">{% trans "Projets réalisés" %}</p>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-card p-3 bg-white rounded-3 shadow-sm">
                        <span class="stat-number display-6 fw-bold text-primary">{{ stats.nombre_beneficiaires|default:"0" }}</span>
                        <p class="stat-label text-muted small">{% trans "Bénéficiaires directs" %}</p>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-card p-3 bg-white rounded-3 shadow-sm">
                        <span class="stat-number display-6 fw-bold text-info">{{ stats.nombre_partenaires|default:"0" }}</span>
                        <p class="stat-label text-muted small">{% trans "Partenaires impliqués" %}</p>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-card p-3 bg-white rounded-3 shadow-sm">
                        <span class="stat-number display-6 fw-bold text-warning">{{ stats.nombre_regions|default:"0" }}</span>
                        <p class="stat-label text-muted small">{% trans "Régions couvertes" %}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- ===== LISTE DES PROJETS ===== -->
        <div class="projets-grid">
            <div class="row g-4">
                {% for projet in projets %}
                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 shadow-sm hover-shadow transition-all">
                        {% if projet.image_principale %}
                        <img src="{{ projet.image_principale.url }}" class="card-img-top" alt="{{ projet.titre }}" style="height: 220px; object-fit: cover;">
                        {% else %}
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 220px;">
                            <span class="display-1 text-muted">📋</span>
                        </div>
                        {% endif %}
                        <div class="card-body">
                            <span class="badge bg-success mb-2">{{ projet.get_secteur_display }}</span>
                            <span class="badge bg-info mb-2">{{ projet.get_domaines_expertise_display }}</span>
                            <h5 class="card-title">{{ projet.titre }}</h5>
                            <p class="card-text text-muted small">{{ projet.resume|truncatechars:120 }}</p>
                            <div class="projet-meta d-flex justify-content-between align-items-center mt-3">
                                <small class="text-muted">
                                    <i class="bi bi-calendar-event"></i> {{ projet.date_fin|date:"d/m/Y" }}
                                </small>
                                <small class="text-muted">
                                    <i class="bi bi-people"></i> {{ projet.nombre_beneficiaires }}
                                </small>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                            <a href="{% url 'projet_detail' projet.slug %}" class="btn btn-outline-success w-100">
                                {% trans "Voir le projet" %} →
                            </a>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12 text-center py-5">
                    <p class="text-muted">{% trans "Aucun projet trouvé dans cette catégorie." %}</p>
                </div>
                {% endfor %}
            </div>
        </div>
        
        <!-- ===== PAGINATION ===== -->
        {% if projets.has_other_pages %}
        <nav class="mt-4" aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if projets.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ projets.previous_page_number }}{% if secteur_actif and secteur_actif != 'tous' %}&secteur={{ secteur_actif }}{% endif %}">
                        &laquo;
                    </a>
                </li>
                {% endif %}
                
                {% for num in projets.paginator.page_range %}
                <li class="page-item {% if projets.number == num %}active{% endif %}">
                    <a class="page-link" href="?page={{ num }}{% if secteur_actif and secteur_actif != 'tous' %}&secteur={{ secteur_actif }}{% endif %}">
                        {{ num }}
                    </a>
                </li>
                {% endfor %}
                
                {% if projets.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ projets.next_page_number }}{% if secteur_actif and secteur_actif != 'tous' %}&secteur={{ secteur_actif }}{% endif %}">
                        &raquo;
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        
        <!-- ===== PROJETS RÉCENTS ===== -->
        <div class="projets-recents mt-5">
            <h2 class="text-center mb-4">{% trans "PROJETS RÉCENTS" %}</h2>
            <div class="row g-4">
                {% for projet in projets_recents %}
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        {% if projet.image_principale %}
                        <img src="{{ projet.image_principale.url }}" class="card-img-top" alt="{{ projet.titre }}" style="height: 180px; object-fit: cover;">
                        {% endif %}
                        <div class="card-body">
                            <span class="badge bg-success mb-2">{{ projet.get_secteur_display }}</span>
                            <h5 class="card-title">{{ projet.titre }}</h5>
                            <p class="card-text small">{{ projet.resume|truncatechars:80 }}</p>
                        </div>
                        <div class="card-footer bg-transparent d-flex justify-content-between align-items-center">
                            <small class="text-muted">
                                <i class="bi bi-calendar"></i> {{ projet.date_fin|date:"d/m/Y" }}
                            </small>
                            <a href="{% url 'projet_detail' projet.slug %}" class="btn btn-sm btn-success">
                                {% trans "Détails" %}
                            </a>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12 text-center">
                    <p class="text-muted">{% trans "Aucun projet récent" %}</p>
                </div>
                {% endfor %}
            </div>
        </div>
        
    </div>
</section>

<style>
    .hover-shadow:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        transition: all 0.3s ease;
    }
    .stat-card:hover {
        transform: scale(1.05);
        transition: all 0.3s ease;
    }
    .transition-all {
        transition: all 0.3s ease;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const filtres = document.querySelectorAll('.filtre-btn');
  const projets = document.querySelectorAll('.projet-card');

  filtres.forEach(filtre => {
    filtre.addEventListener('click', function(e) {
      e.preventDefault();

      filtres.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      const valeur = this.dataset.filtre;

      projets.forEach(projet => {
        const categorie = projet.dataset.categorie;
        projet.style.display = (valeur === 'tous' || categorie === valeur) ? '' : 'none';
      });
    });
  });
});
</script>

 {% endblock %}