<!DOCTYPE html>
<html lang="fr">
<head>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <title>{{ type }}</title>
  <style>
    html, body {
      font-family: Arial, sans-serif;
      color: #333;
      margin: 0;
      padding: 0;
      color:rgb(6, 6, 85);
      font-family: 'Poppins', sans-serif;
      font-weight: 300;
      letter-spacing: 1px;
      font-size: 11px;
    }

    @page {
      size: A4;
      margin: 0;
    }
     .a4-page {
      width: 210mm;
      height: 297mm;
      background: white;
      margin: auto;
      padding: 20mm;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      background-image: url('invoice_header.png');
      background-size: cover;
      background-repeat: no-repeat;
    }

    .header, .footer {
      page-break-inside: avoid;
    }

    .quote-title {
      font-size: 12px;
      color: white;
      font-weight: bold;
      margin-top:5%;
    }

    .flex {
      display: flex;
      justify-content: space-between;
    }

    .section {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .section-items {
      page-break-inside: auto;
    }

    .section-items table {
      width: 100%;
      border-collapse: collapse;
    }

    table th, table td {
      /* border: 1px solid #ccc; */
      padding: 6px;
    }

    .totals td {
      font-weight: bold;
      border: none;
      padding: 2px;
    }

    .totals {
      /* width: 100%; */
      margin-top: 20px;
    }

    .payment {
      margin-top: 20px;
    }

    .logo {
      height: 60px;
    }

    /* Force un saut de page avant la section totals si besoin */
    .totals, .payment {
      page-break-inside: avoid;
    }

    ul {
      margin: 5px 0 0 15px;
      padding: 0;
    }

    li {
      margin-bottom: 2px;
    }
    .page-wrapper {
      position: relative;
      width: 210mm;
      min-height: 297mm;
      margin: auto;
      box-sizing: border-box;
      padding: 20mm;
    }

    .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 210mm;
      height: 297mm;
      background-image: url('invoice_header.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -1;
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <div class="background"></div>
    <div class="header flex">
      <div class="quote-title">
        <p><strong>{{ type }} n° :</strong> {{ invoice_id }}</p>
        <p><strong>Date :</strong> {{ date }}</p>
      </div>
    </div>
    <br><br>
    <p><strong>Client : {{ client_name }}</strong></p>
    <!-- <br><br> -->
    <div class="section-items">
      <table>
        <thead>
          <tr style="background-color: black; color:white; border-radius: 10px;">
            <th style="border-top-left-radius: 10px; border-bottom-left-radius: 10px;">Description</th>
            <th>Quantité</th>
            <th>Prix Unitaire</th>
            <th style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;">Total</th>
          </tr>
        </thead>
        <tbody>
          {% for item in items %}
          <tr>
            <td>
              <strong>{{ item.description }}</strong>
              {% if item.details %}
                <ul>
                  {% for detail in item.details %}
                    <li>{{ detail }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            </td>
            <td>{{ item.quantity }}</td>
            <td>{{ currency }}{{ "%.2f"|format(item.unit_price) }}</td>
            <td>{{ currency }}{{ "%.2f"|format(item.quantity * item.unit_price) }}</td>
          </tr>
          {% endfor %}
          <tr style="background-color: black; color:white; border-radius: 10px;">
            <td style="background-color: black; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;">Total</td>
            <td></td>
            <td></td>
            <td style="background-color: black; color: white; border-top-right-radius: 20px; border-bottom-right-radius: 20px;">{{ "%.2f"|format(total) }}{{ currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="section">
      <div class="payment">
        <p><strong>Informations de paiement :</strong><br>
          Par virement bancaire :<br>
          Banque : Revolut<br>
          IBAN : FR76 2823 3000 0193 8028 4000 432<br>
          BIC : REVOFRP2
        </p>
        <p><strong>Délais estimés :</strong>
          Durée totale estimée : 4 à 6 semaines selon disponibilité du client et validation intermédiaire.</p>
        <p><strong>Termes & conditions :</strong>
          Démarrage à réception de l’acompte (30 % soit {{ "%.2f"|format(total * 0.3) }}{{ currency }}).
          Paiement du solde à la livraison.
          Livraison du code sous licence libre ou privative selon accord contractuel.</p>
      </div>
      <table class="totals">
        <tbody>
          <tr>
            <td>Total HT</td>
            <td class="right">{{ "%.2f"|format(total) }}{{ currency }}</td>
          </tr>
          <tr>
            <td>TVA (0%)</td>
            <td>-</td>
          </tr>
          <tr>
            <td>Remise</td>
            <td>-</td>
          </tr>
          <tr>
            <td>Total TTC</td>
            <td class="right">{{ "%.2f"|format(total) }}{{ currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="border: solid 2px black; border-radius: 10px; width: 300px; page-break-inside: avoid; break-inside: avoid;">
        <p>Date :</p>
        <br>
        <p>Signature :</p>
        <br>
    </div>
  </div>
</body>
</html>
