{% extends 'admin_panel/base.html' %}
{% block page_title %}{% if page %}Edit Landing Page{% else %}New Landing Page{% 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-6"><label class="form-label">Title (internal) *</label><input type="text" name="title" class="form-control" value="{{ page.title|default:'' }}" required></div>
    <div class="col-md-6"><label class="form-label">URL Slug *</label><div class="input-group"><span class="input-group-text">/p/</span><input type="text" name="slug" class="form-control" value="{{ page.slug|default:'' }}" required pattern="[a-z0-9-]+"><span class="input-group-text">/</span></div></div>
    <div class="col-md-12"><label class="form-label">Headline *</label><input type="text" name="headline" class="form-control" value="{{ page.headline|default:'' }}" required></div>
    <div class="col-md-12"><label class="form-label">Sub-headline</label><textarea name="subheadline" rows="2" class="form-control">{{ page.subheadline|default:'' }}</textarea></div>
    <div class="col-md-6"><label class="form-label">Location <small class="text-muted">(shown on homepage card)</small></label><input type="text" name="location_short" class="form-control" value="{{ page.location_short|default:'' }}" placeholder="e.g. Ketti, FCT Abuja"></div>
    <div class="col-md-6"><label class="form-label">Starting Price ₦ <small class="text-muted">(shown on homepage card)</small></label><input type="number" name="starting_price" class="form-control" value="{{ page.starting_price|default:'' }}" placeholder="4500000" step="0.01" min="0"></div>
    <div class="col-md-6"><label class="form-label">CTA Button Text</label><input type="text" name="cta_text" class="form-control" value="{{ page.cta_text|default:'Get In Touch' }}"></div>
    <div class="col-md-6"><label class="form-label">CTA Phone (click-to-call)</label><input type="text" name="cta_phone" class="form-control" value="{{ page.cta_phone|default:'' }}"></div>
    <div class="col-md-6"><label class="form-label">Hero Image</label><input type="file" name="hero_image" class="form-control">{% if page.hero_image %}<img src="{{ page.hero_image.url }}" class="mt-2 rounded" style="height:60px;">{% endif %}</div>
    <div class="col-md-6"><label class="form-label">Theme Color</label><input type="color" name="theme_color" class="form-control form-control-color" value="{{ page.theme_color|default:'#1a8754' }}"></div>
    <div class="col-md-12"><label class="form-label">Body (rich content)</label><textarea name="body_html" rows="10" class="form-control">{{ page.body_html|default:'' }}</textarea><small class="text-muted">HTML allowed.</small></div>

    <div class="col-md-12"><label class="form-label">Linked Properties</label>
      <select name="properties" multiple class="form-select" size="6">
        {% for p in all_properties %}<option value="{{ p.pk }}" {% if page and p in page.properties.all %}selected{% endif %}>{{ p.title }} — {{ p.location.name }}</option>{% endfor %}
      </select>
      <small class="text-muted">Hold Ctrl/Cmd to select multiple. They'll appear in a grid on this landing page.</small>
    </div>

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

    <div class="col-md-12">
      <div class="form-check form-switch"><input type="checkbox" name="is_published" id="lp" class="form-check-input" {% if page.is_published or not page %}checked{% endif %}><label for="lp">Published</label></div>
      <div class="form-check form-switch"><input type="checkbox" name="show_inquiry_form" id="lif" class="form-check-input" {% if page.show_inquiry_form or not page %}checked{% endif %}><label for="lif">Show Inquiry Form</label></div>
      <div class="form-check form-switch"><input type="checkbox" name="show_chatbot" id="lcb" class="form-check-input" {% if page.show_chatbot or not page %}checked{% endif %}><label for="lcb">Show Chatbot Widget</label></div>
    </div>

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