<?php
// Définir le nom de la page pour le SEO
$current_page = 'testimonials';

// Inclure le head avec SEO
include 'includes/head.php'; 
?>
<!-- CSS supplémentaire pour corriger le loader -->
<link rel="stylesheet" href="css/loader-fix.css" />
<!--head end-->
<body id="default_theme" class="it_service testimonial-page">
<?php
// Inclusion des fichiers de configuration et de base de données
require_once 'config/config.php';
require_once 'config/db.php';

// Pagination
$page = intval($_GET['page'] ?? 1);
$per_page = 9;
$offset = ($page - 1) * $per_page;

// Récupération des témoignages approuvés
$testimonials = [];
$total_testimonials = 0;

try {
    // Compter le total des témoignages approuvés
    $total_result = fetchOne("SELECT COUNT(*) as total FROM testimonials WHERE approuve = 1");
    $total_testimonials = $total_result['total'];
    
    // Récupérer les témoignages pour la page courante
    $testimonials = fetchAll("
        SELECT nom_client, entreprise, poste, message, note, image_client, date_creation, service_utilise
        FROM testimonials 
        WHERE approuve = 1 
        ORDER BY date_creation DESC 
        LIMIT :limit OFFSET :offset
    ", ['limit' => $per_page, 'offset' => $offset]);
} catch (Exception $e) {
    if (DEBUG) {
        echo "Erreur : " . $e->getMessage();
    }
}

$total_pages = ceil($total_testimonials / $per_page);
?>

<!-- loader -->
<div class="bg_load" id="page-loader"> 
    <img class="loader_animation" src="images/loaders/loader_1.png" alt="Chargement..." /> 
</div>
<!-- end loader -->
<!-- header -->
<header id="default_header" class="header_style_1">
  <!-- header top -->
<?php include 'includes/topbar.php';?>
  <!-- end header top -->
  <!-- header bottom -->
 <?php include 'includes/navbar.php';?>
  <!-- header bottom end -->
</header>
<!-- end header -->

<!-- section -->

<!-- inner page banner avec image de fond aléatoire et overlay noir -->
<?php
$bg_images = glob('images/bg/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$random_bg = !empty($bg_images) ? $bg_images[array_rand($bg_images)] : 'images/bg/inner_page_banner.jpg';
?>
<style>
  #inner_banner.overlay-black {
    position: relative;
    overflow: hidden;
    z-index: -2;
  }
  #inner_banner.overlay-black::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
  }
  #inner_banner.overlay-black > .container {
    position: relative;
    z-index: 2;
  }
</style>
<div id="inner_banner" class="section inner_banner_section overlay-black" style="background: url('<?php echo $random_bg; ?>') center center/cover no-repeat;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="title-holder">
            <div class="title-holder-cell text-left">
              <h1 class="page-title">Témoignages Clients</h1>
              <ol class="breadcrumb">
                <li><a href="index.php">Accueil</a></li>
                <li class="active">Témoignages</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end inner page banner -->

<!-- section -->
<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2 style="text-transform: none;">💬 Ce Que Disent Nos Clients</h2>
            <p class="large">
              Découvrez les expériences authentiques de nos clients satisfaits. 
              Leurs témoignages reflètent notre engagement envers l'excellence et la qualité de service.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Section des témoignages -->
<div class="section padding_layout_1" style="padding-top: 0;">
  <div class="container">
    
    <!-- Statistiques rapides -->
    <div class="row mb-5">
      <div class="col-md-4 text-center">
        <div style="border: 2px solid #007bff; color: white; padding: 20px; border-radius: 10px;">
          <i class="fa fa-users" style="font-size: 2rem; margin-bottom: 10px; color: #0056b3;"></i>
          <h3><?php echo $total_testimonials; ?></h3>
          <p>Clients Satisfaits</p>
        </div>
      </div>
      <div class="col-md-4 text-center">
        <div style="border: 2px solid #28a745; color: white; padding: 20px; border-radius: 10px;">
          <i class="fa fa-star" style="font-size: 2rem; margin-bottom: 10px; color: #28a745;"></i>
          <?php 
          $avg_rating = fetchOne("SELECT AVG(note) as avg_note FROM testimonials WHERE approuve = 1");
          $average = $avg_rating['avg_note'] ? number_format($avg_rating['avg_note'], 1) : '0';
          ?>
          <h3><?php echo $average; ?>/5</h3>
          <p>Note Moyenne</p>
        </div>
      </div>
      <div class="col-md-4 text-center">
        <div style="border: 2px solid #ffc107; color: white; padding: 20px; border-radius: 10px;">
          <i class="fa fa-cogs" style="font-size: 2rem; margin-bottom: 10px; color: #ffc107;"></i>
          <?php 
          $services_count = fetchOne("SELECT COUNT(DISTINCT service_utilise) as count FROM testimonials WHERE approuve = 1 AND service_utilise IS NOT NULL AND service_utilise != ''");
          ?>
          <h3><?php echo $services_count['count']; ?></h3>
          <p>Services Évalués</p>
        </div>
      </div>
    </div>
    
    <!-- Grille des témoignages -->
    <div class="row">
      <?php if (!empty($testimonials)): ?>
        <?php foreach ($testimonials as $testimonial): ?>
          <div class="col-md-4 mb-4">
            <div class="testimonial-card" style="background: transparent; border: 2px solid #007bff; border-radius: 15px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); height: 100%; display: flex; flex-direction: column;">
              
              <!-- En-tête du témoignage -->
              <div class="testimonial-header" style="display: flex; align-items: center; margin-bottom: 15px;">
                <div class="client-photo" style="margin-right: 15px;">
                  <?php if ($testimonial['image_client']): ?>
                    <img src="<?php echo htmlspecialchars($testimonial['image_client']); ?>" 
                         alt="<?php echo htmlspecialchars($testimonial['nom_client']); ?>"
                         style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #007bff;">
                  <?php else: ?>
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #007bff, #0056b3); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.5rem;">
                      <?php echo strtoupper(substr($testimonial['nom_client'], 0, 1)); ?>
                    </div>
                  <?php endif; ?>
                </div>
                <div class="client-info" style="flex: 1;">
                  <h5 style="margin: 0; color: #333; font-weight: 600;">
                    <?php echo htmlspecialchars($testimonial['nom_client']); ?>
                  </h5>
                  <?php if ($testimonial['poste'] || $testimonial['entreprise']): ?>
                    <small style="color: #666;">
                      <?php 
                        $position = '';
                        if ($testimonial['poste']) {
                          $position = htmlspecialchars($testimonial['poste']);
                        }
                        if ($testimonial['entreprise']) {
                          $position .= $position ? ', ' : '';
                          $position .= htmlspecialchars($testimonial['entreprise']);
                        }
                        echo $position;
                      ?>
                    </small>
                  <?php endif; ?>
                </div>
              </div>
              
              <!-- Note et service -->
              <div class="testimonial-rating" style="margin-bottom: 15px;">
                <div style="margin-bottom: 5px;">
                  <?php for ($i = 1; $i <= 5; $i++): ?>
                    <i class="fa fa-star" style="color: <?php echo $i <= $testimonial['note'] ? '#ffc107' : '#ddd'; ?>; margin-right: 2px;"></i>
                  <?php endfor; ?>
                  <span style="color: #666; font-size: 0.9rem; margin-left: 5px;">
                    (<?php echo $testimonial['note']; ?>/5)
                  </span>
                </div>
                <?php if ($testimonial['service_utilise']): ?>
                  <div style="background: #f8f9fa; color: #007bff; padding: 5px 10px; border-radius: 15px; font-size: 0.8rem; display: inline-block;">
                    <i class="fa fa-cog" style="margin-right: 5px;"></i>
                    <?php echo htmlspecialchars($testimonial['service_utilise']); ?>
                  </div>
                <?php endif; ?>
              </div>
              
              <!-- Message du témoignage -->
              <div class="testimonial-content" style="flex: 1; margin-bottom: 15px;">
                <p style="color: #555; line-height: 1.6; font-style: italic; margin: 0;">
                  "<?php echo nl2br(htmlspecialchars($testimonial['message'])); ?>"
                </p>
              </div>
              
              <!-- Date -->
              <div class="testimonial-date" style="text-align: right; color: #999; font-size: 0.8rem; border-top: 1px solid #eee; padding-top: 10px;">
                <i class="fa fa-calendar" style="margin-right: 5px;"></i>
                <?php echo date('d/m/Y', strtotime($testimonial['date_creation'])); ?>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      <?php else: ?>
        <div class="col-md-12 text-center py-5">
          <i class="fa fa-comments" style="font-size: 4rem; color: #ddd; margin-bottom: 20px;"></i>
          <h4 style="color: #666;">Aucun témoignage disponible</h4>
          <p style="color: #999;">Soyez le premier à partager votre expérience avec SERVICES-AE !</p>
          <a href="add-testimonial.php" class="btn btn-primary" style="margin-top: 15px;">
            <i class="fa fa-plus"></i> Ajouter un Témoignage
          </a>
        </div>
      <?php endif; ?>
    </div>
    
    <!-- Pagination -->
    <?php if ($total_pages > 1): ?>
      <div class="row mt-5">
        <div class="col-md-12">
          <nav aria-label="Navigation des témoignages">
            <ul class="pagination justify-content-center">
              
              <!-- Bouton Précédent -->
              <?php if ($page > 1): ?>
                <li class="page-item">
                  <a class="page-link" href="?page=<?php echo $page - 1; ?>">
                    <i class="fa fa-chevron-left"></i> Précédent
                  </a>
                </li>
              <?php endif; ?>
              
              <!-- Numéros de page -->
              <?php for ($i = 1; $i <= $total_pages; $i++): ?>
                <?php if ($i == $page): ?>
                  <li class="page-item active">
                    <span class="page-link"><?php echo $i; ?></span>
                  </li>
                <?php else: ?>
                  <li class="page-item">
                    <a class="page-link" href="?page=<?php echo $i; ?>"><?php echo $i; ?></a>
                  </li>
                <?php endif; ?>
              <?php endfor; ?>
              
              <!-- Bouton Suivant -->
              <?php if ($page < $total_pages): ?>
                <li class="page-item">
                  <a class="page-link" href="?page=<?php echo $page + 1; ?>">
                    Suivant <i class="fa fa-chevron-right"></i>
                  </a>
                </li>
              <?php endif; ?>
            </ul>
          </nav>
        </div>
      </div>
    <?php endif; ?>
    
    <!-- Call to Action -->
    <div class="row mt-5">
      <div class="col-md-12 text-center">
        <div style="background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 40px; border-radius: 15px;">
          <h3 style="color: #333; margin-bottom: 15px;">Partagez Votre Expérience</h3>
          <p style="color: #666; margin-bottom: 25px;">
            Vous avez utilisé nos services ? Votre avis compte ! 
            Aidez d'autres clients en partageant votre expérience.
          </p>
          <a href="add-testimonial.php" class="btn btn-primary btn-lg" style="padding: 12px 30px; border-radius: 5px; border: none; box-shadow: 0 4px 15px rgba(0,123,255,0.3); transition: all 0.3s ease;">
            <i class="fa fa-edit"> Laisser un Témoignage</i>
          </a>
        </div>
      </div>
    </div>
    
  </div>
</div>
<!-- end section -->

<!-- footer -->
<?php include 'includes/footer.php';?>
<!-- end footer -->

<style>
.testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid #007bff !important;
  background: transparent !important;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  border-color: #0056b3 !important;
}

.pagination .page-link {
  color: #007bff;
  border: 1px solid #dee2e6;
  padding: 8px 16px;
}

.pagination .page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
}

.pagination .page-link:hover {
  background-color: #e9ecef;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0056b3, #004085) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,123,255,0.4) !important;
}

@media (max-width: 768px) {
  .testimonial-card {
    margin-bottom: 20px;
  }
  
  .testimonial-header {
    flex-direction: column;
    text-align: center;
  }
  
  .testimonial-header .client-photo {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>

<!-- core JavaScript files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>

<!-- Script pour masquer le loader -->
<script>
// Masquage immédiat et robuste du loader
(function() {
    function hideLoader() {
        const loader = document.getElementById('page-loader');
        if (loader) {
            loader.style.opacity = '0';
            loader.style.transition = 'opacity 0.3s ease';
            setTimeout(() => {
                loader.style.display = 'none';
            }, 300);
        }
    }
    
    // Méthode 1: DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', hideLoader);
    } else {
        hideLoader();
    }
    
    // Méthode 2: jQuery si disponible
    if (typeof jQuery !== 'undefined') {
        $(document).ready(function() {
            $("#page-loader").fadeOut("fast");
        });
    }
    
    // Méthode 3: Force après 1 seconde
    setTimeout(hideLoader, 1000);
})();
</script>
</body>
</html>