{% extends 'property_manager_app/base_property_manager.html' %}
{% block title %}Upload Property Document | Home in Sri Lanka{% endblock %}

{% block content %}
<style>
    .pm-document-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%);
    }

    .pm-doc-hero,
    .pm-doc-form-card,
    .pm-doc-property-card {
        border-radius: 34px;
        border: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.09);
    }

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

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

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

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

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

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

    .pm-doc-form-body,
    .pm-doc-property-body {
        padding: 1.75rem;
    }

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

    .pm-doc-form-body textarea.form-control {
        min-height: 120px;
    }

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

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

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

    .pm-doc-summary-label {
        color: #64748b;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 0.25rem;
    }

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

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

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

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

        .pm-doc-form-header,
        .pm-doc-property-header,
        .pm-doc-form-body,
        .pm-doc-property-body {
            padding-left: 1.3rem;
            padding-right: 1.3rem;
        }
    }
</style>

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

        <div class="pm-doc-hero mb-4">
            <h1>Upload Supporting Property Document</h1>

            <p>
                Add land plans, building plans, ownership references, utility documents,
                or other useful files for
                <strong>{{ property.property_name }}</strong>.
            </p>
        </div>

        <div class="row g-4">

            <div class="col-lg-8">
                <div class="pm-doc-form-card">

                    <div class="pm-doc-form-header">
                        <h2>Document Details</h2>
                        <p>
                            Upload a file that helps Ensolanka understand, verify, or care for your property more accurately.
                        </p>
                    </div>

                    <div class="pm-doc-form-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-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.document_type.label }}
                                    </label>
                                    {{ form.document_type }}

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

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

                                <div class="col-md-6">
                                    <label class="form-label fw-bold">
                                        {{ form.title.label }}
                                    </label>
                                    {{ form.title }}

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

                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        {{ form.file.label }}
                                    </label>
                                    {{ form.file }}

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

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

                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        {{ form.description.label }}
                                    </label>
                                    {{ form.description }}

                                    {% if form.description.errors %}
                                        <div class="text-danger small mt-1">
                                            {{ form.description.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="pm-doc-note mt-4">
                                Suggested files include land survey plans, building/floor plans,
                                ownership reference documents, utility bills, and supporting property condition references.
                            </div>

                            <div class="d-flex flex-column flex-md-row gap-3 mt-4">
                                <button type="submit"
                                        class="btn btn-dark pm-doc-btn">
                                    <i class="bi bi-cloud-arrow-up-fill me-2"></i>
                                    Upload Document
                                </button>

                                <a href="{% url 'property_manager_app:managed_property_detail' property.pk %}"
                                   class="btn btn-outline-secondary pm-doc-btn">
                                    Back to Property
                                </a>
                            </div>
                        </form>
                    </div>

                </div>
            </div>


            <div class="col-lg-4">
                <div class="pm-doc-property-card">

                    <div class="pm-doc-property-header">
                        <h3>Property Reference</h3>
                        <p>
                            Confirm the property before uploading the supporting document.
                        </p>
                    </div>

                    <div class="pm-doc-property-body">

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

                        <div class="pm-doc-summary-line">
                            <div class="pm-doc-summary-label">Category</div>
                            <div class="pm-doc-summary-value">
                                {{ property.get_property_category_display }}
                            </div>
                        </div>

                        <div class="pm-doc-summary-line">
                            <div class="pm-doc-summary-label">Location</div>
                            <div class="pm-doc-summary-value">
                                {{ property.city }}, {{ property.district }}
                            </div>
                        </div>

                        <div class="pm-doc-summary-line">
                            <div class="pm-doc-summary-label">Review Status</div>
                            <div class="pm-doc-summary-value">
                                {{ property.get_review_status_display }}
                            </div>
                        </div>

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

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

        </div>

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