<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Facture {{ $order->number }}</title>
  <style>
    body { font-family: DejaVu Sans, sans-serif; color: #0f172a; font-size: 12px; }
    .header { border-bottom: 2px solid {{ $brandColor }}; padding-bottom: 14px; margin-bottom: 20px; }
    .brand-row { width: 100%; }
    .logo { width: 70px; height: 70px; display: inline-block; vertical-align: middle; }
    .logo-fallback {
      width: 54px; height: 54px; border-radius: 8px;
      background: {{ $brandColor }}; color: #fff; text-align: center; line-height: 54px;
      font-weight: 700; font-size: 18px; display: inline-block;
    }
    .brand-name { font-size: 24px; font-weight: 700; color: #0f172a; margin-left: 12px; vertical-align: top; }
    .muted { color: #64748b; }
    .meta { margin-top: 8px; }
    table { width: 100%; border-collapse: collapse; margin-top: 16px; }
    th, td { border: 1px solid #e2e8f0; padding: 8px; }
    th { background: #fff7ed; text-align: left; font-weight: 700; color: {{ $brandColor }}; }
    .right { text-align: right; }
    .center { text-align: center; }
    .totals { margin-top: 16px; width: 100%; }
    .totals td { border: none; padding: 4px 0; }
    .total-line { font-size: 16px; font-weight: 700; color: {{ $brandColor }}; }
    .footer { margin-top: 24px; font-size: 11px; color: #94a3b8; text-align: center; }
    .qr-block { margin-top: 16px; text-align: right; }
    .qr-label { font-size: 10px; color: #64748b; margin-top: 4px; }
  </style>
</head>
<body>
  <div class="header">
    <table class="brand-row">
      <tr>
        <td style="border:none; width:60%;">
          @if(!empty($logoDataUri))
            <img class="logo" src="{{ $logoDataUri }}" alt="Logo" />
          @else
            <span class="logo-fallback">CP</span>
          @endif
          <span class="brand-name">{{ $brandName }}</span>
        </td>
        <td style="border:none; text-align:right;">
          <div><strong>FACTURE</strong></div>
          <div class="muted">N° {{ $invoiceNumber }}</div>
          <div class="muted">Cmd {{ $order->number }}</div>
          <div class="muted">{{ $issuedAt->format('d/m/Y H:i') }}</div>
        </td>
      </tr>
    </table>
    <div class="meta">
      <div><strong>Client:</strong> {{ $order->user->name ?? '-' }}</div>
      <div><strong>Email:</strong> {{ $order->user->email ?? '-' }}</div>
      <div><strong>Adresse:</strong> {{ $order->address?->city ?? '-' }}, {{ $order->address?->street ?? '-' }}</div>
    </div>
  </div>

  <table>
    <thead>
      <tr>
        <th>Article</th>
        <th class="center">Qté</th>
        <th class="right">PU</th>
        <th class="right">Total</th>
      </tr>
    </thead>
    <tbody>
      @foreach($order->items as $item)
        <tr>
          <td>{{ $item->product_name }}</td>
          <td class="center">{{ $item->quantity }}</td>
          <td class="right">{{ number_format((float) $item->unit_price, 2, ',', ' ') }} FCFA</td>
          <td class="right">{{ number_format((float) $item->total, 2, ',', ' ') }} FCFA</td>
        </tr>
      @endforeach
    </tbody>
  </table>

  <table class="totals">
    <tr>
      <td class="right muted">Sous-total</td>
      <td class="right">{{ number_format((float) $order->subtotal, 2, ',', ' ') }} FCFA</td>
    </tr>
    <tr>
      <td class="right muted">Livraison</td>
      <td class="right">{{ number_format((float) $order->delivery_fee, 2, ',', ' ') }} FCFA</td>
    </tr>
    <tr>
      <td class="right total-line">Total</td>
      <td class="right total-line">{{ number_format((float) $order->total, 2, ',', ' ') }} FCFA</td>
    </tr>
  </table>

  <div class="qr-block">
    <img src="{{ $qrDataUri }}" alt="QR verification" width="90" height="90" />
    <div class="qr-label">QR de verification facture</div>
  </div>

  <div class="footer">
    Merci pour votre confiance - Caddies+
  </div>
</body>
</html>

