{% extends "portal_base.html" %}
{% block title %}Campaigns · Portal{% endblock %}
{% block topbar_title %}Campaign composer{% endblock %}
{% block portal_content %}
<div class="channel-tabs">
  <a class="active" href="#compose-email">Email</a>
  <a href="#compose-sms">SMS</a>
  <a href="{% url 'messaging:postcard_designer' %}">Postcard</a>
</div>

<div class="split">
  <div class="panel">
    <div class="panel-h"><h2>Compose</h2></div>
    <div class="panel-b">
      {% if form_errors %}
      <ul class="portal-flash" style="margin:0 0 8px">
        {% for err in form_errors %}
        <li class="error">{{ err }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      <form method="post" action="{% url 'messaging:campaign_list' %}" class="form-grid" id="campaign-compose">
        {% csrf_token %}
        <div class="field">
          <label for="id_name">Campaign name</label>
          <input id="id_name" name="name" type="text" required
                 placeholder="Spring seller tips" value="{{ form_data.name }}">
        </div>
        <div class="field">
          <label for="id_subject">Subject</label>
          <input id="id_subject" name="subject" type="text"
                 placeholder="A quick tip for sellers this week"
                 value="{{ form_data.subject }}"
                 oninput="syncCampaignPreview()">
          <div class="hint">Email only — ignored for SMS / postcard</div>
        </div>
        <div class="field">
          <label for="id_body">Body</label>
          <textarea id="id_body" name="body" style="min-height:140px"
                    placeholder="Hi {first_name}, …"
                    oninput="syncCampaignPreview()">{{ form_data.body }}</textarea>
          <div class="hint">Merge tags: first_name, last_name, unsubscribe_url · optional for postcard</div>
        </div>
        <div class="field" id="postcard-template-field">
          <label for="id_template_id">Postcard template</label>
          <select id="id_template_id" name="template_id">
            <option value="">— Select saved design —</option>
            {% for t in postcard_templates %}
            <option value="{{ t.pk }}"{% if form_data.template_id == t.pk|stringformat:"s" %} selected{% endif %}>
              {{ t.name }} (design {{ t.postcard_front.design_id }})
            </option>
            {% empty %}
            <option value="" disabled>No templates yet — use Postcard designer</option>
            {% endfor %}
          </select>
          <div class="hint"><a href="{% url 'messaging:postcard_designer' %}">Open postcard designer</a></div>
        </div>
        <div class="form-grid cols-2">
          <div class="field">
            <label for="id_audience">Recipients</label>
            <select id="id_audience" name="audience" required onchange="syncComposeChannel()">
              {% for value, label in audience_choices %}
              <option value="{{ value }}"{% if form_data.audience == value %} selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field">
            <label for="id_scheduled_for">Schedule <span class="muted">(optional)</span></label>
            <input id="id_scheduled_for" name="scheduled_for" type="datetime-local" step="60"
                   value="{{ form_data.scheduled_for }}">
            <div class="hint">Date &amp; time · leave blank to keep as unscheduled draft</div>
          </div>
        </div>
        <p class="hint-block">Saves a draft campaign and recipient stubs. Send from the campaign report when ready. You’ll get an email when the send finishes.</p>
        <button class="btn btn-primary" type="submit">Save draft</button>
      </form>
    </div>
  </div>
  <div class="panel">
    <div class="panel-h"><h2>Preview</h2></div>
    <div class="panel-b">
      <div class="preview-pane" id="campaign-preview">
        <div class="muted" id="preview-empty">Preview updates as you type.</div>
        <div id="preview-content" hidden>
          <div class="hint" id="preview-subject"></div>
          <div id="preview-body" style="white-space:pre-wrap;margin-top:8px"></div>
        </div>
      </div>
      <p class="hint-block">After send → open the campaign report for delivery &amp; engagement.</p>
    </div>
  </div>
</div>

<div class="panel">
  <div class="panel-h"><h2>Recent campaigns</h2></div>
  <div class="panel-b" style="padding:0">
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Channel</th>
          <th>Status</th>
          <th>Scheduled</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for campaign in campaigns %}
        <tr>
          <td><a href="{% url 'messaging:campaign_detail' campaign.pk %}">{{ campaign.name }}</a></td>
          <td>{{ campaign.get_channel_display }}</td>
          <td><span class="badge badge-{{ campaign.status }}">{{ campaign.get_status_display }}</span></td>
          <td>{% if campaign.scheduled_for %}{{ campaign.scheduled_for|date:"M j, g:i A" }}{% else %}—{% endif %}</td>
          <td><a href="{% url 'messaging:campaign_detail' campaign.pk %}">Report</a></td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="empty-state">No campaigns yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function syncCampaignPreview() {
  var subject = (document.getElementById('id_subject') || {}).value || '';
  var body = (document.getElementById('id_body') || {}).value || '';
  var empty = document.getElementById('preview-empty');
  var content = document.getElementById('preview-content');
  var subEl = document.getElementById('preview-subject');
  var bodyEl = document.getElementById('preview-body');
  if (!empty || !content) return;
  if (!subject && !body) {
    empty.hidden = false;
    content.hidden = true;
    return;
  }
  empty.hidden = true;
  content.hidden = false;
  subEl.textContent = subject ? ('Subject: ' + subject) : '';
  bodyEl.textContent = body;
}
function syncComposeChannel() {
  var audience = (document.getElementById('id_audience') || {}).value || '';
  var isPostcard = audience === 'postcard_opt_in';
  var tmplField = document.getElementById('postcard-template-field');
  var body = document.getElementById('id_body');
  if (tmplField) tmplField.style.display = isPostcard ? '' : 'none';
  if (body) {
    if (isPostcard) body.removeAttribute('required');
    else body.setAttribute('required', 'required');
  }
}
syncCampaignPreview();
syncComposeChannel();
</script>
{% endblock %}