{% extends "base.html" %}

{% load static %}



{% block content %}

  <div class="relative flex flex-col items-center pt-7 px-4 sm:px-8">
    <!-- Latest Label -->
    <div class="w-full max-w-sm sm:max-w-sm border-2 border-black text-black font-sans font-bold text-xl sm:text-2xl px-4 sm:px-6 z-10">
      <div class="p-2 tracking-widest text-center">
        FEATURED &nbsp; ARTICLES
      </div>
    </div>



   
    {% include "components/featured_posts_section.html" %}



    {% include "components/latest_posts_section.html" %}
  </div>


<div class="w-full bg-white grid grid-cols-1 md:grid-cols-2">
   
  <!-- Poll Content -->
  {% include "components/poll_part.html" %}

<!-- Subscriber Form -->
    {% include "components/subscriber_form.html" %}
</div>
  
  
{% include "components/explore_mega_buttons.html" %}





<script>
  const form = document.getElementById('subscriber-form');
  const message = document.getElementById('message');
  const nameField = document.getElementById('name');
  const emailField = document.getElementById('email');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const name = nameField.value.trim();
    const email = emailField.value.trim();

    if (!name || !email) {
      message.textContent = 'Please fill in all fields.';
      message.classList.remove('hidden', 'text-green-600');
      message.classList.add('text-red-600');
      return;
    }

    // Immediately show user feedback
    message.textContent = 'Subscribing...';
    message.classList.remove('hidden', 'text-red-600');
    message.classList.add('text-green-600');

    // Send data via AJAX (Fetch)
    try {
      // If using Django's default CSRF protection, 
      // you need to pass a CSRF token in the header:
      // let csrftoken = '{{ csrf_token }}';
      // or fetch it from cookie.

      const response = await fetch("{% url 'mimansha_main:subscribe_ajax' %}", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // 'X-CSRFToken': csrftoken, // if CSRF protection is on
        },
        body: JSON.stringify({ name, email })
      });

      if (response.ok) {
        const data = await response.json();
        if (data.message) {
          message.textContent = data.message;
          nameField.value = '';
          emailField.value = '';
        } else {
          message.textContent = 'Subscription successful!';
        }
      } else {
        // Errors from server
        const errorData = await response.json();
        if (errorData.error) {
          // Could be form validation errors
          message.textContent = JSON.stringify(errorData.error);
          message.classList.remove('text-green-600');
          message.classList.add('text-red-600');
        } else {
          message.textContent = 'Error subscribing. Please try again.';
          message.classList.remove('text-green-600');
          message.classList.add('text-red-600');
        }
      }
    } catch (error) {
      // Network or runtime errors
      message.textContent = 'Something went wrong. Please try again.';
      message.classList.remove('text-green-600');
      message.classList.add('text-red-600');
    }
  });
</script>

{% endblock %}