{% extends 'base.html' %}
{% load i18n static cashbook_extras %}

{% block content %}
<section class="card">
  <header class="flex-between">
    <h2>{% trans "Debts" %}</h2>
    {% if tab == 'receivables' %}
      <button type="button" class="btn btn--primary" data-modal-open="sale-modal">{% trans "Add Credit Sale" %}</button>
    {% elif tab == 'payables' %}
      <button type="button" class="btn btn--primary" data-modal-open="purchase-modal">{% trans "Add Credit Purchase" %}</button>
    {% endif %}
  </header>

  <nav class="tabs" style="display:flex; gap:8px; margin-bottom:var(--spacing);">
    <a href="?tab=receivables" class="btn {% if tab == 'receivables' %}primary{% endif %}">
      {% trans "Who Owes Me (Customers)" %}
      <span class="badge money" data-amount="{{ receivables_total }}" data-currency="{{ biz.currency }}">{{ receivables_total }}</span>
    </a>
    <a href="?tab=payables" class="btn {% if tab == 'payables' %}primary{% endif %}">
      {% trans "Who I Owe (Suppliers)" %}
      <span class="badge money" data-amount="{{ payables_total }}" data-currency="{{ biz.currency }}">{{ payables_total }}</span>
    </a>
  </nav>

  <form method="get" class="flex-end" style="gap:8px; margin-bottom: var(--spacing);">
    <input type="hidden" name="tab" value="{{ tab }}">
    <label for="per_page" class="muted" style="align-self:center;">{% trans "Per page" %}</label>
    <select id="per_page" name="per_page" class="select select--sm" onchange="this.form.submit()">
      {% for n in page_size_options %}
        <option value="{{ n }}"{% if per_page|stringformat:'s' == n|stringformat:'s' or request.GET.per_page == n|stringformat:'s' %} selected{% endif %}>{{ n }}</option>
      {% endfor %}
    </select>
  </form>

  {% if tab == 'receivables' %}
    <table class="table">
      <thead>
        <tr>
          <th>{% trans "Customer" %}</th>
          <th class="text-right">{% trans "Balance" %}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {% for row in page_obj %}
        <tr>
          <td>
            <div>
              {{ row.contact.name }}
              {% if row.contact.id in rec_overdue_ids %}
                <span class="badge danger">{% trans "Overdue" %}</span>
              {% endif %}
            </div>
            {% if row.contact.phone %}<div class="muted small">{{ row.contact.phone }}</div>{% endif %}
          </td>
          <td class="text-right"><span class="money" data-amount="{{ row.balance }}" data-currency="{{ biz.currency }}">{{ row.balance }}</span></td>
          <td class="text-right">
            <div class="flex-end" style="gap:8px">
              <button type="button" class="btn btn--tertiary" data-modal-open="hist-{{ row.contact.id }}">{% trans "History" %}</button>
              <button type="button" class="btn btn--primary" data-modal-open="settle-{{ row.contact.id }}" {% if not row.balance %}disabled{% endif %}>{% trans "Settle" %}</button>
              <a class="btn btn--secondary" target="_blank" rel="noopener" href="https://wa.me/?text={{ 'Hello ' |add:row.contact.name|add:', you owe '|add:biz.currency|currency_label|add:' '|add:row.balance|stringformat:'s'|add:' to '|add:biz.name|urlencode }}">{% trans "WhatsApp" %}</a>
              <form method="post" action="{% url 'send_sms_reminder' row.contact.id %}" class="inline" style="display:none">{% csrf_token %}
                <input type="hidden" name="message" value="{{ 'Hello ' |add:row.contact.name|add:', you owe '|add:biz.currency|currency_label|add:' '|add:row.balance|stringformat:'s'|add:' to '|add:biz.name }}" />
                <button class="btn" type="submit">{% trans "SMS" %}</button>
              </form>
            </div>
          </td>
        </tr>
      {% empty %}
        <tr><td colspan="3">{% trans "No outstanding receivables." %}</td></tr>
      {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td><span class="muted">{% trans "Count" %}: {{ receivables_count }}</span></td>
          <td class="text-right" colspan="2"><span class="money" data-amount="{{ receivables_total }}" data-currency="{{ biz.currency }}">{{ receivables_total }}</span></td>
        </tr>
      </tfoot>
    </table>
    {% if is_paginated %}
      <div class="flex-between" style="margin-top: var(--spacing);">
        <div class="muted">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ paginator.num_pages }}</div>
        <div class="flex-end" style="gap:8px">
          {% if page_obj.has_previous %}
            <a class="btn btn--sm btn--secondary" href="?tab=receivables&per_page={{ per_page }}&page={{ page_obj.previous_page_number }}">{% trans "Prev" %}</a>
          {% else %}
            <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Prev" %}</span>
          {% endif %}
          {% for num in paginator.page_range %}
            {% if num == page_obj.number %}
              <span class="btn btn--sm btn--primary" aria-current="page">{{ num }}</span>
            {% elif num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
              <a class="btn btn--sm btn--secondary" href="?tab=receivables&per_page={{ per_page }}&page={{ num }}">{{ num }}</a>
            {% endif %}
          {% endfor %}
          {% if page_obj.has_next %}
            <a class="btn btn--sm btn--secondary" href="?tab=receivables&per_page={{ per_page }}&page={{ page_obj.next_page_number }}">{% trans "Next" %}</a>
          {% else %}
            <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Next" %}</span>
          {% endif %}
        </div>
      </div>
    {% endif %}
  {% elif tab == 'payables' %}
    <table class="table">
      <thead>
        <tr>
          <th>{% trans "Supplier" %}</th>
          <th class="text-right">{% trans "Balance" %}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {% for row in page_obj %}
        <tr>
          <td>
            <div>
              {{ row.contact.name }}
              {% if row.contact.id in pay_overdue_ids %}
                <span class="badge danger">{% trans "Overdue" %}</span>
              {% endif %}
            </div>
            {% if row.contact.phone %}<div class="muted small">{{ row.contact.phone }}</div>{% endif %}
          </td>
          <td class="text-right"><span class="money" data-amount="{{ row.balance }}" data-currency="{{ biz.currency }}">{{ row.balance }}</span></td>
          <td class="text-right">
            <div class="flex-end" style="gap:8px">
              <button type="button" class="btn btn--tertiary" data-modal-open="hist-{{ row.contact.id }}">{% trans "History" %}</button>
              <button type="button" class="btn btn--primary" data-modal-open="pay-{{ row.contact.id }}" {% if not row.balance %}disabled{% endif %}>{% trans "Pay" %}</button>
            </div>
          </td>
        </tr>
      {% empty %}
        <tr><td colspan="3">{% trans "No outstanding payables." %}</td></tr>
      {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td><span class="muted">{% trans "Count" %}: {{ payables_count }}</span></td>
          <td class="text-right" colspan="2"><span class="money" data-amount="{{ payables_total }}" data-currency="{{ biz.currency }}">{{ payables_total }}</span></td>
        </tr>
      </tfoot>
    </table>
    {% if is_paginated %}
      <div class="flex-between" style="margin-top: var(--spacing);">
        <div class="muted">{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ paginator.num_pages }}</div>
        <div class="flex-end" style="gap:8px">
          {% if page_obj.has_previous %}
            <a class="btn btn--sm btn--secondary" href="?tab=payables&per_page={{ per_page }}&page={{ page_obj.previous_page_number }}">{% trans "Prev" %}</a>
          {% else %}
            <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Prev" %}</span>
          {% endif %}
          {% for num in paginator.page_range %}
            {% if num == page_obj.number %}
              <span class="btn btn--sm btn--primary" aria-current="page">{{ num }}</span>
            {% elif num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
              <a class="btn btn--sm btn--secondary" href="?tab=payables&per_page={{ per_page }}&page={{ num }}">{{ num }}</a>
            {% endif %}
          {% endfor %}
          {% if page_obj.has_next %}
            <a class="btn btn--sm btn--secondary" href="?tab=payables&per_page={{ per_page }}&page={{ page_obj.next_page_number }}">{% trans "Next" %}</a>
          {% else %}
            <span class="btn btn--sm btn--tertiary" aria-disabled="true">{% trans "Next" %}</span>
          {% endif %}
        </div>
      </div>
    {% endif %}
  {% endif %}
</section>

<!-- Add Credit Sale modal -->
<div id="sale-modal" class="modal">
  <div class="modal-content">
    <h3>{% trans "Add Credit Sale" %}</h3>
    <form method="post" action="{% url 'debt_create' %}">{% csrf_token %}
      <div class="field">
        <label>{% trans "Date" %}</label>
        {{ create_form.date }}
      </div>
      <div class="field">
        <label>{% trans "Customer" %}</label>
        {{ create_form.contact }}
        <button type="button" class="btn" data-modal-open="contact-modal">{% trans "Add new" %}</button>
      </div>
      <div class="field">
        <label>{% trans "Account" %}</label>
        {{ create_form.account }}
      </div>
      <div class="field">
        <label>{% trans "Amount" %}</label>
        {{ create_form.amount }}
      </div>
      <div class="field">
        <label>{% trans "Due Date" %}</label>
        {{ create_form.due_date }}
      </div>
      <div class="field">
        <label>{% trans "Note" %}</label>
        {{ create_form.description }}
      </div>
      <div class="flex-end" style="gap:var(--spacing)">
        <button class="btn btn--tertiary" data-modal-close="sale-modal" type="button">{% trans "Cancel" %}</button>
        <button class="btn btn--primary" type="submit">{% trans "Save" %}</button>
      </div>
    </form>
  </div>
</div>

<!-- Add Credit Purchase modal -->
<div id="purchase-modal" class="modal">
  <div class="modal-content">
    <h3>{% trans "Add Credit Purchase" %}</h3>
    <form method="post" action="{% url 'purchase_create' %}">{% csrf_token %}
      <div class="field">
        <label>{% trans "Date" %}</label>
        {{ purchase_form.date }}
      </div>
      <div class="field">
        <label>{% trans "Supplier" %}</label>
        {{ purchase_form.contact }}
        <button type="button" class="btn" data-modal-open="contact-modal">{% trans "Add new" %}</button>
      </div>
      <div class="field">
        <label>{% trans "Account" %}</label>
        {{ purchase_form.account }}
      </div>
      <div class="field">
        <label>{% trans "Amount" %}</label>
        {{ purchase_form.amount }}
      </div>
      <div class="field">
        <label>{% trans "Due Date" %}</label>
        {{ purchase_form.due_date }}
      </div>
      <div class="field">
        <label>{% trans "Note" %}</label>
        {{ purchase_form.description }}
      </div>
      <div class="flex-end" style="gap:var(--spacing)">
        <button class="btn btn--tertiary" data-modal-close="purchase-modal" type="button">{% trans "Cancel" %}</button>
        <button class="btn btn--primary" type="submit">{% trans "Save" %}</button>
      </div>
    </form>
  </div>
</div>

<!-- Per-contact Settle modals (receivables) -->
{% for row in receivables %}
  <div id="settle-{{ row.contact.id }}" class="modal">
    <div class="modal-content">
      <h3>{% trans "Settle Receivable" %} — {{ row.contact.name }}</h3>
      <form method="post" action="{% url 'debt_settle' row.contact.id %}">{% csrf_token %}
        <div class="field">
          <label>{% trans "Amount" %}</label>
          <input type="number" name="amount" step="0.01" value="{{ row.balance }}" />
        </div>
        <div class="field">
          <label>{% trans "Account" %}</label>
          <select name="account" required>
            {% for a in request.current_business.accounts.all %}
              <option value="{{ a.id }}">{{ a.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field">
          <label>{% trans "Note" %}</label>
          <input type="text" name="description" value="{% trans 'Debt settlement' %}" />
        </div>
        <div class="flex-end" style="gap:var(--spacing)">
          <button class="btn btn--tertiary" data-modal-close="settle-{{ row.contact.id }}" type="button">{% trans "Cancel" %}</button>
          <button class="btn btn--primary" type="submit">{% trans "Save" %}</button>
        </div>
      </form>
    </div>
  </div>
{% endfor %}

<!-- Per-contact Pay modals (payables) -->
{% for row in payables %}
  <div id="pay-{{ row.contact.id }}" class="modal">
    <div class="modal-content">
      <h3>{% trans "Pay Supplier" %} — {{ row.contact.name }}</h3>
      <form method="post" action="{% url 'payable_settle' row.contact.id %}">{% csrf_token %}
        <div class="field">
          <label>{% trans "Amount" %}</label>
          <input type="number" name="amount" step="0.01" value="{{ row.balance }}" />
        </div>
        <div class="field">
          <label>{% trans "Account" %}</label>
          <select name="account" required>
            {% for a in request.current_business.accounts.all %}
              <option value="{{ a.id }}">{{ a.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field">
          <label>{% trans "Note" %}</label>
          <input type="text" name="description" value="{% trans 'Payable settlement' %}" />
        </div>
        <div class="flex-end" style="gap:var(--spacing)">
          <button class="btn btn--tertiary" data-modal-close="pay-{{ row.contact.id }}" type="button">{% trans "Cancel" %}</button>
          <button class="btn btn--primary" type="submit">{% trans "Save" %}</button>
        </div>
      </form>
    </div>
  </div>
{% endfor %}

<!-- Add Contact modal (reused) -->
<div id="contact-modal" class="modal">
  <div class="modal-content">
    <h3>{% trans "Add Customer / Supplier" %}</h3>
    <form method="post" action="{% url 'contact_create_simple' %}">{% csrf_token %}
      <div class="field">
        <label>{% trans "Type" %}</label>
        {{ contact_form.ctype }}
      </div>
      <div class="field">
        <label>{% trans "Name" %}</label>
        {{ contact_form.name }}
      </div>
      <div class="field">
        <label>{% trans "Phone" %}</label>
        {{ contact_form.phone }}
      </div>
      <div class="field">
        <label>{% trans "Note" %}</label>
        {{ contact_form.note }}
      </div>
      <div class="flex-end" style="gap:var(--spacing)">
        <button class="btn btn--tertiary" data-modal-close="contact-modal" type="button">{% trans "Cancel" %}</button>
        <button class="btn btn--primary" type="submit">{% trans "Save" %}</button>
      </div>
    </form>
  </div>
</div>

<!-- Per-contact history modals -->
{% for c in contacts_for_history %}
  <div id="hist-{{ c.id }}" class="modal">
    <div class="modal-content modal-lg">
      <h3>{{ c.name }} — {% trans "Recent Activity" %}</h3>
      <table class="table">
        <thead>
          <tr>
            <th>{% trans "Date" %}</th>
            <th>{% trans "Type" %}</th>
            <th>{% trans "Amount" %}</th>
            <th>{% trans "Note" %}</th>
          </tr>
        </thead>
        <tbody>
        {% for t in histories|get_item:c.id %}
          <tr>
            <td>{{ t.date }}</td>
            <td>{{ t.get_ttype_display|default:t.ttype }}</td>
            <td>{{ t.amount }} {{ t.currency|currency_label }}</td>
            <td>{{ t.description }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="4">{% trans "No history." %}</td></tr>
        {% endfor %}
        </tbody>
      </table>
      <div class="flex-end" style="gap:var(--spacing)">
        <button class="btn btn--tertiary" data-modal-close="hist-{{ c.id }}" type="button">{% trans "Close" %}</button>
      </div>
    </div>
  </div>
{% endfor %}

{% endblock %}