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

{% block title %}My Properties | Home in Sri Lanka{% endblock %}


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

    .pm-property-list-page {
        min-height: 100vh;
        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-list-hero {
        position: relative;
        overflow: hidden;
        border-radius: 36px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 32%),
            linear-gradient(135deg, #052e25 0%, #0f766e 100%);
        color: #ffffff;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
    }

    .pm-list-hero::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .pm-list-hero::after {
        content: "";
        position: absolute;
        bottom: -145px;
        left: -90px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: rgba(251, 191, 36, 0.10);
    }

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

    .pm-list-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-list-hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.35rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin-bottom: 0.85rem;
    }

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

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

    .pm-list-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-list-btn-primary:hover {
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-list-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-list-btn-outline:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    .pm-list-stat-card {
        height: 100%;
        border-radius: 28px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        padding: 1.45rem 1.35rem;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .pm-list-stat-icon {
        width: 52px;
        height: 52px;
        border-radius: 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        background: #ecfdf5;
        color: #0f766e;
        margin-bottom: 1rem;
    }

    .pm-list-stat-icon.blue {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .pm-list-stat-icon.gold {
        background: #fef3c7;
        color: #b45309;
    }

    .pm-list-stat-icon.slate {
        background: #e2e8f0;
        color: #334155;
    }

    .pm-list-stat-number {
        color: #0f172a;
        font-size: 2rem;
        line-height: 1;
        font-weight: 900;
        margin-bottom: 0.42rem;
    }

    .pm-list-stat-title {
        color: #334155;
        font-size: 0.95rem;
        font-weight: 900;
        margin-bottom: 0.25rem;
    }

    .pm-list-stat-copy {
        color: #64748b;
        font-size: 0.88rem;
        line-height: 1.55;
        margin-bottom: 0;
    }

    .pm-property-section-card {
        border-radius: 34px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.09);
        overflow: hidden;
    }

    .pm-property-section-header {
        padding: 1.7rem 1.9rem 1.25rem;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

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

    .pm-property-section-header h2 {
        color: #0f172a;
        font-weight: 900;
        font-size: 1.55rem;
        margin-bottom: 0.35rem;
    }

    .pm-property-section-header p {
        color: #64748b;
        line-height: 1.68;
        margin-bottom: 0;
    }

    .pm-property-section-body {
        padding: 1.9rem;
    }

    .pm-property-card {
        height: 100%;
        border-radius: 28px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
        transition: all 0.2s ease;
    }

    .pm-property-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
    }

    .pm-property-image-wrap {
        position: relative;
        height: 210px;
        background: linear-gradient(135deg, #e2e8f0, #f8fafc);
    }

    .pm-property-image {
        width: 100%;
        height: 210px;
        object-fit: cover;
        display: block;
    }

    .pm-property-placeholder {
        width: 100%;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0f766e;
        font-size: 2.7rem;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 30%),
            linear-gradient(135deg, #f8fafc, #ecfdf5);
    }

    .pm-property-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        border-radius: 999px;
        padding: 0.42rem 0.78rem;
        font-size: 0.78rem;
        font-weight: 900;
        backdrop-filter: blur(8px);
    }

    .pm-property-badge.approved {
        background: rgba(220, 252, 231, 0.94);
        color: #166534;
    }

    .pm-property-badge.pending {
        background: rgba(254, 243, 199, 0.94);
        color: #92400e;
    }

    .pm-property-card-body {
        padding: 1.35rem 1.35rem 1.45rem;
    }

    .pm-property-title {
        color: #0f172a;
        font-size: 1.2rem;
        font-weight: 900;
        margin-bottom: 0.45rem;
    }

    .pm-property-category {
        color: #0f766e;
        font-weight: 900;
        font-size: 0.92rem;
        margin-bottom: 1rem;
    }

    .pm-property-meta {
        display: grid;
        gap: 0.62rem;
        margin-bottom: 1.1rem;
    }

    .pm-property-meta-item {
        display: flex;
        align-items: flex-start;
        gap: 0.58rem;
        color: #64748b;
        font-size: 0.89rem;
        line-height: 1.52;
    }

    .pm-property-meta-item i {
        color: #0f766e;
        margin-top: 0.11rem;
    }

    .pm-property-actions {
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .pm-card-btn {
        border-radius: 999px;
        font-weight: 900;
        font-size: 0.84rem;
        padding: 0.58rem 0.95rem;
    }

    .pm-empty-state {
        border-radius: 32px;
        border: 1px dashed rgba(15, 118, 110, 0.36);
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.10), transparent 26%),
            linear-gradient(135deg, #f8fafc, #ecfdf5);
        padding: 3rem 1.6rem;
        text-align: center;
    }

    .pm-empty-icon {
        width: 96px;
        height: 96px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 34px;
        color: #0f766e;
        background: rgba(255, 255, 255, 0.86);
        font-size: 2.55rem;
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
        margin-bottom: 1.25rem;
    }

    .pm-empty-state h3 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.65rem;
    }

    .pm-empty-state p {
        color: #64748b;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.75;
        margin-bottom: 1.45rem;
    }

    @media (max-width: 991.98px) {
        .pm-list-hero-inner,
        .pm-property-section-header,
        .pm-property-section-body {
            padding-left: 1.4rem;
            padding-right: 1.4rem;
        }

        .pm-list-hero,
        .pm-property-section-card {
            border-radius: 28px;
        }
    }
</style>
{% endblock %}


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

        <!-- =====================================================
             PAGE HERO
        ====================================================== -->
        <div class="pm-list-hero mb-4">
            <div class="pm-list-hero-inner">

                <span class="pm-list-badge">
                    <i class="bi bi-houses-fill"></i>
                    My Properties
                </span>

                <h1>
                    Your Registered Property Care Portfolio
                </h1>

                <p>
                    View every property you have added under Home in Sri Lanka.
                    From this portfolio, you can open a property, check its registration details,
                    and move toward images, service selection, estimation, and future maintenance planning.
                </p>

                <div class="pm-list-actions">
                    <a href="{% url 'property_manager_app:managed_property_create' %}"
                       class="btn pm-list-btn-primary">
                        <i class="bi bi-house-add-fill me-2"></i>
                        Add New Property
                    </a>

                    <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                       class="btn pm-list-btn-outline">
                        <i class="bi bi-speedometer2 me-2"></i>
                        Back to Dashboard
                    </a>
                </div>

            </div>
        </div>


        <!-- =====================================================
             STATS
        ====================================================== -->
        <div class="row g-4 mb-4">

            <div class="col-sm-6 col-xl-3">
                <div class="pm-list-stat-card">
                    <span class="pm-list-stat-icon">
                        <i class="bi bi-buildings-fill"></i>
                    </span>

                    <div class="pm-list-stat-number">{{ total_properties }}</div>
                    <div class="pm-list-stat-title">Total Properties</div>
                    <p class="pm-list-stat-copy">
                        All properties registered under your Property Care profile.
                    </p>
                </div>
            </div>

            <div class="col-sm-6 col-xl-3">
                <div class="pm-list-stat-card">
                    <span class="pm-list-stat-icon blue">
                        <i class="bi bi-check-circle-fill"></i>
                    </span>

                    <div class="pm-list-stat-number">{{ approved_properties }}</div>
                    <div class="pm-list-stat-title">Approved</div>
                    <p class="pm-list-stat-copy">
                        Properties currently approved for further operational handling.
                    </p>
                </div>
            </div>

            <div class="col-sm-6 col-xl-3">
                <div class="pm-list-stat-card">
                    <span class="pm-list-stat-icon gold">
                        <i class="bi bi-hourglass-split"></i>
                    </span>

                    <div class="pm-list-stat-number">{{ pending_properties }}</div>
                    <div class="pm-list-stat-title">Pending Review</div>
                    <p class="pm-list-stat-copy">
                        Properties still waiting for review or next approval-stage processing.
                    </p>
                </div>
            </div>

            <div class="col-sm-6 col-xl-3">
                <div class="pm-list-stat-card">
                    <span class="pm-list-stat-icon slate">
                        <i class="bi bi-house-check-fill"></i>
                    </span>

                    <div class="pm-list-stat-number">{{ active_properties }}</div>
                    <div class="pm-list-stat-title">Active</div>
                    <p class="pm-list-stat-copy">
                        Property records that are currently active in your dashboard.
                    </p>
                </div>
            </div>

        </div>


        <!-- =====================================================
             PROPERTY PORTFOLIO
        ====================================================== -->
        <div class="pm-property-section-card">

            <div class="pm-property-section-header">
                <div>
                    <span class="pm-section-kicker">
                        <i class="bi bi-grid-fill"></i>
                        Property Records
                    </span>

                    <h2>
                        Browse Your Added Properties
                    </h2>

                    <p>
                        Each record can later connect to image uploads, service selections,
                        calculator estimates, reports, and work orders.
                    </p>
                </div>

                <div>
                    <a href="{% url 'property_manager_app:managed_property_create' %}"
                       class="btn pm-list-btn-primary">
                        <i class="bi bi-plus-circle-fill me-2"></i>
                        Add Property
                    </a>
                </div>
            </div>


            <div class="pm-property-section-body">

                {% if properties %}

                    <div class="row g-4">

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

                                    <div class="pm-property-image-wrap">

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

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

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

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

                                    </div>


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

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

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

                                        <div class="pm-property-meta">

                                            {% if property.city or property.district %}
                                                <div class="pm-property-meta-item">
                                                    <i class="bi bi-geo-alt-fill"></i>
                                                    <span>
                                                        {% if property.city %}
                                                            {{ property.city }}
                                                        {% endif %}
                                                        {% if property.city and property.district %}, {% endif %}
                                                        {% if property.district %}
                                                            {{ property.district }}
                                                        {% endif %}
                                                    </span>
                                                </div>
                                            {% endif %}

                                            <div class="pm-property-meta-item">
                                                <i class="bi bi-person-home"></i>
                                                <span>
                                                    {{ property.get_occupancy_status_display }}
                                                </span>
                                            </div>

                                            <div class="pm-property-meta-item">
                                                <i class="bi bi-bar-chart-fill"></i>
                                                <span>
                                                    Condition:
                                                    {{ property.get_current_condition_display }}
                                                </span>
                                            </div>

                                            {% if property.land_size %}
                                                <div class="pm-property-meta-item">
                                                    <i class="bi bi-map-fill"></i>
                                                    <span>
                                                        Land:
                                                        {{ property.land_size }}
                                                        {{ property.get_land_size_unit_display }}
                                                    </span>
                                                </div>
                                            {% endif %}

                                        </div>

                                        <div class="pm-property-actions">
                                            <a href="{% url 'property_manager_app:managed_property_detail' property.pk %}"
                                            class="btn btn-dark pm-card-btn">
                                                View Details
                                            </a>

                                            <a href="{% url 'property_manager_app:managed_property_update' property.pk %}"
                                            class="btn btn-outline-primary pm-card-btn">
                                                Edit
                                            </a>
                                            <a href="{% url 'property_manager_app:managed_property_image_upload' property.pk %}"
                                                class="btn btn-outline-secondary pm-card-btn">
                                                Images
                                            </a>
                                            <a href="{% url 'property_manager_app:managed_property_service_selection' property.pk %}"
                                                class="btn btn-outline-success pm-card-btn">
                                                Services
                                            </a>
                                            <a href="{% url 'property_manager_app:managed_property_estimate' property.pk %}"
                                                class="btn btn-outline-success pm-card-btn">
                                                Estimate
                                            </a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        {% endfor %}

                    </div>

                {% else %}

                    <div class="pm-empty-state">

                        <div class="pm-empty-icon">
                            <i class="bi bi-house-add-fill"></i>
                        </div>

                        <h3>No properties registered yet</h3>

                        <p>
                            Add your first property to begin the Home in Sri Lanka care journey.
                            The information you submit will later help with image uploads,
                            service selection, monthly estimate calculations, and final maintenance plans.
                        </p>

                        <a href="{% url 'property_manager_app:managed_property_create' %}"
                           class="btn pm-list-btn-primary">
                            <i class="bi bi-plus-circle-fill me-2"></i>
                            Add Your First Property
                        </a>

                    </div>

                {% endif %}

            </div>
        </div>

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