{% 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 }}/invoices" aria-label="Back to invoices">←</a>
      <h1>{{ document.document_number }}</h1>
    </div>

    <div class="page-actions">
      {% if delivery_note %}
        <a class="btn btn-outline" href="{{ base_url }}/delivery-notes/{{ delivery_note.id }}">View Delivery Note</a>
      {% elseif can['documents.create'] and document.status != 'cancelled' %}
        <form method="post" action="{{ base_url }}/delivery-notes">
          <input type="hidden" name="_csrf_token" value="{{ delivery_note_csrf_token }}">
          <input type="hidden" name="invoice_id" value="{{ document.id }}">
          <button class="btn btn-outline" type="submit">Create Delivery Note</button>
        </form>
      {% endif %}

      {% if can['documents.create'] and balance > 0 and document.status != 'cancelled' %}
        <a class="btn btn-primary" href="{{ base_url }}/receipts/create?invoice_id={{ document.id }}">Record Payment</a>
      {% endif %}

      {% if can['documents.approve'] and status_options is not empty %}
        <form class="status-form" method="post" action="{{ base_url }}/invoices/{{ document.id }}/status">
          <input type="hidden" name="_csrf_token" value="{{ status_csrf_token }}">
          <select name="status" aria-label="New invoice status">
            {% for value, label in status_options %}
              <option value="{{ value }}">{{ label }}</option>
            {% endfor %}
          </select>
          <button class="btn btn-outline" type="submit">Update Status</button>
        </form>
      {% endif %}

      {% if can['documents.export_pdf'] %}
        <a class="btn btn-outline" href="{{ base_url }}/invoices/{{ document.id }}/print">Preview / Download</a>
      {% endif %}
      {% if can['documents.edit'] %}
        <a class="btn btn-primary" href="{{ base_url }}/invoices/{{ document.id }}/edit">Edit Invoice</a>
      {% endif %}
    </div>
  </div>

  {% if saved %}
    <div class="alert alert-success">Invoice draft saved.</div>
  {% endif %}

  {% if updated %}
    <div class="alert alert-success">Invoice updated.</div>
  {% endif %}

  {% if status_updated %}
    <div class="alert alert-success">Invoice status updated.</div>
  {% endif %}

  <div class="dashboard-grid payment-metrics">
    <section class="metric-card">
      <span>Invoice Total</span>
      <strong class="metric-money">{{ document.currency }} {{ document.grand_total|number_format(2) }}</strong>
    </section>
    <section class="metric-card">
      <span>Payments Received</span>
      <strong class="metric-money">{{ document.currency }} {{ received_total|number_format(2) }}</strong>
    </section>
    <section class="metric-card">
      <span>Balance</span>
      <strong class="metric-money">{{ document.currency }} {{ balance|number_format(2) }}</strong>
    </section>
  </div>

  <article class="quotation-card preview-card">
    <div class="form-top">
      <section>
        <h2 class="section-title">
          <span>👤</span>
          Customer
        </h2>

        <div class="detail-list">
          <div>
            <span>Name</span>
            <strong>{{ document.customer_name }}</strong>
          </div>
          <div>
            <span>Company</span>
            <strong>{{ document.company_name ?: '-' }}</strong>
          </div>
          <div>
            <span>Email</span>
            <strong>{{ document.email ?: '-' }}</strong>
          </div>
          <div>
            <span>Phone</span>
            <strong>{{ document.phone ?: '-' }}</strong>
          </div>
        </div>
      </section>

      <section>
        <h2 class="section-title">
          <span aria-hidden="true">
            <svg viewBox="0 0 24 24">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path>
              <path d="M14 2v6h6"></path>
              <path d="M8 13h8M8 17h6"></path>
            </svg>
          </span>
          Invoice Details
        </h2>

        <div class="detail-list">
          <div>
            <span>Status</span>
            <strong>{{ document.status|replace({'_': ' '})|title }}</strong>
          </div>
          <div>
            <span>Issue Date</span>
            <strong>{{ document.issue_date }}</strong>
          </div>
          <div>
            <span>Due Date</span>
            <strong>{{ document.due_date ?: '-' }}</strong>
          </div>
          <div>
            <span>Currency</span>
            <strong>{{ document.currency }}</strong>
          </div>
        </div>
      </section>
    </div>

    <section class="items-section">
      <div class="section-header-row">
        <h2 class="section-title">
          <span>🛒</span>
          Invoice Items
        </h2>
      </div>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>Item Description</th>
              <th>Quantity</th>
              <th>Unit Price</th>
              <th>Discount</th>
              <th>Tax</th>
              <th>Line Total</th>
            </tr>
          </thead>
          <tbody>
            {% for item in document.items %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-desc">{{ item.description }}</div>
                </td>
                <td>{{ item.quantity }}</td>
                <td>{{ document.currency }} {{ item.unit_price|number_format(2) }}</td>
                <td>{{ item.discount_rate|number_format(2) }}%</td>
                <td>{{ item.tax_rate|number_format(2) }}%</td>
                <td class="line-total">{{ document.currency }} {{ item.line_total|number_format(2) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="bottom-section">
      <div>
        <h2 class="section-title">
          <span>✎</span>
          Notes / Terms
        </h2>
        <p class="notes-preview">{{ document.notes|nl2br }}</p>
      </div>

      <aside class="summary-card">
        <h2 class="section-title">
          <span>🏷</span>
          Summary
        </h2>

        <div class="summary-row">
          <span>Subtotal</span>
          <strong>{{ document.currency }} {{ document.subtotal|number_format(2) }}</strong>
        </div>

        <div class="summary-row discount">
          <span>Discount</span>
          <strong>- {{ document.currency }} {{ document.discount_total|number_format(2) }}</strong>
        </div>

        <div class="summary-row">
          <span>Tax</span>
          <strong>{{ document.currency }} {{ document.tax_total|number_format(2) }}</strong>
        </div>

        <div class="summary-divider"></div>

        <div class="grand-total">
          <span>Grand Total</span>
          <strong>{{ document.currency }} {{ document.grand_total|number_format(2) }}</strong>
        </div>
      </aside>
    </section>
  </article>

  <section class="list-panel invoice-receipts">
    <div class="panel-heading">
      <div>
        <h2>Payment Receipts</h2>
        <p>Payments recorded against this invoice.</p>
      </div>
    </div>

    {% if receipts is empty %}
      <div class="empty-state compact-empty-state">
        <h2>No payments recorded</h2>
        <p>The invoice balance remains {{ document.currency }} {{ balance|number_format(2) }}.</p>
      </div>
    {% else %}
      <div class="table-wrap dashboard-table">
        <table>
          <thead>
            <tr>
              <th>Receipt</th>
              <th>Payment Date</th>
              <th>Notes</th>
              <th>Amount</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for receipt in receipts %}
              <tr>
                <td><div class="item-name">{{ receipt.document_number }}</div></td>
                <td>{{ receipt.issue_date }}</td>
                <td>{{ receipt.notes ?: '-' }}</td>
                <td class="line-total">{{ receipt.currency }} {{ receipt.grand_total|number_format(2) }}</td>
                <td><a class="btn btn-outline btn-small" href="{{ base_url }}/receipts/{{ receipt.id }}">View</a></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
{% endblock %}