<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Invoice {{invoiceNumber}}</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      padding: 20px 30px; /* reduced padding for PDF */
      color: #1a1a1a;
      line-height: 1.5; /* slightly reduced line-height */
      max-width: 800px; /* reduced width for PDF */
      margin: 0 auto;
      background-color: #fff;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 32px;
      padding-bottom: 16px;
      border-bottom: 3px solid #002366; /* navy blue */
    }

    .company-info {
      flex: 1;
    }

    .company-name {
      font-size: 26px;
      font-weight: 700;
      color: #002366;
      margin-bottom: 6px;
    }

    .company-details {
      font-size: 12px;
      color: #666;
      line-height: 1.6;
    }

    .invoice-title {
      text-align: right;
      flex: 1;
      font-family: 'Poppins', sans-serif;
    }

    .invoice-title h1 {
      font-size: 30px; /* smaller */
      font-weight: 700;
      color: #002366;
      margin-bottom: 6px;
    }

    .invoice-number {
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }

    .invoice-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      gap: 16px;
    }

    .meta-section {
      flex: 1;
    }

    .meta-section h3 {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #999;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .meta-content {
      font-size: 13px;
      color: #333;
    }

    .meta-content div {
      margin-bottom: 2px;
    }

    .customer-name {
      font-weight: 600;
      font-size: 15px;
      color: #1a1a1a;
      margin-bottom: 4px;
    }

    .dates-section {
      text-align: right;
    }

    .date-item {
      margin-bottom: 6px;
    }

    .date-label {
      font-size: 11px;
      color: #999;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .date-value {
      font-size: 13px;
      color: #333;
      font-weight: 500;
      text-transform: capitalize; /* titlecase for status */
    }

    .items-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 24px; /* reduced margin */
    }

    .items-table thead {
      background-color: #e6f0ff;
    }

    .items-table th {
      padding: 10px 8px; /* smaller padding */
      text-align: left;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #666;
      font-weight: 600;
      border-bottom: 1px solid #002366;
    }

    .items-table th:last-child,
    .items-table td:last-child {
      text-align: right;
    }

    .items-table tbody tr {
      border-bottom: 1px solid #eee;
    }

    .items-table tbody tr:hover {
      background-color: #fafafa;
    }

    .items-table td {
      padding: 12px 8px; /* smaller padding */
      font-size: 13px;
      color: #333;
    }

    .item-description {
      font-weight: 500;
      color: #1a1a1a;
    }

    .totals-section {
      margin-left: auto;
      width: 300px; /* smaller width for PDF */
      padding: 16px;
      background-color: #f9f9f9;
      border-radius: 8px;
      font-size: 13px;
    }

    .total-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
    }

    .total-row.subtotal {
      color: #666;
      border-bottom: 1px solid #ddd;
    }

    .total-row.grand-total {
      font-size: 18px;
      font-weight: 700;
      color: #002366;
      border-top: 2px solid #002366;
      padding-top: 12px;
      margin-top: 4px;
    }

    .footer {
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid #eee;
      font-size: 12px;
      color: #999;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .notes-section {
      margin-top: 24px;
      padding: 16px;
      background-color: #f9f9f9;
      border-left: 4px solid #002366;
      border-radius: 4px;
    }

    .notes-section h3 {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #666;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .notes-section p {
      font-size: 12px;
      color: #555;
      line-height: 1.5;
    }

    @media print {
      body {
        padding: 10px;
      }
      
      .items-table tbody tr:hover {
        background-color: transparent;
      }
    }
  </style>
</head>
<body>
  <div class="header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 3px solid #002366;">
  <div class="company-info" style="display: flex; align-items: center; gap: 16px;">
    {{#logoUrl}}
    <div style="flex-shrink: 0;">
     <img src="{{logoUrl}}" alt="Company Logo" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px;">
    </div>
    {{/logoUrl}}
    <div>
      <div class="company-name">{{companyName}}</div>
      <div class="company-details">
        {{#companyAddress}}
        <div>{{companyAddress}}</div>
        {{/companyAddress}}
        {{#companyEmail}}
        <div>{{companyEmail}}</div>
        {{/companyEmail}}
        {{#companyPhone}}
        <div>{{companyPhone}}</div>
        {{/companyPhone}}
      </div>
    </div>
  </div>

  <div class="invoice-title">
    <h1><strong>Invoice</strong></h1>
    <div class="invoice-number">#{{invoiceNumber}}</div>
  </div>
  </div>


  <div class="invoice-meta">
    <div class="meta-section">
      <h3>Bill To</h3>
      <div class="meta-content">
        <div class="customer-name">{{customerName}}</div>
        {{#customerAddress}}
        <div>{{customerAddress}}</div>
        {{/customerAddress}}
        {{#customerEmail}}
        <div>{{customerEmail}}</div>
        {{/customerEmail}}
      </div>
    </div>

    <div class="meta-section dates-section">
      <div class="date-item">
        <div class="date-label">Issue Date</div>
        <div class="date-value">{{issueDate}}</div>
      </div>
      {{#dueDate}}
      <div class="date-item">
        <div class="date-label">Due Date</div>
        <div class="date-value">{{dueDate}}</div>
      </div>
      {{/dueDate}}
      {{#status}}
      <div class="date-item">
        <div class="date-label">Status</div>
        <div class="date-value">{{status}}</div>
      </div>
      {{/status}}
    </div>
  </div>

  <table class="items-table">
    <thead>
      <tr>
        <th>Description</th>
        <th>Quantity</th>
        <th>Unit Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      {{#items}}
      <tr>
        <td class="item-description">{{description}}</td>
        <td>{{quantity}}</td>
        <td>{{unitPrice}}</td>
        <td>{{lineTotal}}</td>
      </tr>
      {{/items}}
    </tbody>
  </table>

  <div class="totals-section">
    {{#subtotal}}
    <div class="total-row subtotal">
      <span>Subtotal</span>
      <span>{{subtotal}}</span>
    </div>
    {{/subtotal}}
    {{#tax}}
    <div class="total-row">
      <span>Tax</span>
      <span>{{tax}}</span>
    </div>
    {{/tax}}
    <div class="total-row grand-total">
      <span>Total</span>
      <span>{{total}} {{currency}}</span>
    </div>
  </div>

  {{#notes}}
  <div class="notes-section">
    <h3>Notes</h3>
    <p>{{notes}}</p>
  </div>
  {{/notes}}

  <div class="footer">
    <div>Thank you for your business!</div>
    <div>{{companyName}} Generated on {{issueDate}}</div>
  </div>
</body>
</html>
