{% extends 'myadmin/base_myadmin.html' %}

{% block title %}Inspection Report | {{ report.report_title }} | MyAdmin{% endblock %}

{% block content %}
<style>
    .inspection-detail-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.08), transparent 30%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }

    .inspection-detail-hero {
        border-radius: 36px;
        padding: 2.6rem 2.35rem;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.15), transparent 34%),
            linear-gradient(135deg, #052e25, #0f766e);
        color: #fff;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
    }

    .inspection-detail-mini {
        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.05em;
        margin-bottom: 1rem;
    }

    .inspection-detail-hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.35rem);
        font-weight: 950;
        letter-spacing: -0.04em;
        margin-bottom: 0.75rem;
    }

    .inspection-detail-hero p {
        color: rgba(255,255,255,0.88);
        line-height: 1.78;
        max-width: 950px;
        margin-bottom: 1.3rem;
    }

    .inspection-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .inspection-hero-actions .btn {
        border-radius: 999px;
        font-weight: 900;
    }

    .inspection-stat-card,
    .inspection-card {
        border-radius: 32px;
        border: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .inspection-stat-card {
        padding: 1.35rem;
        height: 100%;
    }

    .inspection-stat-label {
        color: #64748b;
        font-size: 0.84rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 900;
        margin-bottom: 0.4rem;
    }

    .inspection-stat-value {
        color: #0f172a;
        font-size: 2rem;
        font-weight: 950;
        line-height: 1.1;
    }

    .inspection-card-header {
        padding: 1.55rem 1.75rem 1.05rem;
        border-bottom: 1px solid #e2e8f0;
    }

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

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

    .inspection-card-body {
        padding: 1.75rem;
    }

    .inspection-info-line {
        padding: 0.9rem 0;
        border-bottom: 1px dashed #dbe4ee;
    }

    .inspection-info-line:last-child {
        border-bottom: 0;
    }

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

    .inspection-info-value {
        color: #0f172a;
        font-weight: 900;
        line-height: 1.65;
    }

    .condition-box {
        border-radius: 22px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        padding: 1rem;
        height: 100%;
    }

    .condition-label {
        display: block;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        font-size: 0.8rem;
        font-weight: 900;
        margin-bottom: 0.35rem;
    }

    .condition-value {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: 0;
    }

    .report-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        border-radius: 999px;
        padding: 0.48rem 0.85rem;
        font-size: 0.82rem;
        font-weight: 900;
    }

    .status-draft {
        background: #e2e8f0;
        color: #475569;
    }

    .status-ready-for-review {
        background: #fef3c7;
        color: #92400e;
    }

    .status-published {
        background: #dcfce7;
        color: #166534;
    }

    .urgent-pill {
        background: #fee2e2;
        color: #991b1b;
    }

    .not-urgent-pill {
        background: #dcfce7;
        color: #166534;
    }

    .report-note-box {
        border-radius: 24px;
        padding: 1.2rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #334155;
        line-height: 1.72;
        min-height: 150px;
    }

    .inspection-photo-item {
        border-radius: 28px;
        border: 1px solid #e2e8f0;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
        height: 100%;
    }

    .inspection-photo-item img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        display: block;
    }

    .inspection-photo-info {
        padding: 1rem;
    }

    .inspection-photo-title {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.35rem;
    }

    .inspection-photo-meta {
        color: #64748b;
        font-size: 0.88rem;
        line-height: 1.6;
    }

    .inspection-photo-actions {
        border-top: 1px solid #e2e8f0;
        padding: 1rem;
    }

    .inspection-empty-box {
        border-radius: 28px;
        padding: 1.6rem;
        border: 1px dashed rgba(15, 118, 110, 0.35);
        background: #fff;
        color: #475569;
    }

    @media (max-width: 767.98px) {
        .inspection-detail-hero {
            padding: 2rem 1.35rem;
            border-radius: 28px;
        }

        .inspection-card-header,
        .inspection-card-body {
            padding-left: 1.3rem;
            padding-right: 1.3rem;
        }

        .inspection-photo-item img {
            height: 210px;
        }
    }
</style>


<section class="inspection-detail-page py-5">
    <div class="container">

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="inspection-detail-hero mb-4">
            <span class="inspection-detail-mini">
                <i class="bi bi-file-earmark-medical-fill"></i>
                Inspection Report
            </span>

            <h1>{{ report.report_title }}</h1>

            <p>
                Formal property inspection report for
                <strong>{{ property.property_name }}</strong>,
                prepared from the visit
                <strong>{{ visit.visit_title }}</strong>.
            </p>

            <div class="inspection-hero-actions">
                <a href="{% url 'myadmin:property_care_visit_detail' visit.pk %}"
                   class="btn btn-light">
                    <i class="bi bi-arrow-left me-2"></i>
                    Back to Visit
                </a>

                <a href="{% url 'myadmin:property_care_inspection_report_photo_upload' report.pk %}"
                   class="btn btn-warning">
                    <i class="bi bi-images me-2"></i>
                    Upload Report Photo
                </a>

                <a href="{% url 'myadmin:property_care_property_review_detail' property.pk %}"
                   class="btn btn-outline-light">
                    <i class="bi bi-house-door-fill me-2"></i>
                    Open Property Review
                </a>
            </div>
        </div>


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

            <div class="col-6 col-lg-3">
                <div class="inspection-stat-card">
                    <div class="inspection-stat-label">Report Photos</div>
                    <div class="inspection-stat-value">{{ total_photos }}</div>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="inspection-stat-card">
                    <div class="inspection-stat-label">Owner Visible Photos</div>
                    <div class="inspection-stat-value text-success">
                        {{ owner_visible_photos }}
                    </div>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="inspection-stat-card">
                    <div class="inspection-stat-label">Issue Evidence Photos</div>
                    <div class="inspection-stat-value text-danger">
                        {{ issue_photos }}
                    </div>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="inspection-stat-card">
                    <div class="inspection-stat-label">Urgency</div>
                    <div class="inspection-stat-value" style="font-size: 1.2rem;">
                        {% if report.urgent_action_required %}
                            Urgent
                        {% else %}
                            Normal
                        {% endif %}
                    </div>
                </div>
            </div>

        </div>


        <!-- =====================================================
             REPORT INFO + VISIT REFERENCE
        ====================================================== -->
        <div class="row g-4 mb-4">

            <div class="col-lg-6">
                <div class="inspection-card h-100">
                    <div class="inspection-card-header">
                        <h2>Report Information</h2>
                        <p>Publication status, dates, and staff tracking.</p>
                    </div>

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

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Report Status</span>
                            <div class="inspection-info-value">
                                <span class="report-status-pill status-{{ report.report_status|slugify }}">
                                    {{ report.get_report_status_display }}
                                </span>
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Inspection Date</span>
                            <div class="inspection-info-value">
                                {% if report.inspection_date %}
                                    {{ report.inspection_date|date:"M d, Y" }}
                                {% else %}
                                    Not set
                                {% endif %}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Urgent Action Required</span>
                            <div class="inspection-info-value">
                                {% if report.urgent_action_required %}
                                    <span class="report-status-pill urgent-pill">
                                        <i class="bi bi-exclamation-triangle-fill"></i>
                                        Yes
                                    </span>
                                {% else %}
                                    <span class="report-status-pill not-urgent-pill">
                                        <i class="bi bi-check-circle-fill"></i>
                                        No
                                    </span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Published to Owner</span>
                            <div class="inspection-info-value">
                                {% if report.is_published_to_owner %}
                                    Yes
                                    {% if report.published_at %}
                                        — {{ report.published_at|date:"M d, Y H:i" }}
                                    {% endif %}
                                {% else %}
                                    No
                                {% endif %}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Prepared By</span>
                            <div class="inspection-info-value">
                                {% if report.prepared_by %}
                                    {{ report.prepared_by.get_full_name|default:report.prepared_by.username }}
                                {% else %}
                                    Not recorded
                                {% endif %}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Approved By</span>
                            <div class="inspection-info-value">
                                {% if report.approved_by %}
                                    {{ report.approved_by.get_full_name|default:report.approved_by.username }}
                                {% else %}
                                    Not approved yet
                                {% endif %}
                            </div>
                        </div>

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


            <div class="col-lg-6">
                <div class="inspection-card h-100">
                    <div class="inspection-card-header">
                        <h2>Visit & Property Reference</h2>
                        <p>Source maintenance visit and related property context.</p>
                    </div>

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

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Property</span>
                            <div class="inspection-info-value">
                                {{ property.property_name }}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Owner</span>
                            <div class="inspection-info-value">
                                {{ property.owner.full_name|default:property.owner.email }}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Visit</span>
                            <div class="inspection-info-value">
                                {{ visit.visit_title }}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Visit Type</span>
                            <div class="inspection-info-value">
                                {{ visit.get_visit_type_display }}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Visit Status</span>
                            <div class="inspection-info-value">
                                {{ visit.get_visit_status_display }}
                            </div>
                        </div>

                        <div class="inspection-info-line">
                            <span class="inspection-info-label">Visited By</span>
                            <div class="inspection-info-value">
                                {% if visit.visited_by %}
                                    {{ visit.visited_by.get_full_name|default:visit.visited_by.username }}
                                {% else %}
                                    Not assigned
                                {% endif %}
                            </div>
                        </div>

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

        </div>


        <!-- =====================================================
             CONDITION ASSESSMENT
        ====================================================== -->
        <div class="inspection-card mb-4">
            <div class="inspection-card-header">
                <h2>Condition Assessment</h2>
                <p>
                    Structured property condition summary prepared during inspection reporting.
                </p>
            </div>

            <div class="inspection-card-body">
                <div class="row g-3">

                    <div class="col-md-6 col-xl-4">
                        <div class="condition-box">
                            <span class="condition-label">Overall Condition</span>
                            <p class="condition-value">
                                {{ report.get_overall_condition_display }}
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-4">
                        <div class="condition-box">
                            <span class="condition-label">Cleanliness</span>
                            <p class="condition-value">
                                {{ report.get_cleanliness_status_display }}
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-4">
                        <div class="condition-box">
                            <span class="condition-label">Garden / Outdoor</span>
                            <p class="condition-value">
                                {{ report.get_garden_status_display }}
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-4">
                        <div class="condition-box">
                            <span class="condition-label">Security</span>
                            <p class="condition-value">
                                {{ report.get_security_status_display }}
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-4">
                        <div class="condition-box">
                            <span class="condition-label">Utilities</span>
                            <p class="condition-value">
                                {{ report.get_utility_status_display }}
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-4">
                        <div class="condition-box">
                            <span class="condition-label">Structural</span>
                            <p class="condition-value">
                                {{ report.get_structural_status_display }}
                            </p>
                        </div>
                    </div>

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


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

            <div class="col-lg-4">
                <div class="inspection-card h-100">
                    <div class="inspection-card-header">
                        <h3>Issues Found</h3>
                    </div>

                    <div class="inspection-card-body">
                        <div class="report-note-box">
                            {{ report.issues_found|default:"No issues recorded."|linebreaksbr }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="inspection-card h-100">
                    <div class="inspection-card-header">
                        <h3>Recommendations</h3>
                    </div>

                    <div class="inspection-card-body">
                        <div class="report-note-box">
                            {{ report.recommendations|default:"No recommendations recorded."|linebreaksbr }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="inspection-card h-100">
                    <div class="inspection-card-header">
                        <h3>Owner Visible Summary</h3>
                    </div>

                    <div class="inspection-card-body">
                        <div class="report-note-box">
                            {{ report.owner_visible_summary|default:"No owner-visible summary added yet."|linebreaksbr }}
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="inspection-card mb-4">
            <div class="inspection-card-header">
                <h3>Internal Staff Note</h3>
                <p>Operational note visible to Ensolanka staff only.</p>
            </div>

            <div class="inspection-card-body">
                <div class="report-note-box">
                    {{ report.internal_staff_note|default:"No internal staff note added yet."|linebreaksbr }}
                </div>
            </div>
        </div>


        <!-- =====================================================
             REPORT PHOTOS
        ====================================================== -->
        <div class="inspection-card">
            <div class="inspection-card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                <div>
                    <h2>Inspection Report Photos</h2>
                    <p>
                        Curated report images for issues, condition evidence, recommendations, and future owner visibility.
                    </p>
                </div>

                <div>
                    <a href="{% url 'myadmin:property_care_inspection_report_photo_upload' report.pk %}"
                       class="btn btn-dark rounded-pill fw-bold">
                        <i class="bi bi-image-fill me-2"></i>
                        Add Report Photo
                    </a>
                </div>
            </div>

            <div class="inspection-card-body">
                {% if photos %}
                    <div class="row g-4">
                        {% for photo in photos %}
                            <div class="col-md-6 col-xl-4">
                                <div class="inspection-photo-item">

                                    <img src="{{ photo.image.url }}"
                                         alt="{{ photo.caption|default:'Inspection report photo' }}">

                                    <div class="inspection-photo-info">
                                        <div class="inspection-photo-title">
                                            {{ photo.get_photo_type_display }}
                                        </div>

                                        <div class="inspection-photo-meta">
                                            {% if photo.caption %}
                                                {{ photo.caption }}<br>
                                            {% endif %}

                                            Uploaded:
                                            {{ photo.uploaded_at|date:"M d, Y H:i" }}<br>

                                            Visibility:
                                            {% if photo.is_owner_visible %}
                                                Owner Visible
                                            {% else %}
                                                Internal
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="inspection-photo-actions">
                                        <form method="post"
                                              action="{% url 'myadmin:property_care_inspection_report_photo_delete' report.pk photo.pk %}"
                                              onsubmit="return confirm('Delete this inspection report photo?');">
                                            {% 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 Photo
                                            </button>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="inspection-empty-box">
                        No inspection report photos have been uploaded yet.
                    </div>
                {% endif %}
            </div>
        </div>

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