<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invoice Submitted — Helmyx</title>
<style>
  body { margin: 0; padding: 0; background-color: #F1F5F9; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
  .email-wrapper { padding: 48px 20px; }
  .email-container { max-width: 560px; margin: 0 auto; }
  .email-header { background: linear-gradient(135deg, #0C1826, #0F4A87); border-radius: 16px 16px 0 0; padding: 32px; text-align: center; }
  .logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0A3A6B, #12C2CE); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
  .logo-text { color: white; font-size: 1.2rem; font-weight: 800; vertical-align: middle; margin-left: 10px; }
  .email-body { background: white; padding: 40px 32px; }
  .email-footer { background: #F8FAFC; border-radius: 0 0 16px 16px; padding: 24px 32px; text-align: center; }
  .btn-primary { display: inline-block; background: linear-gradient(135deg, #0A3A6B, #12C2CE); color: white !important; text-decoration: none; padding: 14px 36px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; margin: 24px 0; }
  .invoice-card { background: #F8FAFC; border: 2px solid #E2E8F0; border-radius: 12px; overflow: hidden; margin: 20px 0; }
  .invoice-card-header { background: linear-gradient(135deg, #0A3A6B, #12C2CE); color: white; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
  .invoice-card-body { padding: 20px; }
  .amount-display { font-size: 2rem; font-weight: 800; color: #0C1826; }
  .currency { font-size: 1rem; font-weight: 500; color: #64748B; }
  .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
  .info-item .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94A3B8; font-weight: 600; margin-bottom: 3px; }
  .info-item .value { font-size: 0.875rem; color: #0C1826; font-weight: 500; }
  .urgent-note { background: #FDE5E2; border: 1px solid #EFB5B1; border-radius: 8px; padding: 12px 16px; font-size: 0.82rem; color: #A82E26; }
  h1 { font-size: 1.4rem; font-weight: 700; color: #0C1826; margin: 0 0 8px; }
  p { font-size: 0.9rem; color: #475569; line-height: 1.6; margin: 0 0 16px; }
</style>
</head>
<body>
<div class="email-wrapper">
  <div class="email-container">
    <div class="email-header">
      <div class="logo-icon">
        <svg width="20" height="20" fill="white" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"/></svg>
      </div>
      <span class="logo-text">Helmyx</span>
    </div>

    <div class="email-body">
      <div style="text-align:center;margin-bottom:28px;">
        <div style="width:60px;height:60px;background:linear-gradient(135deg,#E8A317,#8A5A00);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;">
          <svg width="28" height="28" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        </div>
        <h1>New Invoice Submitted for Review</h1>
      </div>

      <p>Hello <strong><?= htmlspecialchars($pmName ?? 'Project Manager') ?></strong>,</p>
      <p>A new invoice has been submitted by <strong><?= htmlspecialchars($contractorName ?? 'Contractor') ?></strong> for your review on project <strong><?= htmlspecialchars($projectName ?? 'N/A') ?></strong>.</p>

      <!-- Invoice Card -->
      <div class="invoice-card">
        <div class="invoice-card-header">
          <div>
            <div style="font-size:0.75rem;opacity:0.8;">Invoice Number</div>
            <div style="font-weight:700;font-size:1rem;"><?= htmlspecialchars($invoiceNumber ?? 'N/A') ?></div>
          </div>
          <div style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;">
            PENDING REVIEW
          </div>
        </div>
        <div class="invoice-card-body">
          <div style="text-align:center;padding:8px 0 16px;">
            <div class="currency"><?= htmlspecialchars($currency ?? DEFAULT_CURRENCY) ?></div>
            <div class="amount-display"><?= htmlspecialchars($totalAmount ?? '0.00') ?></div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="label">Contractor</div>
              <div class="value"><?= htmlspecialchars($contractorName ?? 'N/A') ?></div>
            </div>
            <div class="info-item">
              <div class="label">Project</div>
              <div class="value"><?= htmlspecialchars($projectName ?? 'N/A') ?></div>
            </div>
            <div class="info-item">
              <div class="label">Invoice Date</div>
              <div class="value"><?= htmlspecialchars($invoiceDate ?? 'N/A') ?></div>
            </div>
            <div class="info-item">
              <div class="label">Due Date</div>
              <div class="value"><?= htmlspecialchars($dueDate ?? 'N/A') ?></div>
            </div>
            <?php if (!empty($poReference)): ?>
            <div class="info-item" style="grid-column:1/-1;">
              <div class="label">PO Reference</div>
              <div class="value"><?= htmlspecialchars($poReference) ?></div>
            </div>
            <?php endif; ?>
          </div>
        </div>
      </div>

      <?php if (!empty($hasAttachment)): ?>
      <p style="font-size:0.85rem;color:#64748B;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;padding:10px 14px;">
        📎 An invoice attachment has been included. Please download it from the platform to review.
      </p>
      <?php endif; ?>

      <div style="text-align:center;">
        <a href="<?= htmlspecialchars($actionUrl ?? APP_URL . '/finance/invoices') ?>" class="btn-primary">Review Invoice</a>
      </div>

      <div class="urgent-note">
        ⏰ Please review and process this invoice by <strong><?= htmlspecialchars($dueDate ?? 'the due date') ?></strong> to avoid payment delays.
      </div>
    </div>

    <div class="email-footer">
      <p style="font-size:0.78rem;color:#94A3B8;margin:0;">
        Submitted by <strong style="color:#64748B;"><?= htmlspecialchars($contractorName ?? 'Contractor') ?></strong> on <?= date('d M Y, H:i') ?>. You received this because you are the assigned project manager.
      </p>
      <p style="font-size:0.75rem;color:#CBD5E1;margin:8px 0 0;">&copy; <?= date('Y') ?> Helmyx. All rights reserved.</p>
    </div>
  </div>
</div>
</body>
</html>
