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

{% block title %}
    {% if show_full_details %}
        {{ listing.title }} | Rental Owner Preview
    {% else %}
        Property Preview | Rental Partner Portal
    {% endif %}
{% endblock %}

{% block content %}

<section class="package-list-hero py-5">
    <div class="container">
        <div class="row align-items-center g-4">
            <div class="col-lg-8">
                <span class="section-mini-title">Rental Partner Portal</span>

                {% if show_full_details %}
                    <h1 class="fw-bold mb-3">{{ listing.title }}</h1>
                    <p class="lead text-muted mb-0">
                        Owner-side preview of an approved rental listing.
                    </p>
                {% else %}
                    <h1 class="fw-bold mb-3">
                        {{ listing.get_property_type_display|default:"Rental Property" }} Preview
                    </h1>
                    <p class="lead text-muted mb-0">
                        Limited public preview. Sign up as a rental owner to view more listing information,
                        pricing, and property presentation details.
                    </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 btn-lg">
                        My Rental Dashboard
                    </a>
                {% else %}
                    <a href="{% url 'rental_app:rental_owner_signup' %}" class="btn btn-primary btn-lg">
                        Sign Up as Rental Owner
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
</section>

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

        {% if is_public_limited_preview %}
            <div class="alert alert-warning rounded-4 border-0 mb-4">
                <strong>Limited public preview:</strong>
                Pricing, full description, house rules, deposit information, availability details,
                and complete listing presentation are available only for signed-up rental owners.
            </div>
        {% endif %}

        <div class="row g-4">

            <!-- Left Column -->
            <div class="col-lg-8">

                <!-- Main Image -->
                <div class="detail-card mb-4 overflow-hidden">
                    {% if listing.images.first %}
                        <img
                            src="{{ listing.images.first.image.url }}"
                            alt="{% if show_full_details %}{{ listing.title }}{% else %}Rental property preview{% endif %}"
                            class="img-fluid w-100 rounded-4"
                            style="max-height: 520px; object-fit: cover;"
                        >
                    {% else %}
                        <div class="bg-light rounded-4 d-flex align-items-center justify-content-center"
                             style="height: 360px;">
                            <i class="bi bi-house-heart-fill display-3 text-muted"></i>
                        </div>
                    {% endif %}
                </div>

                <!-- Image Gallery for signed-up rental owners only -->
                {% if show_full_details and all_images %}
                    <div class="detail-card mb-4">
                        <h5 class="fw-bold mb-3">Property Images</h5>

                        <div class="row g-3">
                            {% for image in all_images %}
                                <div class="col-6 col-md-4">
                                    <img
                                        src="{{ image.image.url }}"
                                        alt="{{ image.caption|default:listing.title }}"
                                        class="img-fluid rounded-4"
                                        style="height: 160px; width: 100%; object-fit: cover;"
                                    >
                                    {% if image.caption %}
                                        <p class="small text-muted mt-2 mb-0">{{ image.caption }}</p>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

                <!-- Property Summary -->
                <div class="detail-card mb-4">
                    <h4 class="fw-bold mb-3">Property Summary</h4>

                    {% if show_full_details %}
                        <p class="text-muted">
                            {{ listing.short_description }}
                        </p>
                    {% else %}
                        <p class="text-muted">
                            This is a limited public preview of a property listed in our rental network.
                            Signed-up rental owners can view more details to understand how approved listings are presented.
                        </p>
                    {% endif %}

                    <div class="row g-3 mt-3">
                        <div class="col-md-6">
                            <div class="bg-light rounded-4 p-3 h-100">
                                <div class="small text-muted">Location</div>
                                <div class="fw-semibold">
                                    {{ listing.city }}{% if listing.area %}, {{ listing.area }}{% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="bg-light rounded-4 p-3 h-100">
                                <div class="small text-muted">Property Type</div>
                                <div class="fw-semibold">
                                    {{ listing.get_property_type_display|default:"Rental Property" }}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="bg-light rounded-4 p-3 h-100">
                                <div class="small text-muted">Furnishing</div>
                                <div class="fw-semibold">
                                    {{ listing.get_furnishing_display|default:"Not specified" }}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="bg-light rounded-4 p-3 h-100">
                                <div class="small text-muted">Bedrooms</div>
                                <div class="fw-semibold">
                                    {{ listing.bedrooms }} bedroom{{ listing.bedrooms|pluralize }}
                                </div>
                            </div>
                        </div>

                        {% if show_full_details %}
                            <div class="col-md-6">
                                <div class="bg-light rounded-4 p-3 h-100">
                                    <div class="small text-muted">Bathrooms</div>
                                    <div class="fw-semibold">
                                        {{ listing.bathrooms }} bathroom{{ listing.bathrooms|pluralize }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="bg-light rounded-4 p-3 h-100">
                                    <div class="small text-muted">Maximum Occupants</div>
                                    <div class="fw-semibold">
                                        {{ listing.max_occupants }} occupant{{ listing.max_occupants|pluralize }}
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Features -->
                <div class="detail-card mb-4">
                    <h4 class="fw-bold mb-3">Available Features</h4>

                    <div class="d-flex flex-wrap gap-2">
                        {% if listing.has_wifi %}
                            <span class="badge text-bg-light px-3 py-2">
                                <i class="bi bi-wifi me-1"></i> Wi-Fi
                            </span>
                        {% endif %}

                        {% if listing.has_ac %}
                            <span class="badge text-bg-light px-3 py-2">
                                <i class="bi bi-snow me-1"></i> A/C
                            </span>
                        {% endif %}

                        {% if listing.has_kitchen %}
                            <span class="badge text-bg-light px-3 py-2">
                                <i class="bi bi-cup-hot-fill me-1"></i> Kitchen
                            </span>
                        {% endif %}

                        {% if listing.has_parking %}
                            <span class="badge text-bg-light px-3 py-2">
                                <i class="bi bi-car-front-fill me-1"></i> Parking
                            </span>
                        {% endif %}

                        {% if listing.near_beach %}
                            <span class="badge text-bg-light px-3 py-2">
                                <i class="bi bi-water me-1"></i> Near Beach
                            </span>
                        {% endif %}

                        {% if listing.suitable_for_remote_work %}
                            <span class="badge text-bg-light px-3 py-2">
                                <i class="bi bi-laptop-fill me-1"></i> Remote Work Friendly
                            </span>
                        {% endif %}

                        {% if not listing.has_wifi and not listing.has_ac and not listing.has_kitchen and not listing.has_parking and not listing.near_beach and not listing.suitable_for_remote_work %}
                            <span class="text-muted">No public features added yet.</span>
                        {% endif %}
                    </div>
                </div>

                <!-- Full Details for rental owners only -->
                {% if show_full_details %}
                    <div class="detail-card mb-4">
                        <h4 class="fw-bold mb-3">Full Description</h4>
                        <p class="text-muted mb-0">
                            {{ listing.full_description|linebreaks }}
                        </p>
                    </div>

                    {% if listing.house_rules %}
                        <div class="detail-card mb-4">
                            <h4 class="fw-bold mb-3">House Rules</h4>
                            <p class="text-muted mb-0">
                                {{ listing.house_rules|linebreaks }}
                            </p>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="detail-card mb-4">
                        <h4 class="fw-bold mb-3">More Details Are Hidden</h4>
                        <p class="text-muted mb-4">
                            This public page does not show full description, pricing, house rules,
                            deposit details, or private listing information. These details are available
                            only for signed-up rental owners.
                        </p>

                        <a href="{% url 'rental_app:rental_owner_signup' %}" class="btn btn-primary">
                            Sign Up as Rental Owner
                        </a>
                    </div>
                {% endif %}

            </div>

            <!-- Right Column -->
            <div class="col-lg-4">

                <div class="detail-card mb-4">
                    <h4 class="fw-bold mb-3">Listing Preview</h4>

                    {% if show_pricing %}
                        <div class="package-price mb-3">
                            ${{ listing.monthly_rent_usd }}<span>/month</span>
                        </div>

                        <div class="mb-3">
                            <div class="small text-muted">Security Deposit</div>
                            <div class="fw-semibold">
                                ${{ listing.security_deposit_usd }}
                            </div>
                        </div>
                    {% else %}
                        <div class="alert alert-light border rounded-4">
                            <strong>Price hidden.</strong><br>
                            Sign up as a rental owner to view pricing and listing presentation details.
                        </div>
                    {% endif %}

                    <ul class="list-unstyled mb-4">
                        <li class="mb-2">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Approved public listing
                        </li>

                        {% if listing.is_featured %}
                            <li class="mb-2">
                                <i class="bi bi-star-fill text-warning me-2"></i>
                                Featured listing example
                            </li>
                        {% endif %}

                        <li class="mb-2">
                            <i class="bi bi-house-door-fill text-primary me-2"></i>
                            {{ listing.get_property_type_display|default:"Rental Property" }}
                        </li>

                        <li class="mb-2">
                            <i class="bi bi-geo-alt-fill text-primary me-2"></i>
                            {{ listing.city }}{% if listing.area %}, {{ listing.area }}{% endif %}
                        </li>

                        {% if show_full_details and listing.available_from %}
                            <li class="mb-2">
                                <i class="bi bi-calendar-check-fill text-primary me-2"></i>
                                Available from {{ listing.available_from }}
                            </li>
                        {% endif %}
                    </ul>

                    <div class="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-primary">
                                Sign Up to View More
                            </a>
                        {% endif %}

                        <a href="{% url 'rental_app:public_rental_list' %}" class="btn btn-outline-secondary">
                            Back to Listing Preview
                        </a>
                    </div>
                </div>

                <div class="detail-card">
                    <h5 class="fw-bold mb-3">For Property Owners</h5>

                    <p class="text-muted small">
                        This preview helps rental owners understand how properties may be presented
                        inside the Ensolanka rental partner network.
                    </p>

                    <ul class="list-unstyled small mb-0">
                        <li class="mb-2">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Preview approved listing style
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Understand guest-friendly property features
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Register your own property
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Work with a guided rental process
                        </li>
                    </ul>
                </div>

            </div>

        </div>
    </div>
</section>

{% endblock %}