{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}{{ property.property_name }} | Home in Sri Lanka{% endblock %}


{% block extra_css %}
<style>
    /* =========================================================
       MANAGED PROPERTY DETAIL PAGE
    ========================================================= */

    .pm-detail-page {
        position: relative;
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: clamp(5rem, 8vw, 7rem);
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.12), transparent 32%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.10), transparent 34%),
            linear-gradient(180deg, #f8fafc 0%, #eef7f2 48%, #ffffff 100%);
    }

    .pm-detail-hero {
        position: relative;
        overflow: hidden;
        border-radius: 36px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
            linear-gradient(135deg, #052e25 0%, #0f766e 100%);
        color: #fff;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
    }

    .pm-detail-hero-inner {
        padding: 2.6rem 2.4rem;
        position: relative;
        z-index: 2;
    }

    .pm-detail-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.48rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fef3c7;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 1rem;
    }

    .pm-detail-hero h1 {
        font-size: clamp(2.15rem, 4vw, 3.45rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin-bottom: 0.8rem;
    }

    .pm-detail-subtitle {
        color: #fbbf24;
        font-weight: 900;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .pm-detail-hero p {
        max-width: 820px;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.78;
        font-size: 1.03rem;
        margin-bottom: 1.45rem;
    }

    .pm-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .pm-detail-actions > a,
    .pm-detail-actions > span,
    .pm-detail-actions > form {
        display: inline-flex;
    }

    .pm-review-submit-form {
        margin: 0;
    }

    .pm-review-submit-form .btn {
        height: 100%;
    }

    /* Optional: keep every action button text neatly centered */
    .pm-detail-actions .btn,
    .pm-detail-actions .pm-review-submit-form button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .pm-detail-btn-primary {
        border-radius: 999px;
        border: none;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        font-weight: 900;
        padding: 0.9rem 1.45rem;
        box-shadow: 0 16px 32px rgba(245, 158, 11, 0.22);
    }

    .pm-detail-btn-primary:hover {
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-detail-btn-outline {
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        font-weight: 800;
        padding: 0.9rem 1.45rem;
    }

    .pm-detail-btn-outline:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    .pm-status-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-top: 1.4rem;
    }

    .pm-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        padding: 0.46rem 0.82rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 900;
    }

    .pm-status-pill.approved {
        background: rgba(220, 252, 231, 0.96);
        color: #166534;
    }

    .pm-status-pill.pending {
        background: rgba(254, 243, 199, 0.96);
        color: #92400e;
    }

    .pm-status-pill.active {
        background: rgba(219, 234, 254, 0.96);
        color: #1d4ed8;
    }

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

    .pm-status-pill.draft {
        background: #e2e8f0;
        color: #334155;
    }
    
    .pm-main-card {
        border-radius: 32px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 20px 46px rgba(15, 23, 42, 0.09);
        overflow: hidden;
    }

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

    .pm-card-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #0f766e;
        font-size: 0.83rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.45rem;
    }

    .pm-card-header h2,
    .pm-card-header h3 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.35rem;
    }

    .pm-card-header p {
        color: #64748b;
        line-height: 1.65;
        margin-bottom: 0;
    }

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

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

    .pm-image-placeholder {
        height: 360px;
        border-radius: 26px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 28%),
            linear-gradient(135deg, #f8fafc, #ecfdf5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0f766e;
        font-size: 3.2rem;
        border: 1px dashed rgba(15, 118, 110, 0.28);
    }

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

    .pm-thumb-image {
        width: 100%;
        height: 95px;
        object-fit: cover;
        border-radius: 18px;
        background: #f8fafc;
        display: block;
    }

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

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

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

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

    .pm-section-stack {
        display: grid;
        gap: 1rem;
    }

    .pm-check-row {
        display: flex;
        align-items: flex-start;
        gap: 0.72rem;
        padding: 0.95rem 1rem;
        border-radius: 20px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .pm-check-row i.yes {
        color: #16a34a;
    }

    .pm-check-row i.no {
        color: #94a3b8;
    }

    .pm-check-row strong {
        color: #0f172a;
        font-weight: 900;
    }

    .pm-check-row span {
        color: #64748b;
        line-height: 1.55;
    }

    .pm-note-box {
        border-radius: 24px;
        background: #fffbeb;
        border: 1px solid #fde68a;
        padding: 1.15rem 1.2rem;
        color: #92400e;
        line-height: 1.72;
    }

    .pm-roadmap-card {
        border-radius: 30px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 28%),
            linear-gradient(135deg, #f8fafc, #ecfdf5);
        border: 1px solid rgba(15, 118, 110, 0.18);
        padding: 1.6rem;
    }

    .pm-roadmap-card h4 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 1rem;
    }

    .pm-roadmap-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .pm-roadmap-list li {
        display: flex;
        gap: 0.7rem;
        color: #475569;
        line-height: 1.65;
        margin-bottom: 0.85rem;
    }

    .pm-roadmap-list li:last-child {
        margin-bottom: 0;
    }

    .pm-roadmap-list i {
        color: #0f766e;
        margin-top: 0.18rem;
    }

    @media (max-width: 991.98px) {
        .pm-detail-hero-inner,
        .pm-card-header,
        .pm-card-body {
            padding-left: 1.35rem;
            padding-right: 1.35rem;
        }

        .pm-detail-hero,
        .pm-main-card {
            border-radius: 28px;
        }

        .pm-info-grid {
            grid-template-columns: 1fr;
        }

        .pm-thumb-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .pm-detail-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .pm-detail-actions > a,
        .pm-detail-actions > span,
        .pm-detail-actions > form {
            width: 100%;
        }

        .pm-detail-actions .btn,
        .pm-detail-actions .pm-review-submit-form button {
            width: 100%;
            min-height: 56px;
        }
    }

    /* Prevent final content from visually colliding with the site footer */
    .pm-detail-page .row.g-4 {
        margin-bottom: 1rem;
    }

    .pm-detail-page .col-lg-7 > :last-child,
    .pm-detail-page .col-lg-5 > :last-child {
        margin-bottom: 0;
    }

    @media (max-width: 767.98px) {
        .pm-detail-page {
            padding-top: 2rem;
            padding-bottom: 5rem;
        }
    }


    /* =========================================================
        SUPPORTING PROPERTY DOCUMENTS
    ========================================================= */

    .pm-document-stack {
        display: grid;
        gap: 1rem;
    }

    .pm-document-item {
        border-radius: 24px;
        border: 1px solid #e2e8f0;
        background:
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.06), transparent 30%),
            #f8fafc;
        padding: 1.1rem;
        transition: all 0.2s ease-in-out;
    }

    .pm-document-item:hover {
        transform: translateY(-2px);
        border-color: rgba(15, 118, 110, 0.24);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    }

    .pm-document-top {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        margin-bottom: 0.9rem;
    }

    .pm-document-icon {
        width: 50px;
        height: 50px;
        border-radius: 18px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ecfdf5;
        color: #0f766e;
        font-size: 1.45rem;
    }

    .pm-document-title-wrap {
        min-width: 0;
        flex: 1;
    }

    .pm-document-title {
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.4;
        margin-bottom: 0.2rem;
        word-break: break-word;
    }

    .pm-document-type {
        color: #64748b;
        font-size: 0.88rem;
        font-weight: 700;
        margin-bottom: 0;
    }

    .pm-document-description {
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #475569;
        font-size: 0.92rem;
        line-height: 1.65;
        padding: 0.8rem 0.9rem;
        margin-bottom: 0.9rem;
    }

    .pm-document-meta {
        display: grid;
        gap: 0.35rem;
        color: #475569;
        font-size: 0.88rem;
        line-height: 1.55;
        margin-bottom: 1rem;
    }

    .pm-document-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        align-items: center;
    }

    .pm-document-actions form {
        margin: 0;
    }

    @media (max-width: 575.98px) {
        .pm-document-top {
            flex-direction: column;
        }

        .pm-document-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .pm-document-actions .btn,
        .pm-document-actions form,
        .pm-document-actions form button {
            width: 100%;
        }
    }
</style>
{% endblock %}


{% block content %}
<section class="pm-detail-page py-5">
    <div class="container">

        <!-- =====================================================
             DETAIL HERO
        ====================================================== -->
        <div class="pm-detail-hero mb-4">
            <div class="pm-detail-hero-inner">

                <span class="pm-detail-badge">
                    <i class="bi bi-house-check-fill"></i>
                    Managed Property
                </span>

                <h1>{{ property.property_name }}</h1>

                <div class="pm-detail-subtitle">
                    {{ property.get_property_category_display }}
                </div>

                <p>
                    This property is registered under your Home in Sri Lanka Property Care profile.
                    Review the currently submitted information below before we continue into images,
                    service selection, calculator estimates, and future maintenance-plan handling.
                </p>

                <div class="pm-detail-actions">

                    <!-- Back to properties -->
                    <a href="{% url 'property_manager_app:managed_property_list' %}"
                    class="btn pm-detail-btn-outline">
                        <i class="bi bi-arrow-left me-2"></i>
                        Back to My Properties
                    </a>

                    <!-- Edit property -->
                    <a href="{% url 'property_manager_app:managed_property_update' property.pk %}"
                    class="btn pm-detail-btn-primary">
                        <i class="bi bi-pencil-square me-2"></i>
                        Edit Property
                    </a>

                    <!-- Manage images -->
                    <a href="{% url 'property_manager_app:managed_property_image_upload' property.pk %}"
                    class="btn pm-detail-btn-outline">
                        <i class="bi bi-images me-2"></i>
                        Manage Images
                    </a>
                    <a href="{% url 'property_manager_app:managed_property_document_upload' property.pk %}"
                        class="btn pm-detail-btn-outline">
                        <i class="bi bi-file-earmark-arrow-up-fill me-2"></i>
                        Add Documents
                    </a>
                    <a href="{% url 'property_manager_app:managed_property_service_selection' property.pk %}"
                        class="btn pm-detail-btn-outline">
                        <i class="bi bi-ui-checks-grid me-2"></i>
                        Select Services
                    </a>

                    <a href="{% url 'property_manager_app:managed_property_estimate' property.pk %}"
                        class="btn pm-detail-btn-outline">
                        <i class="bi bi-calculator-fill me-2"></i>
                        View Estimate
                    </a>

                    <!-- Submit for review / already submitted state -->
                    {% if not property.is_submitted_for_review %}
                        <form method="post"
                            action="{% url 'property_manager_app:managed_property_submit_for_review' property.pk %}"
                            class="pm-review-submit-form"
                            onsubmit="return confirm('Are you ready to submit this property for Ensolanka review?');">
                            {% csrf_token %}

                            <button type="submit"
                                    class="btn pm-detail-btn-primary">
                                <i class="bi bi-send-check-fill me-2"></i>
                                Submit for Review
                            </button>
                        </form>
                    {% else %}
                        <span class="btn pm-detail-btn-outline disabled pm-review-submitted-btn"
                            aria-disabled="true">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            Submitted for Review
                        </span>
                    {% endif %}
                    
                    <a href="{% url 'property_manager_app:property_care_payment_center' %}"
                        class="btn pm-detail-btn-outline">
                        <i class="bi bi-wallet2 me-2"></i>
                        Payment Center
                    </a>
                    <!-- Add another property -->
                    <a href="{% url 'property_manager_app:managed_property_create' %}"
                    class="btn pm-detail-btn-outline">
                        <i class="bi bi-house-add-fill me-2"></i>
                        Add Another Property
                    </a>

                </div>

                <div class="pm-status-row">

                    {% if property.review_status == 'approved' %}
                        <span class="pm-status-pill approved">
                            <i class="bi bi-check-circle-fill"></i>
                            Approved
                        </span>

                    {% elif property.review_status == 'submitted' %}
                        <span class="pm-status-pill pending">
                            <i class="bi bi-hourglass-split"></i>
                            Submitted for Review
                        </span>

                    {% elif property.review_status == 'rejected' %}
                        <span class="pm-status-pill rejected">
                            <i class="bi bi-x-circle-fill"></i>
                            Rejected — Needs Correction
                        </span>

                    {% else %}
                        <span class="pm-status-pill draft">
                            <i class="bi bi-pencil-square"></i>
                            Draft — Not Submitted
                        </span>
                    {% endif %}

                </div>

            </div>
        </div>


        <div class="row g-4">

            <!-- =====================================================
                 LEFT COLUMN: VISUALS + ROADMAP
            ====================================================== -->
            <div class="col-lg-5">

                <!-- PROPERTY IMAGES -->
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-images"></i>
                            Property Images
                        </span>

                        <h3>Visual Reference</h3>

                        <p>
                            Visual references uploaded for this property are shown here.
                            Add or manage images to improve future review and maintenance planning.
                        </p>
                    </div>

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

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

                            {% if images.count > 1 %}
                                <div class="pm-thumb-grid">
                                    {% for image in images|slice:"1:5" %}
                                        <img src="{{ image.image.url }}"
                                             alt="{{ image.caption|default:property.property_name }}"
                                             class="pm-thumb-image">
                                    {% endfor %}
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="mt-3 d-grid">
                                <a href="{% url 'property_manager_app:managed_property_image_upload' property.pk %}"
                                class="btn btn-outline-success rounded-pill fw-bold">
                                    <i class="bi bi-cloud-arrow-up-fill me-2"></i>
                                    Upload Property Images
                                </a>
                            </div>
                        {% endif %}

                    </div>
                </div>


                <!-- FUTURE WORKFLOW -->
                <div class="pm-roadmap-card">
                    <h4>
                        What Comes Next for This Property
                    </h4>

                    <ul class="pm-roadmap-list">
                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Upload property images and visual condition references</span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Select inspection, cleaning, garden care, and other maintenance needs</span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Generate a provisional monthly care estimate</span>
                        </li>

                        <li>
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Move toward Ensolanka review and a confirmed property care plan</span>
                        </li>
                    </ul>
                </div>

            </div>


            <!-- =====================================================
                 RIGHT COLUMN: DETAILS
            ====================================================== -->
            <div class="col-lg-7">

                <!-- BASIC LOCATION -->
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-geo-alt-fill"></i>
                            Identity & Location
                        </span>

                        <h3>Core Property Details</h3>
                    </div>

                    <div class="pm-card-body">
                        <div class="pm-info-grid">

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

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

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

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

                        </div>

                        {% if property.address %}
                            <div class="pm-note-box mt-3">
                                <strong>Address / Location Description:</strong><br>
                                {{ property.address|linebreaksbr }}
                            </div>
                        {% endif %}

                        {% if property.google_map_link %}
                            <div class="mt-3">
                                <a href="{{ property.google_map_link }}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="btn btn-outline-success rounded-pill fw-bold">
                                    <i class="bi bi-map-fill me-2"></i>
                                    Open Google Maps Link
                                </a>
                            </div>
                        {% endif %}

                    </div>
                </div>


                <!-- LAND / BUILDING SCALE -->
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-rulers"></i>
                            Size & Structure
                        </span>

                        <h3>Land and Building Information</h3>
                    </div>

                    <div class="pm-card-body">
                        <div class="pm-info-grid">

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

                            <div class="pm-info-item">
                                <span class="pm-info-label">Total Floor Area</span>
                                <p class="pm-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="pm-info-item">
                                <span class="pm-info-label">Buildings</span>
                                <p class="pm-info-value">
                                    {{ property.number_of_buildings }}
                                </p>
                            </div>

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

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

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

                            <div class="pm-info-item">
                                <span class="pm-info-label">Kitchens</span>
                                <p class="pm-info-value">
                                    {{ property.kitchens }}
                                </p>
                            </div>

                            <div class="pm-info-item">
                                <span class="pm-info-label">Living Rooms</span>
                                <p class="pm-info-value">
                                    {{ property.living_rooms }}
                                </p>
                            </div>

                            <div class="pm-info-item">
                                <span class="pm-info-label">Other Rooms</span>
                                <p class="pm-info-value">
                                    {{ property.other_rooms }}
                                </p>
                            </div>

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


                <!-- CONDITION -->
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-clipboard-data-fill"></i>
                            Condition
                        </span>

                        <h3>Property Age and Current State</h3>
                    </div>

                    <div class="pm-card-body">
                        <div class="pm-info-grid">

                            <div class="pm-info-item">
                                <span class="pm-info-label">Approximate Age</span>
                                <p class="pm-info-value">
                                    {{ property.get_property_age_display }}
                                </p>
                            </div>

                            <div class="pm-info-item">
                                <span class="pm-info-label">Current Condition</span>
                                <p class="pm-info-value">
                                    {{ property.get_current_condition_display }}
                                </p>
                            </div>

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


                <!-- FEATURES / UTILITY / ACCESS -->
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-shield-check"></i>
                            Care-Relevant Features
                        </span>

                        <h3>Outdoor, Utility, and Access Indicators</h3>
                    </div>

                    <div class="pm-card-body">
                        <div class="pm-section-stack">

                            <div class="pm-check-row">
                                {% if property.has_boundary_wall_or_fence %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Boundary wall or fence</strong><br>
                                    <span>
                                        {% if property.has_boundary_wall_or_fence %}
                                            Marked as available.
                                        {% else %}
                                            Not marked as available.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.has_gate %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Gate</strong><br>
                                    <span>
                                        {% if property.has_gate %}
                                            Marked as available.
                                        {% else %}
                                            Not marked as available.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.has_garden_or_landscape %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Garden or landscaped outdoor area</strong><br>
                                    <span>
                                        {% if property.has_garden_or_landscape %}
                                            This may later influence garden-care selections.
                                        {% else %}
                                            No garden or landscaped area was marked.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.needs_grass_cutting %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Grass cutting need</strong><br>
                                    <span>
                                        {% if property.needs_grass_cutting %}
                                            Owner indicated that regular grass cutting may be needed.
                                        {% else %}
                                            Not selected at registration.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.electricity_active %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Electricity connection</strong><br>
                                    <span>
                                        {% if property.electricity_active %}
                                            Marked as active.
                                        {% else %}
                                            Not marked as active.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.water_active %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Water connection</strong><br>
                                    <span>
                                        {% if property.water_active %}
                                            Marked as active.
                                        {% else %}
                                            Not marked as active.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.internet_active %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Internet connection</strong><br>
                                    <span>
                                        {% if property.internet_active %}
                                            Marked as active.
                                        {% else %}
                                            Not marked as active.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.needs_key_holding_service %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Key-holding support interest</strong><br>
                                    <span>
                                        {% if property.needs_key_holding_service %}
                                            Owner indicated possible interest in Ensolanka key-holding support.
                                        {% else %}
                                            Not selected at registration.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="pm-check-row">
                                {% if property.allows_emergency_access %}
                                    <i class="bi bi-check-circle-fill yes"></i>
                                {% else %}
                                    <i class="bi bi-dash-circle-fill no"></i>
                                {% endif %}
                                <div>
                                    <strong>Emergency access preference</strong><br>
                                    <span>
                                        {% if property.allows_emergency_access %}
                                            Owner indicated possible emergency-access permission, subject to final terms.
                                        {% else %}
                                            Not selected at registration.
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-ui-checks-grid"></i>
                            Selected Services
                        </span>

                        <h3>Maintenance Service Preferences</h3>

                        <p>
                            Services currently selected by the owner for this property.
                        </p>
                    </div>

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

                        {% if property.service_selections.all %}

                            <div class="pm-section-stack">

                                {% for selection in property.service_selections.all %}
                                    <div class="pm-check-row">
                                        <i class="bi bi-check-circle-fill yes"></i>

                                        <div>
                                            <strong>{{ selection.service_type.name }}</strong><br>

                                            <span>
                                                Frequency: {{ selection.get_frequency_display }}
                                                · Visits/month: {{ selection.requested_visits_per_month }}
                                                · Status: {{ selection.get_selection_status_display }}
                                            </span>

                                            {% if selection.owner_note %}
                                                <div class="mt-2 text-muted">
                                                    {{ selection.owner_note|linebreaksbr }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}

                            </div>

                        {% else %}

                            <div class="pm-note-box">
                                <strong>No services selected yet.</strong><br>
                                Ask the owner to select property care services before final review and calculator estimation.
                            </div>

                            <div class="mt-3">
                                <a href="{% url 'property_manager_app:managed_property_service_selection' property.pk %}"
                                class="btn btn-outline-success rounded-pill fw-bold">
                                    <i class="bi bi-ui-checks-grid me-2"></i>
                                    Select Services
                                </a>
                            </div>

                        {% endif %}

                    </div>
                </div>
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-calculator-fill"></i>
                            Monthly Estimate
                        </span>

                        <h3>Latest Provisional Care Estimate</h3>
                    </div>

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

                        {% if property.estimated_monthly_total_usd %}
                            <div class="pm-note-box">
                                <strong>Estimated Monthly Total:</strong>
                                ${{ property.estimated_monthly_total_usd }}<br>

                                {% if property.estimate_generated_at %}
                                    <small>
                                        Generated:
                                        {{ property.estimate_generated_at|date:"M d, Y H:i" }}
                                    </small>
                                {% endif %}
                            </div>

                            {% if property.has_custom_quote_services %}
                                <div class="alert alert-warning rounded-4 mt-3 mb-0">
                                    Some selected services still require staff review or custom quotation.
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="pm-note-box">
                                No saved estimate yet. Generate an estimate after selecting services.
                            </div>
                        {% endif %}

                        <div class="mt-3">
                            <a href="{% url 'property_manager_app:managed_property_estimate' property.pk %}"
                            class="btn btn-outline-success rounded-pill fw-bold">
                                <i class="bi bi-calculator-fill me-2"></i>
                                Open Estimate Calculator
                            </a>
                        </div>

                    </div>
                </div>
                <!-- =====================================================
                    SUPPORTING PROPERTY DOCUMENTS
                ====================================================== -->
                <div class="pm-main-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-file-earmark-text-fill"></i>
                            Supporting Documents
                        </span>

                        <h3>Plans, Proofs, and Reference Files</h3>

                        <p>
                            Land plans, building plans, ownership references, utility documents,
                            and other useful files related to this property.
                        </p>
                    </div>

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

                        <div class="d-grid mb-4">
                            <a href="{% url 'property_manager_app:managed_property_document_upload' property.pk %}"
                            class="btn btn-outline-success rounded-pill fw-bold">
                                <i class="bi bi-file-earmark-arrow-up-fill me-2"></i>
                                Add Supporting Document
                            </a>
                        </div>

                        {% if documents %}
                            <div class="pm-document-stack">

                                {% for document in documents %}
                                    <div class="pm-document-item">

                                        <div class="pm-document-top">
                                            <div class="pm-document-icon">
                                                <i class="bi bi-file-earmark-text-fill"></i>
                                            </div>

                                            <div class="pm-document-title-wrap">
                                                <h5 class="pm-document-title">
                                                    {{ document.title }}
                                                </h5>

                                                <p class="pm-document-type">
                                                    {{ document.get_document_type_display }}
                                                </p>
                                            </div>
                                        </div>

                                        {% if document.description %}
                                            <div class="pm-document-description">
                                                {{ document.description }}
                                            </div>
                                        {% endif %}

                                        <div class="pm-document-meta">
                                            <div>
                                                <strong>Uploaded:</strong>
                                                {{ document.uploaded_at|date:"M d, Y H:i" }}
                                            </div>

                                            <div>
                                                <strong>Staff Verified:</strong>
                                                {% if document.is_staff_verified %}
                                                    <span class="text-success fw-bold">Yes</span>
                                                {% else %}
                                                    <span class="text-warning fw-bold">Pending</span>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <div class="pm-document-actions">

                                            <a href="{{ document.file.url }}"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="btn btn-outline-dark btn-sm rounded-pill fw-bold">
                                                <i class="bi bi-eye-fill me-1"></i>
                                                View
                                            </a>

                                            <form method="post"
                                                action="{% url 'property_manager_app:managed_property_document_delete' property.pk document.pk %}"
                                                onsubmit="return confirm('Delete this supporting document?');">
                                                {% csrf_token %}

                                                <button type="submit"
                                                        class="btn btn-outline-danger btn-sm rounded-pill fw-bold">
                                                    <i class="bi bi-trash-fill me-1"></i>
                                                    Delete
                                                </button>
                                            </form>

                                        </div>

                                    </div>
                                {% endfor %}

                            </div>
                        {% else %}
                            <div class="pm-note-box">
                                <strong>No supporting property documents uploaded yet.</strong><br>
                                You may add land plans, building plans, ownership references,
                                utility documents, or other useful property files.
                            </div>
                        {% endif %}

                    </div>
                
                </div>
                <!-- OWNER NOTES -->
                {% if property.owner_notes %}
                    <div class="pm-main-card">
                        <div class="pm-card-header">
                            <span class="pm-card-kicker">
                                <i class="bi bi-chat-left-text-fill"></i>
                                Owner Notes
                            </span>

                            <h3>Special Instructions or Current Concerns</h3>
                        </div>

                        <div class="pm-card-body">
                            <div class="pm-note-box">
                                {{ property.owner_notes|linebreaksbr }}
                            </div>
                        </div>
                    </div>
                {% endif %}

            </div>
        </div>

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