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

{% block content %}
  {% if is_pdf is not defined or not is_pdf %}
    <div class="print-toolbar">
      <a href="{{ back_url }}">Back</a>
      <a class="print-download" href="{{ pdf_url }}">Download PDF</a>
    </div>
  {% endif %}

  <main class="print-page">
    <header class="print-header">
      <section class="brand-block">
        <div class="brand-row">
          <img class="print-logo" src="{{ logo_src|default(base_url ~ '/assets/images/sync-solutionz-logo.png') }}" alt="SYNC Computer Solutionz">
          <div>
            <p>{{ company.tax_number ?: 'Office finance documents' }}</p>
          </div>
        </div>

        <div class="bill-to">
          <h2>{{ document_label }} To</h2>
          <p><strong>{{ document.customer_name }}</strong></p>
          {% if document.company_name %}
            <p>{{ document.company_name }}</p>
          {% endif %}
          {% if document.phone %}
            <p>{{ document.phone }}</p>
          {% endif %}
          {% if document.email %}
            <p>{{ document.email }}</p>
          {% endif %}
          {% if document.billing_address %}
            <p>{{ document.billing_address|nl2br }}</p>
          {% endif %}
        </div>
      </section>

      <section class="document-heading">
        <h2>{{ document_label }}</h2>
        <dl>
          <div>
            <dt>{{ document_label }} Number</dt>
            <dd>{{ document.document_number }}</dd>
          </div>
          <div>
            <dt>{{ document_label }} Date</dt>
            <dd>{{ document.issue_date }}</dd>
          </div>
          <div>
            <dt>{{ secondary_date_label }}</dt>
            <dd>{{ secondary_date ?: '-' }}</dd>
          </div>
          <div>
            <dt>Status</dt>
            <dd>{{ document.status|replace({'_': ' '})|title }}</dd>
          </div>
        </dl>
      </section>
    </header>

    <table class="print-items {% if show_financials is defined and not show_financials %}no-financials{% endif %}">
      <colgroup>
        <col class="col-sl" style="width: 7%;">
        <col class="col-description" style="width: {% if show_financials is defined and not show_financials %}78{% else %}51{% endif %}%;">
        {% if show_financials is not defined or show_financials %}
          <col class="col-unit-price" style="width: 15%;">
          <col class="col-quantity" style="width: 10%;">
          <col class="col-total" style="width: 17%;">
        {% else %}
          <col class="col-quantity" style="width: 15%;">
        {% endif %}
      </colgroup>
      <thead>
        <tr>
          <th style="background-color: #0ea5e9; color: #ffffff; border-bottom: 2mm solid #f6c77a;">SL.</th>
          <th style="background-color: #0ea5e9; color: #ffffff; border-bottom: 2mm solid #f6c77a;">Item Description</th>
          {% if show_financials is not defined or show_financials %}
            <th style="background-color: #0ea5e9; color: #ffffff; border-bottom: 2mm solid #f6c77a;">Unit Price</th>
            <th style="background-color: #0ea5e9; color: #ffffff; border-bottom: 2mm solid #f6c77a;">Quantity</th>
            <th style="background-color: #0ea5e9; color: #ffffff; border-bottom: 2mm solid #f6c77a;">Total</th>
          {% else %}
            <th style="background-color: #0ea5e9; color: #ffffff; border-bottom: 2mm solid #f6c77a;">Quantity</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for item in document.items %}
          <tr>
            <td>{{ '%02d'|format(loop.index) }}</td>
            <td>
              <strong>{{ item.name }}</strong>
              {% if item.description %}
                <span>{{ item.description }}</span>
              {% endif %}
            </td>
            {% if show_financials is not defined or show_financials %}
              <td>{{ document.currency }} {{ item.unit_price|number_format(2) }}</td>
              <td>{{ item.quantity|number_format(2) }}</td>
              <td>{{ document.currency }} {{ item.line_total|number_format(2) }}</td>
            {% else %}
              <td>{{ item.quantity|number_format(2) }}</td>
            {% endif %}
          </tr>
        {% endfor %}
      </tbody>
    </table>

    {% if show_financials is not defined or show_financials %}
      <table class="print-summary-table">
      <colgroup>
        <col class="col-sl" style="width: 7%;">
        <col class="col-description" style="width: 51%;">
        <col class="col-unit-price" style="width: 15%;">
        <col class="col-quantity" style="width: 10%;">
        <col class="col-total" style="width: 17%;">
      </colgroup>
      <tbody>
        <tr>
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Sub Total</td>
          <td class="summary-amount">{{ document.currency }} {{ document.subtotal|number_format(2) }}</td>
        </tr>
        <tr>
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Discount</td>
          <td class="summary-amount">- {{ document.currency }} {{ document.discount_total|number_format(2) }}</td>
        </tr>
        <tr>
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Tax</td>
          <td class="summary-amount">{{ document.currency }} {{ document.tax_total|number_format(2) }}</td>
        </tr>
        <tr class="summary-grand">
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Grand Total</td>
          <td class="summary-amount">{{ document.currency }} {{ document.grand_total|number_format(2) }}</td>
        </tr>
      </tbody>
      </table>
    {% endif %}

    <section class="print-bottom">
      <div class="terms-block">
        {% if show_bank_information is not defined or show_bank_information %}
          <h3>Bank Information</h3>
          <table class="bank-grid">
            <tbody>
              <tr>
                <td>Bank Name</td>
                <th>Bank Name Here</th>
              </tr>
              <tr>
                <td>Branch Code</td>
                <th>000000</th>
              </tr>
              <tr>
                <td>Account No.</td>
                <th>00 000 000 000</th>
              </tr>
            </tbody>
          </table>
        {% endif %}

        <h3>{{ notes_heading|default('Terms And Conditions') }}</h3>
        <p>{{ document.notes ?: notes_fallback|default('Payment is due according to the terms agreed for this document.') }}</p>
      </div>
    </section>

    <section class="signature-block">
      <div>
        <span></span>
        <strong>Authorized Signature</strong>
        <p>{{ company.name }}</p>
      </div>
    </section>

    <div class="print-footer">
      <span>{{ company.phone ?: '+254 700 000 000' }}</span>
      <span>{{ company.email ?: 'finance@example.com' }}</span>
      <span>{{ company.address ?: 'Nairobi, Kenya' }}</span>
    </div>
  </main>
{% endblock %}