{% extends 'layouts/app.twig' %}

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Outstanding Invoices</h1>
      <p class="page-subtitle">Open invoice balances and overdue accounts.</p>
    </div>
    <div class="page-actions">
      <a class="btn btn-outline" href="{{ base_url }}/reports/outstanding/pdf?date_from={{ date_from }}&date_to={{ date_to }}">Export PDF</a>
      <a class="btn btn-outline" href="{{ base_url }}/reports/outstanding/csv?date_from={{ date_from }}&date_to={{ date_to }}">Export CSV</a>
      <a class="btn btn-outline" href="{{ base_url }}/reports/sales">Sales Report</a>
    </div>
  </div>

  {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
  {% endif %}

  <form class="report-filter" method="get" action="{{ base_url }}/reports/outstanding">
    <div class="field">
      <label>Issued From</label>
      <input type="date" name="date_from" value="{{ date_from }}">
    </div>
    <div class="field">
      <label>Issued To</label>
      <input type="date" name="date_to" value="{{ date_to }}">
    </div>
    <button class="btn btn-primary" type="submit">Apply Filter</button>
  </form>

  <div class="dashboard-grid">
    <section class="metric-card">
      <span>Open Invoices</span>
      <strong>{{ invoices|length }}</strong>
    </section>
    <section class="metric-card">
      <span>Overdue Invoices</span>
      <strong>{{ overdue_count }}</strong>
    </section>
    <section class="metric-card">
      <span>Outstanding Value</span>
      <strong class="metric-money">{{ currency }} {{ outstanding_total|number_format(2) }}</strong>
    </section>
  </div>

  <section class="list-panel">
    <div class="panel-heading">
      <div>
        <h2>Open Accounts</h2>
        <p>Invoices issued from {{ date_from }} to {{ date_to }}</p>
      </div>
    </div>

    {% if invoices is empty %}
      <div class="empty-state">
        <h2>No outstanding invoices</h2>
        <p>No open invoices were found in the selected period.</p>
      </div>
    {% else %}
      <div class="table-wrap dashboard-table">
        <table>
          <thead>
            <tr>
              <th>Invoice</th>
              <th>Customer</th>
              <th>Contact</th>
              <th>Due Date</th>
              <th>Age</th>
              <th>Status</th>
              <th>Balance</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for invoice in invoices %}
              <tr>
                <td><div class="item-name">{{ invoice.document_number }}</div></td>
                <td>{{ invoice.company_name ?: invoice.customer_name ?: '-' }}</td>
                <td>
                  <div>{{ invoice.email ?: '-' }}</div>
                  <div class="item-desc">{{ invoice.phone ?: '' }}</div>
                </td>
                <td>{{ invoice.due_date ?: '-' }}</td>
                <td>
                  {% if invoice.days_overdue > 0 %}
                    <span class="overdue-text">{{ invoice.days_overdue }} days overdue</span>
                  {% else %}
                    Current
                  {% endif %}
                </td>
                <td><span class="status-badge status-{{ invoice.status }}">{{ invoice.status|replace({'_': ' '})|title }}</span></td>
                <td class="line-total">{{ invoice.currency }} {{ invoice.grand_total|number_format(2) }}</td>
                <td><a class="btn btn-outline btn-small" href="{{ base_url }}/invoices/{{ invoice.id }}">View</a></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
{% endblock %}