{% extends 'src/header.html' %}


{% load static %}
{% block content_header %}
       

        
        
        <!-- ==== banner section start ==== -->
        <section class="common-banner">
         <div class="container">
            <div class="row">
               <div class="col-12">
                  <div class="common-banner__content text-center">
                     <h2 class="title-animation">Contactez-Nous</h2>
                  </div>
               </div>
            </div>
         </div>
         <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
               <li class="breadcrumb-item">
                  <a href="index.html">Accueil</a>
               </li>
               <li class="breadcrumb-item active" aria-current="page">
                  Contactez-nous
               </li>
            </ol>
         </nav>
         
         
         <div class="line">
            <img src="{% static 'src/assets/images/line.png' %}" alt="Image">
         </div>
      </section>
      <!-- ==== / banner section end ==== -->


       <!-- ==== contact map start ==== -->
         <div class="contact-map pt-120">
            <div class="container">
               <div class="row">
                  <div class="col-12">
                     <div class="map-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <!-- <iframe
                           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20342.411046372905!2d-74.16638039276373!3d40.719832743885284!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1649562691355!5m2!1sen!2sbd"
                           width="100" height="800" style="border:0;" allowfullscreen="" loading="lazy"
                           referrerpolicy="no-referrer-when-downgrade"></iframe> -->
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- ==== / contact map end ==== -->
         <!-- ==== contact section start ==== -->
         <section class="contact contact-main volunteer pt-120 pb-120">
            <div class="container">
               <div class="row gutter-40">
                  <div class="col-12 col-lg-5 col-xl-4">
                     <div class="contact__content">
                        <div class="section__header mb-55" data-aos="fade-up" data-aos-duration="1000">
                           <span>Entrer en contact</span>
                           <h2 class="title-animation">Contactez-Nous</h2>
                           <p>Retrouvez nos coordonnées ci-dessous, si nous ne sommes pas disponibles immédiatement ; veuillez utiliser le formulaire pour laisser un message à FNPSS.
                           </p>
                        </div>
                        <div class="topbar__item mt-60">
                           <div class="topbar__item-single" data-aos="fade-up" data-aos-duration="1000">
                              <div class="topbar__item-single__icon">
                                 <i class="fa-solid fa-phone"></i>
                              </div>
                              <div class="topbar__item-single__content">
                                 <span>Numéro de bureau:</span>
                                 <p><a href="tel:+243808998117">+243 (80) 899 8117</a></p>
                              </div>
                           </div>
                           <div class="topbar__item-single" data-aos="fade-up" data-aos-duration="1000"
                              data-aos-delay="200">
                              <div class="topbar__item-single__icon">
                                 <i class="fa-solid fa-envelope"></i>
                              </div>
                              <div class="topbar__item-single__content">
                                 <span>E-Mail:
                                 </span>
                                 <p><a href="mailto:Contact@fnpss.org">Contact@fnpss.org</a></p>
                              </div>
                           </div>
                           <div class="topbar__item-single" data-aos="fade-up" data-aos-duration="1000"
                              data-aos-delay="400">
                              <div class="topbar__item-single__icon">
                                 <i class="fa-solid fa-location-dot"></i>
                              </div>
                              <div class="topbar__item-single__content">
                                 <span>
                                 Democratic Republic of Congo
                                 </span>
                                 <p><a href="https://www.google.com/maps/place/6%E6%9C%8830%E6%97%A5%E9%80%9A%E3%82%8A+%26+%E3%82%A2%E3%83%99%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%BB%E3%83%87%E3%83%BB%E3%83%99%E3%82%A4%E3%83%86%E3%83%A9+Kinshasa,+Democratic+Republic+of+the+Congo/@-4.3171088,15.2761375,17z/data=!4m15!1m8!3m7!1s0x1a6a33da032f0673:0xbd7f1a81eb7a41c4!2zNuaciDMw5pel6YCa44KKICYg44Ki44OZ44OL44Ol44O844O744OH44O744OZ44Kk44OG44OpIEtpbnNoYXNhLCBEZW1vY3JhdGljIFJlcHVibGljIG9mIHRoZSBDb25nbw!3b1!8m2!3d-4.3171142!4d15.2787124!16s%2Fg%2F11f714kgy1!3m5!1s0x1a6a33da032f0673:0xbd7f1a81eb7a41c4!8m2!3d-4.3171142!4d15.2787124!16s%2Fg%2F11f714kgy1?entry=ttu&g_ep=EgoyMDI1MDMxOS4yIKXMDSoASAFQAw%3D%3D" target="_blank"> Croisement Boulevard <br>
                                    du 30 Juin & Batetela, <br>Kinshasa-Gombe</a>
                                 </p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-12 col-lg-7 offset-xl-1 col-xl-7">
                     <div class="contact__form volunteer__form checkout__form" data-aos="fade-up"
                        data-aos-duration="1000" data-aos-delay="100">
                        <div class="volunteer__form-content">
                           <h4 class="title-animation">Remplissez le formulaire</h4>
                           <p>Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un astérisque (*).</p>
                        </div>
                        <p class="text-muted font-14">
                           {% if messages %}
                           <div class="alert alert-success alert-dismissible fade show" role="alert">
                               <span class="alert-text"></span>
                                   {% for message in messages %}
                                       {{ message }}
                                   {% endfor %}
                               </span>
                           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                               <span aria-hidden="true">&times;</span>
                           </button>
                           </div>
                           {% endif %}     
                       </p> 
                     <div>
                        <small id="messageError" style="color:red; display:none;">
                           Le message doit contenir au moins 30 mots.
                        </small>
                        <small id="subjectError" style="color:red; display:none;">
                           Le sujet doit contenir au moins 5 mots.
                        </small>
                     </div>

                        <form action="{% url 'contact_form' %}" method="POST">
                           {% csrf_token %}
                           <div class="input-group">
                              <div class="input-single">
                                 
                                 <input type="email" name="email" id="email" placeholder="votre email...*" required>
                                 
                              </div>
                              <div class="input-single">
                                 <input type="text" name="name" id="name"  placeholder="votre nom complet...*" required>
                                 
                              </div>
                           </div>
                           <div class="input-single">
                              <input type="text" name="subject" id="subject"  placeholder="votre sujet...." required>
                              
                           </div>
                           <div class="input-single alter-input">
                              
                              <textarea name="message" id="message" placeholder="votre message...*" required></textarea>
                              <i class="fa-solid fa-envelope"></i>
                           </div>
                           <div>
                              <button type="submit" class="btn--secondary"
                                 ><span>Envoyer</span>
                              </button>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!-- ==== / contact section end ==== -->
         <script>
document.addEventListener("DOMContentLoaded", function () {
   const form = document.querySelector("form");
   const messageField = document.getElementById("message");
   const subjectField = document.getElementById("subject");

   const messageError = document.getElementById("messageError");
   const subjectError = document.getElementById("subjectError");

   form.addEventListener("submit", function (e) {
      let valid = true;

      // Count words
      const messageWords = messageField.value.trim().split(/\s+/).filter(Boolean);
      const subjectWords = subjectField.value.trim().split(/\s+/).filter(Boolean);

      // Message validation (30 words)
      if (messageWords.length < 30) {
         messageError.style.display = "block";
         valid = false;
      } else {
         messageError.style.display = "none";
      }

      // Subject validation (5 words)
      if (subjectWords.length < 5) {
         subjectError.style.display = "block";
         valid = false;
      } else {
         subjectError.style.display = "none";
      }

      if (!valid) {
         e.preventDefault();
      }
   });
});
</script>


      {% include "src/footer.html" %}  
    

     
     {% endblock %}