<%
  function renderRich(text) {
    if (!text) return '';
    if (/<[a-z][\s\S]*>/i.test(text)) return text;
    return '<p>' + text.replace(/\n/g, '<br>') + '</p>';
  }
%>
<section>
  <% var balance = Number(invoice.totalAmount) - Number(invoice.amountPaid); %>
  <div class="admin-header">
    <h1><%= invoice.invoiceNumber %> <span class="tag tag-<%= invoice.status %>"><%= invoice.status.replace('_', ' ') %></span></h1>
    <div>
      <a class="button button-secondary" href="#" data-pdf-preview="/admin/finance/invoices/<%= invoice.id %>/pdf" data-pdf-title="<%= invoice.invoiceNumber %>">Preview PDF</a>
      <a class="button button-secondary" href="/admin/finance/invoices/<%= invoice.id %>/edit">Edit</a>
    </div>
  </div>

  <div class="margin-banner <%= Number(invoice.profitMarginPercent) < Number(settings.minimumMarginPercent) ? 'margin-low' : 'margin-ok' %>">
    <div class="margin-item"><span class="margin-label">Total</span><strong><%= invoice.currency %> <%= Number(invoice.totalAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></div>
    <div class="margin-item"><span class="margin-label">Paid</span><strong><%= invoice.currency %> <%= Number(invoice.amountPaid).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></div>
    <div class="margin-item"><span class="margin-label">Balance due</span><strong><%= invoice.currency %> <%= balance.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %></strong></div>
    <div class="margin-item"><span class="margin-label">Profit</span><strong><%= invoice.currency %> <%= Number(invoice.profitAmount).toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}) %> (<%= invoice.profitMarginPercent %>%)</strong></div>
  </div>

  <div class="detail-grid">
    <div>
      <div class="detail-panel">
        <h3>Bill to</h3>
        <p><strong><%= invoice.clientName %></strong><br>
        <% if (invoice.clientOrganization) { %><%= invoice.clientOrganization %><br><% } %>
        <% if (invoice.clientEmail) { %><%= invoice.clientEmail %><br><% } %>
        <% if (invoice.clientPhone) { %><%= invoice.clientPhone %><br><% } %>
        <% if (invoice.billToExtra) { %><%= invoice.billToExtra %><% } %></p>
        <% if (invoice.referenceLine) { %><p class="hint">Re: <%= invoice.referenceLine %></p><% } %>
        <% if (quote) { %><p class="hint">Converted from quote <a href="/admin/finance/quotes/<%= quote.id %>"><%= quote.quoteNumber %></a>.</p><% } %>
      </div>

      <div class="detail-panel">
        <h3>Line items</h3>
        <table class="admin-table">
          <thead><tr><th>Description</th><th>Qty</th><th>Cost</th><th>Sell rate</th><th>Line total</th></tr></thead>
          <tbody>
            <% lineItems.forEach(function(li) { %>
              <tr>
                <td><%= li.description %><% if (li.category) { %><br><span class="hint"><%= li.category %></span><% } %></td>
                <td><%= Number(li.quantity) %><%= li.unit ? ' ' + li.unit : '' %></td>
                <td><%= Number(li.unitCost).toFixed(2) %></td>
                <td><%= Number(li.unitSellPrice).toFixed(2) %></td>
                <td><%= Number(li.lineSellTotal).toFixed(2) %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>

      <% if (invoice.termsText) { %>
        <div class="detail-panel">
          <h3>Terms</h3>
          <div class="rich-text-display"><%- renderRich(invoice.termsText) %></div>
        </div>
      <% } %>

      <% if (invoice.internalNotes) { %>
        <div class="detail-panel">
          <h3>Internal notes</h3>
          <div class="rich-text-display"><%- renderRich(invoice.internalNotes) %></div>
        </div>
      <% } %>
    </div>

    <div>
      <div class="detail-panel">
        <h3>Status</h3>
        <form method="POST" action="/admin/finance/invoices/<%= invoice.id %>/status?_method=PATCH">
          <select name="status">
            <% STATUSES.forEach(function(s) { %>
              <option value="<%= s %>" <%= invoice.status === s ? 'selected' : '' %>><%= s.replace('_', ' ') %></option>
            <% }) %>
          </select>
          <button type="submit" class="button button-primary" style="width:100%; margin-top:0.75rem;">Update status</button>
        </form>
      </div>

      <% if (balance > 0) { %>
        <div class="detail-panel">
          <h3>Record payment</h3>
          <form method="POST" action="/admin/finance/invoices/<%= invoice.id %>/payment">
            <label>
              Amount received (<%= invoice.currency %>)
              <input type="number" step="0.01" min="0.01" max="<%= balance.toFixed(2) %>" name="amount" required>
            </label>
            <button type="submit" class="button button-primary" style="width:100%; margin-top:0.5rem;">Record payment</button>
          </form>
        </div>
      <% } %>

      <div class="detail-panel">
        <h3>Details</h3>
        <p class="hint">
          Issue date: <%= invoice.issueDate ? new Date(invoice.issueDate).toLocaleDateString('en-GB', {day:'numeric', month:'long', year:'numeric'}) : 'not set' %><br>
          Due date: <%= invoice.dueDate ? new Date(invoice.dueDate).toLocaleDateString('en-GB', {day:'numeric', month:'long', year:'numeric'}) : 'not set' %><br>
          Paid: <%= invoice.paidAt ? new Date(invoice.paidAt).toLocaleDateString('en-GB', {day:'numeric', month:'long', year:'numeric'}) : 'not yet' %>
        </p>
      </div>

      <div class="detail-panel">
        <form action="/admin/finance/invoices/<%= invoice.id %>?_method=DELETE" method="POST" onsubmit="return confirm('Delete this invoice? This cannot be undone.')">
          <button type="submit" class="button button-ghost" style="width:100%;">Delete invoice</button>
        </form>
      </div>
    </div>
  </div>
</section>
