<?php include 'includes/head.php'; ?>
<body id="default_theme" class="contact_us">
<!-- loader -->
<div class="bg_load"> <img class="loader_animation" src="images/loaders/loader_1.png" alt="#" /> </div>
<!-- end loader -->

<?php include 'includes/topbar.php'; ?>
<?php include 'includes/navbar.php'; ?>

<!-- inner page banner -->
<div id="inner_banner" class="section inner_banner_section">
  <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">Contactez-Nous</h1>
              <ol class="breadcrumb">
                <li><a href="index.php">Accueil</a></li>
                <li class="active">Contact</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end inner page banner -->

<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 col-xs-12"></div>
      <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
          <div class="full">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 adress_cont margin_bottom_30">
              <h4>SERVICES-AE</h4>
              <p>Votre partenaire informatique de confiance au Maroc. Solutions professionnelles pour tous vos besoins IT.</p>
              <div class="information_bottom left-side margin_bottom_20_all">
                <div class="icon_bottom"> <i class="fa fa-map-marker" aria-hidden="true"></i> </div>
                <div class="info_cont">
                  <h4>Marrakech, Maroc</h4>
                  <p>Intervention à Marrakech et région</p>
                </div>
              </div>
              <div class="information_bottom left-side margin_bottom_20_all">
                <div class="icon_bottom"> <i class="fa fa-phone" aria-hidden="true"></i> </div>
                <div class="info_cont">
                  <h4>+212 665 446 585</h4>
                  <p><strong>Youssef:</strong> +212665446585</p>
                  <p><strong>Rachid:</strong> +212663690212</p>
                  <p>Lun-Sam 9h00-18h00</p>
                </div>
              </div>
              <div class="information_bottom left-side">
                <div class="icon_bottom"> <i class="fa fa-clock-o" aria-hidden="true"></i> </div>
                <div class="info_cont">
                  <h4>Support technique</h4>
                  <p>Assistance 24h/24 - 7j/7</p>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 adress_cont margin_bottom_30_all">
              <h4>Nos Services</h4>
              <p>Une gamme complète de solutions informatiques pour les entreprises et particuliers.</p>
              <div class="information_bottom left-side margin_bottom_20_all">
                <div class="icon_bottom"> <i class="fa fa-wrench" aria-hidden="true"></i> </div>
                <div class="info_cont">
                  <h4>Maintenance & Réparation</h4>
                  <p>PC, serveurs, périphériques</p>
                </div>
              </div>
              <div class="information_bottom left-side margin_bottom_20_all">
                <div class="icon_bottom"> <i class="fa fa-wifi" aria-hidden="true"></i> </div>
                <div class="info_cont">
                  <h4>Réseaux & Sécurité</h4>
                  <p>Installation et configuration</p>
                </div>
              </div>
              <div class="information_bottom left-side">
                <div class="icon_bottom"> <i class="fa fa-video-camera" aria-hidden="true"></i> </div>
                <div class="info_cont">
                  <h4>Vidéo Surveillance</h4>
                  <p>Systèmes de sécurité avancés</p>
                </div>
              </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 contant_form">
              <h4>CONTACTEZ-NOUS</h4>
              <p>Notre objectif est de fournir le meilleur service client et de répondre à toutes vos questions rapidement.</p>
              
              <!-- Messages de retour -->
              <?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>
                <div class="alert alert-success" style="background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
                  <strong>Succès !</strong> <?php echo htmlspecialchars($_GET['message'] ?? 'Votre message a été envoyé avec succès.'); ?>
                </div>
              <?php endif; ?>
              
              <?php if (isset($_GET['error']) && $_GET['error'] == 1): ?>
                <div class="alert alert-danger" style="background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 15px; margin-bottom: 20px; border-radius: 5px;">
                  <strong>Erreur !</strong> <?php echo htmlspecialchars($_GET['message'] ?? 'Une erreur est survenue lors de l\'envoi.'); ?>
                </div>
              <?php endif; ?>
              
              <div class="form_section">
                <form class="form_contant" action="process-contact.php" method="POST" id="contact-form">
                  <fieldset>
                  <div class="row">
                    <div class="field col-lg-6 col-md-6 col-sm-12 col-xs-12">
                      <input class="field_custom" placeholder="Prénom *" type="text" name="first_name" required />
                    </div>
                    <div class="field col-lg-6 col-md-6 col-sm-12 col-xs-12">
                      <input class="field_custom" placeholder="Nom *" type="text" name="last_name" required />
                    </div>
                    <div class="field col-lg-6 col-md-6 col-sm-12 col-xs-12">
                      <input class="field_custom" placeholder="Adresse email *" type="email" name="email" required />
                    </div>
                    <div class="field col-lg-6 col-md-6 col-sm-12 col-xs-12">
                      <input class="field_custom" placeholder="Numéro de téléphone" type="text" name="phone" />
                    </div>
                    <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <input class="field_custom" placeholder="Sujet" type="text" name="subject" />
                    </div>
                    <div class="field col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <textarea class="field_custom" placeholder="Votre message *" name="message" rows="5" required></textarea>
                    </div>
                    <div class="center">
                      <button type="submit" class="btn main_bt" id="submit-btn">
                        <span id="btn-text">ENVOYER MAINTENANT</span>
                        <span id="btn-loading" style="display: none;">Envoi en cours...</span>
                      </button>
                    </div>
                  </div>
                  </fieldset>
                </form>
              </div>
            </div>

            <!-- Modal de confirmation -->
            <div id="success-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10000; justify-content: center; align-items: center;" onclick="closeModal('success-modal')">
                <div style="background: white; padding: 40px; border-radius: 15px; text-align: center; max-width: 500px; margin: 0 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); animation: modalSlideIn 0.3s ease-out;" onclick="event.stopPropagation()">
                    <div style="color: #28a745; font-size: 48px; margin-bottom: 20px;">
                        <i class="fa fa-check-circle"></i>
                    </div>
                    <h3 style="color: #333; margin-bottom: 15px; font-family: 'Montserrat', sans-serif;">Message envoyé avec succès !</h3>
                    <p style="color: #666; margin-bottom: 25px; line-height: 1.6;">
                        Nous avons bien reçu votre message et vous remercions de nous avoir contactés. 
                        Un email de confirmation vous a été envoyé. Nous vous répondrons dans les plus brefs délais.
                    </p>
                    <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
                        <small style="color: #6c757d;">✅ Email de confirmation envoyé<br>
                        📞 Réponse sous 24h maximum</small>
                    </div>
                    <div style="font-size: 12px; color: #999; margin-top: 15px;">
                        Ce message se fermera automatiquement dans <span id="countdown">5</span> secondes
                    </div>
                </div>
            </div>

            <!-- Modal d'erreur -->
            <div id="error-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10000; justify-content: center; align-items: center;">
                <div style="background: white; padding: 40px; border-radius: 15px; text-align: center; max-width: 500px; margin: 0 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);">
                    <div style="color: #dc3545; font-size: 48px; margin-bottom: 20px;">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <h3 style="color: #333; margin-bottom: 15px; font-family: 'Montserrat', sans-serif;">Erreur d'envoi</h3>
                    <p id="error-message" style="color: #666; margin-bottom: 25px; line-height: 1.6;"></p>
                    <button onclick="closeModal('error-modal')" style="background: #dc3545; color: white; border: none; padding: 12px 30px; border-radius: 25px; cursor: pointer; font-weight: bold;">
                        Fermer
                    </button>
                </div>
            </div>

            <style>
            @keyframes modalSlideIn {
                from {
                    opacity: 0;
                    transform: translateY(-50px) scale(0.9);
                }
                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }
            
            #success-modal, #error-modal {
                display: flex !important;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
            }
            
            #success-modal.show, #error-modal.show {
                opacity: 1;
                visibility: visible;
            }
            </style>

            <!-- Script pour l'envoi AJAX avec modal -->
            <script>
            function showModal(modalId) {
                const modal = document.getElementById(modalId);
                modal.style.display = 'flex';
                setTimeout(() => {
                    modal.classList.add('show');
                }, 10);
            }
            
            function closeModal(modalId) {
                const modal = document.getElementById(modalId);
                modal.classList.remove('show');
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 300);
            }
            
            document.getElementById('contact-form').addEventListener('submit', function(e) {
                e.preventDefault(); // Empêcher la soumission normale
                
                const submitBtn = document.getElementById('submit-btn');
                const btnText = document.getElementById('btn-text');
                const btnLoading = document.getElementById('btn-loading');
                
                // Afficher l'état de chargement
                submitBtn.disabled = true;
                btnText.style.display = 'none';
                btnLoading.style.display = 'inline';
                
                const formData = new FormData(this);
                
                fetch('process-contact.php', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Afficher le modal de succès
                        showModal('success-modal');
                        this.reset(); // Vider le formulaire
                        
                        // Démarrer le compteur de 5 secondes
                        let countdown = 5;
                        const countdownElement = document.getElementById('countdown');
                        
                        const countdownInterval = setInterval(() => {
                            countdown--;
                            if (countdownElement) {
                                countdownElement.textContent = countdown;
                            }
                            
                            if (countdown <= 0) {
                                clearInterval(countdownInterval);
                                closeModal('success-modal');
                            }
                        }, 1000);
                    } else {
                        // Afficher le modal d'erreur
                        document.getElementById('error-message').textContent = data.message;
                        showModal('error-modal');
                    }
                })
                .catch(error => {
                    // Afficher le modal d'erreur pour les erreurs réseau
                    document.getElementById('error-message').textContent = 'Erreur réseau : ' + error.message;
                    showModal('error-modal');
                })
                .finally(() => {
                    // Restaurer l'état du bouton
                    submitBtn.disabled = false;
                    btnText.style.display = 'inline';
                    btnLoading.style.display = 'none';
                });
            });
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 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;">Notre Localisation</h2>
            <p class="large">Retrouvez-nous sur la carte - SERVICES-AE</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <!-- Carte OpenStreetMap -->
          <div id="services-map" style="height: 400px; width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); position: relative;">
            <iframe 
              width="100%" 
              height="400" 
              style="border: 0; border-radius: 10px;" 
              src="https://www.openstreetmap.org/export/embed.html?bbox=-7.795764605609191%2C31.369032219929234%2C-7.785764605609191%2C31.379032219929234&amp;layer=mapnik&amp;marker=31.374032219929234%2C-7.790764605609191" 
              allowfullscreen="">
            </iframe>
            <div style="position: absolute; top: 15px; left: 15px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); max-width: 300px;">
              <h5 style="margin: 0 0 10px 0; color: #011f3e; font-family: 'Montserrat', sans-serif; font-weight: bold;">📍 SERVICES-AE</h5>
              <p style="margin: 3px 0; font-size: 13px; color: #333;"><strong>🖥️ Solutions Informatiques</strong></p>
              <p style="margin: 3px 0; font-size: 12px; color: #666;">• Maintenance & Réparation</p>
              <p style="margin: 3px 0; font-size: 12px; color: #666;">• Réseaux & Sécurité</p>
              <p style="margin: 3px 0; font-size: 12px; color: #666;">• Vidéo Surveillance</p>
              <hr style="margin: 10px 0; border-color: #eee;">
              <p style="margin: 3px 0; font-size: 12px; color: #011f3e;"><strong>📞 Youssef: +212665446585</strong></p>
              <p style="margin: 3px 0; font-size: 12px; color: #011f3e;"><strong>📞 Rachid: +212663690212</strong></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end section -->

<?php include 'includes/footer.php'; ?>

<!-- Modal -->
<div class="modal fade" id="search_bar" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-8 offset-lg-2 offset-md-2 offset-sm-2 col-xs-10 col-xs-offset-1">
            <div class="navbar-search">
              <form action="#" method="get" id="search-global-form" class="search-global">
                <input type="text" placeholder="Type to search" autocomplete="off" name="s" id="search" value="" class="search-global__input">
                <button class="search-global__btn"><i class="fa fa-search"></i></button>
                <div class="search-global__note">Begin typing your search above and press return to search.</div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Model search bar -->

<!-- js section -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- menu js -->
<script src="js/menumaker.js"></script>
<!-- wow animation -->
<script src="js/wow.js"></script>
<!-- custom js -->
<script src="js/custom.js"></script>

<!-- Services-AE Map Script -->
<script>
// Animation simple pour la carte
document.addEventListener('DOMContentLoaded', function() {
    // Animation du titre de la carte
    const mapContainer = document.getElementById('services-map');
    if (mapContainer) {
        mapContainer.style.opacity = '0';
        mapContainer.style.transform = 'translateY(20px)';
        mapContainer.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        
        setTimeout(() => {
            mapContainer.style.opacity = '1';
            mapContainer.style.transform = 'translateY(0)';
        }, 500);
    }
    
    console.log('Carte SERVICES-AE chargée avec succès - Coordonnées: 31.374032219929234, -7.790764605609191');
});
</script>
<!-- end Services-AE Map -->

<!-- zoom effect -->
<script src='js/hizoom.js'></script>
<script>
        $('.hi1').hiZoom({
            width: 300,
            position: 'right'
        });
        $('.hi2').hiZoom({
            width: 400,
            position: 'right'
        });
</script>
</body>
</html>