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

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Customer Statement</h1>
      <p class="page-subtitle">Quotation and invoice activity for a selected customer.</p>
    </div>

    {% if customer %}
      <div class="page-actions">
        <a class="btn btn-outline" href="{{ base_url }}/reports/customer-statement/pdf?customer_id={{ customer.id }}&date_from={{ date_from }}&date_to={{ date_to }}">Export PDF</a>
        <a class="btn btn-outline" href="{{ base_url }}/reports/customer-statement/csv?customer_id={{ customer.id }}&date_from={{ date_from }}&date_to={{ date_to }}">Export CSV</a>
      </div>
    {% endif %}
  </div>

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

  <form class="report-filter statement-filter" method="get" action="{{ base_url }}/reports/customer-statement">
    <div class="field statement-customer-field">
      <label>Customer</label>
      <select name="customer_id">
        <option value="">Select customer</option>
        {% for option in customers %}
          <option value="{{ option.id }}" {{ selected_customer_id == option.id ? 'selected' : '' }}>
            {{ option.company_name ?: option.name }}
          </option>
        {% endfor %}
      </select>
    </div>
    <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">View Statement</button>
  </form>

  {% if not customer %}
    <section class="list-panel">
      <div class="empty-state">
        <h2>Select a customer</h2>
        <p>Choose a customer and date range to generate their statement.</p>
      </div>
    </section>
  {% else %}
    <section class="statement-customer">
      <div>
        <h2>{{ customer.company_name ?: customer.name }}</h2>
        {% if customer.company_name %}<p>{{ customer.name }}</p>{% endif %}
      </div>
      <div>
        <span>{{ customer.email ?: '-' }}</span>
        <span>{{ customer.phone ?: '-' }}</span>
        <span>{{ customer.tax_number ?: '-' }}</span>
      </div>
    </section>

    <div class="dashboard-grid dashboard-grid-four">
      <section class="metric-card">
        <span>Quotations</span>
        <strong>{{ summary.quotation_count }}</strong>
      </section>
      <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.invoiced_total|number_format(2) }}</strong>
      </section>
      <section class="metric-card">
        <span>Open Invoice Value</span>
        <strong class="metric-money">{{ currency }} {{ summary.open_total|number_format(2) }}</strong>
        <small>Includes partially paid invoices at full invoice value</small>
      </section>
    </div>

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

      {% if documents is empty %}
        <div class="empty-state">
          <h2>No customer activity</h2>
          <p>No quotations or invoices were issued in the selected period.</p>
        </div>
      {% else %}
        <div class="table-wrap dashboard-table">
          <table>
            <thead>
              <tr>
                <th>Date</th>
                <th>Document</th>
                <th>Type</th>
                <th>Due / Valid Until</th>
                <th>Status</th>
                <th>Amount</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% for document in documents %}
                <tr>
                  <td>{{ document.issue_date }}</td>
                  <td><div class="item-name">{{ document.document_number }}</div></td>
                  <td>{{ document.document_type_name }}</td>
                  <td>{{ document.due_date ?: document.valid_until ?: '-' }}</td>
                  <td><span class="status-badge status-{{ document.status }}">{{ document.status|replace({'_': ' '})|title }}</span></td>
                  <td class="line-total">{{ document.currency }} {{ document.grand_total|number_format(2) }}</td>
                  <td>
                    <a class="btn btn-outline btn-small" href="{{ base_url }}/{{ document.document_type_code == 'invoice' ? 'invoices' : 'quotations' }}/{{ document.id }}">View</a>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% endif %}
    </section>
  {% endif %}
{% endblock %}