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

{% block title %}My Property Care Estimates{% endblock %}

{% block content %}

<style>
    .pm-estimates-page {
        min-height: 100vh;
        padding: 4rem 0 5rem;
        background:
            radial-gradient(circle at top left, rgba(251,191,36,.10), transparent 28%),
            radial-gradient(circle at top right, rgba(15,118,110,.10), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #ecfdf5 42%, #ffffff 100%);
    }

    .pm-estimates-hero {
        border-radius: 40px;
        padding: 2.7rem 2.5rem;
        color: #fff;
        background:
            radial-gradient(circle at top right, rgba(251,191,36,.18), transparent 32%),
            linear-gradient(135deg, #052e25, #0f766e, #115e59);
        box-shadow: 0 32px 72px rgba(15,23,42,.20);
        margin-bottom: 2rem;
    }

    .pm-estimates-kicker {
        display: inline-flex;
        gap: .5rem;
        align-items: center;
        padding: .52rem 1rem;
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.22);
        color: #fef3c7;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: .84rem;
        font-weight: 900;
        margin-bottom: 1rem;
    }

    .pm-estimates-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.6rem);
        font-weight: 950;
        line-height: 1.1;
        letter-spacing: -.045em;
        margin-bottom: .8rem;
    }

    .pm-estimates-hero p {
        max-width: 900px;
        color: rgba(255,255,255,.88);
        line-height: 1.82;
        margin-bottom: 0;
    }

    .pm-estimate-summary-card,
    .pm-estimate-property-card,
    .pm-estimate-empty {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 32px;
        box-shadow: 0 20px 48px rgba(15,23,42,.09);
    }

    .pm-estimate-summary-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .pm-estimate-summary-card h3 {
        color: #0f172a;
        font-weight: 950;
    }

    .pm-estimate-summary-card p {
        color: #64748b;
        line-height: 1.75;
        margin-bottom: 0;
    }

    .pm-estimate-property-card {
        height: 100%;
        padding: 1.45rem;
        transition: all .22s ease;
    }

    .pm-estimate-property-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 28px 58px rgba(15,23,42,.12);
    }

    .pm-estimate-property-card h4 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .45rem;
    }

    .pm-estimate-meta {
        color: #64748b;
        line-height: 1.65;
        font-size: .94rem;
        margin-bottom: .8rem;
    }

    .pm-estimate-status-pill {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        border-radius: 999px;
        padding: .42rem .8rem;
        background: #ecfdf5;
        color: #166534;
        font-weight: 850;
        font-size: .82rem;
        margin-bottom: 1rem;
    }

    .pm-estimate-actions {
        display: grid;
        gap: .7rem;
        margin-top: 1rem;
    }

    .pm-estimate-actions .btn {
        border-radius: 999px;
        font-weight: 850;
        min-height: 48px;
    }

    .pm-estimate-empty {
        padding: 2.5rem 1.5rem;
        text-align: center;
    }

    .pm-estimate-empty-icon {
        width: 92px;
        height: 92px;
        margin: 0 auto 1rem;
        border-radius: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.3rem;
        color: #0f766e;
        background: #ecfdf5;
    }

    @media (max-width: 767.98px) {
        .pm-estimates-page {
            padding-top: 2.7rem;
        }

        .pm-estimates-hero {
            padding: 2rem 1.45rem;
            border-radius: 32px;
        }
    }
</style>

<section class="pm-estimates-page">
    <div class="container">

        <div class="pm-estimates-hero">
            <span class="pm-estimates-kicker">
                <i class="bi bi-graph-up-arrow"></i>
                Property Care Estimates
            </span>

            <h1>My Monthly Maintenance Estimates</h1>

            <p>
                Open the estimate page for each registered property. Estimates are built
                from your property details and selected care services before the final care plan is approved by staff.
            </p>
        </div>

        <div class="pm-estimate-summary-card">
            <h3 class="mb-2">Estimate Center</h3>
            <p>
                You currently have <strong>{{ total_properties }}</strong> registered
                {% if total_properties == 1 %}property{% else %}properties{% endif %}.
                Select a property below to review or generate its provisional maintenance estimate.
            </p>
        </div>

        {% if properties %}
            <div class="row g-4">
                {% for property in properties %}
                    <div class="col-md-6 col-xl-4">
                        <div class="pm-estimate-property-card">
                            <span class="pm-estimate-status-pill">
                                <i class="bi bi-calculator-fill"></i>
                                Estimate Access Ready
                            </span>

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

                            <div class="pm-estimate-meta">
                                <div>
                                    <i class="bi bi-geo-alt-fill me-1"></i>
                                    {{ property.city }}, {{ property.district }}
                                </div>

                                <div>
                                    <i class="bi bi-house-fill me-1"></i>
                                    {{ property.get_property_category_display }}
                                </div>

                                <div>
                                    <i class="bi bi-clipboard-check-fill me-1"></i>
                                    {{ property.get_review_status_display }}
                                </div>
                            </div>

                            <div class="pm-estimate-actions">
                                <a href="{% url 'property_manager_app:managed_property_estimate' property.pk %}"
                                   class="btn btn-dark">
                                    <i class="bi bi-calculator-fill me-2"></i>
                                    Open Estimate
                                </a>

                                <a href="{% url 'property_manager_app:managed_property_service_selection' property.pk %}"
                                   class="btn btn-outline-secondary">
                                    <i class="bi bi-ui-checks-grid me-2"></i>
                                    Review Services
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="pm-estimate-empty">
                <div class="pm-estimate-empty-icon">
                    <i class="bi bi-house-add-fill"></i>
                </div>

                <h3 class="fw-bold">No properties added yet</h3>

                <p class="text-muted mb-4">
                    Add your first property, select the care services you need,
                    and then open the monthly estimate page.
                </p>

                <a href="{% url 'property_manager_app:managed_property_create' %}"
                   class="btn btn-dark rounded-pill px-4">
                    <i class="bi bi-house-add-fill me-2"></i>
                    Add Property
                </a>
            </div>
        {% endif %}

    </div>
</section>

{% endblock %}