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

{% block title %}Properties for Sale, Rent & Lease in Nigeria | {{ site.site_name }}{% endblock %}
{% block meta_description %}Browse verified properties for sale, rent, and lease in Abuja, Lagos, Port Harcourt and
across Nigeria. Filter by type, location, and price on {{ site.site_name }}.{% endblock %}

{% block content %}

<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>Properties in Nigeria</h1>
            <p>{% if filters %}Showing filtered results &mdash; {% endif %}{{ total_count }}
                propert{{ total_count|pluralize:'y,ies' }} found</p>
        </div>
    </div>
</div>

<div class="breadcrumb-bar">
    <div class="container">
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="{% url 'core:home' %}">Home</a>
            <span>&rsaquo;</span>
            <span class="current">Properties</span>
        </nav>
    </div>
</div>

<section class="properties-section">
    <div class="container">

        <!-- Filter Bar -->
        <div class="filter-bar">
            <form method="get" action="" id="property-filter-form">
                <div class="filter-row">
                    <div class="filter-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8" />
                            <line x1="21" y1="21" x2="16.65" y2="16.65" />
                        </svg>
                        <input type="text" name="q" placeholder="Search…" value="{{ filters.q|default:'' }}"
                            id="filter-search" aria-label="Search">
                    </div>
                    <div class="filter-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                        </svg>
                        <select name="listing_type" id="filter-listing-type" aria-label="Listing type">
                            <option value="">All Types</option>
                            {% for val, label in listing_types %}
                            <option value="{{ val }}" {% if filters.listing_type == val %}selected{% endif %}>{{ label }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="filter-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <rect x="2" y="7" width="20" height="14" rx="2" />
                        </svg>
                        <select name="property_type" id="filter-property-type" aria-label="Property type">
                            <option value="">All Categories</option>
                            {% for val, label in property_types %}
                            <option value="{{ val }}" {% if filters.property_type == val %}selected{% endif %}>
                                {{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="filter-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                        </svg>
                        <select name="city" id="filter-city" aria-label="City">
                            <option value="">All Cities</option>
                            {% for c in cities %}
                            <option value="{{ c }}" {% if filters.city == c %}selected{% endif %}>{{ c }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="filter-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="1" x2="12" y2="23" />
                            <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
                        </svg>
                        <input type="number" name="min_price" placeholder="Min ₦"
                            value="{{ filters.min_price|default:'' }}" id="filter-min-price"
                            aria-label="Minimum price">
                    </div>
                    
                    <div style="display: flex; gap: 15px; align-items: center; margin-left: 10px;">
                        <label style="font-size: 0.85rem; display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox" name="is_furnished" {% if filters.is_furnished %}checked{% endif %}> Furnished
                        </label>
                        <label style="font-size: 0.85rem; display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox" name="is_serviced" {% if filters.is_serviced %}checked{% endif %}> Serviced
                        </label>
                        <label style="font-size: 0.85rem; display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox" name="is_newly_built" {% if filters.is_newly_built %}checked{% endif %}> Newly Built
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary" id="filter-submit-btn">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                </div>
                {% if filters %}
                <a href="{% url 'properties:list' %}" class="filter-clear-link">
                    <i class="fas fa-times"></i> Clear all filters
                </a>
                {% endif %}
            </form>
        </div>

        <p class="filter-results">{{ total_count }} propert{{ total_count|pluralize:'y,ies' }} found</p>

        {% if properties %}
        <div class="properties-grid">
            {% for prop in properties %}
            <article class="property-card card fade-up">
                <a href="{% url 'properties:detail' prop.slug %}" aria-label="{{ prop.title }}">
                    <div class="card-image">
                        {% with img=prop.get_primary_image %}
                        {% if img %}
                        <img src="{{ img.image.url }}" alt="{{ prop.title }}" loading="lazy">
                        {% else %}
                        <div class="card-img-placeholder"><i class="fas fa-image"></i></div>
                        {% endif %}
                        {% endwith %}
                        <div class="card-badges">
                            <span
                                class="badge badge-{{ prop.listing_type|cut:'for_' }}">{{ prop.get_listing_type_display }}</span>
                            <span class="badge badge-{{ prop.status }}">{{ prop.get_status_display }}</span>
                        </div>
                        <div class="card-price">{{ prop.formatted_price }}</div>
                        <button type="button" onclick="event.preventDefault(); toggleFavoriteList({{ prop.id }}, this)" 
                            style="position: absolute; top: 10px; right: 10px; background: white; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10;">
                            <i class="fa{% if prop.id in favorites %}s{% else %}r{% endif %} fa-heart" style="color: {% if prop.id in favorites %}red{% else %}#555{% endif %}; font-size: 1.1rem;"></i>
                        </button>
                    </div>
                </a>
                <div class="card-body">
                    <h2 class="card-title">
                        <a href="{% url 'properties:detail' prop.slug %}">{{ prop.title }}</a>
                    </h2>
                    <p class="card-location">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                            <circle cx="12" cy="10" r="3" />
                        </svg>
                        {{ prop.city }}, {{ prop.state }}
                    </p>
                    <div class="card-specs">
                        {% if prop.bedrooms is not None %}
                        <div class="spec"><i class="fas fa-bed"></i> {{ prop.bedrooms }} Beds</div>
                        {% endif %}
                        {% if prop.bathrooms is not None %}
                        <div class="spec"><i class="fas fa-bath"></i> {{ prop.bathrooms }} Baths</div>
                        {% endif %}
                        {% if prop.area_sqm %}
                        <div class="spec"><i class="fas fa-ruler-combined"></i> {{ prop.area_sqm }}sqm</div>
                        {% endif %}
                        {% if prop.is_parent %}
                        <div class="spec"><i class="fas fa-building"></i> {{ prop.child_units.count }} Units</div>
                        {% endif %}
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                <polyline points="9,22 9,12 15,12 15,22" />
            </svg>
            <h3>No properties found</h3>
            <p>Try adjusting your filters or search term to see more results.</p>
            <a href="{% url 'properties:list' %}" class="btn btn-primary" id="clear-filters-btn">Clear Filters</a>
        </div>
        {% endif %}

    </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
function toggleFavoriteList(id, btnElement) {
    fetch(`/properties/toggle-favorite/${id}/`)
        .then(res => res.json())
        .then(data => {
            if(data.status === 'ok') {
                const icon = btnElement.querySelector('i');
                if(data.added) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    icon.style.color = 'red';
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    icon.style.color = '#555';
                }
            }
        });
}
</script>
{% endblock %}