<!DOCTYPE html>
<!--head-->
<?php 
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">
<!-- 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 -->
<div class="section inner_page_banner">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <h3>Partagez Votre ExpÃ©rience</h3>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end section -->

<!-- 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;">ðŸ’¬ Ajoutez Votre TÃ©moignage</h2>
            <p class="large">Votre avis compte ! Partagez votre expÃ©rience avec SERVICES-AE et aidez d'autres clients Ã  nous dÃ©couvrir.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Formulaire de tÃ©moignage -->
<div class="section padding_layout_1" style="padding-top: 0;">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 offset-lg-2">
        <div class="full">
          
          <!-- Messages d'alerte -->
          <div id="alert-container"></div>
          
          <div class="contact_form" style="background: #f8f9fa; padding: 40px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
            <form id="testimonialForm" method="POST" enctype="multipart/form-data">
              <div class="row">
                
                <!-- Informations personnelles -->
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="nom_client" class="form-label">
                      <i class="fa fa-user" style="color: #007bff; margin-right: 8px;"></i>
                      Nom Complet *
                    </label>
                    <input type="text" class="form-control" id="nom_client" name="nom_client" required>
                  </div>
                </div>
                
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="email" class="form-label">
                      <i class="fa fa-envelope" style="color: #007bff; margin-right: 8px;"></i>
                      Email *
                    </label>
                    <input type="email" class="form-control" id="email" name="email" required>
                    <small class="form-text text-muted">Ne sera pas affichÃ© publiquement</small>
                  </div>
                </div>
                
                <!-- Informations professionnelles -->
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="entreprise" class="form-label">
                      <i class="fa fa-building" style="color: #007bff; margin-right: 8px;"></i>
                      Entreprise
                    </label>
                    <input type="text" class="form-control" id="entreprise" name="entreprise" placeholder="Nom de votre entreprise">
                  </div>
                </div>
                
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="poste" class="form-label">
                      <i class="fa fa-briefcase" style="color: #007bff; margin-right: 8px;"></i>
                      Poste / Fonction
                    </label>
                    <input type="text" class="form-control" id="poste" name="poste" placeholder="Votre poste">
                  </div>
                </div>
                
                <!-- Ã‰valuation -->
                <div class="col-md-12">
                  <div class="form-group">
                    <label class="form-label">
                      <i class="fa fa-star" style="color: #ffc107; margin-right: 8px;"></i>
                      Ã‰valuation * <span id="rating-text" style="color: #007bff; font-weight: bold;"></span>
                    </label>
                    <div class="rating-stars" style="font-size: 2rem; margin: 10px 0;">
                      <span class="star" data-rating="1">â˜†</span>
                      <span class="star" data-rating="2">â˜†</span>
                      <span class="star" data-rating="3">â˜†</span>
                      <span class="star" data-rating="4">â˜†</span>
                      <span class="star" data-rating="5">â˜†</span>
                    </div>
                    <input type="hidden" id="note" name="note" required>
                  </div>
                </div>
                
                <!-- Service utilisÃ© -->
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="service_utilise" class="form-label">
                      <i class="fa fa-cogs" style="color: #007bff; margin-right: 8px;"></i>
                      Service UtilisÃ©
                    </label>
                    <select class="form-control" id="service_utilise" name="service_utilise">
                      <option value="">SÃ©lectionnez le service...</option>
                      <option value="Maintenance Informatique">Maintenance Informatique</option>
                      <option value="Installation RÃ©seaux">Installation RÃ©seaux</option>
                      <option value="SystÃ¨mes de Surveillance">SystÃ¨mes de Surveillance</option>
                      <option value="DÃ©veloppement Web">DÃ©veloppement Web</option>
                      <option value="Support Technique">Support Technique</option>
                      <option value="Autre">Autre</option>
                    </select>
                  </div>
                </div>
                
                <!-- TÃ©moignage -->
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="message" class="form-label">
                      <i class="fa fa-comment" style="color: #007bff; margin-right: 8px;"></i>
                      Votre TÃ©moignage *
                    </label>
                    <textarea class="form-control" id="message" name="message" rows="6" required 
                              placeholder="Partagez votre expÃ©rience avec SERVICES-AE : qualitÃ© du service, professionnalisme de l'Ã©quipe, satisfaction globale..."></textarea>
                    <small class="form-text text-muted">
                      <span id="char-count">0</span>/500 caractÃ¨res
                    </small>
                  </div>
                </div>
                
                <!-- Photo optionnelle -->
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="photo_client" class="form-label">
                      <i class="fa fa-camera" style="color: #007bff; margin-right: 8px;"></i>
                      Photo (Optionnelle)
                    </label>
                    <input type="file" class="form-control" id="photo_client" name="photo_client" accept="image/*">
                    <small class="form-text text-muted">Format JPG, PNG ou GIF - Max 2MB</small>
                  </div>
                </div>
                
                <!-- Consentement -->
                <div class="col-md-12">
                  <div class="form-check" style="margin: 20px 0;">
                    <input type="checkbox" class="form-check-input" id="consentement" name="consentement" required>
                    <label class="form-check-label" for="consentement">
                      J'accepte que mon tÃ©moignage soit publiÃ© sur le site web de SERVICES-AE et utilisÃ© Ã  des fins marketing. 
                      <span style="color: #6c757d;">(Vos coordonnÃ©es restent privÃ©es)</span>
                    </label>
                  </div>
                </div>
                
                <!-- Captcha supprimÃ© -->
                
                <!-- Bouton d'envoi -->
                <div class="col-md-12 text-center">
                  <button type="submit" class="btn btn-primary btn-lg" style="padding: 12px 40px; border-radius: 25px; background: linear-gradient(135deg, #007bff, #0056b3); border: none;">
                    <i class="fa fa-paper-plane" style="margin-right: 8px;"></i>
                    Publier Mon TÃ©moignage
                  </button>
                </div>
                
              </div>
            
<script src='https://www.google.com/recaptcha/api.js?render=6LcFBfIrAAAAAIKKEsTvoxV0TOqBzIUeJrUOP-4s'></script>
<script>grecaptcha.ready(function() { grecaptcha.execute('6LcFBfIrAAAAAIKKEsTvoxV0TOqBzIUeJrUOP-4s', {action: 'submit'}).then(function(token) { document.getElementById('g-recaptcha-response').value = token; }); });</script>
<input type='hidden' id='g-recaptcha-response' name='g-recaptcha-response'>
</form>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Section informative -->
<div class="section padding_layout_1" style="background: #f8f9fa;">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="text-center" style="padding: 20px;">
          <i class="fa fa-shield" style="font-size: 3rem; color: #28a745; margin-bottom: 15px;"></i>
          <h4>ConfidentialitÃ©</h4>
          <p>Vos informations personnelles sont protÃ©gÃ©es et ne seront jamais partagÃ©es.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="text-center" style="padding: 20px;">
          <i class="fa fa-check-circle" style="font-size: 3rem; color: #007bff; margin-bottom: 15px;"></i>
          <h4>ModÃ©ration</h4>
          <p>Tous les tÃ©moignages sont vÃ©rifiÃ©s avant publication pour garantir leur authenticitÃ©.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="text-center" style="padding: 20px;">
          <i class="fa fa-users" style="font-size: 3rem; color: #ffc107; margin-bottom: 15px;"></i>
          <h4>CommunautÃ©</h4>
          <p>Aidez d'autres clients Ã  dÃ©couvrir nos services grÃ¢ce Ã  votre expÃ©rience.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end section -->

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

<!-- JavaScript pour l'interactivitÃ© -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestion des Ã©toiles de notation
    const stars = document.querySelectorAll('.star');
    const ratingInput = document.getElementById('note');
    const ratingText = document.getElementById('rating-text');
    
    const ratingTexts = {
        1: '(TrÃ¨s insatisfait)',
        2: '(Insatisfait)',
        3: '(Correct)',
        4: '(Satisfait)',
        5: '(TrÃ¨s satisfait)'
    };
    
    stars.forEach(star => {
        star.addEventListener('click', function() {
            const rating = parseInt(this.getAttribute('data-rating'));
            ratingInput.value = rating;
            ratingText.textContent = ratingTexts[rating];
            
            // Mettre Ã  jour l'affichage des Ã©toiles
            stars.forEach((s, index) => {
                if (index < rating) {
                    s.textContent = 'â˜…';
                    s.style.color = '#ffc107';
                } else {
                    s.textContent = 'â˜†';
                    s.style.color = '#ddd';
                }
            });
        });
        
        star.addEventListener('mouseover', function() {
            const rating = parseInt(this.getAttribute('data-rating'));
            stars.forEach((s, index) => {
                if (index < rating) {
                    s.style.color = '#ffc107';
                } else {
                    s.style.color = '#ddd';
                }
            });
        });
    });
    
    // RÃ©initialiser au survol
    document.querySelector('.rating-stars').addEventListener('mouseleave', function() {
        const currentRating = parseInt(ratingInput.value) || 0;
        stars.forEach((s, index) => {
            if (index < currentRating) {
                s.style.color = '#ffc107';
            } else {
                s.style.color = '#ddd';
            }
        });
    });
    
    // Compteur de caractÃ¨res
    const messageTextarea = document.getElementById('message');
    const charCount = document.getElementById('char-count');
    
    messageTextarea.addEventListener('input', function() {
        const length = this.value.length;
        charCount.textContent = length;
        
        if (length > 500) {
            charCount.style.color = '#dc3545';
            this.value = this.value.substring(0, 500);
            charCount.textContent = '500';
        } else {
            charCount.style.color = '#6c757d';
        }
    });
    
    // Soumission du formulaire
    document.getElementById('testimonialForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // VÃ©rifier que la note est sÃ©lectionnÃ©e
        if (!ratingInput.value) {
            showAlert('Veuillez sÃ©lectionner une note avant de soumettre votre tÃ©moignage.', 'warning');
            return;
        }
        
    // Captcha supprimÃ©
        
        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        // DÃ©sactiver le bouton et afficher le chargement
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Envoi en cours...';
        
  fetch('process-testimonial.php', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            // VÃ©rifier si la rÃ©ponse est OK
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            // VÃ©rifier le content-type
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                // Si ce n'est pas du JSON, lire comme texte pour debug
                return response.text().then(text => {
                    console.error('RÃ©ponse non-JSON reÃ§ue:', text);
                    throw new Error('RÃ©ponse serveur invalide (pas JSON)');
                });
            }
            
            return response.json();
        })
        .then(data => {
            console.log('RÃ©ponse reÃ§ue:', data);
            
            if (data.success) {
                showAlert(data.message, 'success');
                document.getElementById('testimonialForm').reset();
                ratingInput.value = '';
                ratingText.textContent = '';
                stars.forEach(s => {
                    s.textContent = 'â˜†';
                    s.style.color = '#ddd';
                });
                charCount.textContent = '0';
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Erreur complÃ¨te:', error);
            showAlert('Erreur de communication: ' + error.message, 'error');
        })
        .finally(() => {
            // RÃ©activer le bouton
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    });
});

function showAlert(message, type) {
    const alertContainer = document.getElementById('alert-container');
    const alertClass = type === 'success' ? 'alert-success' : 
                     type === 'warning' ? 'alert-warning' : 'alert-danger';
    
    const alertHTML = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="fa fa-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'times-circle'}"></i>
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;
    
    alertContainer.innerHTML = alertHTML;
    
    // Faire dÃ©filer vers l'alerte
    alertContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    
    // Supprimer automatiquement aprÃ¨s 5 secondes
    setTimeout(() => {
        const alert = alertContainer.querySelector('.alert');
        if (alert) {
            alert.classList.remove('show');
            setTimeout(() => alertContainer.innerHTML = '', 150);
        }
    }, 5000);
}
</script>

<style>
.star {
    cursor: pointer;
    font-size: 2rem;
    color: #ddd;
    margin-right: 5px;
    transition: color 0.2s ease;
}

.star:hover {
    color: #ffc107;
}

.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.alert {
    border-radius: 8px;
    border: none;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da, #f1b0b7);
    color: #721c24;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
}

.contact_form {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</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>