{% extends 'base.html' %}
{% load static %}

{% block title %}Talk to Us | Matrichaya Properties Ltd.{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="py-16 bg-gradient-to-r from-matrichaya-green to-matrichaya-dark-green text-white">
  <div class="container mx-auto px-4">
    <div class="text-center">
      <h1 class="text-4xl md:text-5xl font-bold mb-4">Talk to Us</h1>
      <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
        Ready to find your dream property? Our expert team is here to help you every step of the way.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="tel:01404055171" 
           class="bg-white text-matrichaya-green px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-200 flex items-center justify-center">
          <i class="fas fa-phone mr-2"></i>
          Call Now: 01404-055171
        </a>
        <a href="#contact-form" 
           class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-matrichaya-green transition duration-200 flex items-center justify-center">
          <i class="fas fa-envelope mr-2"></i>
          Send Message
        </a>
      </div>
    </div>
  </div>
</section>

<!-- Contact Form Section -->
<section id="contact-form" class="py-16 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-4">Get in Touch</h2>
        <p class="text-gray-600 text-lg">
          Fill out the form below and we'll get back to you within 24 hours
        </p>
        <div class="w-24 h-1 bg-matrichaya-green mx-auto mt-4"></div>
      </div>

      <!-- Messages -->
      {% if messages %}
        <div class="mb-8">
          {% for message in messages %}
            <div class="{% if message.tags == 'error' %}bg-red-100 border border-red-400 text-red-700{% else %}bg-green-100 border border-green-400 text-green-700{% endif %} px-4 py-3 rounded mb-4">
              {{ message }}
            </div>
          {% endfor %}
        </div>
      {% endif %}

      <div class="grid lg:grid-cols-2 gap-16">
        <!-- Contact Form -->
        <div class="bg-white rounded-lg shadow-lg p-10">
          <h3 class="text-2xl font-bold text-gray-800 mb-6">Send us a Message</h3>
          <form id="contactForm" method="post" class="space-y-6">
            {% csrf_token %}
            <div class="grid md:grid-cols-2 gap-6">
              <div>
                <label for="firstName" class="block text-sm font-medium text-gray-700 mb-2">First Name *</label>
                <input type="text" id="firstName" name="first_name" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-matrichaya-green focus:border-transparent transition duration-200">
              </div>
              <div>
                <label for="lastName" class="block text-sm font-medium text-gray-700 mb-2">Last Name *</label>
                <input type="text" id="lastName" name="last_name" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-matrichaya-green focus:border-transparent transition duration-200">
              </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
              <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address *</label>
                <input type="email" id="email" name="email" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-matrichaya-green focus:border-transparent transition duration-200">
              </div>
              <div>
                <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">Phone Number *</label>
                <input type="tel" id="phone" name="phone" required
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-matrichaya-green focus:border-transparent transition duration-200">
              </div>
            </div>
            
            <div>
              <label for="propertyType" class="block text-sm font-medium text-gray-700 mb-2">Property Interest</label>
              <select id="propertyType" name="property_type"
                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-matrichaya-green focus:border-transparent transition duration-200">
                <option value="">Select Property Type</option>
                {% for value, label in property_types %}
                  <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            
            <div>
              <label for="budget" class="block text-sm font-medium text-gray-700 mb-2">Budget Range</label>
              <select id="budget" name="budget"
                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-matrichaya-green focus:border-transparent transition duration-200">
                <option value="">Select Budget Range</option>
                {% for value, label in budget_ranges %}
                  <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            
            <div>
              <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message *</label>
              <textarea id="message" name="message" rows="4" required
                        placeholder="Tell us about your requirements, preferred location, or any specific questions..."
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-matrichaya-green focus:border-transparent transition duration-200 resize-none"></textarea>
            </div>
            
            <div class="flex items-center">
              <input type="checkbox" id="newsletter" name="newsletter_subscription" class="mr-3">
              <label for="newsletter" class="text-sm text-gray-600">
                Subscribe to our newsletter for property updates and market insights
              </label>
            </div>
            
            <button type="submit" 
                    class="w-full bg-matrichaya-green hover:bg-matrichaya-dark-green text-white px-6 py-3 rounded-lg font-semibold transition duration-200 flex items-center justify-center">
              <i class="fas fa-paper-plane mr-2"></i>
              Send Message
            </button>
          </form>
        </div>

        <!-- Contact Information & Quick Actions -->
        <div class="space-y-12">
          <!-- Contact Info -->
          <div class="bg-white rounded-lg shadow-lg p-10">
            <h3 class="text-2xl font-bold text-gray-800 mb-6">Contact Information</h3>
            <div class="space-y-6">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-matrichaya-green rounded-lg flex items-center justify-center flex-shrink-0">
                  <i class="fas fa-map-marker-alt text-white text-lg"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-gray-800 mb-1">Office Address</h4>
                  <p class="text-gray-600">Nasiruddin Tower (10th Floor), 104/1 Kakrail, Dhaka-1000</p>
                </div>
              </div>
              
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-matrichaya-green rounded-lg flex items-center justify-center flex-shrink-0">
                  <i class="fas fa-phone text-white text-lg"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-gray-800 mb-1">Phone Numbers</h4>
                  <div class="space-y-1">
                    <p class="text-gray-600">(+880) 1404 055171</p>
                    <p class="text-gray-600">(+880) 1404 055172</p>
                  </div>
                </div>
              </div>
              
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-matrichaya-green rounded-lg flex items-center justify-center flex-shrink-0">
                  <i class="fas fa-envelope text-white text-lg"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-gray-800 mb-1">Email Address</h4>
                  <p class="text-gray-600">info@matrichayabd.com</p>
                </div>
              </div>
              
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-matrichaya-green rounded-lg flex items-center justify-center flex-shrink-0">
                  <i class="fas fa-clock text-white text-lg"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-gray-800 mb-1">Business Hours</h4>
                  <div class="space-y-1">
                    <p class="text-gray-600">Saturday - Thursday: 9:00 AM - 6:00 PM</p>
                    <p class="text-gray-600">Friday: Closed</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Quick Actions -->
          <div class="bg-white rounded-lg shadow-lg p-10">
            <h3 class="text-2xl font-bold text-gray-800 mb-6">Quick Actions</h3>
            <div class="space-y-4">
              <a href="tel:01404055171" 
                 class="w-full bg-matrichaya-green hover:bg-matrichaya-dark-green text-white px-6 py-3 rounded-lg font-semibold transition duration-200 flex items-center justify-center">
                <i class="fas fa-phone mr-2"></i>
                Call Now
              </a>
              
              <a href="{% url 'land_properties' %}" 
                 class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-200 flex items-center justify-center">
                <i class="fas fa-map-marked-alt mr-2"></i>
                Browse Land Properties
              </a>
              
              <a href="{% url 'home' %}" 
                 class="w-full border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-3 rounded-lg font-semibold transition duration-200 flex items-center justify-center">
                <i class="fas fa-home mr-2"></i>
                Back to Home
              </a>
            </div>
          </div>

          <!-- Social Media -->
          <div class="bg-white rounded-lg shadow-lg p-10">
            <h3 class="text-2xl font-bold text-gray-800 mb-6">Follow Us</h3>
            <div class="flex space-x-4">
              <a href="#" class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-700 transition duration-200">
                <i class="fab fa-facebook-f text-white"></i>
              </a>
              <a href="#" class="w-12 h-12 bg-blue-400 rounded-lg flex items-center justify-center hover:bg-blue-500 transition duration-200">
                <i class="fab fa-twitter text-white"></i>
              </a>
              <a href="#" class="w-12 h-12 bg-red-600 rounded-lg flex items-center justify-center hover:bg-red-700 transition duration-200">
                <i class="fab fa-youtube text-white"></i>
              </a>
              <a href="#" class="w-12 h-12 bg-pink-600 rounded-lg flex items-center justify-center hover:bg-pink-700 transition duration-200">
                <i class="fab fa-instagram text-white"></i>
              </a>
              <a href="#" class="w-12 h-12 bg-blue-800 rounded-lg flex items-center justify-center hover:bg-blue-900 transition duration-200">
                <i class="fab fa-linkedin-in text-white"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Why Choose Us Section -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-3xl font-bold text-gray-800 mb-4">Why Choose Matrichaya Properties?</h2>
      <div class="w-24 h-1 bg-matrichaya-green mx-auto"></div>
    </div>

    <div class="grid md:grid-cols-3 gap-8">
      <div class="text-center">
        <div class="w-16 h-16 bg-matrichaya-green rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fas fa-award text-white text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Trusted Experience</h3>
        <p class="text-gray-600">Years of experience in the real estate market with a proven track record</p>
      </div>
      
      <div class="text-center">
        <div class="w-16 h-16 bg-matrichaya-green rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fas fa-handshake text-white text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Personalized Service</h3>
        <p class="text-gray-600">Dedicated support throughout your property journey</p>
      </div>
      
      <div class="text-center">
        <div class="w-16 h-16 bg-matrichaya-green rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fas fa-shield-alt text-white text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Secure Investment</h3>
        <p class="text-gray-600">All properties are legally verified and secure for investment</p>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const contactForm = document.getElementById('contactForm');
  
  if (contactForm) {
    contactForm.addEventListener('submit', function(e) {
      const submitBtn = contactForm.querySelector('button[type="submit"]');
      const originalText = submitBtn.innerHTML;
      
      // Show loading state
      submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Sending...';
      submitBtn.disabled = true;
      
      // Form will submit normally, this is just for visual feedback
    });
  }
  
  // Form validation
  const inputs = document.querySelectorAll('#contactForm input, #contactForm textarea, #contactForm select');
  inputs.forEach(input => {
    input.addEventListener('blur', function() {
      validateField(this);
    });
    
    input.addEventListener('input', function() {
      if (this.classList.contains('border-red-500')) {
        validateField(this);
      }
    });
  });
});

function validateField(field) {
  const value = field.value.trim();
  const fieldName = field.name;
  
  // Remove existing error styling
  field.classList.remove('border-red-500', 'border-green-500');
  
  if (field.hasAttribute('required') && !value) {
    field.classList.add('border-red-500');
    return false;
  }
  
  // Email validation
  if (fieldName === 'email' && value) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      field.classList.add('border-red-500');
      return false;
    }
  }
  
  // Phone validation
  if (fieldName === 'phone' && value) {
    const phoneRegex = /^[\+]?[0-9\s\-\(\)]{10,}$/;
    if (!phoneRegex.test(value)) {
      field.classList.add('border-red-500');
      return false;
    }
  }
  
  // Add success styling for valid fields
  if (value) {
    field.classList.add('border-green-500');
  }
  
  return true;
}

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});
</script>
{% endblock %}