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

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


{% block extra_css %}
<style>
    .pm-estimate-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-estimate-hero {
        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);
        overflow: hidden;
    }

    .pm-estimate-hero-inner {
        padding: 2.6rem 2.4rem;
    }

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

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

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

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

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

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

    .pm-estimate-summary-card,
    .pm-estimate-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-estimate-summary-inner {
        padding: 2rem;
    }

    .pm-total-box {
        border-radius: 32px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.14), transparent 34%),
            linear-gradient(135deg, #ecfdf5, #ccfbf1);
        border: 1px solid #99f6e4;
        padding: 1.8rem;
        height: 100%;
    }

    .pm-total-label {
        color: #0f766e;
        font-size: 0.82rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.055em;
        margin-bottom: 0.5rem;
    }

    .pm-total-value {
        color: #052e25;
        font-size: clamp(2.3rem, 5vw, 4rem);
        line-height: 1;
        font-weight: 950;
        letter-spacing: -0.045em;
        margin-bottom: 0.5rem;
    }

    .pm-total-note {
        color: #115e59;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .pm-summary-stat {
        border-radius: 24px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 1.1rem;
        height: 100%;
    }

    .pm-summary-stat .number {
        color: #0f172a;
        font-size: 1.8rem;
        font-weight: 900;
        line-height: 1;
        margin-bottom: 0.35rem;
    }

    .pm-summary-stat .label {
        color: #334155;
        font-weight: 900;
        margin-bottom: 0.25rem;
    }

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

    .pm-card-header {
        padding: 1.65rem 1.8rem 1.2rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .pm-card-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-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.68;
        margin-bottom: 0;
    }

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

    .pm-estimate-item {
        border-radius: 26px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 1.25rem;
        margin-bottom: 1rem;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
    }

    .pm-estimate-item:last-child {
        margin-bottom: 0;
    }

    .pm-item-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 0.7rem;
    }

    .pm-item-title {
        color: #0f172a;
        font-weight: 900;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .pm-item-frequency {
        color: #64748b;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .pm-item-amount {
        border-radius: 999px;
        padding: 0.55rem 0.95rem;
        font-weight: 900;
        background: #ecfdf5;
        color: #166534;
    }

    .pm-item-basis {
        color: #475569;
        line-height: 1.65;
        background: #f8fafc;
        border-radius: 18px;
        padding: 0.85rem 0.95rem;
        border: 1px solid #e2e8f0;
        margin-top: 0.8rem;
        font-size: 0.92rem;
    }

    .pm-warning-item {
        border-radius: 24px;
        padding: 1.1rem 1.15rem;
        margin-bottom: 1rem;
        border: 1px solid #fde68a;
        background: #fffbeb;
        color: #92400e;
    }

    .pm-warning-item:last-child {
        margin-bottom: 0;
    }

    .pm-warning-item h5 {
        font-weight: 900;
        margin-bottom: 0.35rem;
    }

    .pm-warning-item p {
        margin-bottom: 0;
        line-height: 1.65;
    }

    .pm-empty-note {
        border-radius: 26px;
        padding: 1.4rem;
        background: #f8fafc;
        border: 1px dashed rgba(15, 118, 110, 0.30);
        color: #475569;
        line-height: 1.7;
    }

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

    .pm-generate-box h4 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.6rem;
    }

    .pm-generate-box p {
        color: #64748b;
        line-height: 1.7;
    }

    @media (max-width: 767.98px) {
        .pm-estimate-hero-inner,
        .pm-card-header,
        .pm-card-body,
        .pm-estimate-summary-inner {
            padding-left: 1.3rem;
            padding-right: 1.3rem;
        }

        .pm-estimate-hero,
        .pm-estimate-summary-card,
        .pm-estimate-card {
            border-radius: 28px;
        }

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

        .pm-estimate-actions .btn {
            width: 100%;
            min-height: 54px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>
{% endblock %}


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

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

                <span class="pm-estimate-badge">
                    <i class="bi bi-calculator-fill"></i>
                    Monthly Maintenance Estimate
                </span>

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

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

                <p>
                    This calculator produces a provisional monthly property care estimate
                    using the currently selected services and the calculator rules configured by Ensolanka.
                    Services requiring staff quotation are clearly separated from the monthly total.
                </p>

                <div class="pm-estimate-actions">
                    <a href="{% url 'property_manager_app:managed_property_detail' property.pk %}"
                       class="btn pm-estimate-btn-outline">
                        <i class="bi bi-arrow-left me-2"></i>
                        Back to Property
                    </a>

                    <a href="{% url 'property_manager_app:managed_property_service_selection' property.pk %}"
                       class="btn pm-estimate-btn-primary">
                        <i class="bi bi-ui-checks-grid me-2"></i>
                        Update Selected Services
                    </a>
                </div>

            </div>
        </div>


        <!-- SUMMARY -->
        <div class="pm-estimate-summary-card mb-4">
            <div class="pm-estimate-summary-inner">
                <div class="row g-4 align-items-stretch">

                    <div class="col-lg-5">
                        <div class="pm-total-box">
                            <div class="pm-total-label">
                                Provisional Monthly Calculated Total
                            </div>

                            <div class="pm-total-value">
                                ${{ estimate.total_monthly_estimate }}
                            </div>

                            <p class="pm-total-note">
                                This includes only services currently configured for automatic monthly estimation.
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="row g-3 h-100">

                            <div class="col-sm-6">
                                <div class="pm-summary-stat">
                                    <div class="number">{{ estimate.selected_service_count }}</div>
                                    <div class="label">Selected Services</div>
                                    <p class="copy">
                                        Total services selected by the property owner.
                                    </p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="pm-summary-stat">
                                    <div class="number">{{ estimate.calculated_service_count }}</div>
                                    <div class="label">Auto-Calculated</div>
                                    <p class="copy">
                                        Services included in the provisional monthly total.
                                    </p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="pm-summary-stat">
                                    <div class="number">{{ estimate.custom_or_pending_count }}</div>
                                    <div class="label">Custom / Pending</div>
                                    <p class="copy">
                                        Services needing staff quote, missing data, or one-time handling.
                                    </p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="pm-summary-stat">
                                    <div class="number">
                                        {% if estimate_saved %}Saved{% else %}Preview{% endif %}
                                    </div>
                                    <div class="label">Estimate State</div>
                                    <p class="copy">
                                        {% if estimate_saved %}
                                            Latest estimate has been stored on this property record.
                                        {% else %}
                                            This is a live preview. Save it below if ready.
                                        {% endif %}
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>

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


        <div class="row g-4">

            <!-- LEFT: SERVICE BREAKDOWN -->
            <div class="col-lg-8">

                <div class="pm-estimate-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-cash-stack"></i>
                            Calculated Monthly Services
                        </span>

                        <h2>Monthly Estimate Breakdown</h2>

                        <p>
                            These selected services are included in the provisional calculated monthly amount.
                        </p>
                    </div>

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

                        {% if estimate.calculated_items %}
                            {% for item in estimate.calculated_items %}
                                <div class="pm-estimate-item">

                                    <div class="pm-item-head">
                                        <div>
                                            <div class="pm-item-title">
                                                {{ item.service.name }}
                                            </div>

                                            <div class="pm-item-frequency">
                                                {{ item.selection.get_frequency_display }}
                                                · Requested visits/month:
                                                {{ item.selection.requested_visits_per_month }}
                                            </div>
                                        </div>

                                        <div class="pm-item-amount">
                                            ${{ item.amount }}/month
                                        </div>
                                    </div>

                                    <div class="pm-item-basis">
                                        <strong>Calculation basis:</strong>
                                        {{ item.basis }}
                                    </div>

                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="pm-empty-note">
                                No selected services are currently eligible for automatic monthly estimation.
                                Add calculator-enabled services or configure their pricing rules in admin.
                            </div>
                        {% endif %}

                    </div>
                </div>


                <!-- CUSTOM QUOTE -->
                <div class="pm-estimate-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-person-workspace"></i>
                            Staff Review Needed
                        </span>

                        <h2>Custom Quote Services</h2>

                        <p>
                            These services are not included in the automatic monthly total and require staff review.
                        </p>
                    </div>

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

                        {% if estimate.quote_required_items %}
                            {% for item in estimate.quote_required_items %}
                                <div class="pm-warning-item">
                                    <h5>{{ item.service.name }}</h5>
                                    <p>{{ item.note }}</p>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="pm-empty-note">
                                No selected services currently require a custom quote.
                            </div>
                        {% endif %}

                    </div>
                </div>


                <!-- MISSING INPUTS -->
                <div class="pm-estimate-card mb-4">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                            Missing Calculator Inputs
                        </span>

                        <h2>Services Waiting for More Property Details</h2>

                        <p>
                            These services could be calculated after the necessary property inputs are completed.
                        </p>
                    </div>

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

                        {% if estimate.missing_input_items %}
                            {% for item in estimate.missing_input_items %}
                                <div class="pm-warning-item">
                                    <h5>{{ item.service.name }}</h5>
                                    <p>{{ item.note }}</p>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="pm-empty-note">
                                No calculator-enabled services are currently missing property inputs.
                            </div>
                        {% endif %}

                    </div>
                </div>


                <!-- NON-MONTHLY -->
                <div class="pm-estimate-card">
                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-calendar-event-fill"></i>
                            One-Time or As-Needed
                        </span>

                        <h2>Not Included in Recurring Monthly Total</h2>

                        <p>
                            These services are selected but treated as one-time or as-needed tasks.
                        </p>
                    </div>

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

                        {% if estimate.non_monthly_items %}
                            {% for item in estimate.non_monthly_items %}
                                <div class="pm-warning-item">
                                    <h5>{{ item.service.name }}</h5>
                                    <p>{{ item.note }}</p>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="pm-empty-note">
                                No one-time selected services are currently excluded from the monthly total.
                            </div>
                        {% endif %}

                    </div>
                </div>

            </div>


            <!-- RIGHT: SAVE ESTIMATE -->
            <div class="col-lg-4">
                <div class="pm-generate-box sticky-lg-top" style="top: 105px;">

                    <h4>
                        Save or Refresh This Estimate
                    </h4>

                    <p>
                        Press the button below to store the latest monthly calculator estimate
                        on this property record. This does not approve the plan or confirm final pricing.
                    </p>

                    <form method="post">
                        {% csrf_token %}

                        <button type="submit"
                                class="btn pm-estimate-btn-primary w-100 mb-3">
                            <i class="bi bi-calculator-fill me-2"></i>
                            Generate & Save Estimate
                        </button>
                    </form>

                    {% if property.estimate_generated_at %}
                        <div class="alert alert-success rounded-4 mb-3">
                            <strong>Last saved:</strong><br>
                            {{ property.estimate_generated_at|date:"M d, Y H:i" }}
                        </div>
                    {% endif %}

                    <div class="alert alert-warning rounded-4 mb-0">
                        <strong>Important:</strong>
                        This is a provisional calculator estimate only.
                        Final monthly charges can change after staff review,
                        location assessment, condition review, and service-plan approval.
                    </div>

                </div>
            </div>

        </div>

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