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

{% block title %}Create Inspection Report | MyAdmin{% endblock %}

{% block content %}
<style>
    .inspection-create-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-create-hero,
    .inspection-form-card,
    .inspection-reference-card {
        border-radius: 34px;
        border: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.09);
    }

    .inspection-create-hero {
        border: none;
        padding: 2.55rem 2.35rem;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.15), transparent 34%),
            linear-gradient(135deg, #052e25, #0f766e);
        color: #fff;
    }

    .inspection-create-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-create-hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.35rem);
        font-weight: 950;
        letter-spacing: -0.04em;
        margin-bottom: 0.75rem;
    }

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

    .inspection-form-header,
    .inspection-reference-header {
        padding: 1.6rem 1.75rem 1.1rem;
        border-bottom: 1px solid #e2e8f0;
    }

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

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

    .inspection-form-body,
    .inspection-reference-body {
        padding: 1.75rem;
    }

    .inspection-form-body .form-control,
    .inspection-form-body .form-select {
        min-height: 50px;
        border-radius: 16px;
    }

    .inspection-form-body textarea.form-control {
        min-height: 135px;
    }

    .inspection-form-body .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
    }

    .condition-group-title {
        color: #0f172a;
        font-weight: 950;
        font-size: 1.12rem;
        margin-bottom: 1rem;
        padding-bottom: 0.8rem;
        border-bottom: 1px dashed #dbe4ee;
    }

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

    .reference-line:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

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

    .reference-value {
        color: #0f172a;
        font-weight: 900;
        line-height: 1.6;
    }

    .reference-note {
        border-radius: 22px;
        padding: 1rem 1.05rem;
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
        line-height: 1.65;
    }

    .submit-btn {
        min-height: 54px;
        border-radius: 999px;
        font-weight: 900;
        padding-left: 1.45rem;
        padding-right: 1.45rem;
    }

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

        .inspection-form-header,
        .inspection-reference-header,
        .inspection-form-body,
        .inspection-reference-body {
            padding-left: 1.3rem;
            padding-right: 1.3rem;
        }
    }
</style>


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

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="inspection-create-hero mb-4">
            <span class="inspection-create-mini">
                <i class="bi bi-file-earmark-text-fill"></i>
                Property Care Inspection
            </span>

            <h1>Create Inspection Report</h1>

            <p>
                Prepare a formal inspection report for the maintenance visit
                <strong>{{ visit.visit_title }}</strong>.
                This report will record property condition, issues found, staff recommendations,
                and a future owner-visible summary.
            </p>
        </div>


        <div class="row g-4">

            <!-- =====================================================
                 LEFT: FORM
            ====================================================== -->
            <div class="col-lg-8">
                <div class="inspection-form-card">

                    <div class="inspection-form-header">
                        <h2>Inspection Report Details</h2>
                        <p>
                            Complete the assessment below. Photos can be added after the report is created.
                        </p>
                    </div>

                    <div class="inspection-form-body">
                        <form method="post">
                            {% csrf_token %}

                            {% if form.non_field_errors %}
                                <div class="alert alert-danger rounded-4">
                                    {{ form.non_field_errors }}
                                </div>
                            {% endif %}

                            <div class="row g-4">

                                <!-- Report Identity -->
                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        {{ form.report_title.label }}
                                    </label>
                                    {{ form.report_title }}
                                    {% if form.report_title.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.report_title.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.report_status.label }}
                                    </label>
                                    {{ form.report_status }}
                                    {% if form.report_status.help_text %}
                                        <div class="form-text">{{ form.report_status.help_text }}</div>
                                    {% endif %}
                                    {% if form.report_status.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.report_status.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.inspection_date.label }}
                                    </label>
                                    {{ form.inspection_date }}
                                    {% if form.inspection_date.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.inspection_date.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <!-- Condition Status Group -->
                                <div class="col-12">
                                    <div class="condition-group-title">
                                        Condition Assessment
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.overall_condition.label }}
                                    </label>
                                    {{ form.overall_condition }}
                                    {% if form.overall_condition.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.overall_condition.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.cleanliness_status.label }}
                                    </label>
                                    {{ form.cleanliness_status }}
                                    {% if form.cleanliness_status.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.cleanliness_status.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.garden_status.label }}
                                    </label>
                                    {{ form.garden_status }}
                                    {% if form.garden_status.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.garden_status.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.security_status.label }}
                                    </label>
                                    {{ form.security_status }}
                                    {% if form.security_status.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.security_status.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.utility_status.label }}
                                    </label>
                                    {{ form.utility_status }}
                                    {% if form.utility_status.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.utility_status.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.structural_status.label }}
                                    </label>
                                    {{ form.structural_status }}
                                    {% if form.structural_status.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.structural_status.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <!-- Findings -->
                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        {{ form.issues_found.label }}
                                    </label>
                                    {{ form.issues_found }}
                                    {% if form.issues_found.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.issues_found.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        {{ form.recommendations.label }}
                                    </label>
                                    {{ form.recommendations }}
                                    {% if form.recommendations.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.recommendations.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <div class="form-check">
                                        {{ form.urgent_action_required }}
                                        <label class="form-check-label fw-bold ms-2">
                                            {{ form.urgent_action_required.label }}
                                        </label>
                                    </div>

                                    {% if form.urgent_action_required.help_text %}
                                        <div class="form-text">
                                            {{ form.urgent_action_required.help_text }}
                                        </div>
                                    {% endif %}

                                    {% if form.urgent_action_required.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.urgent_action_required.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <!-- Owner / Staff Notes -->
                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        {{ form.owner_visible_summary.label }}
                                    </label>
                                    {{ form.owner_visible_summary }}
                                    {% if form.owner_visible_summary.help_text %}
                                        <div class="form-text">
                                            {{ form.owner_visible_summary.help_text }}
                                        </div>
                                    {% endif %}
                                    {% if form.owner_visible_summary.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.owner_visible_summary.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        {{ form.internal_staff_note.label }}
                                    </label>
                                    {{ form.internal_staff_note }}
                                    {% if form.internal_staff_note.help_text %}
                                        <div class="form-text">
                                            {{ form.internal_staff_note.help_text }}
                                        </div>
                                    {% endif %}
                                    {% if form.internal_staff_note.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.internal_staff_note.errors|striptags }}
                                        </div>
                                    {% endif %}
                                </div>

                            </div>

                            <div class="d-flex flex-column flex-md-row gap-3 mt-4">
                                <button type="submit"
                                        class="btn btn-dark submit-btn">
                                    <i class="bi bi-file-earmark-plus-fill me-2"></i>
                                    Create Inspection Report
                                </button>

                                <a href="{% url 'myadmin:property_care_visit_detail' visit.pk %}"
                                   class="btn btn-outline-secondary submit-btn">
                                    Back to Visit
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <!-- =====================================================
                 RIGHT: VISIT / PROPERTY REFERENCE
            ====================================================== -->
            <div class="col-lg-4">
                <div class="inspection-reference-card">

                    <div class="inspection-reference-header">
                        <h3>Visit Reference</h3>
                        <p>
                            Confirm the operational visit details before preparing the report.
                        </p>
                    </div>

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

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

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

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

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

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

                        <div class="reference-line">
                            <span class="reference-label">Scheduled / Completed</span>
                            <div class="reference-value">
                                {% if visit.completed_at %}
                                    Completed {{ visit.completed_at|date:"M d, Y H:i" }}
                                {% elif visit.scheduled_date %}
                                    Scheduled {{ visit.scheduled_date|date:"M d, Y" }}
                                    {% if visit.scheduled_time %}
                                        at {{ visit.scheduled_time|time:"H:i" }}
                                    {% endif %}
                                {% else %}
                                    Not recorded
                                {% endif %}
                            </div>
                        </div>

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

                        <div class="reference-note mt-4">
                            This inspection report becomes the formal report layer above the raw maintenance visit record.
                        </div>

                        <div class="mt-4 d-grid">
                            <a href="{% url 'myadmin:property_care_visit_detail' visit.pk %}"
                               class="btn btn-outline-dark rounded-pill fw-bold">
                                <i class="bi bi-arrow-left-circle-fill me-2"></i>
                                Open Visit Detail
                            </a>
                        </div>

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

        </div>

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