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

{% block title %}Upload Inspection Report Photo | MyAdmin{% endblock %}

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

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

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

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

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

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

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

    .inspection-upload-card-body,
    .inspection-report-reference-body {
        padding: 1.75rem;
    }

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

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

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

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

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

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

    .inspection-upload-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-upload-hero {
            padding: 2rem 1.35rem;
            border-radius: 28px;
        }

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


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

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="inspection-upload-hero mb-4">
            <span class="inspection-upload-mini">
                <i class="bi bi-image-fill"></i>
                Inspection Report Media
            </span>

            <h1>Upload Inspection Report Photo</h1>

            <p>
                Add curated report imagery for
                <strong>{{ report.report_title }}</strong>.
                These photos may be used as condition evidence, issue references,
                or owner-visible inspection attachments.
            </p>
        </div>


        <div class="row g-4">

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

                    <div class="inspection-upload-card-header">
                        <h2>Photo Details</h2>
                        <p>
                            Upload a clear image and classify how it should support the inspection report.
                        </p>
                    </div>

                    <div class="inspection-upload-card-body">
                        <form method="post" enctype="multipart/form-data">
                            {% 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">

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

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

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

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

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

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

                            </div>

                            <div class="inspection-upload-note mt-4">
                                Report photos are validated and compressed automatically after upload, based on the image rules configured in the model.
                            </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-cloud-arrow-up-fill me-2"></i>
                                    Upload Report Photo
                                </button>

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


            <!-- =====================================================
                 RIGHT: REPORT REFERENCE
            ====================================================== -->
            <div class="col-lg-4">
                <div class="inspection-report-reference-card">

                    <div class="inspection-report-reference-header">
                        <h3>Report Reference</h3>
                        <p>
                            Confirm the inspection-report context before uploading the image.
                        </p>
                    </div>

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

                        <div class="inspection-reference-line">
                            <span class="inspection-reference-label">Report</span>
                            <div class="inspection-reference-value">
                                {{ report.report_title }}
                            </div>
                        </div>

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

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

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

                        <div class="inspection-reference-line">
                            <span class="inspection-reference-label">Report Status</span>
                            <div class="inspection-reference-value">
                                {{ report.get_report_status_display }}
                            </div>
                        </div>

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

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

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

        </div>

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