<?php use App\Helpers\Helper; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invoice <?= Helper::e($invoice['invoice_number']) ?></title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1e293b; background: #fff; }
.container { max-width: 760px; margin: 0 auto; padding: 40px; }
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 3px solid #1a3c5e; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 50px; height: 50px; background: #1a3c5e; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 800; }
.company-name { font-size: 20px; font-weight: 800; color: #1a3c5e; }
.invoice-title { text-align: right; }
.invoice-title h1 { font-size: 32px; font-weight: 800; color: #1a3c5e; letter-spacing: -1px; }
.invoice-title .inv-num { font-size: 14px; color: #64748b; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.meta-box h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; margin-bottom: 6px; font-weight: 700; }
.meta-box p { font-size: 13px; font-weight: 600; line-height: 1.6; }
table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
thead th { background: #1a3c5e; color: #fff; padding: 10px 14px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
tbody td { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; }
tbody tr:nth-child(even) td { background: #f8fafc; }
.totals { width: 300px; margin-left: auto; }
.totals td { padding: 8px 0; font-size: 13px; }
.totals td:last-child { text-align: right; font-weight: 600; }
.totals .grand-total td { font-size: 16px; font-weight: 800; color: #1a3c5e; border-top: 2px solid #1a3c5e; padding-top: 12px; }
.status-badge { display: inline-block; padding: 4px 16px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.paid { background: #dcfce7; color: #166534; }
.unpaid { background: #fee2e2; color: #991b1b; }
.footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; font-size: 11px; color: #94a3b8; text-align: center; }
@media print { @page { size: A4; margin: 20mm; } .no-print { display:none; } }
</style>
</head>
<body>
<div class="container">
  <div class="header">
    <div class="logo">
      <div class="logo-icon">Z</div>
      <div>
        <div class="company-name"><?= htmlspecialchars($settings['company_name'] ?? APP_NAME) ?></div>
        <div style="color:#64748b;font-size:12px"><?= htmlspecialchars($settings['company_address'] ?? '') ?></div>
        <div style="color:#64748b;font-size:12px"><?= htmlspecialchars($settings['company_phone'] ?? '') ?></div>
      </div>
    </div>
    <div class="invoice-title">
      <h1>INVOICE</h1>
      <div class="inv-num"><?= htmlspecialchars($invoice['invoice_number']) ?></div>
      <div style="margin-top:8px">
        <span class="status-badge <?= $invoice['status']==='paid'?'paid':'unpaid' ?>">
          <?= strtoupper($invoice['status']) ?>
        </span>
      </div>
    </div>
  </div>

  <div class="meta">
    <div class="meta-box">
      <h3>Bill To</h3>
      <p><?= htmlspecialchars($invoice['tenant_name']) ?><br>
         <?= htmlspecialchars($invoice['phone'] ?? '') ?><br>
         Unit <?= htmlspecialchars($invoice['unit_number']) ?> — <?= htmlspecialchars($invoice['property_name']) ?>
      </p>
    </div>
    <div class="meta-box" style="text-align:right">
      <h3>Invoice Details</h3>
      <p>
        Issue Date: <strong><?= date('d M Y') ?></strong><br>
        Due Date: <strong><?= htmlspecialchars($invoice['due_date']) ?></strong><br>
        Period: <strong><?= date('M Y', strtotime($invoice['period_from'])) ?></strong>
      </p>
    </div>
  </div>

  <table>
    <thead><tr><th>Description</th><th>Period</th><th>Amount (TZS)</th></tr></thead>
    <tbody>
      <tr>
        <td>Monthly Rent — Unit <?= htmlspecialchars($invoice['unit_number']) ?></td>
        <td><?= date('d M Y', strtotime($invoice['period_from'])) ?> – <?= date('d M Y', strtotime($invoice['period_to'])) ?></td>
        <td><?= number_format($invoice['rent_amount'],0) ?></td>
      </tr>
      <?php if ($invoice['vat_amount'] > 0): ?>
      <tr><td>VAT (18%)</td><td>—</td><td><?= number_format($invoice['vat_amount'],0) ?></td></tr>
      <?php endif; ?>
      <?php if ($invoice['discount'] > 0): ?>
      <tr><td>Discount</td><td>—</td><td style="color:#dc2626">-<?= number_format($invoice['discount'],0) ?></td></tr>
      <?php endif; ?>
    </tbody>
  </table>

  <table class="totals">
    <tr><td>Subtotal:</td><td><?= number_format($invoice['rent_amount'],0) ?> TZS</td></tr>
    <?php if ($invoice['vat_amount'] > 0): ?><tr><td>VAT:</td><td><?= number_format($invoice['vat_amount'],0) ?> TZS</td></tr><?php endif; ?>
    <?php if ($invoice['discount'] > 0): ?><tr><td>Discount:</td><td style="color:#dc2626">-<?= number_format($invoice['discount'],0) ?> TZS</td></tr><?php endif; ?>
    <tr><td>Paid:</td><td style="color:#16a34a"><?= number_format($invoice['paid_amount'],0) ?> TZS</td></tr>
    <tr class="grand-total">
      <td>BALANCE DUE:</td>
      <td><?= number_format(($invoice['balance'] ?? ($invoice['total_amount'] - $invoice['paid_amount'])),0) ?> TZS</td>
    </tr>
  </table>

  <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:24px;font-size:12px">
    <strong>Payment Methods:</strong> M-Pesa, Airtel Money, Tigo Pesa, Bank Transfer, Cash at Office<br>
    M-Pesa Paybill: <strong><?= htmlspecialchars($settings['mpesa_paybill'] ?? 'N/A') ?></strong> |
    Airtel Money: <strong><?= htmlspecialchars($settings['airtel_number'] ?? 'N/A') ?></strong>
  </div>

  <div class="footer">
    <p><?= htmlspecialchars($settings['company_name'] ?? APP_NAME) ?> | <?= htmlspecialchars($settings['company_website'] ?? '') ?> | <?= htmlspecialchars($settings['company_email'] ?? '') ?></p>
    <p style="margin-top:4px">This is a computer-generated invoice. Payment must be made by the due date to avoid late fees.</p>
  </div>
  <div class="no-print" style="text-align:center;margin-top:24px">
    <button onclick="window.print()" style="padding:10px 32px;background:#1a3c5e;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer">Print Invoice</button>
  </div>
</div>
</body>
</html>
