{% extends "base.html" %}

{% load static %}

{% block content %}
<div class="bg-[#f4f2ef] min-h-screen py-16">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3">Get In Touch</h1>
      <p class="text-gray-600 text-lg max-w-2xl mx-auto">Have questions or want to work with us? We'd love to hear from you!</p>
      <div class="w-24 h-1 bg-red-900 mx-auto mt-6"></div>
    </div>
    
    <div class="max-w-6xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
      <div class="grid grid-cols-1 lg:grid-cols-5">

        <!-- Contact Form - Takes 3/5 of the space on large screens -->
        <div class="lg:col-span-3 p-8 md:p-12">
          <h2 class="text-2xl font-bold text-gray-800 mb-6">Send Us A Message</h2>
          
          <!-- Success Message -->
<!-- Success Message -->
{% if messages %}
<div class="mb-6 space-y-2">
    {% for message in messages %}
    <div class="{% if message.tags == 'success' %}bg-green-100 border-green-500 text-green-700{% else %}bg-red-100 border-red-500 text-red-700{% endif %} border-l-4 p-4 rounded-md shadow-sm" role="alert">
        <div class="flex items-center">
            <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                {% if message.tags == 'success' %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                {% else %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                {% endif %}
            </svg>
            <div>
                <p class="font-bold">{{ message.tags|title }}</p>
                <p>{{ message }}</p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
          
          <!-- Form Message - Added above the name field -->
          <div class="mb-6 p-4 bg-blue-50 text-blue-800 rounded-md border-l-4 border-blue-500">
            <p class="font-medium">Please fill out all fields to help us serve you better.</p>
          </div>
          
          <form method="post" class="space-y-6" id="contactForm">
            {% csrf_token %}
            
            <div>
              <label for="{{ form.name.id_for_label }}" class="block text-gray-700 font-medium mb-2">Full Name</label>
              {{ form.name }}
              {% if form.name.errors %}
                <span class="text-red-500 text-sm">{{ form.name.errors|striptags }}</span>
              {% endif %}
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="{{ form.mail.id_for_label }}" class="block text-gray-700 font-medium mb-2">Email Address</label>
                {{ form.mail }}
                {% if form.mail.errors %}
                  <span class="text-red-500 text-sm">{{ form.mail.errors|striptags }}</span>
                {% endif %}
              </div>
              
              <div>
                <label for="{{ form.phone.id_for_label }}" class="block text-gray-700 font-medium mb-2">Phone Number</label>
                {{ form.phone }}
                {% if form.phone.errors %}
                  <span class="text-red-500 text-sm">{{ form.phone.errors|striptags }}</span>
                {% endif %}
              </div>
            </div>
            
            <div>
              <label for="{{ form.message.id_for_label }}" class="block text-gray-700 font-medium mb-2">Your Message</label>
              {{ form.message }}
              {% if form.message.errors %}
                <span class="text-red-500 text-sm">{{ form.message.errors|striptags }}</span>
              {% endif %}
            </div>
            
            <div class="pt-2">
              <button type="submit" class="w-full bg-red-900 text-white p-4 rounded-lg hover:bg-green-700 transition duration-300 font-medium flex items-center justify-center">
                <span>Send Message</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
              </button>
            </div>
          </form>
        </div>
        
        <!-- Contact Information - Takes 2/5 of the space on large screens -->
        <div class="lg:col-span-2 bg-red-900 text-white p-8 md:p-12 flex flex-col justify-between">
          <div>
            <h2 class="text-2xl font-bold mb-8">Contact Information</h2>
            
            <!-- Location Item -->
            <div class="flex items-start mb-8">
              <div class="bg-black rounded-full p-3 mr-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              </div>
              <div>
                <h4 class="text-lg font-semibold mb-1">Our Location</h4>
                <p class="text-white">{{ location|default:"Kathmandu, Nepal" }}</p>
              </div>
            </div>
            
            <!-- Phone Item -->
            <div class="flex items-start mb-8">
              <div class="bg-black rounded-full p-3 mr-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
              </div>
              <div>
                <h4 class="text-lg font-semibold mb-1">Call Us</h4>
                <p>
                  <a href="tel:{{ phone|default:'+977-9766897317' }}" class="text-white hover:text-blue-300 transition">
                    {{ phone|default:"+977-9766897317" }}
                  </a>
                </p>
              </div>
            </div>
            
            <!-- Email Item -->
            <div class="flex items-start mb-8">
              <div class="bg-black rounded-full p-3 mr-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <div>
                <h4 class="text-lg font-semibold mb-1">Email Us</h4>
                <p>
                  <a href="mailto:{{ email|default:'mimamsha2081@gmail.com' }}" class="text-white hover:text-blue-300 transition">
                    mimamsha2081@gmail.com
                  </a>
                </p>
              </div>
            </div>
          </div>
          
      <!-- Social Media Links -->
                <!-- Social Media Links -->
                <div class="mb-6">
                  <h4 class="text-2xl font-semibold mb-4 text-white">Follow Us:</h4>
                  <div class="flex gap-3">
                    <!-- Facebook -->
                    <a href="https://www.facebook.com/profile.php?id=61575508733332" class="flex items-center justify-center w-10 h-10 bg-white text-blue-600 hover:bg-blue-600 hover:text-white rounded-full transition-colors duration-300 shadow-sm" aria-label="Facebook">
                      <i class="fab fa-facebook-f text-lg"></i>
                    </a>
                    
                    <!-- Instagram -->
                    <a href="https://www.instagram.com/mimamsha_2025" class="flex items-center justify-center w-10 h-10 bg-white text-pink-600 hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-500 hover:text-white rounded-full transition-colors duration-300 shadow-sm" aria-label="Instagram">
                      <i class="fab fa-instagram text-lg"></i>
                    </a>
                    
                   <!-- Option 2: Current X platform (black) -->
                      <a href="#" class="flex items-center justify-center w-10 h-10 bg-white text-black rounded-full transition-colors duration-300 shadow-sm" aria-label="X (Twitter)">
                        <i class="fab fa-x-twitter text-lg"></i>
                      </a>
                                          
                    <!-- LinkedIn -->
                    <a href="https://www.linkedin.com/company/mimamsha" class="flex items-center justify-center w-10 h-10 bg-white text-blue-700 hover:bg-blue-700 hover:text-white rounded-full transition-colors duration-300 shadow-sm" aria-label="LinkedIn">
                      <i class="fab fa-linkedin-in text-lg"></i>
                    </a>
                  </div>
                </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      // Auto-dismiss messages after 5 seconds
      const messages = document.querySelectorAll('[role="alert"]');
      messages.forEach(message => {
          setTimeout(() => {
              message.style.opacity = '0';
              setTimeout(() => message.remove(), 500);
          }, 5000);
      });
      
      // Form validation
      const contactForm = document.getElementById('contactForm');
      if (contactForm) {
          contactForm.addEventListener('submit', function(event) {
              let valid = true;
              const requiredFields = contactForm.querySelectorAll('[required]');
              
              requiredFields.forEach(field => {
                  if (!field.value.trim()) {
                      valid = false;
                      field.classList.add('border-red-500');
                  } else {
                      field.classList.remove('border-red-500');
                  }
              });
              
              if (!valid) {
                  event.preventDefault();
                  contactForm.querySelector('.border-red-500').focus();
              }
          });
      }
  });
  </script>
{% endblock %}