{% extends 'base.html' %}
{% load static %}
{% block extra_head %}
<meta name="facebook-domain-verification" content="paqtl9k4vjmpu014a14f4q4kshbaog" />

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '932216992706577');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=932216992706577&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
{% endblock %}
{% block content %}
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<link rel="stylesheet" href="{% static 'marketing/css/landing.css' %}" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="{% static 'marketing/js/landing.js' %}"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- Hero Section -->
<div class="relative w-full overflow-hidden group" style="min-height: 60vh;">

  <!-- Swiper Background -->
  <div class="swiper mySwiper absolute inset-0 w-full h-full z-0">
    <div class="swiper-wrapper">
      {% if settings.banner_images.exists %}
      {% for banner in settings.banner_images.all %}
      <div class="swiper-slide relative"
        style="background-image: url('{% if banner.image %}{{ banner.image.url }}{% else %}{{ banner.external_image_url }}{% endif %}'); background-size: cover; background-position: center;">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent"></div>
      </div>
      {% endfor %}
      {% else %}
      <!-- Fallback / Default Image -->
      <div class="swiper-slide relative"
        style="background-image: url('https://images.unsplash.com/photo-1517400508447-f8dd518b86db?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); background-size: cover; background-position: center;">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent"></div>
      </div>
      {% endif %}
    </div>
    <div class="swiper-pagination"></div>

    <!-- Navigation Buttons -->
    <div class="swiper-button-next text-white/80 hover:text-white transition after:text-xl md:after:text-3xl"></div>
    <div class="swiper-button-prev text-white/80 hover:text-white transition after:text-xl md:after:text-3xl"></div>
  </div>

  <!-- Content Overlay -->
  <div class="absolute inset-0 z-10 flex flex-col pointer-events-none">
    <!-- Logo - Top Right -->
    <div class="w-full px-4 sm:px-6 md:px-8 lg:px-12 pt-4 sm:pt-6 md:pt-8">
      <div class="text-right">
        <a href="{% url 'landing_page' %}"
          class="pointer-events-auto inline-block transition-transform duration-300 hover:scale-105">
          <img src="{% static 'logo/logo.png' %}" alt="Neom Tents Logo"
            class="h-16 sm:h-20 md:h-24 lg:h-32 w-auto drop-shadow-lg">
        </a>
      </div>
    </div>

    <!-- Hero Content - Centered Vertically, Right Aligned -->
    <div class="flex-1 flex items-center justify-end px-4 sm:px-6 md:px-8 lg:px-12 pb-6 sm:pb-6 md:pb-8 lg:pb-10">
      <div class="text-right max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-xl xl:max-w-2xl">
        <h2
          class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-extrabold mb-2 sm:mb-3 md:mb-4 leading-tight text-white drop-shadow-lg">
          {{ settings.hero_title }}
        </h2>
        <p
          class="text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl font-medium text-gray-100 drop-shadow-md leading-relaxed">
          {{ settings.hero_subtitle }}
        </p>
      </div>
    </div>
  </div>
</div>

<!-- Main Content Area -->
<div class="bg-dan-beige relative z-10">
  <div class="container mx-auto px-4 py-16">
    <!-- Form Section -->
    <div id="lead-form" class="max-w-3xl mx-auto bg-transparent relative z-20">
      {% if success %}
      <div class="bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-xl relative mb-8 text-center"
        role="alert">
        <strong class="font-bold text-lg">تم الإرسال بنجاح!</strong>
        <span class="block mt-1">شكراً لك، سيتواصل معك فريقنا قريباً.</span>
      </div>
      {% endif %}

      <form method="post" action="{% url 'landing_page' %}" class="space-y-6">
        {% csrf_token %}

        <div class="space-y-6">
          <!-- Full Name -->
          <div>
            <label class="block text-gray-700 font-bold mb-2 text-right pr-2">الاسم الكامل <span
                class="text-red-500">*</span></label>
            {{ form.name }}
            {% if form.name.errors %}
            <p class="text-red-500 text-xs mt-1 mr-2">
              {{ form.name.errors.0 }}
            </p>
            {% endif %}
          </div>

          <!-- Phone Number -->
          <div>
            <label class="block text-gray-700 font-bold mb-2 text-right pr-2">رقم الجوال <span
                class="text-red-500">*</span></label>
            <div class="relative" dir="ltr">
              {{ form.phone }}
              <input type="hidden" id="full_phone" name="phone_full" />
              <span id="phone-error-msg" class="text-red-500 text-xs hidden absolute top-full left-0 mt-1"></span>
            </div>
            {% if form.phone.errors %}
            <p class="text-red-500 text-xs mt-1 mr-2">
              {{ form.phone.errors.0 }}
            </p>
            {% endif %}
          </div>


          <!-- Email -->
          <div>
            <label class="block text-gray-700 font-bold mb-2 text-right pr-2">البريد الإلكتروني
              <span>
                <span class="text-red-500">*</span>
              </span></label>

            {{ form.email }} {% if form.email.errors %}
            <p class="text-red-500 text-xs mt-1 mr-2">
              {{ form.email.errors.0 }}
            </p>
            {% endif %}
          </div>

          <!-- Property Type (Radio Buttons) -->
          <div>
            <label class="block text-gray-700 font-bold mb-3 text-right pr-2">هل لديك؟ <span
                class="text-red-500">*</span></label>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3" dir="rtl">
              <label class="flex items-center justify-start cursor-pointer group">
                <input type="radio" name="property_type" value="resort"
                  class="h-4 w-4 text-dan-green focus:ring-dan-green border-gray-300 ml-2"
                  onchange="toggleOtherPropertyInput()">
                <span class="text-sm font-medium text-gray-700 group-hover:text-dan-green transition">منتجع</span>
              </label>
              <label class="flex items-center justify-start cursor-pointer group">
                <input type="radio" name="property_type" value="farm"
                  class="h-4 w-4 text-dan-green focus:ring-dan-green border-gray-300 ml-2"
                  onchange="toggleOtherPropertyInput()">
                <span class="text-sm font-medium text-gray-700 group-hover:text-dan-green transition">مزرعة</span>
              </label>
              <label class="flex items-center justify-start cursor-pointer group">
                <input type="radio" name="property_type" value="camp"
                  class="h-4 w-4 text-dan-green focus:ring-dan-green border-gray-300 ml-2"
                  onchange="toggleOtherPropertyInput()">
                <span class="text-sm font-medium text-gray-700 group-hover:text-dan-green transition">مخيم</span>
              </label>
              <label class="flex items-center justify-start cursor-pointer group">
                <input type="radio" name="property_type" value="chalet"
                  class="h-4 w-4 text-dan-green focus:ring-dan-green border-gray-300 ml-2"
                  onchange="toggleOtherPropertyInput()">
                <span class="text-sm font-medium text-gray-700 group-hover:text-dan-green transition">شاليه</span>
              </label>
              <label class="flex items-center justify-start cursor-pointer group">
                <input type="radio" name="property_type" value="exhibition"
                  class="h-4 w-4 text-dan-green focus:ring-dan-green border-gray-300 ml-2"
                  onchange="toggleOtherPropertyInput()">
                <span class="text-sm font-medium text-gray-700 group-hover:text-dan-green transition">معرض</span>
              </label>
              <label class="flex items-center justify-start cursor-pointer group">
                <input type="radio" name="property_type" value="conference"
                  class="h-4 w-4 text-dan-green focus:ring-dan-green border-gray-300 ml-2"
                  onchange="toggleOtherPropertyInput()">
                <span class="text-sm font-medium text-gray-700 group-hover:text-dan-green transition">مؤتمر</span>
              </label>
              <label class="flex items-center justify-start cursor-pointer group">
                <input type="radio" name="property_type" value="other"
                  class="h-4 w-4 text-dan-green focus:ring-dan-green border-gray-300 ml-2"
                  onchange="toggleOtherPropertyInput()">
                <span class="text-sm font-medium text-gray-700 group-hover:text-dan-green transition">أخرى</span>
              </label>
            </div>

            <!-- Other Property Type Input -->
            {{ form.property_type_other }}

            {% if form.property_type.errors %}
            <p class="text-red-500 text-xs mt-1 mr-2">
              {{ form.property_type.errors.0 }}
            </p>
            {% endif %}

            <script>
              function toggleOtherPropertyInput() {
                const selectedRadio = document.querySelector('input[name="property_type"]:checked');
                const otherPropertyInput = document.getElementById("other-property-input");

                if (selectedRadio && selectedRadio.value === "other") {
                  otherPropertyInput.classList.remove("hidden");
                  otherPropertyInput.required = true;
                } else {
                  otherPropertyInput.classList.add("hidden");
                  otherPropertyInput.required = false;
                  otherPropertyInput.value = "";
                }
              }

              // Run on page load
              document.addEventListener("DOMContentLoaded", toggleOtherPropertyInput);
            </script>
          </div>

          <!-- City -->
          <div>
            <label class="block text-gray-700 font-bold mb-2 text-right pr-2">أين يقع مشروعك؟
              <span class="text-red-500">*</span></label>
            {{ form.city }} {% if form.city.errors %}
            <p class="text-red-500 text-xs mt-1 mr-2">
              {{ form.city.errors.0 }}
            </p>
            {% endif %}
          </div>

          <!-- Marketing Consent Checkbox -->
          <div class="flex items-start mt-4 pr-1">
            <div class="flex items-center h-5">
              <input id="marketing-consent" type="checkbox" required
                class="focus:ring-dan-green h-4 w-4 text-dan-green border-gray-300 rounded" />
            </div>
            <div class="mr-3 text-sm">
              <label for="marketing-consent" class="font-medium text-gray-700">
                نؤكد أنه من خلال تقديم رقم هاتفك وعنوان بريدك الإلكتروني، فإنك توافق على أن يتم التواصل معك من قبل
                فريقنا لأهداف تسويقية وللتحديثات المتعلقة بخدماتنا.
                <span class="text-red-500">*</span>
              </label>
            </div>
          </div>

          <!-- Privacy Policy Checkbox -->
          <div class="flex items-start mt-4 pr-1">
            <div class="flex items-center h-5">
              <input id="privacy-policy" type="checkbox" required
                class="focus:ring-dan-green h-4 w-4 text-dan-green border-gray-300 rounded" />
            </div>
            <div class="mr-3 text-sm">
              <label for="privacy-policy" class="font-medium text-gray-700">
                خصوصيتك هي أولويتنا. نؤكد لك أنه سيتم التعامل مع معلوماتك بشكل آمن واستخدامها حصرياً للأغراض المذكورة
                أعلاه، وفقاً لسياسة الخصوصية الخاصة بنا.
                <span class="text-red-500">*</span>
              </label>
            </div>
          </div>
          <!-- Submit Button -->
          <div class="mt-8 text-center">
            <button id="submit-btn" type="submit"
              class="bg-gray-400 text-white font-bold py-3 px-12 rounded-full cursor-not-allowed opacity-50 transaction duration-300"
              disabled>
              أرسل الطلب
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Video Section (Dark Brown) -->
<div class="bg-dan-brown text-white py-20 relative">
  <div class="container mx-auto px-6">
    <div class="flex items-center justify-center mb-16 gap-3">
      <h2 class="text-xl md:text-2xl font-bold text-center">
        شركة خيم نيوم  Neomtents
<br>
<br>
 متخصصون في بيع القبب الدائرية الأوربية وتأسيس المنتجعات والمخيمات السياحية      </h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {% for video in videos %}
      <!-- Video Item {{ forloop.counter }} -->
      <div class="group cursor-pointer" onclick="openVideoGallery({{ video.index }})">
        <div
          class="bg-black/20 rounded-xl overflow-hidden aspect-video relative border border-white/10 group-hover:border-dan-green transition">
          <div class="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
            <div
              class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center group-hover:bg-dan-green transition">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path
                  d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z">
                </path>
              </svg>
            </div>
          </div>
          {% if video.file %}
          <video class="w-full h-full object-cover pointer-events-none">
            <source src="{{ video.file.url }}" type="video/mp4">
          </video>
          {% elif video.url %}
          <iframe class="w-full h-full pointer-events-none" src="{{ video.url }}?controls=0" frameborder="0"></iframe>
          {% else %}
          <!-- Placeholder bg if no video -->
          <div class="w-full h-full bg-gray-900"></div>
          {% endif %}
        </div>
        <p class="text-center mt-4 font-bold text-lg">{{ video.caption }}</p>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Video Gallery Modal -->
  <div id="video-gallery-modal" class="fixed inset-0 z-50 hidden bg-black/95 flex items-center justify-center">
    <!-- Close Button -->
    <button onclick="closeVideoGallery()" class="absolute top-4 right-4 text-white hover:text-dan-green z-50 p-2">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>

    <!-- Controls Layout -->
    <div class="relative w-full h-full flex flex-col items-center justify-center p-4">

      <!-- Main Video Container -->
      <div class="relative w-full max-w-5xl aspect-video bg-black rounded-xl overflow-hidden shadow-2xl">
        <div id="gallery-video-container" class="w-full h-full flex items-center justify-center">
          <!-- Video content injected here -->
        </div>
      </div>

      <!-- Custom Controls Bar -->
      <div class="flex items-center space-x-4 space-x-reverse mt-6 bg-white/10 backdrop-blur-md px-6 py-3 rounded-full">
        <button onclick="galleryPrev()" class="text-white hover:text-dan-green transition p-2">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </button>

        <button onclick="galleryPlay()" class="text-white hover:text-dan-green transition p-2" title="Play">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
            <path
              d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z">
            </path>
          </svg>
        </button>
        <button onclick="galleryPause()" class="text-white hover:text-dan-green transition p-2" title="Pause">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd"
              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
              clip-rule="evenodd"></path>
          </svg>
        </button>

        <button onclick="galleryNext()" class="text-white hover:text-dan-green transition p-2">

          <svg class="w-6 h-6 transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </button>
      </div>

    </div>
  </div>

  <script>
    // Prepare video sources from Django context
    const videoSources = [
      {% for video in videos %}
    {
      type: "{% if video.file %}file{% elif video.url %}url{% else %}none{% endif %}",
        src: "{% if video.file %}{{ video.file.url }}{% elif video.url %}{{ video.url }}{% endif %}"
    },
    {% endfor %}
    ];
  </script>
</div>
</div>

<!-- Footer -->
<footer class="bg-[#35241b] text-white text-lg py-12 border-t border-white/10">
  <div class="container mx-auto px-6">
    <div class="flex flex-col md:flex-row justify-between items-end">
      <div class="mb-8 md:mb-0">

        <div class="text-sm text-gray-400">
          <p><a href="{% url 'terms' %}" class="hover:text-dan-green transition">الشروط والأحكام</a> | <a
              href="{% url 'privacy' %}" class="hover:text-dan-green transition">سياسة الخصوصية</a></p>
          <p class="mt-1">&copy;
            <script>document.write(new Date().getFullYear())</script> جميع الحقوق محفوظة لشركة <a
              href="{% url 'landing_page' %}" class="hover:text-dan-green transition">NeomTents</a>
          </p>
        </div>
      </div>

      <div class="flex flex-col items-end">
        <!-- Socials -->
        <div class="flex items-center gap-4 mb-6">
          <!-- X (Twitter) -->
          {% if settings.twitter_url %}
          <a href="{{ settings.twitter_url }}" target="_blank" rel="noopener noreferrer"
            class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-dan-green transition-all duration-300 hover:scale-110">
            <img src="{% static 'icons/icons8-x.svg' %}" alt="X (Twitter)"
              class="w-5 h-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300 invert" />
          </a>
          {% endif %}

          <!-- TikTok -->
          {% if settings.tiktok_url %}
          <a href="{{ settings.tiktok_url }}" target="_blank" rel="noopener noreferrer"
            class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-dan-green transition-all duration-300 hover:scale-110">
            <img src="{% static 'icons/tiktok-svgrepo-com.svg' %}" alt="TikTok"
              class="w-5 h-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300 invert" />
          </a>
          {% endif %}

          <!-- Snapchat -->
          {% if settings.snapchat_url %}
          <a href="{{ settings.snapchat_url }}" target="_blank" rel="noopener noreferrer"
            class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-dan-green transition-all duration-300 hover:scale-110">
            <img src="{% static 'icons/snapchat-136-svgrepo-com.svg' %}" alt="Snapchat"
              class="w-5 h-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300 invert" />
          </a>
          {% endif %}

          <!-- Instagram -->
          {% if settings.instagram_url %}
          <a href="{{ settings.instagram_url }}" target="_blank" rel="noopener noreferrer"
            class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-dan-green transition-all duration-300 hover:scale-110">
            <img src="{% static 'icons/instagram.svg' %}" alt="Instagram"
              class="w-5 h-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300 invert" />
          </a>
          {% endif %}

          <!-- LinkedIn -->
          {% if settings.linkedin_url %}
          <a href="{{ settings.linkedin_url }}" target="_blank" rel="noopener noreferrer"
            class="group flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-dan-green transition-all duration-300 hover:scale-110">
            <img src="{% static 'icons/linkedin-svgrepo-com.svg' %}" alt="LinkedIn"
              class="w-5 h-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300 invert" />
          </a>
          {% endif %}
        </div>
        <!-- Logo -->
        <div class="text-lg md:text-xl lg:text-2xl font-bold font-serif text-white/80">
          <a href="https://neomtents.net/en/" target="_blank" rel="noopener noreferrer"
            class="flex items-center gap-2 text-left" dir="ltr">
            www.neomtents.net
          </a>
          <a href="https://wa.me/966546445522" target="_blank" rel="noopener noreferrer"
            class="flex items-center gap-2 mt-2">
            تواصل معنا عبر الواتساب 0546445522
          </a>
        </div>
      </div>
    </div>
  </div>
</footer>
{% endblock %}