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

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Sales Report</h1>
      <p class="page-subtitle">Invoice totals and tax collected for the selected period.</p>
    </div>
    <div class="page-actions">
      <a class="btn btn-outline" href="{{ base_url }}/reports/sales/pdf?date_from={{ date_from }}&date_to={{ date_to }}">Export PDF</a>
      <a class="btn btn-outline" href="{{ base_url }}/reports/sales/csv?date_from={{ date_from }}&date_to={{ date_to }}">Export CSV</a>
      <a class="btn btn-outline" href="{{ base_url }}/reports/outstanding">Outstanding Invoices</a>
    </div>
  </div>

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

  <form class="report-filter" method="get" action="{{ base_url }}/reports/sales">
    <div class="field">
      <label>From</label>
      <input type="date" name="date_from" value="{{ date_from }}">
    </div>
    <div class="field">
      <label>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 dashboard-grid-four">
    <section class="metric-card">
      <span>Invoices</span>
      <strong>{{ summary.invoice_count }}</strong>
    </section>
    <section class="metric-card">
      <span>Invoiced</span>
      <strong class="metric-money">{{ currency }} {{ summary.invoice_total|number_format(2) }}</strong>
    </section>
    <section class="metric-card">
      <span>Tax</span>
      <strong class="metric-money">{{ currency }} {{ summary.tax_total|number_format(2) }}</strong>
    </section>
    <section class="metric-card">
      <span>Paid</span>
      <strong class="metric-money">{{ currency }} {{ summary.paid_total|number_format(2) }}</strong>
    </section>
  </div>

  <section class="list-panel">
    <div class="panel-heading">
      <div>
        <h2>Invoice Activity</h2>
        <p>{{ date_from }} to {{ date_to }}</p>
      </div>
    </div>

    {% if invoices is empty %}
      <div class="empty-state">
        <h2>No invoice activity</h2>
        <p>No invoices were issued in the selected period.</p>
      </div>
    {% else %}
      <div class="table-wrap dashboard-table">
        <table>
          <thead>
            <tr>
              <th>Invoice</th>
              <th>Customer</th>
              <th>Issue Date</th>
              <th>Status</th>
              <th>Subtotal</th>
              <th>Tax</th>
              <th>Total</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>{{ invoice.issue_date }}</td>
                <td><span class="status-badge status-{{ invoice.status }}">{{ invoice.status|replace({'_': ' '})|title }}</span></td>
                <td>{{ invoice.currency }} {{ invoice.subtotal|number_format(2) }}</td>
                <td>{{ invoice.currency }} {{ invoice.tax_total|number_format(2) }}</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 %}