<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<?php
$primaryColor   = $settings['primary_color']   ?? '#76002b';
$secondaryColor = $settings['secondary_color'] ?? '#c7ba9a';
$companyName    = $settings['company_name']    ?? 'FM ERP';
$companyTagline = $settings['company_tagline'] ?? 'Facility Management ERP';
?>

<div class="page-header">
  <div>
    <h1><i class="bi bi-receipt me-2"></i><?= esc($inv['invoice_number']) ?></h1>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="<?= base_url('finance/invoices') ?>">Invoices</a></li>
        <li class="breadcrumb-item active"><?= esc($inv['invoice_number']) ?></li>
      </ol>
    </nav>
  </div>
  <div class="d-flex align-items-center gap-2">
    <span class="fm-badge badge-status-<?= esc($inv['status']) ?> fs-6"><?= ucfirst($inv['status']) ?></span>
    <button class="btn btn-fm-outline btn-sm no-print" onclick="window.print()">
      <i class="bi bi-printer me-1"></i>Print / PDF
    </button>
  </div>
</div>

<div class="row g-3">
  <!-- INVOICE DOCUMENT -->
  <div class="col-lg-8">
    <div class="fm-card" id="invoiceDoc">

      <!-- Document header with dynamic logo + company -->
      <div style="padding:28px 28px 16px;border-bottom:3px solid <?= esc($primaryColor) ?>">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <?php if (!empty($companyLogoUrl)): ?>
            <img src="<?= esc($companyLogoUrl) ?>" alt="<?= esc($companyName) ?>"
                 style="max-height:60px;max-width:180px;object-fit:contain;display:block;margin-bottom:6px">
            <?php else: ?>
            <div style="font-size:1.4rem;font-weight:700;color:<?= esc($primaryColor) ?>;line-height:1.1">
              <?= esc($companyName) ?>
            </div>
            <?php endif; ?>
            <div style="font-size:.68rem;color:#6b7a8d;text-transform:uppercase;letter-spacing:.8px;margin-top:3px">
              <?= esc($companyTagline) ?>
            </div>
          </div>
          <div class="text-end">
            <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:<?= esc($secondaryColor) ?>;margin-bottom:4px">INVOICE</div>
            <div style="font-size:1.25rem;font-weight:700;color:<?= esc($primaryColor) ?>"><?= esc($inv['invoice_number']) ?></div>
            <span class="fm-badge badge-status-<?= esc($inv['status']) ?> mt-1"><?= ucfirst($inv['status']) ?></span>
          </div>
        </div>
      </div>

      <!-- Bill to / Dates -->
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 28px;background:#fafafa;border-bottom:1px solid #e8edf3">
        <div>
          <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9ca3af;margin-bottom:6px">Bill To</div>
          <div class="fw-semibold"><?= esc($inv['facility_name']) ?></div>
          <?php if(!empty($inv['contract_number'])): ?>
          <div class="small text-muted">Contract: <?= esc($inv['contract_number']) ?></div>
          <?php endif; ?>
        </div>
        <div class="text-end">
          <div class="small mb-2">
            <div style="font-size:.65rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px">Issue Date</div>
            <div class="fw-semibold"><?= date('d F Y', strtotime($inv['issue_date'])) ?></div>
          </div>
          <div class="small">
            <div style="font-size:.65rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px">Due Date</div>
            <div class="fw-semibold <?= $inv['status']==='overdue'?'text-danger':'' ?>">
              <?= date('d F Y', strtotime($inv['due_date'])) ?>
            </div>
          </div>
        </div>
      </div>

      <!-- Line items -->
      <div class="p-0">
        <table style="width:100%;border-collapse:collapse">
          <thead>
            <tr style="background:<?= esc($primaryColor) ?>">
              <th style="color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:10px 28px;text-align:left">Description</th>
              <th style="color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:10px 28px;text-align:right">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding:14px 28px;border-bottom:1px solid #f0f4f8;font-size:.85rem">
                Facility Management Services — <?= esc($inv['facility_name']) ?>
                <?php if(!empty($inv['description'])): ?>
                <div class="small text-muted mt-1"><?= esc($inv['description']) ?></div>
                <?php endif; ?>
              </td>
              <td style="padding:14px 28px;border-bottom:1px solid #f0f4f8;font-size:.85rem;text-align:right;font-weight:600">
                <?= $inv['currency'] ?? $currency ?> <?= number_format($inv['subtotal'], 2) ?>
              </td>
            </tr>
            <?php if($vatEnabled && $inv['vat_amount'] > 0): ?>
            <tr>
              <td style="padding:10px 28px;font-size:.8rem;color:#6b7a8d">VAT (<?= $inv['vat_rate'] ?>%)</td>
              <td style="padding:10px 28px;font-size:.8rem;text-align:right;color:#6b7a8d">
                <?= $inv['currency'] ?? $currency ?> <?= number_format($inv['vat_amount'], 2) ?>
              </td>
            </tr>
            <?php endif; ?>
          </tbody>
          <tfoot>
            <tr style="background:rgba(<?php
                $hex=ltrim($primaryColor,'#');
                if(strlen($hex)===3)$hex=$hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
                echo hexdec(substr($hex,0,2)).','.hexdec(substr($hex,2,2)).','.hexdec(substr($hex,4,2));
            ?>,.07)">
              <td style="padding:16px 28px;font-weight:700;font-size:.9rem;text-align:right;border-top:2px solid <?= esc($primaryColor) ?>">TOTAL</td>
              <td style="padding:16px 28px;font-weight:800;font-size:1.15rem;text-align:right;color:<?= esc($primaryColor) ?>;border-top:2px solid <?= esc($primaryColor) ?>">
                <?= $inv['currency'] ?? $currency ?> <?= number_format($inv['total'], 2) ?>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>

      <?php if(!empty($inv['notes'])): ?>
      <div style="padding:16px 28px;border-top:1px solid #f0f4f8">
        <div style="font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:#9ca3af;margin-bottom:4px">Notes</div>
        <div class="small"><?= esc($inv['notes']) ?></div>
      </div>
      <?php endif; ?>

      <!-- Document footer -->
      <div style="padding:12px 28px;border-top:2px solid <?= esc($primaryColor) ?>;background:rgba(<?php
          $hex=ltrim($primaryColor,'#');
          if(strlen($hex)===3)$hex=$hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
          echo hexdec(substr($hex,0,2)).','.hexdec(substr($hex,2,2)).','.hexdec(substr($hex,4,2));
      ?>,.06);display:flex;justify-content:space-between;align-items:center">
        <div style="font-weight:700;color:<?= esc($primaryColor) ?>;font-size:.8rem"><?= esc($companyName) ?></div>
        <div style="font-size:.7rem;color:#9ca3af">Generated: <?= date('d M Y, H:i') ?></div>
      </div>

    </div><!-- /#invoiceDoc -->
  </div>

  <!-- SIDEBAR PANEL -->
  <div class="col-lg-4">
    <div class="fm-form-section">
      <h6>Invoice Summary</h6>
      <div class="d-flex justify-content-between mb-2 small">
        <span>Subtotal</span>
        <strong><?= $currency ?> <?= number_format($inv['subtotal'], 2) ?></strong>
      </div>
      <?php if($vatEnabled): ?>
      <div class="d-flex justify-content-between mb-2 small">
        <span>VAT (<?= $inv['vat_rate'] ?>%)</span>
        <strong><?= $currency ?> <?= number_format($inv['vat_amount'], 2) ?></strong>
      </div>
      <?php endif; ?>
      <hr>
      <div class="d-flex justify-content-between fw-bold">
        <span>TOTAL</span>
        <span style="color:<?= esc($primaryColor) ?>;font-size:1.1rem"><?= $currency ?> <?= number_format($inv['total'], 2) ?></span>
      </div>
      <div class="mt-3 small text-muted">Created by: <?= esc($inv['created_by_name'] ?? '—') ?></div>
    </div>

    <div class="fm-form-section no-print">
      <h6>Actions</h6>
      <button class="btn btn-fm-primary w-100 mb-2" onclick="window.print()">
        <i class="bi bi-printer me-2"></i>Print / Save PDF
      </button>
      <a href="<?= base_url('finance/invoices') ?>" class="btn btn-fm-outline w-100">
        <i class="bi bi-arrow-left me-2"></i>Back to Invoices
      </a>
    </div>
  </div>
</div>

<?= $this->endSection() ?>
<?= $this->section('scripts') ?>
<style>
@media print {
  .no-print, .topbar, .sidebar, .page-header nav, .breadcrumb { display:none!important }
  .main-wrapper { margin-left:0!important }
  #invoiceDoc { box-shadow:none!important; border:none!important }
  .col-lg-4 { display:none }
  .col-lg-8 { width:100%!important; max-width:100%!important; flex:0 0 100%!important }
  body { background:#fff!important }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact }
}
</style>
<?= $this->endSection() ?>
