{% extends 'admin_panel/base.html' %}
{% block page_title %}{% if property %}Edit Property{% else %}New Property{% endif %}{% endblock %}
{% block content %}
<form method="post" enctype="multipart/form-data" class="card-panel">
  {% csrf_token %}
  <div class="row g-3">
    <div class="col-md-8"><label class="form-label">Title *</label><input type="text" name="title" class="form-control" value="{{ property.title|default:'' }}" required></div>
    <input type="hidden" name="listing_type" value="sale">

    <div class="col-md-4"><label class="form-label">Category</label>
      <select name="category" class="form-select"><option value="">--</option>
        {% for c in categories %}<option value="{{ c.pk }}" {% if property.category_id == c.pk %}selected{% endif %}>{{ c.name }}</option>{% endfor %}
      </select>
    </div>
    <div class="col-md-4"><label class="form-label">Location</label>
      <select name="location" class="form-select"><option value="">--</option>
        {% for l in locations %}<option value="{{ l.pk }}" {% if property.location_id == l.pk %}selected{% endif %}>{{ l.name }}, {{ l.state }}</option>{% endfor %}
      </select>
    </div>
    <div class="col-md-4"><label class="form-label">Status</label>
      <select name="status" class="form-select">{% for v,l in statuses %}<option value="{{ v }}" {% if property.status == v %}selected{% endif %}>{{ l }}</option>{% endfor %}</select>
    </div>

    <div class="col-md-12"><label class="form-label">Address</label><input type="text" name="address" class="form-control" value="{{ property.address|default:'' }}"></div>

    <div class="col-md-4"><label class="form-label">Price (₦) *</label><input type="number" step="0.01" name="price" class="form-control" value="{{ property.price|default:'' }}" required></div>
    <div class="col-md-4"><label class="form-label">Price Period</label><select name="price_period" class="form-select"><option value="">One-time</option><option value="month" {% if property.price_period == 'month' %}selected{% endif %}>per month</option><option value="year" {% if property.price_period == 'year' %}selected{% endif %}>per year</option><option value="night" {% if property.price_period == 'night' %}selected{% endif %}>per night</option></select></div>
    <div class="col-md-4 d-flex align-items-end"><div class="form-check"><input type="checkbox" name="is_negotiable" id="neg" class="form-check-input" {% if property.is_negotiable %}checked{% endif %}><label for="neg" class="form-check-label">Negotiable</label></div></div>

    <div class="col-md-3"><label class="form-label">Bedrooms</label><input type="number" name="bedrooms" class="form-control" value="{{ property.bedrooms|default:'' }}"></div>
    <div class="col-md-3"><label class="form-label">Bathrooms</label><input type="number" name="bathrooms" class="form-control" value="{{ property.bathrooms|default:'' }}"></div>
    <div class="col-md-3"><label class="form-label">Toilets</label><input type="number" name="toilets" class="form-control" value="{{ property.toilets|default:'' }}"></div>
    <div class="col-md-3"><label class="form-label">Parking</label><input type="number" name="parking_spaces" class="form-control" value="{{ property.parking_spaces|default:'' }}"></div>

    <div class="col-md-4"><label class="form-label">Area (m²)</label><input type="number" step="0.01" name="area_sqm" class="form-control" value="{{ property.area_sqm|default:'' }}"></div>
    <div class="col-md-4"><label class="form-label">Plot Size (text)</label><input type="text" name="plot_size" class="form-control" value="{{ property.plot_size|default:'' }}" placeholder="e.g. 600 sqm"></div>
    <div class="col-md-4"><label class="form-label">Year Built</label><input type="number" name="year_built" class="form-control" value="{{ property.year_built|default:'' }}"></div>

    <div class="col-md-12"><label class="form-label">Short Description</label><textarea name="short_description" class="form-control" rows="2">{{ property.short_description|default:'' }}</textarea></div>
    <div class="col-md-12"><label class="form-label">Full Description</label><textarea name="description" class="form-control" rows="6">{{ property.description|default:'' }}</textarea></div>
    <div class="col-md-12"><label class="form-label">Features (one per line)</label><textarea name="features" class="form-control" rows="4">{{ property.features|default:'' }}</textarea></div>
    <div class="col-md-12"><label class="form-label">Title Documents</label><input type="text" name="title_documents" class="form-control" value="{{ property.title_documents|default:'' }}" placeholder="C of O / Governor's Consent / Deed of Assignment"></div>

    <div class="col-md-6"><label class="form-label">Main Image {% if not property %}*{% endif %}</label><input type="file" name="main_image" class="form-control" {% if not property %}required{% endif %}>{% if property.main_image %}<img src="{{ property.main_image.url }}" class="mt-2 rounded" style="height:60px;">{% endif %}</div>
    <div class="col-md-6"><label class="form-label">Floor Plan</label><input type="file" name="floor_plan" class="form-control"></div>
    <div class="col-md-12"><label class="form-label">Gallery Images (multiple)</label><input type="file" name="gallery_images" class="form-control" multiple></div>
    <div class="col-md-12"><label class="form-label">Video URL (YouTube/Vimeo)</label><input type="url" name="video_url" class="form-control" value="{{ property.video_url|default:'' }}"></div>

    <div class="col-md-6"><label class="form-label">Meta Title (SEO)</label><input type="text" name="meta_title" class="form-control" value="{{ property.meta_title|default:'' }}"></div>
    <div class="col-md-6"><label class="form-label">Meta Description (SEO)</label><input type="text" name="meta_description" class="form-control" value="{{ property.meta_description|default:'' }}"></div>

    <div class="col-md-12"><div class="form-check form-switch"><input type="checkbox" name="is_flyer_image" id="fi" class="form-check-input" {% if property.is_flyer_image %}checked{% endif %}><label for="fi">Marketing Flyer Image — main image is a landscape flyer, display full-width</label></div></div>
    <div class="col-md-12"><div class="form-check form-switch"><input type="checkbox" name="is_featured" id="ft" class="form-check-input" {% if property.is_featured %}checked{% endif %}><label for="ft">Featured (homepage)</label></div></div>
    <div class="col-md-12"><div class="form-check form-switch"><input type="checkbox" name="is_verified" id="vf" class="form-check-input" {% if property.is_verified %}checked{% endif %}><label for="vf">Verified</label></div></div>
    <div class="col-md-12"><div class="form-check form-switch"><input type="checkbox" name="is_published" id="pb" class="form-check-input" {% if property.is_published or not property %}checked{% endif %}><label for="pb">Published (visible on site)</label></div></div>

    <div class="col-md-12 mt-4">
      <button class="btn btn-primary btn-lg">Save Property</button>
      <a href="{% url 'analytics:properties_list' %}" class="btn btn-link">Cancel</a>
    </div>
  </div>
</form>
{% endblock %}