{% extends 'myadmin/base_myadmin.html' %}

{% block title %}Property Care Review Queue | MyAdmin{% endblock %}

{% block content %}
<style>
    .review-list-hero {
        border-radius: 36px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.14), transparent 34%),
            linear-gradient(135deg, #052e25, #0f766e);
        color: #fff;
        padding: 2.8rem 2.4rem;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
    }

    .review-list-hero h1 {
        font-weight: 900;
        letter-spacing: -0.04em;
        font-size: clamp(2.1rem, 4vw, 3.3rem);
    }

    .review-list-hero p {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.78;
        max-width: 860px;
        margin-bottom: 0;
    }

    .filter-pill {
        border-radius: 999px;
        font-weight: 800;
        padding: 0.72rem 1rem;
    }

    .review-card {
        height: 100%;
        background: #fff;
        border-radius: 30px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .review-image-wrap {
        height: 210px;
        background: linear-gradient(135deg, #f8fafc, #ecfdf5);
    }

    .review-image {
        width: 100%;
        height: 210px;
        object-fit: cover;
    }

    .review-placeholder {
        width: 100%;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0f766e;
        font-size: 2.8rem;
    }

    .review-card-body {
        padding: 1.35rem;
    }

    .review-title {
        color: #0f172a;
        font-size: 1.2rem;
        font-weight: 900;
        margin-bottom: 0.35rem;
    }

    .review-owner {
        color: #0f766e;
        font-weight: 800;
        font-size: 0.92rem;
        margin-bottom: 0.9rem;
    }

    .review-meta {
        display: grid;
        gap: 0.58rem;
        margin-bottom: 1rem;
    }

    .review-meta-item {
        display: flex;
        gap: 0.55rem;
        color: #64748b;
        font-size: 0.89rem;
        line-height: 1.5;
    }

    .review-meta-item i {
        color: #0f766e;
        margin-top: 0.12rem;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.42rem 0.75rem;
        font-size: 0.78rem;
        font-weight: 900;
    }

    .status-submitted {
        background: #fef3c7;
        color: #92400e;
    }

    .status-approved {
        background: #dcfce7;
        color: #166534;
    }

    .status-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-draft {
        background: #e2e8f0;
        color: #334155;
    }

    .empty-review {
        text-align: center;
        background: #fff;
        border-radius: 34px;
        border: 1px dashed rgba(15, 118, 110, 0.35);
        padding: 3rem 1.5rem;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    }
</style>

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

        <div class="review-list-hero mb-4">
            <h1 class="mb-3">
                Property Care Review Queue
            </h1>

            <p>
                Review owner-submitted properties from the Home in Sri Lanka app.
                Open each property to inspect registration details, uploaded images,
                and make staff approval decisions.
            </p>
        </div>

        <div class="d-flex flex-wrap gap-2 mb-4">
            <a href="?status=submitted"
               class="btn {% if current_status == 'submitted' %}btn-warning{% else %}btn-outline-warning{% endif %} filter-pill">
                Submitted ({{ counts.submitted }})
            </a>

            <a href="?status=approved"
               class="btn {% if current_status == 'approved' %}btn-success{% else %}btn-outline-success{% endif %} filter-pill">
                Approved ({{ counts.approved }})
            </a>

            <a href="?status=rejected"
               class="btn {% if current_status == 'rejected' %}btn-danger{% else %}btn-outline-danger{% endif %} filter-pill">
                Rejected ({{ counts.rejected }})
            </a>

            <a href="?status=draft"
               class="btn {% if current_status == 'draft' %}btn-secondary{% else %}btn-outline-secondary{% endif %} filter-pill">
                Draft ({{ counts.draft }})
            </a>

            <a href="?status=all"
               class="btn {% if current_status == 'all' %}btn-dark{% else %}btn-outline-dark{% endif %} filter-pill">
                All ({{ counts.all }})
            </a>
        </div>

        {% if properties %}
            <div class="row g-4">
                {% for property in properties %}
                    <div class="col-md-6 col-xl-4">
                        <div class="review-card">

                            <div class="review-image-wrap">
                                {% with first_image=property.images.first %}
                                    {% if first_image %}
                                        <img src="{{ first_image.image.url }}"
                                             alt="{{ property.property_name }}"
                                             class="review-image">
                                    {% else %}
                                        <div class="review-placeholder">
                                            <i class="bi bi-house-heart-fill"></i>
                                        </div>
                                    {% endif %}
                                {% endwith %}
                            </div>

                            <div class="review-card-body">

                                <h3 class="review-title">
                                    {{ property.property_name }}
                                </h3>

                                <div class="review-owner">
                                    {{ property.owner.full_name }}
                                </div>

                                <div class="mb-3">
                                    {% if property.review_status == 'submitted' %}
                                        <span class="status-badge status-submitted">
                                            Submitted
                                        </span>
                                    {% elif property.review_status == 'approved' %}
                                        <span class="status-badge status-approved">
                                            Approved
                                        </span>
                                    {% elif property.review_status == 'rejected' %}
                                        <span class="status-badge status-rejected">
                                            Rejected
                                        </span>
                                    {% else %}
                                        <span class="status-badge status-draft">
                                            Draft
                                        </span>
                                    {% endif %}
                                </div>

                                <div class="review-meta">

                                    <div class="review-meta-item">
                                        <i class="bi bi-building-fill"></i>
                                        <span>{{ property.get_property_category_display }}</span>
                                    </div>

                                    <div class="review-meta-item">
                                        <i class="bi bi-geo-alt-fill"></i>
                                        <span>
                                            {{ property.city|default:"City not provided" }}
                                            {% if property.district %}, {{ property.district }}{% endif %}
                                        </span>
                                    </div>

                                    <div class="review-meta-item">
                                        <i class="bi bi-calendar-event"></i>
                                        <span>
                                            Submitted:
                                            {{ property.submitted_for_review_at|date:"M d, Y H:i"|default:"Not submitted" }}
                                        </span>
                                    </div>

                                </div>

                                <a href="{% url 'myadmin:property_care_property_review_detail' property.pk %}"
                                   class="btn btn-dark rounded-pill fw-bold">
                                    Open Review
                                </a>

                                {% if property.review_status == 'approved' %}
                                    <a href="{% url 'myadmin:property_care_visit_create' property.pk %}"
                                        class="btn btn-sm btn-outline-info rounded-pill fw-bold">
                                        Visit
                                    </a>
                                {% endif %}

                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-review">
                <h3 class="fw-bold mb-2">No properties found</h3>
                <p class="text-muted mb-0">
                    There are no properties matching the selected review status.
                </p>
            </div>
        {% endif %}

    </div>
</section>
{% endblock %}