{% extends "cms/base.html" %}
{% block title %}{% if expense %}Edit Expense{% else %}Add Expense{% endif %}{% endblock %}
{% block page_title %}{% if expense %}Edit Expense{% else %}Add Expense{% endif %}{% endblock %}

{% block extra_head %}
<style>
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;
  }
  .field-input:focus { border-color:#033152; }
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .billing-grid { display:flex;gap:.5rem;flex-wrap:wrap; }
  .billing-opt { display:none; }
  .billing-opt + label {
    display:flex;flex-direction:column;align-items:center;gap:.25rem;
    padding:.5rem .9rem;border:1px solid var(--cms-border);border-radius:8px;
    cursor:pointer;font-size:.8rem;font-weight:600;color:var(--cms-muted);
    background:#fff;transition:all .15s;min-width:72px;
  }
  .billing-opt + label i { font-size:1rem; }
  .billing-opt:checked + label {
    background:#033152;color:#fff;border-color:#033152;
  }
</style>
{% endblock %}

{% block cms_content %}

<div class="cms-section-header">
  <div>
    <h2>{% if expense %}Edit Expense{% else %}Add Expense{% endif %}</h2>
    {% if expense %}<div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">{{ expense.description }}</div>{% endif %}
  </div>
  <a href="{% url 'cms_expenses' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

{% if messages %}
{% for msg in messages %}
<div class="alert alert-{{ msg.tags }} mb-3">{{ msg }}</div>
{% endfor %}
{% endif %}

<form method="post">
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Expense Details</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Category <span style="color:#ff404b">*</span></td>
            <td class="field-td">
              <select name="category" class="field-input" required style="padding:.45rem .65rem">
                <option value="">Select a category</option>
                {% for value, label in category_choices %}
                <option value="{{ value }}"
                  {% if form_data and form_data.category == value %}selected
                  {% elif not form_data and expense and expense.category == value %}selected{% endif %}>
                  {{ label }}
                </option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Supplier <span style="color:#ff404b">*</span></td>
            <td class="field-td">
              <input type="text" name="supplier" class="field-input" required
                placeholder="e.g. Namecheap, AWS, Upwork"
                value="{% if form_data %}{{ form_data.supplier }}{% elif expense %}{{ expense.supplier }}{% endif %}">
            </td>
          </tr>
          <tr>
            <td class="field-label">Circulation <span style="color:#ff404b">*</span></td>
            <td class="field-td">
              <input type="text" name="description" class="field-input" required
                placeholder="e.g. Annual hosting renewal, Domain for client"
                value="{% if form_data %}{{ form_data.description }}{% elif expense %}{{ expense.description }}{% endif %}">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Billing &amp; Payment</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label" style="vertical-align:middle">Billing Period <span style="color:#ff404b">*</span></td>
            <td class="field-td">
              <div class="billing-grid">
                {% for value, label in billing_choices %}
                <input type="radio" name="billing_period" id="bp_{{ value }}" value="{{ value }}" class="billing-opt" required
                  {% if form_data and form_data.billing_period == value %}checked
                  {% elif not form_data and expense and expense.billing_period == value %}checked{% endif %}>
                <label for="bp_{{ value }}">
                  {% if value == 'once' %}<i class="fa-solid fa-bolt"></i>
                  {% elif value == 'hourly' %}<i class="fa-solid fa-clock"></i>
                  {% elif value == 'monthly' %}<i class="fa-solid fa-calendar"></i>
                  {% else %}<i class="fa-solid fa-rotate"></i>{% endif %}
                  {{ label }}
                </label>
                {% endfor %}
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Amount (£) <span style="color:#ff404b">*</span></td>
            <td class="field-td">
              <input type="number" name="amount" step="0.01" min="0.01" class="field-input" required
                placeholder="0.00"
                value="{% if form_data %}{{ form_data.amount }}{% elif expense %}{{ expense.amount }}{% endif %}">
            </td>
          </tr>
          <tr>
            <td class="field-label">Start Date <span style="color:#ff404b">*</span></td>
            <td class="field-td">
              <input type="date" name="date" class="field-input" required
                value="{% if form_data %}{{ form_data.date }}{% elif expense %}{{ expense.date|date:'Y-m-d' }}{% endif %}">
            </td>
          </tr>
          <tr>
            <td class="field-label" style="color:var(--cms-muted)">End Date <span style="font-size:.72rem;font-weight:400">(optional)</span></td>
            <td class="field-td">
              <input type="date" name="end_date" class="field-input"
                value="{% if form_data %}{{ form_data.end_date }}{% elif expense and expense.end_date %}{{ expense.end_date|date:'Y-m-d' }}{% endif %}">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="col-lg-4">
    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100">
        <i class="fa-solid fa-floppy-disk me-1"></i>
        {% if expense %}Save Changes{% else %}Add Expense{% endif %}
      </button>
    </div>
    <a href="{% url 'cms_expenses' %}" class="btn-cms-ghost w-100" style="text-align:center;display:block">Cancel</a>
  </div>

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