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

{% block title %}{{ land_property.name }} | Matrichaya Properties Ltd.{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="bg-matrichaya-green text-white py-16">
  <div class="container mx-auto px-4">
    <div class="text-center">
      <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ land_property.name }}</h1>
      <nav class="text-lg">
        <a href="{% url 'home' %}" class="hover:text-green-200">Home</a>
        <i class="fas fa-chevron-right mx-2"></i>
        <a href="{% url 'land_properties' %}" class="hover:text-green-200">Land Properties</a>
        <i class="fas fa-chevron-right mx-2"></i>
        <span class="text-green-200">{{ land_property.name }}</span>
      </nav>
    </div>
  </div>
</section>

<!-- Project Details -->
<section class="py-16 bg-white">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
      <!-- Main Content -->
      <div class="lg:col-span-2 space-y-8">
        <!-- Project Image -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
          {% if land_property.image %}
            <img src="{{ land_property.image.url }}" 
                 alt="{{ land_property.name }}" 
                 class="w-full h-96 object-cover">
          {% else %}
            <div class="w-full h-96 bg-gray-300 flex items-center justify-center">
              <div class="text-center">
                <i class="fas fa-map-marked-alt text-gray-600 text-6xl mb-4"></i>
                <p class="text-gray-600 text-lg font-medium">Project Image</p>
                <p class="text-gray-500 text-sm mt-2">No image available for this project</p>
              </div>
            </div>
          {% endif %}
        </div>
        
        <!-- Project Description -->
        <div class="bg-white rounded-lg shadow-lg p-8">
          <h2 class="text-2xl font-bold text-gray-800 mb-6">Project Overview</h2>
          <div class="prose max-w-none text-gray-700">
            {{ land_property.description|linebreaks }}
          </div>
        </div>

        <!-- Amenities -->
        {% if land_property.amenities %}
          <div class="bg-white rounded-lg shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Amenities</h2>
            <div class="prose max-w-none text-gray-700">
              {{ land_property.amenities|linebreaks }}
            </div>
          </div>
        {% endif %}
      </div>
      
      <!-- Sidebar -->
      <div class="space-y-8">
        <!-- Project Info -->
        <div class="bg-white rounded-lg shadow-lg p-8">
          <h3 class="text-xl font-bold text-gray-800 mb-6">Project Information</h3>
          <div class="space-y-4">
            <div class="flex justify-between">
              <span class="text-gray-600">Status:</span>
              <span class="font-medium">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                  {% if land_property.project_status == 'ongoing' %}bg-blue-100 text-blue-800
                  {% elif land_property.project_status == 'completed' %}bg-green-100 text-green-800
                  {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                  {{ land_property.get_project_status_display }}
                </span>
              </span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">Type:</span>
              <span class="font-medium">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                  {% if land_property.property_type == 'residential' %}bg-green-100 text-green-800
                  {% elif land_property.property_type == 'commercial' %}bg-purple-100 text-purple-800
                  {% else %}bg-orange-100 text-orange-800{% endif %}">
                  {{ land_property.get_property_type_display }}
                </span>
              </span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">Area:</span>
              <span class="font-medium">{{ land_property.area }}</span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">Location:</span>
              <span class="font-medium text-right max-w-48">{{ land_property.location }}</span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">Division:</span>
              <span class="font-medium">{{ land_property.get_division_display }}</span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">District:</span>
              <span class="font-medium">{{ land_property.district }}</span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">Area:</span>
              <span class="font-medium">{{ land_property.area_name }}</span>
            </div>
            
            {% if land_property.price_per_katha %}
              <div class="flex justify-between">
                <span class="text-gray-600">Price per Katha:</span>
                <span class="font-medium text-lg text-matrichaya-green">৳{{ land_property.price_per_katha|floatformat:0 }}</span>
              </div>
            {% endif %}
            
            {% if land_property.total_plots %}
              <div class="flex justify-between">
                <span class="text-gray-600">Total Plots:</span>
                <span class="font-medium">{{ land_property.total_plots }}</span>
              </div>
              
              <div class="flex justify-between">
                <span class="text-gray-600">Available Plots:</span>
                <span class="font-medium">{{ land_property.available_plots }}</span>
              </div>
              
              <div class="flex justify-between">
                <span class="text-gray-600">Sold Plots:</span>
                <span class="font-medium">{{ land_property.sold_plots }}</span>
              </div>
            {% endif %}
            
            <div class="flex justify-between">
              <span class="text-gray-600">Created:</span>
              <span class="font-medium">{{ land_property.created_at|date:"M d, Y" }}</span>
            </div>
          </div>
        </div>

        <!-- Progress (if applicable) -->
        {% if land_property.total_plots and land_property.available_plots %}
          <div class="bg-white rounded-lg shadow-lg p-8">
            <h3 class="text-xl font-bold text-gray-800 mb-6">Project Progress</h3>
            <div class="space-y-4">
              <div class="flex justify-between text-sm text-gray-600">
                <span>Completion</span>
                <span>{{ land_property.completion_percentage }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-3">
                <div class="bg-matrichaya-green h-3 rounded-full transition-all duration-500" style="width: {{ land_property.completion_percentage }}%"></div>
              </div>
              <div class="text-center text-sm text-gray-600">
                {{ land_property.sold_plots }} of {{ land_property.total_plots }} plots sold
              </div>
            </div>
          </div>
        {% endif %}

        <!-- Contact Actions -->
        <div class="bg-white rounded-lg shadow-lg p-8">
          <h3 class="text-xl font-bold text-gray-800 mb-6">Get More Information</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-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-200 flex items-center justify-center">
              <i class="fas fa-list mr-2"></i>
              View All Projects
            </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>
      </div>
    </div>
  </div>
</section>

<!-- Related Projects -->
{% if related_properties %}
  <section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">
        Related Projects
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for related in related_properties %}
          <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
            {% if related.image %}
              <img src="{{ related.image.url }}" 
                   alt="{{ related.name }}" 
                   class="w-full h-48 object-cover">
            {% else %}
              <div class="w-full h-48 bg-gray-300 flex items-center justify-center">
                <div class="text-center">
                  <i class="fas fa-map-marked-alt text-gray-600 text-4xl mb-2"></i>
                  <p class="text-gray-600 text-sm font-medium">Project Image</p>
                </div>
              </div>
            {% endif %}
            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-800 mb-2">{{ related.name }}</h3>
              <div class="space-y-2 text-gray-600 mb-4">
                <p><span class="font-semibold">Area:</span> {{ related.area }}</p>
                <p><span class="font-semibold">Location:</span> {{ related.location }}</p>
              </div>
              <a href="{% url 'land_property_detail' related.pk %}" 
                 class="bg-matrichaya-green hover:bg-matrichaya-dark-green text-white px-6 py-2 rounded-lg font-semibold transition duration-200 inline-block w-full text-center">
                View Details
              </a>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
{% endif %}
{% endblock %}