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

{% block title %}Upload Visit Photo | MyAdmin{% endblock %}

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

    .upload-hero,
    .upload-card,
    .visit-summary-card {
        border-radius: 34px;
        border: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 20px 48px rgba(15,23,42,.09);
    }

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

    .upload-hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.3rem);
        font-weight: 950;
        letter-spacing: -.04em;
        margin-bottom: .65rem;
    }

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

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

    .upload-card-header h2,
    .visit-summary-header h3 {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: .35rem;
    }

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

    .upload-card-body,
    .visit-summary-body {
        padding: 1.75rem;
    }

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

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

    .submit-btn {
        border-radius: 999px;
        min-height: 54px;
        font-weight: 900;
    }

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

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

    .summary-label {
        color: #64748b;
        font-size: .85rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .045em;
        margin-bottom: .25rem;
    }

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

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

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

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

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

        <div class="upload-hero mb-4">
            <h1>Upload Visit Photo</h1>

            <p>
                Add photo evidence for <strong>{{ visit.visit_title }}</strong>.
                Images may be marked owner-visible for future display in the owner report center.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-lg-8">
                <div class="upload-card">
                    <div class="upload-card-header">
                        <h2>Photo Details</h2>
                        <p>
                            Upload a clear image and classify it correctly for operational tracking.
                        </p>
                    </div>

                    <div class="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="upload-note mt-4">
                                Visit photos are validated and compressed after upload according to the image handling 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 Photo
                                </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>

            <div class="col-lg-4">
                <div class="visit-summary-card">
                    <div class="visit-summary-header">
                        <h3>Visit Reference</h3>
                        <p>
                            Confirm the visit context before uploading the image.
                        </p>
                    </div>

                    <div class="visit-summary-body">

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

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

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

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

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

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

        </div>

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