{% extends 'rental_app/base_rental.html' %}
{% load static %}

{% block title %}Property Listing Preview | Rental Partner Portal{% endblock %}

{% block content %}

<section class="package-list-hero py-5">
    <div class="container text-center">
        <span class="section-mini-title">Rental Partner Portal</span>
        <h1 class="fw-bold mb-3">Approved Public Rental Listing Preview</h1>
        <p class="lead text-muted">
            Preview how selected rental properties are presented to international guests, digital nomads,
            remote workers, and long-stay visitors interested in living in Sri Lanka.
        </p>
    </div>
</section>

<section class="pb-5">
    <div class="container">

        <!-- Owner Access Message -->
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="detail-card">
                    <div class="row align-items-center g-3">
                        <div class="col-lg-8">
                            <h5 class="fw-bold mb-2">For Property Owners in Sri Lanka</h5>

                            {% if is_public_limited_preview %}
                                <p class="text-muted mb-0">
                                    Public visitors can preview only limited featured rental examples.
                                    Pricing and extended listing information are available only for signed-up rental owners.
                                    If you own a villa, house, apartment, annex, bungalow, guesthouse, or room,
                                    sign up as a rental owner to understand how properties are listed and managed.
                                </p>
                            {% else %}
                                <p class="text-muted mb-0">
                                    You are viewing this page as a registered rental owner. You can preview approved public listings,
                                    compare property presentation styles, view pricing, and manage your own listings through your dashboard.
                                </p>
                            {% endif %}
                        </div>

                        <div class="col-lg-4 text-lg-end">
                            {% if rental_owner_profile %}
                                <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-dark">
                                    My Rental Dashboard
                                </a>
                            {% else %}
                                <a href="{% url 'rental_app:rental_owner_signup' %}" class="btn btn-primary">
                                    Sign Up as Rental Owner
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Public Limited Notice -->
        {% if is_public_limited_preview %}
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="alert alert-warning rounded-4 border-0 mb-0">
                    <strong>Limited public preview:</strong>
                    Rental prices and detailed listing information are hidden from public visitors.
                    Sign up as a rental owner to view more listing information and understand how your property can be presented.
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Filter Box -->
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="detail-card">
                    <form method="get">
                        <div class="row g-3 align-items-end">

                            <div class="col-md-6 col-lg-3">
                                <label class="form-label fw-semibold">City</label>
                                <select name="city" class="form-select">
                                    <option value="">All Cities</option>
                                    {% for value, label in city_choices %}
                                        <option value="{{ value }}" {% if selected_city == value %}selected{% endif %}>
                                            {{ label }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-6 col-lg-3">
                                <label class="form-label fw-semibold">Property Type</label>
                                <select name="property_type" class="form-select">
                                    <option value="">All Types</option>
                                    {% for value, label in property_type_choices %}
                                        <option value="{{ value }}" {% if selected_property_type == value %}selected{% endif %}>
                                            {{ label }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-6 col-lg-3">
                                <label class="form-label fw-semibold">Furnishing</label>
                                <select name="furnishing" class="form-select">
                                    <option value="">Any Furnishing</option>
                                    {% for value, label in furnishing_choices %}
                                        <option value="{{ value }}" {% if selected_furnishing == value %}selected{% endif %}>
                                            {{ label }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-6 col-lg-3">
                                <label class="form-label fw-semibold">Bedrooms</label>
                                <select name="bedrooms" class="form-select">
                                    <option value="">Any</option>
                                    <option value="1" {% if selected_bedrooms == '1' %}selected{% endif %}>1+</option>
                                    <option value="2" {% if selected_bedrooms == '2' %}selected{% endif %}>2+</option>
                                    <option value="3" {% if selected_bedrooms == '3' %}selected{% endif %}>3+</option>
                                    <option value="4" {% if selected_bedrooms == '4' %}selected{% endif %}>4+</option>
                                </select>
                            </div>

                            {% if show_pricing %}
                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Min Rent (USD)</label>
                                    <input
                                        type="number"
                                        name="min_rent"
                                        value="{{ selected_min_rent }}"
                                        class="form-control"
                                        placeholder="e.g. 300"
                                    >
                                </div>

                                <div class="col-md-6 col-lg-3">
                                    <label class="form-label fw-semibold">Max Rent (USD)</label>
                                    <input
                                        type="number"
                                        name="max_rent"
                                        value="{{ selected_max_rent }}"
                                        class="form-control"
                                        placeholder="e.g. 1500"
                                    >
                                </div>
                            {% else %}
                                <div class="col-md-12 col-lg-6">
                                    <div class="alert alert-light border rounded-4 mb-0">
                                        <strong>Rental values are hidden.</strong>
                                        Sign up as a rental owner to view pricing and compare listing values.
                                    </div>
                                </div>
                            {% endif %}

                            <div class="col-md-12 col-lg-6">
                                <label class="form-label fw-semibold d-block mb-2">Features</label>

                                <div class="d-flex flex-wrap gap-3">
                                    <div class="form-check">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="has_wifi"
                                            id="has_wifi"
                                            value="1"
                                            {% if request.GET.has_wifi %}checked{% endif %}
                                        >
                                        <label class="form-check-label" for="has_wifi">Wi-Fi</label>
                                    </div>

                                    <div class="form-check">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="has_ac"
                                            id="has_ac"
                                            value="1"
                                            {% if request.GET.has_ac %}checked{% endif %}
                                        >
                                        <label class="form-check-label" for="has_ac">A/C</label>
                                    </div>

                                    <div class="form-check">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="has_kitchen"
                                            id="has_kitchen"
                                            value="1"
                                            {% if request.GET.has_kitchen %}checked{% endif %}
                                        >
                                        <label class="form-check-label" for="has_kitchen">Kitchen</label>
                                    </div>

                                    <div class="form-check">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="has_parking"
                                            id="has_parking"
                                            value="1"
                                            {% if request.GET.has_parking %}checked{% endif %}
                                        >
                                        <label class="form-check-label" for="has_parking">Parking</label>
                                    </div>

                                    <div class="form-check">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="near_beach"
                                            id="near_beach"
                                            value="1"
                                            {% if request.GET.near_beach %}checked{% endif %}
                                        >
                                        <label class="form-check-label" for="near_beach">Near Beach</label>
                                    </div>

                                    <div class="form-check">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="suitable_for_remote_work"
                                            id="suitable_for_remote_work"
                                            value="1"
                                            {% if request.GET.suitable_for_remote_work %}checked{% endif %}
                                        >
                                        <label class="form-check-label" for="suitable_for_remote_work">Remote Work Friendly</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 d-flex flex-wrap gap-2">
                                <button type="submit" class="btn btn-dark">
                                    Apply Filters
                                </button>

                                <a href="{% url 'rental_app:public_rental_list' %}" class="btn btn-outline-secondary">
                                    Reset
                                </a>

                                {% if rental_owner_profile %}
                                    <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-outline-primary ms-md-auto">
                                        Manage My Listings
                                    </a>
                                {% else %}
                                    <a href="{% url 'rental_app:rental_owner_signup' %}" class="btn btn-primary ms-md-auto">
                                        List My Property
                                    </a>
                                {% endif %}
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Result Count -->
        <div class="row mb-3">
            <div class="col-12 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                <div>
                    <h5 class="fw-bold mb-1">
                        {% if is_public_limited_preview %}
                            Limited Public Listing Preview
                        {% else %}
                            Available Public Listings
                        {% endif %}
                    </h5>

                    <p class="text-muted mb-0">
                        Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ total_results }} result{{ total_results|pluralize }}
                    </p>
                </div>

                {% if page_obj.paginator.num_pages > 1 %}
                    <div class="text-muted small">
                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Listings -->
        <div class="row g-4">
            {% for listing in listings %}
                <div class="col-md-6 col-xl-3">
                    <div class="package-card h-100">

                        {% if listing.images.first %}
                            <img
                                src="{{ listing.images.first.image.url }}"
                                class="package-image"
                                alt="{{ listing.get_property_type_display|default:'Rental property' }}"
                            >
                        {% else %}
                            <div class="package-image package-image-placeholder d-flex align-items-center justify-content-center">
                                <i class="bi bi-house-heart-fill"></i>
                            </div>
                        {% endif %}

                        <div class="package-body">

                            {% if show_pricing %}
                                <div class="package-price mb-2">
                                    ${{ listing.monthly_rent_usd }}<span>/month</span>
                                </div>
                            {% else %}
                                <div class="mb-2">
                                    <span class="badge bg-light text-dark border">
                                        Price hidden for public preview
                                    </span>
                                </div>
                            {% endif %}

                            {% if show_pricing %}
                                <h5 class="fw-bold mb-2">
                                    {{ listing.title }}
                                </h5>
                            {% else %}
                                <h5 class="fw-bold mb-2">
                                    {{ listing.get_property_type_display|default:"Rental Property" }}
                                </h5>
                            {% endif %}

                            <ul class="package-mini-list mb-3">
                                <li>
                                    <i class="bi bi-geo-alt-fill"></i>
                                    {{ listing.city }}{% if listing.area %}, {{ listing.area }}{% endif %}
                                </li>

                                {% if listing.property_type %}
                                    <li>
                                        <i class="bi bi-house-door-fill"></i>
                                        {{ listing.get_property_type_display }}
                                    </li>
                                {% endif %}

                                {% if listing.furnishing %}
                                    <li>
                                        <i class="bi bi-lamp-fill"></i>
                                        {{ listing.get_furnishing_display }}
                                    </li>
                                {% endif %}

                                {% if listing.bedrooms %}
                                    <li>
                                        <i class="bi bi-door-open-fill"></i>
                                        {{ listing.bedrooms }} bedroom{{ listing.bedrooms|pluralize }}
                                    </li>
                                {% endif %}

                                {% if show_pricing and listing.bathrooms %}
                                    <li>
                                        <i class="bi bi-droplet-fill"></i>
                                        {{ listing.bathrooms }} bathroom{{ listing.bathrooms|pluralize }}
                                    </li>
                                {% endif %}
                            </ul>

                            <div class="d-flex flex-wrap gap-1 mb-3">
                                {% if listing.has_wifi %}
                                    <span class="badge text-bg-light">Wi-Fi</span>
                                {% endif %}

                                {% if listing.has_ac %}
                                    <span class="badge text-bg-light">A/C</span>
                                {% endif %}

                                {% if listing.has_kitchen %}
                                    <span class="badge text-bg-light">Kitchen</span>
                                {% endif %}

                                {% if listing.has_parking %}
                                    <span class="badge text-bg-light">Parking</span>
                                {% endif %}

                                {% if listing.near_beach %}
                                    <span class="badge text-bg-light">Near Beach</span>
                                {% endif %}

                                {% if listing.suitable_for_remote_work %}
                                    <span class="badge text-bg-light">Remote Work</span>
                                {% endif %}
                            </div>

                            {% if show_pricing %}
                                {% if listing.short_description %}
                                    <p class="text-muted small mb-3">
                                        {{ listing.short_description|truncatechars:110 }}
                                    </p>
                                {% else %}
                                    <p class="text-muted small mb-3">
                                        Approved public rental listing suitable for international living in Sri Lanka.
                                    </p>
                                {% endif %}
                            {% else %}
                                <p class="text-muted small mb-3">
                                    Public preview only. Sign up as a rental owner to see how approved listings are presented with more information.
                                </p>
                            {% endif %}

                            {% if listing.is_featured %}
                                <div class="mb-3">
                                    <span class="badge bg-warning text-dark">
                                        Featured Public Example
                                    </span>
                                </div>
                            {% endif %}

                            <div class="alert alert-light border rounded-3 small mb-3">
                                {% if show_pricing %}
                                    This is an owner-side preview of an approved public listing.
                                {% else %}
                                    Full listing details and prices are available only for signed-up rental owners.
                                {% endif %}
                            </div>

                            <div class="mt-auto d-grid gap-2">
                                {% if rental_owner_profile %}
                                    <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-dark">
                                        Manage My Properties
                                    </a>
                                {% else %}
                                    <a href="{% url 'rental_app:rental_owner_signup' %}" class="btn btn-outline-primary">
                                        Sign Up to View More
                                    </a>
                                {% endif %}
                            </div>

                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="detail-card text-center">
                        <h5 class="fw-bold mb-2">No rentals found</h5>

                        <p class="text-muted mb-4">
                            No approved public rental listings match the selected filters.
                        </p>

                        {% if rental_owner_profile %}
                            <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-dark">
                                Add or Manage My Listings
                            </a>
                        {% else %}
                            <a href="{% url 'rental_app:rental_owner_signup' %}" class="btn btn-primary">
                                Become a Property Partner
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if page_obj.paginator.num_pages > 1 %}
            <div class="row mt-5">
                <div class="col-12">
                    <nav aria-label="Rental listing pagination">
                        <ul class="pagination justify-content-center flex-wrap gap-1">

                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a
                                        class="page-link rounded-pill px-3"
                                        href="?{% if query_string %}{{ query_string }}&{% endif %}page=1"
                                    >
                                        First
                                    </a>
                                </li>

                                <li class="page-item">
                                    <a
                                        class="page-link rounded-pill px-3"
                                        href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.previous_page_number }}"
                                    >
                                        Previous
                                    </a>
                                </li>
                            {% endif %}

                            {% for num in page_obj.paginator.page_range %}
                                {% if num == page_obj.number %}
                                    <li class="page-item active" aria-current="page">
                                        <span class="page-link rounded-pill px-3">
                                            {{ num }}
                                        </span>
                                    </li>
                                {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
                                    <li class="page-item">
                                        <a
                                            class="page-link rounded-pill px-3"
                                            href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ num }}"
                                        >
                                            {{ num }}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a
                                        class="page-link rounded-pill px-3"
                                        href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.next_page_number }}"
                                    >
                                        Next
                                    </a>
                                </li>

                                <li class="page-item">
                                    <a
                                        class="page-link rounded-pill px-3"
                                        href="?{% if query_string %}{{ query_string }}&{% endif %}page={{ page_obj.paginator.num_pages }}"
                                    >
                                        Last
                                    </a>
                                </li>
                            {% endif %}

                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}

    </div>
</section>

{% endblock %}