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

{% block title %}Property Care Reports{% endblock %}

{% block content %}

<style>
    .pm-reports-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-reports-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-reports-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-reports-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.6rem);
        font-weight: 950;
        letter-spacing: -.045em;
        line-height: 1.1;
        margin-bottom: .8rem;
    }

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

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

    .pm-report-center-card {
        padding: 1.55rem;
        margin-bottom: 1.5rem;
    }

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

    .pm-report-center-card p {
        color: #64748b;
        line-height: 1.78;
        margin-bottom: 0;
    }

    .pm-report-module-card {
        height: 100%;
        padding: 1.5rem;
        transition: all .22s ease;
    }

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

    .pm-report-module-icon {
        width: 64px;
        height: 64px;
        border-radius: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.55rem;
        background: #ecfdf5;
        color: #0f766e;
        margin-bottom: 1rem;
    }

    .pm-report-module-card:nth-child(even) .pm-report-module-icon {
        background: #fef3c7;
        color: #b45309;
    }

    .pm-report-module-card h5 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .45rem;
    }

    .pm-report-module-card p {
        color: #64748b;
        line-height: 1.72;
        margin-bottom: 0;
    }

    .pm-report-status {
        margin-top: 1rem;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .42rem .8rem;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 850;
        font-size: .82rem;
    }

    .pm-report-property-panel {
        margin-top: 1.8rem;
        padding: 1.6rem;
    }

    .pm-report-property-panel h3 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .4rem;
    }

    .pm-report-property-panel p {
        color: #64748b;
        line-height: 1.72;
    }

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

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

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

        <div class="pm-reports-hero">
            <span class="pm-reports-kicker">
                <i class="bi bi-journal-richtext"></i>
                Property Care Reports
            </span>

            <h1>Owner Report Center</h1>

            <p>
                This report center will become the owner-facing activity hub for
                maintenance visits, inspection reports, uploaded photos, work orders,
                and communication history. The structure is now ready for the next Step 10 connections.
            </p>
        </div>

        <div class="pm-report-center-card">
            <h3 class="mb-2">Report Center Status</h3>
            <p>
                You currently have <strong>{{ total_properties }}</strong> registered
                {% if total_properties == 1 %}property{% else %}properties{% endif %}.
                As we connect the Step 10 report modules further, this page will surface
                owner-visible service activity and property records in one place.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-xl-3">
                <div class="pm-report-module-card">
                    <div class="pm-report-module-icon">
                        <i class="bi bi-calendar-check-fill"></i>
                    </div>

                    <h5>Maintenance Visits</h5>

                    <p>
                        Scheduled and completed property visits, including visit purpose and service context.
                    </p>

                    <span class="pm-report-status">
                        <i class="bi bi-hourglass-split"></i>
                        Owner connection pending
                    </span>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-report-module-card">
                    <div class="pm-report-module-icon">
                        <i class="bi bi-clipboard2-pulse-fill"></i>
                    </div>

                    <h5>Inspection Reports</h5>

                    <p>
                        Formal property observations, condition summaries, and staff-reviewed findings.
                    </p>

                    <span class="pm-report-status">
                        <i class="bi bi-hourglass-split"></i>
                        Owner connection pending
                    </span>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-report-module-card">
                    <div class="pm-report-module-icon">
                        <i class="bi bi-tools"></i>
                    </div>

                    <h5>Repair Work Orders</h5>

                    <p>
                        Repair issues, approvals, progress, urgency level, and completion records.
                    </p>

                    <span class="pm-report-status">
                        <i class="bi bi-hourglass-split"></i>
                        Future module
                    </span>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="pm-report-module-card">
                    <div class="pm-report-module-icon">
                        <i class="bi bi-chat-square-text-fill"></i>
                    </div>

                    <h5>Owner Communication</h5>

                    <p>
                        Logged notes, notifications, clarifications, and communication history.
                    </p>

                    <span class="pm-report-status">
                        <i class="bi bi-hourglass-split"></i>
                        Future module
                    </span>
                </div>
            </div>

        </div>

        <div class="pm-report-property-panel">
            <h3>What Comes Next</h3>

            <p class="mb-3">
                The next implementation step is to connect already-created Step 10 records
                to owner-facing views. This page can then display real visit activity, inspection
                reports, photos, and work-order progress per property.
            </p>

            <div class="d-flex flex-wrap gap-2">
                <a href="{% url 'property_manager_app:managed_property_list' %}"
                   class="btn btn-dark rounded-pill px-4">
                    <i class="bi bi-houses-fill me-2"></i>
                    My Properties
                </a>

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

    </div>
</section>

{% endblock %}