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



  <main class="main" >
{% block Body_Content %}


<section id="hero-wrapper" class="hero-wrapper">
  <div id="hero" class="hero section dark-background hero-container">

    <div id="hero-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000" dir="ltr">

      {% if site_carousel %}

      <!-- Carousel Item 1 (الأولى) -->
      <div class="carousel-item active">
        <picture>
          {% if site_carousel.mobile_image_1 %}
            <source media="(max-width: 568px)" srcset="{{ site_carousel.mobile_image_1.url }}" type="image/webp">
          {% endif %}
          {% if site_carousel.image_1 %}
            <img src="{{ site_carousel.image_1.url }}"
                 alt="تصميم موقع إلكتروني احترافي لشركة سعودية"
                 width="1200" height="425" decoding="async"
                 loading="eager" fetchpriority="high"
                 style="width:100%;height:auto;">
          {% endif %}
        </picture>
        <div class="carousel-container">
          <h2>{{ site_carousel.subtitle_1 }}</h2>
          <p>{{ site_carousel.content_1 }}</p>
          <a href="{{ site_carousel.localized_button_link_1 }}" class="btn-get-started">{{ site_carousel.button_text_1 }}</a>
        </div>
      </div><!-- End Carousel Item 1 -->

      <!-- Carousel Item 2 -->
      <div class="carousel-item">
        <picture>
          {% if site_carousel.mobile_image_2 %}
            <source media="(max-width: 568px)" srcset="{{ site_carousel.mobile_image_2.url }}" type="image/webp">
          {% endif %}
          {% if site_carousel.image_2 %}
            <img src="{{ site_carousel.image_2.url }}"
                 alt="متجر الكتروني"
                 width="1200" height="425"
                 decoding="async"
                 loading="lazy"
                  style="width:100%;height:auto;">
          {% endif %}
        </picture>
        <div class="carousel-container">
          <h2>{{ site_carousel.subtitle_2 }}</h2>
          <p>{{ site_carousel.content_2 }}</p>
          <a href="{{ site_carousel.localized_button_link_2 }}" class="btn-get-started">{{ site_carousel.button_text_2 }}</a>
        </div>
      </div><!-- End Carousel Item 2 -->

      <!-- Carousel Item 3 -->
      <div class="carousel-item">
        <picture>
          {% if site_carousel.mobile_image_3 %}
            <source media="(max-width: 568px)" srcset="{{ site_carousel.mobile_image_3.url }}" type="image/webp">
          {% endif %}
          {% if site_carousel.image_3 %}
            <img src="{{ site_carousel.image_3.url }}"
                 alt="الأستضافة"
                 width="1200" height="425"
                 loading="lazy"
                 decoding="async"
                  style="width:100%;height:auto;">
          {% endif %}
        </picture>
        <div class="carousel-container">
          <h2>{{ site_carousel.subtitle_3 }}</h2>
          <p>{{ site_carousel.content_3 }}</p>
          <a href="{{ site_carousel.localized_button_link_3 }}" class="btn-get-started">{{ site_carousel.button_text_3 }}</a>
        </div>
      </div><!-- End Carousel Item 3 -->

    {% endif %}


      <ol class="carousel-indicators"></ol>

    </div>

  </div>
</section>

<!-- /Hero Section -->
<section id="about" class="about section">
 <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <div class="title-wrapper">
      <h2 class="main-title">{% trans "حلول ذكية لأعمالك" %}</h2>
      <p class="title-description">{% trans "نقدّم حلولًا عملية تدعم تطوّر أعمالك بنجاح" %}</p>
    </div>
  </div>
  {% comment %} 
  <div class="container section-title" data-aos="fade-up">
    <div><span>{% "حلول ذكية" trans %}</span> <span class="description-title">{% "لأعمالك" trans %}</span></div>
  </div> {% endcomment %}

  <div class="container" data-aos="fade-up" data-aos-delay="100">
    <div class="row gy-4 align-items-start justify-content-between flex-column flex-xl-row">

      <div class="col-12 col-xl-7 order-2 order-xl-1 about-image-col" data-aos="fade-up" data-aos-delay="100">
        {% if about.subtitle %}
          <span class="about-meta">{{ about.subtitle }}</span>
        {% endif %}
        {% if about.title %}
          <h2 class="about-title">{{ about.title }}</h2>
        {% endif %}
        <p class="about-description">{{ about.description }}</p>

        <div class="row feature-list-wrapper ">
          <div class="col-md-12">
            <ul class="feature-list feature-list-home">
              {% for item in features_list_1 %}
              <li><i class="{{ item.icon_class }}"></i> {{ item.title }}</li>
              {% endfor %}
            </ul>
          </div>

        </div>
      </div>

      <div class="col-12 col-xl-5 order-1 order-xl-2 " data-aos="fade-up" data-aos-delay="200">
        <div class="image-wrapper" id="image-wrapper">
            <div class="images position-relative" data-aos="zoom-out" data-aos-delay="300">
                 {% if about.main_image %} 
                 <img src="{{ about.main_image.url }}"
                 alt="Business Meeting" class="img-fluid main-image rounded-4" loading="lazy" decoding="async" width="356" 
                 height="208" style="height: auto;">
                {% endif %} 
            </div>
       
          {% if about.experience_years or about.experience_text %}
  {% if about.experience_years|stringformat:"s" != "" or about.experience_text|stringformat:"s" != "" %}
    <div class="experience-badge floating">
      <h3>{{ about.experience_years|default_if_none:"" }} <span></span></h3>
      <p>{{ about.experience_text|default_if_none:"" }}</p>
    </div>
  {% endif %}
{% endif %}

        </div>
      </div>
    </div> <!-- row -->
  </div> <!-- container -->
</section>


<!-- Enhanced Services Section -->
<section id="services" class="services section">

  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <div class="title-wrapper">
      <h2 class="main-title">{% trans "خدماتنا المتميزة" %}</h2>
      <p class="title-description">{% trans "نقدم حلولاً مبتكرة تلبي جميع احتياجاتك" %}</p>
    </div>
  </div><!-- End Section Title -->

  <div class="container">

    <div class="row gy-4">
        <h2 style="position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;">
          {% trans "خدماتنا" %}
        </h2>
        <h3 style="position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;">
          {% trans "أهم الخدمات التي نقدمها" %}
        </h3>

      {% for service in services %}
        <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:1 }}00">
          <div class="service-item position-relative">
            <div class="icon"><i class="{{ service.icon_class }} icon"></i></div>
            <h4>
              <a href="{% url 'service_detail' service.slug %}" class="stretched-link">
                {{ service.title }}
              </a>
            </h4>
            <p>{{ service.description|truncatewords:12 }}</p>
            <div class="service-footer">
              <button class="btn" onclick="location.href='{% url 'service_detail' service.slug %}'">
              {% trans "المزيد" %} <i class="bi bi-arrow-left-circle custom-arrow-icon"></i>
            </button>

            </div>
          </div>
        </div><!-- End Service Item -->
      {% endfor %}
    </div>

   

  </div>

</section><!-- /Services Section -->
<section class="our-stats-section"
  {% if stats.background_image %}
    style="background-image: url('{{ stats.background_image.url }}'); background-size: cover; background-position: center;"
  {% endif %}
id="stats-2">
  <!-- Section Title -->
  <div class="container section-title-static section-title" data-aos="fade-up">
    <div class="title-wrapper">
      <div>
        <span class="description-title">{{ stats.title }}</span>
        <p class="title-description-text-2">
{% trans "تعرف على أرقامنا وأنضم إلى شركائنا اليوم" %}</p>
      </div>
    </div>
  </div><!-- End Section Title -->

  <div class="container our-stats" data-aos="fade-up" data-aos-delay="100">
    <div class="row justify-content-center">
      <div class="col-lg-12">
        <div class="stats-wrapper">
          <div class="row">

            <!-- Stat 1 -->
            <div class="col-md-3" data-aos="zoom-in" data-aos-delay="200">
              <div class="stat-card">
                <div class="stat-icon">
                  {% if stats.image_1 %}
                    <img src="{{ stats.image_1.url }}"
                         loading="lazy" decoding="async"
                         alt="" class="img-fluid"
                             width="60" height="60" style="height:auto;">
                  {% else %}
                    <i class="bi bi-{{ stats.icon_1 }} gradient-icon"></i>
                  {% endif %}
                </div>
                <h3 class="stat-number purecounter" data-purecounter-start="0" data-purecounter-end="{{ stats.number_1 }}" data-purecounter-duration="1">0</h3>
                <p class="stat-label">{{ stats.label_1 }}</p>
              </div>
            </div>

            <!-- Stat 2 -->
            <div class="col-md-3" data-aos="zoom-in" data-aos-delay="250">
              <div class="stat-card">
                <div class="stat-icon">
                  {% if stats.image_2 %}
                    <img src="{{ stats.image_2.url }}"
                         loading="lazy" decoding="async"
                         alt="" class="img-fluid"
                             width="60" height="60" style="height:auto;">
                  {% else %}
                    <i class="bi bi-{{ stats.icon_2 }} gradient-icon"></i>
                  {% endif %}
                </div>
                <h3 class="stat-number purecounter" data-purecounter-start="0" data-purecounter-end="{{ stats.number_2 }}" data-purecounter-duration="1">0</h3>
                <p class="stat-label">{{ stats.label_2 }}</p>
              </div>
            </div>

            <!-- Stat 3 -->
            <div class="col-md-3" data-aos="zoom-in" data-aos-delay="300">
              <div class="stat-card">
                <div class="stat-icon">
                  {% if stats.image_3 %}
                    <img src="{{ stats.image_3.url }}"
                         loading="lazy" decoding="async"
                         alt="" class="img-fluid"
                             width="60" height="60" style="height:auto;">
                  {% else %}
                    <i class="bi bi-{{ stats.icon_3 }} gradient-icon"></i>
                  {% endif %}
                </div>
                <h3 class="stat-number purecounter" data-purecounter-start="0" data-purecounter-end="{{ stats.number_3 }}" data-purecounter-duration="1">0</h3>
                <p class="stat-label">{{ stats.label_3 }}</p>
              </div>
            </div>

            <!-- Stat 4 -->
            <div class="col-md-3" data-aos="zoom-in" data-aos-delay="350">
              <div class="stat-card">
                <div class="stat-icon">
                  {% if stats.image_4 %}
                    <img src="{{ stats.image_4.url }}"
                         loading="lazy" decoding="async"
                         alt="" class="img-fluid"
                             width="60" height="60" style="height:auto;">
                  {% else %}
                    <i class="bi bi-{{ stats.icon_4 }} gradient-icon"></i>
                  {% endif %}
                </div>
                <h3 class="stat-number purecounter" data-purecounter-start="0" data-purecounter-end="{{ stats.number_4 }}" data-purecounter-duration="1">0</h3>
                <p class="stat-label">{{ stats.label_4 }}</p>
              </div>
            </div>

          </div><!-- /.row -->
        </div><!-- /.stats-wrapper -->
      </div><!-- /.col-lg-12 -->
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>


  <!-- /Stats 2 Section -->
<!-- Portfolio 2 Section -->
<section id="portfolio-2" class="portfolio-2 section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
  <div class="title-wrapper">
    <h2 class="main-title">{% trans "شاهد نماذج من أعمالنا" %}</h2>
   <p class="title-description">
      {% trans "تصفّح  مشاريعنا الناجحة التي تعكس جودة خدماتنا" %}
    </p>
  </div>
</div>
<!-- End Section Title -->

  <!-- Section Title -->
  {% comment %} <div class="container section-title" data-aos="fade-up">
    <!-- <h2>أعمالنا</h2> -->
    <div><span>  {% trans "شاهد نماذج من " %}</span> <span class="description-title">{% trans "أعمالنا" %}</span></div>
  </div> {% endcomment %}

  <div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="container portfolio-container" data-aos="fade-up" data-aos-delay="100">

    <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
      
      <!-- Filters -->
      <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="200">
        <li data-filter="*" class="filter-active">{% trans "الكل" %}</li>
        {% for category in categories %}
          <li data-filter=".filter-{{ category.slug }}">{{ category.name }}</li>

        {% endfor %}
      </ul>

      <!-- Portfolio Items -->
      <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="300">
    {% for item in items|slice:":4" %}
    <div class="col-lg-3 col-md-6 portfolio-item isotope-item filter-{{ item.category.slug }}">
        <a href="{% url 'portfolio_detail' item.slug %}" class="portfolio-card-link">
            <div class="portfolio-card">
                <div class="portfolio-img">
                    {% if item.main_image %}
                      <img src="{{ item.main_image.url }}"
                           loading="lazy" decoding="async"
                           alt="{{ item.title }}" class="img-fluid"
                              width="600" height="400"
                              style="height: auto;">
                    {% endif %}
                    {% for tag in item.tag_list %}
                        <span class="new">{{ tag }}</span>
                    {% endfor %}
                </div>
            </div>

            <h2 class="main-title" style="position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;">
                {% trans "شاهد نماذج من أعمالنا" %}
            </h2>

            <h3 class="section-subtitle" style="position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;">
                {% trans "مشاريع مختارة" %}
            </h3>

       <div class="portfolio-title mt-2">
            <h4 class="mt-1">{{ item.title }}</h4>
        </div>
        </a>

    </div>
    {% endfor %}
</div>


    </div>


    <div class="text-center mt-1 mt-sm-3 " data-aos="fade-up" data-aos-delay="400">
  <a href="{% url 'portfolio_list' %}" class="btn btn-primary">{% trans "عرض الكل" %}</a>
</div>


  </div>

</section><!-- /Portfolio 2 Section -->
     

<!-- /Portfolio 2 Section -->



   <!-- Contact 4 Section -->
    <section id="contact-4" class="contact-4 section">
      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <div class="title-wrapper">
          <h2 class="main-title">{% trans "نحن بانتظار تواصلك" %}</h2>
          <p class="title-description">
            {% trans "لا تتردد في التواصل معنا لأي استفسار ، فريقنا جاهز للرد    ." %}
          </p>
        </div>
      </div>
      <!-- End Section Title -->


      <!-- Section Title -->
      {% comment %} <div class="container section-title" data-aos="fade-up">
        {% comment %} <h2>{% trans "تواصل معنا" %}</h2>
        <div><span></span> <span class="description-title"> {% trans "نحن بانتظار تواصلك" %}</span></div>
      </div><!-- End Section Title --> {% endcomment %}

      <div class="container" data-aos="fade" data-aos-delay="100">

        <div class="row gy-4">

          <div class="col-lg-6  contact-info-column">
            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
              <i class="bi bi-geo-alt flex-shrink-0"></i>
              <div>
                <h3>{% trans "العنوان" %}</h3>
                <p>{% trans "المملكة العربية السعودية - تبوك" %}
              </div>
            </div><!-- End Info Item -->

            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
              <i class="bi bi-telephone flex-shrink-0"></i>
              <div>
                <h3>{% trans "تواصل معنا" %}</h3>
                <p dir="ltr">+966538078440</p>
              </div>
            </div><!-- End Info Item -->

            <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
              <i class="bi bi-envelope flex-shrink-0"></i>
              <div>
                <h3>{% trans "البريد الإلكتروني" %}</h3>
                <p>info@webd.it.com</p>
              </div>
            </div><!-- End Info Item -->

          </div>
         <div class="col-lg-8">
            <form id="contact-form" method="POST" action="{% url 'index' %}" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
        {% csrf_token %}
        <input type="hidden" name="source_page" value="index">
        
        <div class="row gy-4">
          <div class="col-md-6">
            {{ form.name }}
            <div class="invalid-feedback" id="name-error"></div>
          </div>

          <div class="col-md-6">
            {{ form.email }}
            <div class="invalid-feedback" id="email-error"></div>
          </div>

          <div class="col-md-6">
            {{ form.phone }}
            <div class="invalid-feedback" id="phone-error"></div>
          </div>

          <div class="col-md-6">
            {{ form.service_type }}
            <div class="invalid-feedback" id="service_type-error"></div>
          </div>

          <div class="col-md-12">
            {{ form.message }}
            <div class="invalid-feedback" id="message-error"></div>
          </div>

          <!-- reCAPTCHA -->
          <div class="col-md-12">
            {{ form.captcha }}
            <div id="captcha-error" class="captcha-error"></div>
          </div>

          <!-- Submit Button -->
          <div class="col-md-12 text-center mb-4">
            <button type="submit" id="submit-btn">
              <span id="btn-text">{% trans "إرسال" %}</span>
              <span id="btn-loading" style="display:none;">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                {% trans "جاري الإرسال..." %}
              </span>
            </button>
          </div>
        </div>
      </form>
         </div>
            <!-- Floating WhatsApp Icon -->
           <a href="https://wa.me/966538078440" class="whatsapp-float" target="_blank">

                        <span class="ttt"> {% trans "تواصل معنا" %}</span>

            <i class="bi bi-whatsapp" ></i>
            </a>
            <!-- Success Popup (initially hidden) -->
            <div id="success-popup" style="display: none;">
              <div style="
                width: 361px;
                height: 177px;
                border-radius:var(--bs-border-radius);
                background-color: #FFFFFF;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 0px 4px 20px rgba(0,0,0,0.2);
                z-index: 9999;
                overflow: hidden;
              ">
            
                  <button onclick="document.getElementById('success-popup').style.display='none'" style="
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    color:var( --accent-color);
                    background: none;
                    border: none;
                    font-size: 20px;
                  ">
                    <i class="bi bi-x"></i>
                  </button>
                <div style="padding: 16px; text-align: center;">
                  
                    {% comment %} <i class="bi bi-check-circle-fill" style="color: var( --accent-color); font-size: 50px;"></i> {% endcomment %}
                  <i class="bi bi-check-circle" style="color: var( --accent-color); font-size: 50px;"></i>
                  <span style="
                    display: block;
                    font-weight: bold;
                    font-size: 18px;
                    /* color: ; */
                    margin-bottom: 8px;
                  ">
                    {% trans "تم بنجاح!" %}
                  </span>
                  <span style="
                    display: block;
                    font-size: 14px;
                    color: #333;
                    word-wrap: break-word;
                  ">
                     {% trans "تم إرسال رسالتك بنجاح. شكراً لك!" %}
                  </span>
                </div>
              </div>
            </div>
            
               <!-- reCAPTCHA script -->
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>

           
            <script>
              document.addEventListener('DOMContentLoaded', function () {
                const form = document.querySelector('#contact-form');
                if (!form) return;

                // Add blur event listeners for validation
                const fields = ['name', 'email', 'phone', 'service_type', 'message'];
                fields.forEach(field => {
                  const input = form.querySelector(`[name="${field}"]`);
                  if (input) {
                    input.addEventListener('blur', function() {
                      validateField(field);
                    });
                  }
                });

                // Field validation function
                function validateField(fieldName) {
                  const field = form.querySelector(`[name="${fieldName}"]`);
                  const errorElement = document.getElementById(`${fieldName}-error`);
                  
                  if (!field.value.trim()) {
                    field.classList.add('is-invalid');
                    errorElement.textContent = "{{ _('هذا الحقل مطلوب') }}";
                    return false;
                  }
                  
                  // Additional validation for specific fields
                  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value)) {
                    field.classList.add('is-invalid');
                    errorElement.textContent = "{{ _('البريد الإلكتروني غير صالح') }}";
                    return false;
                  }
                  
                  if (fieldName === 'phone' && !/^[0-9+]+$/.test(field.value)) {
                    field.classList.add('is-invalid');
                    errorElement.textContent = 'رقم الهاتف غير صالح';
                    return false;
                  }
                  
                  field.classList.remove('is-invalid');
                  errorElement.textContent = '';
                  return true;
                }

                // Form submission handler
                form.addEventListener('submit', function (event) {
                  event.preventDefault();

                  // Validate all fields
                  let isValid = true;
                  fields.forEach(field => {
                    if (!validateField(field)) {
                      isValid = false;
                    }
                  });

                  // Validate captcha
                const captchaResponse = grecaptcha.getResponse();
              const captchaError = document.getElementById('captcha-error');
              const recaptchaContainer = document.querySelector('.g-recaptcha');
              
              if (!captchaResponse) {
                captchaError.textContent = "{% trans 'الرجاء إكمال التحقق من reCAPTCHA' %}";
                recaptchaContainer.style.borderRadius = '4px';
                recaptchaContainer.style.padding = '2px';
                recaptchaContainer.style.fontSize = '14px';
                isValid = false;
                
                recaptchaContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
              } else {
                captchaError.textContent = '';
                recaptchaContainer.style.border = 'none';
                recaptchaContainer.style.padding = '0';
              }

              if (!isValid) return;

                  // Show loading state
                  document.getElementById('btn-text').style.display = 'none';
                  document.getElementById('btn-loading').style.display = 'inline-block';
                  document.getElementById('submit-btn').disabled = true;

                  const formData = new FormData(form);

                  fetch(form.action, {
                    method: 'POST',
                    headers: {
                      'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value,
                      'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                  })
                  .then(response => response.json())
                  .then(data => {
                    // Hide loading state
                    document.getElementById('btn-text').style.display = 'inline-block';
                    document.getElementById('btn-loading').style.display = 'none';
                    document.getElementById('submit-btn').disabled = false;

                    if (data.status === 'success') {
                      // Show success popup
                      document.getElementById('success-popup').style.display = 'block';
                      form.reset();
                      grecaptcha.reset();
                      
                      // Hide popup after 5 seconds
                      setTimeout(() => {
                        document.getElementById('success-popup').style.display = 'none';
                      }, 5000);
                    } else if (data.status === 'error') {
                      // Show field errors
                      for (const field in data.errors) {
                        const input = form.querySelector(`[name="${field}"]`);
                        const errorElement = document.getElementById(`${field}-error`);
                        if (input && errorElement) {
                          input.classList.add('is-invalid');
                          errorElement.textContent = data.errors[field][0];
                        }
                      }
                    }
                  })
                  .catch(() => {
                    // Hide loading state
                    document.getElementById('btn-text').style.display = 'inline-block';
                    document.getElementById('btn-loading').style.display = 'none';
                    document.getElementById('submit-btn').disabled = false;
                    
                    // Show generic error
                    alert('حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة لاحقًا.');
                  });
                });
              });
            </script>

        </div>

      </div>

    </section><!-- /Contact 4 Section -->
  {% endblock %}

  </main>
<!-- JavaScript for Form Submission and Message Toggle -->
 <script>
    document.querySelector('form').addEventListener('submit', function(event) {
      event.preventDefault();  // prevent normal submission
  
      const form = event.target;
      const formData = new FormData(form);
  
      // Show loading message
      document.getElementById('loading-message').style.display = 'block';
      document.getElementById('error-message').style.display = 'none';
      document.getElementById('sent-message').style.display = 'none';
  
      fetch(form.action, {
        method: 'POST',
        headers: {
          'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: formData
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network error');
        }
        return response.text();  // or JSON if you're returning JSON
      })
      .then(data => {
        // Hide loading, show success
        document.getElementById('loading-message').style.display = 'none';
        document.getElementById('sent-message').style.display = 'block';
        form.reset();
      })
      .catch(error => {
        // Hide loading, show error
        document.getElementById('loading-message').style.display = 'none';
        document.getElementById('error-message').style.display = 'block';
      });
    });
  </script>
  
  <style>
  /* الرسائل العامة */
  .form-message {
    font-size: 16px;
    font-weight: 500;
    padding: 15px;
    margin-top: 10px;
    border-radius: 6px;
    text-align: center;
    display: none;
  }


  .form-message.alert-info::after {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #0dcaf0;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
    vertical-align: middle;
  }

  @keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* نجاح */
  #sent-message {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
  }

  /* خطأ */
  #error-message {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
  }

  /* تحميل */
  #loading-message {
    background-color: #cff4fc;
    color: #055160;
    border: 1px solid #b6effb;
  }

  /* زر الإرسال */
  .php-email-form button[type="submit"] {
    background-color: #0d6efd;
    color: #fff;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }

  .php-email-form button[type="submit"]:hover {
    background-color: #0b5ed7;
  }
</style>