{% extends "ledger/base.html" %}
{% load static %}
{% block title %}{% if expense %}Edit{% else %}Add{% endif %} expense · tripsplit{% endblock %}
{% block content %}
<h1>{% if expense %}Edit expense{% else %}Add expense{% endif %}</h1>
<p class="sub">Shares are previewed live and always add up to the cent.</p>
{% if errors %}<div class="alert error">{% for e in errors %}<div>{{ e }}</div>{% endfor %}</div>{% endif %}
<form method="post" enctype="multipart/form-data" id="expense-form" class="layout-form"
      data-preview-url="{% url 'expense_preview' group.id %}" data-fx-url="{% url 'fx_rate' group.id %}" data-base="{{ group.base_currency }}">
{% csrf_token %}
{% if expense %}<input type="hidden" name="expense_id" value="{{ expense.id }}">{% endif %}
<div>
  <div class="card">
    <div class="field"><label for="description">Description</label><input type="text" id="description" name="description" value="{{ v.description }}" required></div>
    <div class="row">
      <div><label for="date">Date</label><input type="date" id="date" name="date" value="{{ v.date }}" required></div>
      <div><label for="amount">Amount</label><input type="number" step="any" min="0" id="amount" name="amount" value="{{ v.amount }}"></div>
      <div><label for="currency">Currency</label><input type="text" id="currency" name="currency" value="{{ v.currency }}" maxlength="3" style="text-transform:uppercase"></div>
      <div id="fx-field"><label for="fx_rate">FX rate ({{ group.base_currency }} per 1 <span id="fx-cur">{{ v.currency }}</span>)</label><input type="number" step="any" min="0" id="fx_rate" name="fx_rate" value="{{ v.fx_rate }}" placeholder="auto"></div>
    </div>
    <div class="row">
      <div><label for="category">Category</label><select id="category" name="category">
        {% for key, label in categories %}<option value="{{ key }}" {% if v.category == key %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select></div>
      <div><label for="receipt">Receipt (optional)</label><input type="file" id="receipt" name="receipt" accept="image/*,application/pdf"></div>
    </div>
    <div class="field"><label for="notes">Notes</label><textarea id="notes" name="notes" rows="2">{{ v.notes }}</textarea></div>
  </div>

  <div class="card">
    <h2>Who paid</h2>
    <div class="row">
      <div><label for="payer">Paid by</label><select id="payer" name="payer">
        {% for m in members %}<option value="{{ m.id }}" {% if v.payer == m.id|stringformat:"s" %}selected{% endif %}>{{ m.name }}</option>{% endfor %}
      </select></div>
      <div style="align-self:end"><label style="font-weight:500"><input type="checkbox" name="multi_payer" id="multi_payer" value="1" {% if v.multi_payer %}checked{% endif %}> Multiple payers</label></div>
    </div>
    <div id="payer-panel" class="split-panel">
      {% for r in rows %}<div class="member-line payer"><span>{{ r.member.name }}</span><input type="number" step="any" min="0" name="paid_{{ r.member.id }}" value="{{ r.paid }}" placeholder="0.00"></div>{% endfor %}
      <div class="muted" id="paid-total"></div>
    </div>
  </div>

  <div class="card">
    <h2>How to split</h2>
    <div class="field"><select name="method" id="method">
      {% for key, label in methods %}<option value="{{ key }}" {% if v.method == key %}selected{% endif %}>{{ label }}</option>{% endfor %}
    </select></div>

    <div class="split-panel" data-method="equal">
      {% for r in rows %}<label class="member-line" style="font-weight:500"><input type="checkbox" name="inc_{{ r.member.id }}" value="1" {% if r.inc %}checked{% endif %}><span>{{ r.member.name }}</span></label>{% endfor %}
    </div>
    <div class="split-panel" data-method="exact"><p class="muted">Amount each person owes (must add up to the total).</p>
      {% for r in rows %}<div class="member-line payer"><span>{{ r.member.name }}</span><input type="number" step="any" min="0" name="val_{{ r.member.id }}" value="{{ r.val }}" placeholder="0.00"></div>{% endfor %}</div>
    <div class="split-panel" data-method="percent"><p class="muted">Percentages must add up to 100.</p>
      {% for r in rows %}<div class="member-line payer"><span>{{ r.member.name }}</span><input type="number" step="any" min="0" name="val_{{ r.member.id }}" value="{{ r.val }}" placeholder="%"></div>{% endfor %}</div>
    <div class="split-panel" data-method="shares"><p class="muted">Relative weights, e.g. 2 for a couple, 1 for a single.</p>
      {% for r in rows %}<div class="member-line payer"><span>{{ r.member.name }}</span><input type="number" step="any" min="0" name="val_{{ r.member.id }}" value="{{ r.val }}" placeholder="shares"></div>{% endfor %}</div>
    <div class="split-panel" data-method="adjustment"><p class="muted">Split equally among the ticked people, then add or subtract an amount for individuals (e.g. +200 for extra drinks).</p>
      {% for r in rows %}<div class="member-line"><input type="checkbox" name="inc_{{ r.member.id }}" value="1" {% if r.inc %}checked{% endif %}><span>{{ r.member.name }}</span><input type="number" step="any" name="val_{{ r.member.id }}" value="{{ r.val }}" placeholder="+/- 0.00"></div>{% endfor %}</div>

    <div class="split-panel" data-method="itemized">
      <p class="muted">Assign each line item to the people who had it. Tax and tip are spread in proportion to each person's item subtotal.</p>
      <div id="items">
        {% for item in items %}
        <div class="item" data-item>
          <div class="row" style="margin-bottom:8px">
            <div><label>Item</label><input type="text" data-field="item_name" name="item_name_{{ item.n }}" value="{{ item.name }}"></div>
            <div><label>Price</label><input type="number" step="any" min="0" data-field="item_amount" name="item_amount_{{ item.n }}" value="{{ item.amount }}"></div>
          </div>
          <div class="chips">{% for m, on in item.members %}<label><input type="checkbox" data-field="item_members" name="item_members_{{ item.n }}" value="{{ m.id }}" {% if on %}checked{% endif %}> {{ m.name }}</label>{% endfor %}</div>
          <button class="btn small danger" type="button" data-remove>Remove</button>
        </div>
        {% endfor %}
      </div>
      <input type="hidden" name="item_count" id="item_count" value="{{ items|length }}">
      <button class="btn small secondary" type="button" id="add-item">Add item</button>
      <div class="row" style="margin-top:14px">
        <div><label>Tax</label><input type="number" step="any" min="0" name="tax" value="{{ v.tax }}"></div>
        <div><label>Tip</label><input type="number" step="any" min="0" name="tip" value="{{ v.tip }}"></div>
      </div>
      <div class="muted" id="items-total"></div>
    </div>
  </div>
  <button class="btn" type="submit">Save expense</button>
  <a href="{% url 'dashboard' group.id %}" class="btn secondary">Cancel</a>
</div>
<aside><div id="preview"><strong>Split preview</strong><div id="preview-body" class="muted">Fill in the amount to see each person's share.</div></div></aside>
</form>
<template id="item-template">
  <div class="item" data-item>
    <div class="row" style="margin-bottom:8px">
      <div><label>Item</label><input type="text" data-field="item_name"></div>
      <div><label>Price</label><input type="number" step="any" min="0" data-field="item_amount"></div>
    </div>
    <div class="chips">{% for m in members %}<label><input type="checkbox" data-field="item_members" value="{{ m.id }}" checked> {{ m.name }}</label>{% endfor %}</div>
    <button class="btn small danger" type="button" data-remove>Remove</button>
  </div>
</template>
{% endblock %}
{% block scripts %}<script type="module" src="{% static 'ledger/expense_form.js' %}"></script>{% endblock %}