{% extends 'rental_app/base_rental.html' %}
{% load static %}
{% block title %}{{ listing.title }} | Owner Listing Preview{% endblock %}

{% block content %}

<style>
    .owner-listing-page .detail-card,
    .owner-listing-page .status-card,
    .owner-listing-page .summary-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
    }

    .owner-listing-page .detail-card,
    .owner-listing-page .status-card,
    .owner-listing-page .summary-card {
        padding: 1.5rem;
    }

    .owner-listing-page .main-listing-image-wrapper {
        border-radius: 20px;
        overflow: hidden;
    }

    .owner-listing-page .main-listing-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .owner-listing-page .listing-thumb-image {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .owner-listing-page .listing-thumb-image:hover {
        transform: scale(1.02);
        opacity: 0.92;
    }

    .owner-listing-page .placeholder-box {
        min-height: 420px;
        border-radius: 20px;
        background: #f8f9fa;
    }

    .owner-listing-page .badge-row {
        gap: 0.5rem;
    }
</style>

<div class="owner-listing-page">

    <section class="py-5 bg-light">
        <div class="container">
            <div class="row g-4 align-items-start">
                <div class="col-lg-7">
                    <div class="detail-card shadow-sm mb-4">
                        {% if all_images %}
                            <div class="main-listing-image-wrapper mb-3">
                                <img id="mainOwnerListingImage"
                                     src="{{ all_images.0.image.url }}"
                                     class="img-fluid main-listing-image w-100"
                                     alt="{{ listing.title }}"
                                     style="max-height: 520px; object-fit: cover;">
                            </div>

                            {% if all_images|length > 1 %}
                            <div class="row g-3">
                                {% for img in all_images %}
                                <div class="col-4 col-md-3">
                                    <img src="{{ img.image.url }}"
                                         class="img-fluid rounded shadow-sm listing-thumb-image"
                                         alt="{{ img.caption|default:listing.title }}"
                                         style="height: 100px; width: 100%; object-fit: cover; cursor: pointer;"
                                         onclick="document.getElementById('mainOwnerListingImage').src='{{ img.image.url }}'">
                                </div>
                                {% endfor %}
                            </div>
                            {% endif %}
                        {% else %}
                            <div class="placeholder-box d-flex align-items-center justify-content-center">
                                <i class="bi bi-house-heart-fill fs-1 text-muted"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <div class="col-lg-5">
                    <span class="section-mini-title">Owner Listing Preview</span>
                    <h1 class="fw-bold mb-3">{{ listing.title }}</h1>

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

                    <p class="lead text-muted mb-4">{{ listing.short_description }}</p>

                    <div class="d-flex flex-wrap badge-row mb-4">
                        {% if listing.is_approved %}
                            <span class="badge bg-success">Approved</span>
                        {% else %}
                            <span class="badge bg-warning text-dark">Pending Approval</span>
                        {% endif %}

                        {% if listing.is_active %}
                            <span class="badge bg-primary">Active</span>
                        {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                        {% endif %}

                        {% if listing.is_available %}
                            <span class="badge bg-success-subtle text-success-emphasis border">Available</span>
                        {% else %}
                            <span class="badge bg-danger-subtle text-danger-emphasis border">Unavailable</span>
                        {% endif %}

                        {% if listing.visibility == 'private' %}
                            <span class="badge bg-dark">Private</span>
                        {% else %}
                            <span class="badge bg-info text-dark">Public</span>
                        {% endif %}

                        {% if listing.is_featured %}
                            <span class="badge bg-danger">Featured</span>
                        {% endif %}
                    </div>

                    <div class="summary-card shadow-sm mb-4">
                        <h5 class="fw-bold mb-3">Listing Summary</h5>
                        <p class="mb-2"><strong>Property Type:</strong> {{ listing.get_property_type_display }}</p>
                        <p class="mb-2"><strong>City:</strong> {{ listing.city }}{% if listing.area %}, {{ listing.area }}{% endif %}</p>
                        <p class="mb-2"><strong>Bedrooms:</strong> {{ listing.bedrooms }}</p>
                        <p class="mb-2"><strong>Bathrooms:</strong> {{ listing.bathrooms }}</p>
                        <p class="mb-2"><strong>Max Occupants:</strong> {{ listing.max_occupants }}</p>
                        <p class="mb-2"><strong>Furnishing:</strong> {{ listing.get_furnishing_display }}</p>
                        <p class="mb-2"><strong>Security Deposit:</strong> ${{ listing.security_deposit_usd }}</p>
                        {% if listing.available_from %}
                            <p class="mb-2"><strong>Available From:</strong> {{ listing.available_from }}</p>
                        {% endif %}
                        <p class="mb-0"><strong>Created:</strong> {{ listing.created_at|date:"M d, Y" }}</p>
                    </div>

                    <div class="d-flex flex-wrap gap-2 mb-4">
                        {% if listing.has_wifi %}<span class="badge text-bg-primary">Wi-Fi</span>{% endif %}
                        {% if listing.has_ac %}<span class="badge text-bg-primary">A/C</span>{% endif %}
                        {% if listing.has_kitchen %}<span class="badge text-bg-primary">Kitchen</span>{% endif %}
                        {% if listing.has_parking %}<span class="badge text-bg-primary">Parking</span>{% endif %}
                        {% if listing.near_beach %}<span class="badge text-bg-primary">Near Beach</span>{% endif %}
                        {% if listing.suitable_for_remote_work %}<span class="badge text-bg-primary">Remote Work Friendly</span>{% endif %}
                    </div>

                    <div class="d-grid gap-2">
                        <a href="{% url 'rental_app:rental_listing_edit' listing.slug %}" class="btn btn-dark btn-lg">
                            Edit Listing
                        </a>
                        <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-outline-secondary btn-lg">
                            Back to Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-white">
        <div class="container">
            <div class="row g-4 align-items-start">
                <div class="col-lg-8">
                    <div class="detail-card shadow-sm mb-4">
                        <h3 class="fw-bold mb-3">Full Description</h3>
                        <div class="text-muted">
                            {{ listing.full_description|linebreaks }}
                        </div>
                    </div>

                    {% if listing.house_rules %}
                    <div class="detail-card shadow-sm">
                        <h5 class="fw-bold mb-3">House Rules</h5>
                        <div class="text-muted mb-0">
                            {{ listing.house_rules|linebreaks }}
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div class="col-lg-4">
                    <div class="status-card shadow-sm">
                        <h4 class="fw-bold mb-3">Owner Notes</h4>

                        <div class="mb-3">
                            <strong>Approval Status:</strong><br>
                            {% if listing.is_approved %}
                                <span class="text-success">This listing is approved.</span>
                            {% else %}
                                <span class="text-warning">This listing is currently pending admin review.</span>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <strong>Visibility:</strong><br>
                            {% if listing.visibility == 'private' %}
                                This listing is visible only to confirmed foreigners with private access.
                            {% else %}
                                This listing is set as public.
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <strong>Availability:</strong><br>
                            {% if listing.is_available %}
                                The listing is currently marked as available.
                            {% else %}
                                The listing is currently marked as unavailable.
                            {% endif %}
                        </div>

                        <div class="mb-0">
                            <strong>Editing:</strong><br>
                            Updating a listing may require review again before approval is restored.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

{% endblock %}