<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $emailSubject }}</title>
<style>
  body { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; padding: 20px; color: #333; }
  .container { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  .header { background: #1e40af; color: #fff; padding: 24px 32px; }
  .header h1 { margin: 0 0 4px; font-size: 20px; }
  .header p { margin: 0; font-size: 13px; opacity: 0.85; }
  .body { padding: 28px 32px; }
  .greeting { font-size: 15px; margin-bottom: 16px; }
  .cert-card { background: #f8faff; border: 1px solid #dbeafe; border-radius: 6px; padding: 16px; margin: 20px 0; }
  .cert-card table { width: 100%; border-collapse: collapse; }
  .cert-card td { padding: 6px 10px; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
  .cert-card td:first-child { font-weight: 600; color: #555; width: 40%; }
  .cert-card tr:last-child td { border-bottom: none; }
  .expired-badge { display: inline-block; background: #fee2e2; color: #b91c1c; font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600; margin-left: 8px; }
  .expiring-badge { display: inline-block; background: #fef3c7; color: #b45309; font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600; margin-left: 8px; }
  .message-box { background: #f9fafb; border-left: 4px solid #1e40af; padding: 12px 16px; margin: 16px 0; font-size: 14px; border-radius: 0 4px 4px 0; }
  .footer { padding: 16px 32px; font-size: 12px; color: #888; border-top: 1px solid #eee; background: #fafafa; }
  .cta { display: inline-block; margin-top: 16px; padding: 10px 24px; background: #1e40af; color: #fff; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 600; }
</style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>⚠ Compliance Certificate Reminder</h1>
    <p>General Construction Manager (GCM)</p>
  </div>
  <div class="body">
    <p class="greeting">Dear {{ $recipientName ?: 'Team Member' }},</p>
    <p style="font-size:14px; color:#555;">
      This is a reminder regarding a compliance certificate that requires your attention.
      Please review the details below and take the necessary action.
    </p>

    <div class="cert-card">
      <table>
        <tr>
          <td>Project</td>
          <td><strong>{{ $certData['project'] }}</strong></td>
        </tr>
        <tr>
          <td>Certificate</td>
          <td>
            {{ $certData['name'] }}
            @if($certData['is_expired'])
              <span class="expired-badge">EXPIRED</span>
            @elseif($certData['expires_soon'])
              <span class="expiring-badge">EXPIRING SOON</span>
            @endif
          </td>
        </tr>
        @if($certData['issued_by'])
        <tr>
          <td>Issued By</td>
          <td>{{ $certData['issued_by'] }}</td>
        </tr>
        @endif
        @if($certData['issued_date'])
        <tr>
          <td>Issued Date</td>
          <td>{{ $certData['issued_date'] }}</td>
        </tr>
        @endif
        @if($certData['expires_date'])
        <tr>
          <td>Expiry Date</td>
          <td style="{{ $certData['is_expired'] ? 'color:#b91c1c; font-weight:600;' : '' }}">
            {{ $certData['expires_date'] }}
          </td>
        </tr>
        @endif
        @if($certData['notes'])
        <tr>
          <td>Notes</td>
          <td>{{ $certData['notes'] }}</td>
        </tr>
        @endif
      </table>
    </div>

    @if($customMessage)
    <div class="message-box">
      <strong style="font-size:13px; display:block; margin-bottom:6px;">Additional Message from {{ $senderName }}:</strong>
      {!! nl2br(e($customMessage)) !!}
    </div>
    @endif

    <p style="font-size:14px; color:#555; margin-top:20px;">
      Please log in to the Construction Management System to view the full certificate details and take action.
    </p>
  </div>
  <div class="footer">
    This reminder was sent by <strong>{{ $senderName }}</strong> via the GCM Construction Management System.
    Please do not reply to this email directly.
  </div>
</div>
</body>
</html>
