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

{% block content %}
  <div class="page-header page-header-split">
    <div class="page-heading-inline">
      <a class="back-btn" href="{{ base_url }}/customers" aria-label="Back to customers">←</a>
      <div>
        <h1>{{ customer.name }}</h1>
        <p class="page-subtitle">{{ customer.company_name ?: 'Individual customer' }}</p>
      </div>
    </div>

    <a class="btn btn-primary" href="{{ base_url }}/customers/{{ customer.id }}/edit">Edit Customer</a>
  </div>

  <section class="customer-profile">
    <div class="customer-contact">
      <h2>Contact Details</h2>
      <div class="detail-list">
        <div>
          <span>Email</span>
          <strong>{{ customer.email ?: '-' }}</strong>
        </div>
        <div>
          <span>Phone</span>
          <strong>{{ customer.phone ?: '-' }}</strong>
        </div>
        <div>
          <span>Tax Number</span>
          <strong>{{ customer.tax_number ?: '-' }}</strong>
        </div>
        <div>
          <span>Billing Address</span>
          <strong class="address-value">{{ customer.billing_address ? customer.billing_address|nl2br : '-' }}</strong>
        </div>
      </div>
    </div>

    <div class="dashboard-grid dashboard-grid-four customer-metrics">
      <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.invoice_total|number_format(2) }}</strong>
      </section>
      <section class="metric-card">
        <span>Outstanding</span>
        <strong class="metric-money">{{ currency }} {{ summary.outstanding_total|number_format(2) }}</strong>
      </section>
    </div>
  </section>

  <section class="list-panel">
    <div class="panel-heading">
      <div>
        <h2>Document History</h2>
        <p>Quotations and invoices linked to this customer.</p>
      </div>
    </div>

    {% if documents is empty %}
      <div class="empty-state">
        <h2>No documents found</h2>
        <p>This customer does not have any quotations or invoices yet.</p>
      </div>
    {% else %}
      <div class="table-wrap dashboard-table">
        <table>
          <thead>
            <tr>
              <th>Document</th>
              <th>Issue Date</th>
              <th>Due / Valid Until</th>
              <th>Status</th>
              <th>Total</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for document in documents %}
              <tr>
                <td>
                  <div class="item-name">{{ document.document_number }}</div>
                  <div class="item-desc">{{ document.document_type_name }}</div>
                </td>
                <td>{{ document.issue_date }}</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>
{% endblock %}