{% extends 'rental_app/base_rental.html' %}
{% load static %}
{% block title %}{{ page_title }}{% endblock %}

{% block content %}

<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-10">
                <div class="mb-4">
                    <span class="section-mini-title">Rental Owner Area</span>
                    <h1 class="fw-bold mb-2">{{ page_title }}</h1>
                    <p class="text-muted mb-0">
                        Fill in the property details carefully. Submitted listings can be reviewed before becoming visible to foreigners.
                    </p>
                </div>

                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4 p-lg-5">

                        {% if is_edit and listing %}
                            <div class="alert {% if listing.is_approved %}alert-success{% else %}alert-warning{% endif %} rounded-4 mb-4">
                                {% if listing.is_approved %}
                                    <strong>Status:</strong> Approved listing.
                                {% else %}
                                    <strong>Status:</strong> Pending review.
                                    Your latest changes remain visible to you, but public users will only see the listing after approval.
                                {% endif %}
                            </div>
                        {% endif %}

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

                            {% if form.errors or image_form.errors %}
                                <div class="alert alert-danger rounded-4">
                                    Please correct the errors below and try again.
                                </div>
                            {% endif %}

                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Title</label>
                                    {{ form.title }}
                                    {{ form.title.errors }}
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label fw-semibold">Property Type</label>
                                    {{ form.property_type }}
                                    {{ form.property_type.errors }}
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label fw-semibold">Visibility</label>
                                    {{ form.visibility }}
                                    {{ form.visibility.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">City</label>
                                    {{ form.city }}
                                    {{ form.city.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Area</label>
                                    {{ form.area }}
                                    {{ form.area.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Available From</label>
                                    {{ form.available_from }}
                                    {{ form.available_from.errors }}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Address</label>
                                    {{ form.address }}
                                    {{ form.address.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Monthly Rent (USD)</label>
                                    {{ form.monthly_rent_usd }}
                                    {{ form.monthly_rent_usd.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Security Deposit (USD)</label>
                                    {{ form.security_deposit_usd }}
                                    {{ form.security_deposit_usd.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Furnishing</label>
                                    {{ form.furnishing }}
                                    {{ form.furnishing.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Bedrooms</label>
                                    {{ form.bedrooms }}
                                    {{ form.bedrooms.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Bathrooms</label>
                                    {{ form.bathrooms }}
                                    {{ form.bathrooms.errors }}
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold">Max Occupants</label>
                                    {{ form.max_occupants }}
                                    {{ form.max_occupants.errors }}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Short Description</label>
                                    {{ form.short_description }}
                                    {{ form.short_description.errors }}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Full Description</label>
                                    {{ form.full_description }}
                                    {{ form.full_description.errors }}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">House Rules</label>
                                    {{ form.house_rules }}
                                    {{ form.house_rules.errors }}
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold d-block mb-2">Features</label>
                                    <div class="row g-2">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                {{ form.has_wifi }}
                                                <label class="form-check-label" for="{{ form.has_wifi.id_for_label }}">Wi-Fi</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                {{ form.has_ac }}
                                                <label class="form-check-label" for="{{ form.has_ac.id_for_label }}">A/C</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                {{ form.has_kitchen }}
                                                <label class="form-check-label" for="{{ form.has_kitchen.id_for_label }}">Kitchen</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                {{ form.has_parking }}
                                                <label class="form-check-label" for="{{ form.has_parking.id_for_label }}">Parking</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                {{ form.near_beach }}
                                                <label class="form-check-label" for="{{ form.near_beach.id_for_label }}">Near Beach</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                {{ form.suitable_for_remote_work }}
                                                <label class="form-check-label" for="{{ form.suitable_for_remote_work.id_for_label }}">Remote Work Friendly</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                {{ form.is_available }}
                                                <label class="form-check-label" for="{{ form.is_available.id_for_label }}">Currently Available</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-semibold">Upload Property Images</label>
                                    {{ image_form.images }}
                                    {{ image_form.images.errors }}
                                    <div class="form-text">
                                        You can select multiple images. New images will be added to the existing gallery.
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex flex-wrap gap-3 mt-5">
                                <button type="submit" class="btn btn-dark btn-lg">
                                    {{ submit_label }}
                                </button>
                                <a href="{% url 'rental_app:rental_owner_dashboard' %}" class="btn btn-outline-secondary btn-lg">
                                    Back to Dashboard
                                </a>
                            </div>
                        </form>

                        {% if is_edit and listing and listing.images.all %}
                            <hr class="my-5">

                            <div class="col-12">
                                <label class="form-label fw-semibold">Existing Images</label>
                                <div class="row g-3">
                                    {% for img in listing.images.all %}
                                        <div class="col-6 col-md-3">
                                            <div class="border rounded-3 p-2 h-100">
                                                <img src="{{ img.image.url }}"
                                                     alt="{{ listing.title }}"
                                                     class="img-fluid rounded mb-2"
                                                     style="height:120px; width:100%; object-fit:cover;">

                                                {% if img.caption %}
                                                    <div class="small text-muted mb-2">{{ img.caption }}</div>
                                                {% endif %}

                                                <form method="post"
                                                      action="{% url 'rental_app:delete_rental_listing_image' img.id %}"
                                                      onsubmit="return confirm('Are you sure you want to delete this image?');">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-sm btn-outline-danger w-100">
                                                        Delete Image
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>

                                <div class="form-text mt-2">
                                    You can remove individual images and upload new ones. Any image change will send the listing for review again.
                                </div>
                            </div>
                        {% endif %}

                    </div>
                </div>

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

{% endblock %}