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

{% block title %}Review {{ property.property_name }} | MyAdmin{% endblock %}

{% block content %}
<style>
    .review-detail-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-detail-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.08), transparent 30%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }
    .review-detail-hero h1 {
        font-weight: 900;
        letter-spacing: -0.04em;
        font-size: clamp(2.1rem, 4vw, 3.3rem);
    }

    .review-detail-hero p {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.78;
        max-width: 900px;
    }

    .admin-card {
        background: #fff;
        border-radius: 32px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 20px 46px rgba(15, 23, 42, 0.09);
        overflow: hidden;
    }

    .admin-card-header {
        padding: 1.55rem 1.7rem 1.15rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .admin-card-header h2,
    .admin-card-header h3 {
        font-weight: 900;
        color: #0f172a;
    }

    .admin-card-body {
        padding: 1.7rem;
    }

    .review-info-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .review-info-item {
        border-radius: 22px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 1rem;
    }

    .review-info-label {
        display: block;
        color: #64748b;
        font-size: 0.82rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 0.36rem;
    }

    .review-info-value {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0;
        line-height: 1.5;
    }

    .review-image-main {
        width: 100%;
        height: 360px;
        object-fit: cover;
        border-radius: 26px;
        background: #f8fafc;
    }

    .review-placeholder {
        width: 100%;
        height: 360px;
        border-radius: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f8fafc, #ecfdf5);
        color: #0f766e;
        font-size: 3rem;
    }

    .review-thumb-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.8rem;
        margin-top: 1rem;
    }

    .review-thumb {
        width: 100%;
        height: 92px;
        border-radius: 18px;
        object-fit: cover;
    }

    .decision-card {
        border-radius: 32px;
        background: #fff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 20px 46px rgba(15, 23, 42, 0.09);
        padding: 1.8rem;
    }

    .decision-textarea {
        min-height: 130px;
        border-radius: 18px;
    }

    .review-status-box {
        border-radius: 24px;
        padding: 1.15rem 1.2rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    @media (max-width: 991.98px) {
        .review-info-grid {
            grid-template-columns: 1fr;
        }

        .review-thumb-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
</style>

<section class="review-detail-page py-5">
    <div class="container">

        <div class="review-detail-hero mb-4">
            <h1 class="mb-2">
                Review: {{ property.property_name }}
            </h1>

            <p class="mb-3">
                Staff review workspace for a submitted Property Care record.
                Inspect owner details, property data, uploaded images, and then approve or reject.
            </p>

            <a href="{% url 'myadmin:property_care_property_review_list' %}"
               class="btn btn-light rounded-pill fw-bold">
                <i class="bi bi-arrow-left me-2"></i>
                Back to Review Queue
            </a>
            {% if property.review_status == 'approved' %}
                <a href="{% url 'myadmin:property_care_final_plan_manage' property.pk %}"
                class="btn btn-warning rounded-pill fw-bold">
                    <i class="bi bi-card-checklist me-2"></i>
                    Create / Manage Final Care Plan
                </a>

                <a href="{% url 'myadmin:property_care_visit_create' property.pk %}"
                class="btn btn-info rounded-pill fw-bold">
                    <i class="bi bi-clipboard2-pulse-fill me-2"></i>
                    Create Maintenance Visit
                </a>
            {% endif %}
        </div>

        <div class="row g-4">

            <div class="col-lg-5">

                <div class="admin-card mb-4">
                    <div class="admin-card-header">
                        <h3 class="mb-0">Property Images</h3>
                    </div>

                    <div class="admin-card-body">
                        {% if images %}
                            {% with first_image=images.first %}
                                <img src="{{ first_image.image.url }}"
                                     alt="{{ property.property_name }}"
                                     class="review-image-main">
                            {% endwith %}

                            {% if images.count > 1 %}
                                <div class="review-thumb-grid">
                                    {% for image in images|slice:"1:5" %}
                                        <img src="{{ image.image.url }}"
                                             alt="{{ image.caption|default:property.property_name }}"
                                             class="review-thumb">
                                    {% endfor %}
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="review-placeholder">
                                <i class="bi bi-camera-fill"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <div class="review-status-box">
                    <h5 class="fw-bold mb-3">Current Review Status</h5>

                    <p class="mb-2">
                        <strong>Status:</strong>
                        {{ property.get_review_status_display }}
                    </p>

                    <p class="mb-2">
                        <strong>Submitted:</strong>
                        {{ property.submitted_for_review_at|date:"M d, Y H:i"|default:"Not submitted" }}
                    </p>

                    <p class="mb-2">
                        <strong>Reviewed At:</strong>
                        {{ property.reviewed_at|date:"M d, Y H:i"|default:"Not reviewed yet" }}
                    </p>

                    <p class="mb-0">
                        <strong>Reviewed By:</strong>
                        {% if property.reviewed_by %}
                            <span>
                                {{ property.reviewed_by.get_full_name|default:property.reviewed_by.username }}
                            </span>
                        {% else %}
                            <span class="text-muted">Not reviewed yet</span>
                        {% endif %}
                    </p>
                </div>

            </div>


            <div class="col-lg-7">

                <div class="admin-card mb-4">
                    <div class="admin-card-header">
                        <h3 class="mb-0">Owner & Property Overview</h3>
                    </div>

                    <div class="admin-card-body">
                        <div class="review-info-grid">

                            <div class="review-info-item">
                                <span class="review-info-label">Owner</span>
                                <p class="review-info-value">{{ property.owner.full_name }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Owner Email</span>
                                <p class="review-info-value">{{ property.owner.email }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Property Type</span>
                                <p class="review-info-value">{{ property.get_property_category_display }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Occupancy</span>
                                <p class="review-info-value">{{ property.get_occupancy_status_display }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">City</span>
                                <p class="review-info-value">{{ property.city|default:"Not provided" }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">District</span>
                                <p class="review-info-value">{{ property.district|default:"Not provided" }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Land Size</span>
                                <p class="review-info-value">
                                    {% if property.land_size %}
                                        {{ property.land_size }} {{ property.get_land_size_unit_display }}
                                    {% else %}
                                        Not provided
                                    {% endif %}
                                </p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Floor Area</span>
                                <p class="review-info-value">
                                    {% if property.total_floor_area %}
                                        {{ property.total_floor_area }} {{ property.get_floor_area_unit_display }}
                                    {% else %}
                                        Not provided
                                    {% endif %}
                                </p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Buildings</span>
                                <p class="review-info-value">{{ property.number_of_buildings }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Storeys</span>
                                <p class="review-info-value">{{ property.number_of_storeys }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Bedrooms</span>
                                <p class="review-info-value">{{ property.bedrooms }}</p>
                            </div>

                            <div class="review-info-item">
                                <span class="review-info-label">Bathrooms</span>
                                <p class="review-info-value">{{ property.bathrooms }}</p>
                            </div>

                        </div>

                        {% if property.address %}
                            <div class="alert alert-light border rounded-4 mt-4 mb-0">
                                <strong>Address / Location Description:</strong><br>
                                {{ property.address|linebreaksbr }}
                            </div>
                        {% endif %}

                        {% if property.owner_notes %}
                            <div class="alert alert-warning rounded-4 mt-3 mb-0">
                                <strong>Owner Notes:</strong><br>
                                {{ property.owner_notes|linebreaksbr }}
                            </div>
                        {% endif %}
                    </div>
                </div>


                <div class="decision-card">
                    <h3 class="fw-bold mb-3">
                        Staff Decision
                    </h3>

                    <p class="text-muted">
                        Add an optional internal note for approval or a required rejection note before sending the decision.
                    </p>

                    {% if property.staff_review_note %}
                        <div class="alert alert-info rounded-4">
                            <strong>Previous Staff Review Note:</strong><br>
                            {{ property.staff_review_note|linebreaksbr }}
                        </div>
                    {% endif %}

                    <div class="row g-3">

                        <div class="col-12">
                            <form method="post"
                                  action="{% url 'myadmin:property_care_property_approve' property.pk %}">
                                {% csrf_token %}

                                <label class="form-label fw-bold">Optional approval note</label>
                                <textarea name="review_note"
                                          class="form-control decision-textarea mb-3"
                                          placeholder="Optional internal note for approval..."></textarea>

                                <button type="submit"
                                        class="btn btn-success btn-lg rounded-pill fw-bold w-100"
                                        onclick="return confirm('Approve this property for the next care planning stage?');">
                                    <i class="bi bi-check-circle-fill me-2"></i>
                                    Approve Property
                                </button>
                            </form>
                        </div>

                        <div class="col-12">
                            <form method="post"
                                  action="{% url 'myadmin:property_care_property_reject' property.pk %}">
                                {% csrf_token %}

                                <label class="form-label fw-bold">Required rejection note</label>
                                <textarea name="review_note"
                                          class="form-control decision-textarea mb-3"
                                          placeholder="Explain what needs correction before rejection..."
                                          required></textarea>

                                <button type="submit"
                                        class="btn btn-danger btn-lg rounded-pill fw-bold w-100"
                                        onclick="return confirm('Reject this property and mark it for correction?');">
                                    <i class="bi bi-x-circle-fill me-2"></i>
                                    Reject Property
                                </button>
                            </form>
                        </div>

                    </div>
                </div>

            </div>

        </div>

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