{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}Manage Images | {{ property.property_name }} | Home in Sri Lanka{% endblock %}


{% block extra_css %}
<style>
    /* =========================================================
       MANAGED PROPERTY IMAGE UPLOAD PAGE
    ========================================================= */

    .pm-image-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.12), transparent 32%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.10), transparent 34%),
            linear-gradient(180deg, #f8fafc 0%, #eef7f2 48%, #ffffff 100%);
    }

    .pm-image-hero {
        position: relative;
        overflow: hidden;
        border-radius: 36px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
            linear-gradient(135deg, #052e25 0%, #0f766e 100%);
        color: #fff;
        box-shadow: 0 28px 65px rgba(15, 23, 42, 0.18);
    }

    .pm-image-hero-inner {
        position: relative;
        z-index: 2;
        padding: 2.6rem 2.4rem;
    }

    .pm-image-badge {
        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.045em;
        margin-bottom: 1rem;
    }

    .pm-image-hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.35rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin-bottom: 0.8rem;
    }

    .pm-image-subtitle {
        color: #fbbf24;
        font-weight: 900;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .pm-image-hero p {
        max-width: 840px;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.78;
        font-size: 1.03rem;
        margin-bottom: 1.45rem;
    }

    .pm-image-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .pm-image-btn-primary {
        border-radius: 999px;
        border: none;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        font-weight: 900;
        padding: 0.9rem 1.45rem;
        box-shadow: 0 16px 32px rgba(245, 158, 11, 0.22);
    }

    .pm-image-btn-primary:hover {
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-image-btn-outline {
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        font-weight: 800;
        padding: 0.9rem 1.45rem;
    }

    .pm-image-btn-outline:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    .pm-upload-card,
    .pm-gallery-card {
        border-radius: 34px;
        border: 1px solid rgba(226, 232, 240, 0.92);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.09);
        overflow: hidden;
        height: 100%;
    }

    .pm-card-header {
        padding: 1.65rem 1.8rem 1.2rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .pm-card-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #0f766e;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.45rem;
    }

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

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

    .pm-card-body {
        padding: 1.8rem;
    }

    .form-label {
        color: #0f172a;
        font-weight: 800;
        margin-bottom: 0.5rem;
    }

    .form-control {
        border-radius: 16px;
        min-height: 52px;
        border: 1px solid #dbe4ee;
        padding: 0.78rem 1rem;
        color: #0f172a;
        background: #fff;
        box-shadow: none;
    }

    .form-control:focus {
        border-color: #0f766e;
        box-shadow: 0 0 0 0.22rem rgba(15, 118, 110, 0.12);
    }

    .form-text {
        color: #64748b;
        font-size: 0.84rem;
        line-height: 1.55;
        margin-top: 0.36rem;
    }

    .errorlist {
        list-style: none;
        padding-left: 0;
        margin: 0.48rem 0 0;
        color: #b91c1c;
        font-size: 0.88rem;
        font-weight: 700;
    }

    .pm-form-global-errors {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        border-radius: 20px;
        padding: 1rem 1.15rem;
        margin-bottom: 1.4rem;
        font-weight: 700;
    }

    .pm-upload-note {
        margin-top: 1.2rem;
        border-radius: 22px;
        padding: 1rem 1.1rem;
        background: #ecfdf5;
        border: 1px solid #99f6e4;
        color: #115e59;
        line-height: 1.65;
        font-size: 0.93rem;
    }

    .pm-upload-submit {
        min-height: 56px;
        border: none;
        border-radius: 999px;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        font-weight: 900;
        padding: 0.95rem 1.6rem;
        box-shadow: 0 16px 34px rgba(245, 158, 11, 0.22);
    }

    .pm-upload-submit:hover {
        color: #111827;
        transform: translateY(-1px);
    }

    .pm-current-image-count {
        border-radius: 20px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 1rem 1.1rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        color: #475569;
        margin-bottom: 1.25rem;
    }

    .pm-current-image-count i {
        color: #0f766e;
        font-size: 1.2rem;
    }

    .pm-gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }

    .pm-gallery-item {
        border-radius: 26px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
    }

    .pm-gallery-image {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        background: #f8fafc;
    }

    .pm-gallery-content {
        padding: 1rem 1rem 1.1rem;
    }

    .pm-gallery-caption {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.35rem;
        line-height: 1.4;
    }

    .pm-gallery-meta {
        color: #64748b;
        font-size: 0.87rem;
        margin-bottom: 0.85rem;
    }

    .pm-delete-btn {
        border-radius: 999px;
        font-weight: 800;
        font-size: 0.86rem;
        padding: 0.58rem 0.95rem;
    }

    .pm-empty-gallery {
        border-radius: 30px;
        padding: 2.6rem 1.4rem;
        text-align: center;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.10), transparent 26%),
            linear-gradient(135deg, #f8fafc, #ecfdf5);
        border: 1px dashed rgba(15, 118, 110, 0.36);
    }

    .pm-empty-gallery-icon {
        width: 92px;
        height: 92px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 32px;
        color: #0f766e;
        background: rgba(255, 255, 255, 0.86);
        font-size: 2.45rem;
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
        margin-bottom: 1.2rem;
    }

    .pm-empty-gallery h3 {
        color: #0f172a;
        font-weight: 900;
        margin-bottom: 0.65rem;
    }

    .pm-empty-gallery p {
        color: #64748b;
        line-height: 1.72;
        margin-bottom: 0;
    }

    @media (max-width: 991.98px) {
        .pm-image-hero-inner,
        .pm-card-header,
        .pm-card-body {
            padding-left: 1.4rem;
            padding-right: 1.4rem;
        }

        .pm-image-hero,
        .pm-upload-card,
        .pm-gallery-card {
            border-radius: 28px;
        }

        .pm-gallery-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}


{% block content %}
<section class="pm-image-page py-5">
    <div class="container">

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="pm-image-hero mb-4">
            <div class="pm-image-hero-inner">

                <span class="pm-image-badge">
                    <i class="bi bi-images"></i>
                    Property Images
                </span>

                <h1>
                    Manage Images for {{ property.property_name }}
                </h1>

                <div class="pm-image-subtitle">
                    {{ property.get_property_category_display }}
                </div>

                <p>
                    Upload clear property images to strengthen the visual record of this managed property.
                    These images will help with owner documentation, future review, maintenance planning,
                    and later property condition understanding.
                </p>

                <div class="pm-image-actions">
                    <a href="{% url 'property_manager_app:managed_property_detail' property.pk %}"
                       class="btn pm-image-btn-outline">
                        <i class="bi bi-arrow-left me-2"></i>
                        Back to Property
                    </a>

                    <a href="{% url 'property_manager_app:managed_property_list' %}"
                       class="btn pm-image-btn-primary">
                        <i class="bi bi-houses-fill me-2"></i>
                        My Properties
                    </a>
                </div>

            </div>
        </div>


        <div class="row g-4">

            <!-- =====================================================
                 UPLOAD FORM
            ====================================================== -->
            <div class="col-lg-5">
                <div class="pm-upload-card">

                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-cloud-arrow-up-fill"></i>
                            Upload New Image
                        </span>

                        <h2>Add Property Image</h2>

                        <p>
                            Upload one clear image at a time. You can repeat this step to build a fuller gallery.
                        </p>
                    </div>

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

                        {% if form.non_field_errors %}
                            <div class="pm-form-global-errors">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}

                        <form method="post" enctype="multipart/form-data" novalidate>
                            {% csrf_token %}

                            <div class="mb-4">
                                <label for="{{ form.image.id_for_label }}" class="form-label">
                                    {{ form.image.label }}
                                </label>

                                {{ form.image }}

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

                                {{ form.image.errors }}
                            </div>

                            <div class="mb-4">
                                <label for="{{ form.caption.id_for_label }}" class="form-label">
                                    {{ form.caption.label }}
                                </label>

                                {{ form.caption }}

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

                                {{ form.caption.errors }}
                            </div>

                            <button type="submit"
                                    class="btn pm-upload-submit w-100">
                                <i class="bi bi-upload me-2"></i>
                                Upload Image
                            </button>
                        </form>

                        <div class="pm-upload-note">
                            <strong>Good image examples:</strong>
                            front view, gate, garden, land area, building exterior, living spaces,
                            damaged areas, or any section that helps Ensolanka understand the property.
                        </div>

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


            <!-- =====================================================
                 CURRENT IMAGE GALLERY
            ====================================================== -->
            <div class="col-lg-7">
                <div class="pm-gallery-card">

                    <div class="pm-card-header">
                        <span class="pm-card-kicker">
                            <i class="bi bi-grid-3x3-gap-fill"></i>
                            Current Gallery
                        </span>

                        <h2>Uploaded Property Images</h2>

                        <p>
                            These images are connected directly to this managed property record.
                        </p>
                    </div>

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

                        <div class="pm-current-image-count">
                            <i class="bi bi-image-fill"></i>
                            <span>
                                <strong>{{ images|length }}</strong>
                                image{{ images|length|pluralize }} currently uploaded.
                            </span>
                        </div>

                        {% if images %}

                            <div class="pm-gallery-grid">

                                {% for image in images %}
                                    <div class="pm-gallery-item">

                                        <img src="{{ image.image.url }}"
                                             alt="{{ image.caption|default:property.property_name }}"
                                             class="pm-gallery-image">

                                        <div class="pm-gallery-content">

                                            <div class="pm-gallery-caption">
                                                {{ image.caption|default:"Property Image" }}
                                            </div>

                                            <div class="pm-gallery-meta">
                                                Display order: {{ image.order }}
                                            </div>

                                            <form method="post"
                                                  action="{% url 'property_manager_app:managed_property_image_delete' property.pk image.pk %}"
                                                  onsubmit="return confirm('Are you sure you want to delete this image?');">
                                                {% csrf_token %}

                                                <button type="submit"
                                                        class="btn btn-outline-danger pm-delete-btn">
                                                    <i class="bi bi-trash3-fill me-1"></i>
                                                    Delete Image
                                                </button>
                                            </form>

                                        </div>
                                    </div>
                                {% endfor %}

                            </div>

                        {% else %}

                            <div class="pm-empty-gallery">
                                <div class="pm-empty-gallery-icon">
                                    <i class="bi bi-camera-fill"></i>
                                </div>

                                <h3>No property images uploaded yet</h3>

                                <p>
                                    Use the upload form to add the first image.
                                    These visual references will make the property record richer
                                    and more useful for future review and maintenance planning.
                                </p>
                            </div>

                        {% endif %}

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

        </div>

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