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

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Dashboard</h1>
      <p class="page-subtitle">Current quotation, invoice, and customer activity.</p>
    </div>

    <div class="page-actions">
      <a class="btn btn-outline" href="{{ base_url }}/invoices/create">Create Invoice</a>
      <a class="btn btn-primary" href="{{ base_url }}/quotations/create">Create Quotation</a>
    </div>
  </div>

  <div class="dashboard-grid dashboard-grid-four">
    <section class="metric-card">
      <span>Draft Quotations</span>
      <strong>{{ summary.draft_quotations }}</strong>
      <a href="{{ base_url }}/quotations">View quotations</a>
    </section>

    <section class="metric-card">
      <span>Open Invoices</span>
      <strong>{{ summary.open_invoices }}</strong>
      <a href="{{ base_url }}/invoices">View invoices</a>
    </section>

    <section class="metric-card">
      <span>Outstanding</span>
      <strong class="metric-money">KES {{ summary.outstanding_total|number_format(2) }}</strong>
      <small>Draft, sent, and partially paid</small>
    </section>

    <section class="metric-card">
      <span>Customers</span>
      <strong>{{ summary.customers }}</strong>
      <a href="{{ base_url }}/customers">View customers</a>
    </section>
  </div>

  <section class="list-panel dashboard-recent">
    <div class="panel-heading">
      <div>
        <h2>Recent Documents</h2>
        <p>Latest quotations and invoices across the company.</p>
      </div>
    </div>

    {% if recent_documents is empty %}
      <div class="empty-state">
        <h2>No documents yet</h2>
        <p>Create a quotation or invoice to begin tracking activity.</p>
        <a class="btn btn-primary" href="{{ base_url }}/quotations/create">Create Quotation</a>
      </div>
    {% else %}
      <div class="table-wrap dashboard-table">
        <table>
          <thead>
            <tr>
              <th>Document</th>
              <th>Customer</th>
              <th>Issue Date</th>
              <th>Status</th>
              <th>Total</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for document in recent_documents %}
              <tr>
                <td>
                  <div class="item-name">{{ document.document_number }}</div>
                  <div class="item-desc">{{ document.document_type_name }}</div>
                </td>
                <td>{{ document.company_name ?: document.customer_name ?: '-' }}</td>
                <td>{{ document.issue_date }}</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>
{% endblock %}