<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Facture {{ invoice_number }}</title>
<style>
  @page { size: Letter; margin: 10mm 15mm 8mm 20mm; }
  * { box-sizing: border-box; }
  body { font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 8pt; color: #333; line-height: 1.3; margin: 0; }
  @media screen {
    body { padding: 40px; max-width: 8.5in; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #fff; }
    html { background: #f0f0f0; }
  }

  /* ── Slogan ── */
  .slogan { font-size: 7pt; color: #019547; text-align: center; padding: 2px 0 4px; font-weight: 500; letter-spacing: 0.3px; }
  
  /* ── Metadata Elements ── */
  .doc-label { font-size: 14pt; font-weight: 700; color: #019547; }
  .doc-page { font-size: 7pt; color: #888; }
  
  /* ── Meta band (under logo) ── */
  .meta-band { width: 100%; padding: 6px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 15px 0 0 0; }
  .meta-band td { vertical-align: middle; padding: 0 6px; text-align: center; }
  .meta-band .ml { color: #888; display: block; font-size: 5.5pt; text-transform: uppercase; margin-bottom: 2px; }
  .meta-band .mv { font-weight: 700; color: #333; font-size: 7pt; }

  /* ── Main 2-column layout ── */
  .main { width: 100%; border-collapse: separate; border-spacing: 0; }
  .main td { vertical-align: top; padding: 0; }
  .col-l { width: 60%; padding-right: 0; }
  .col-r { width: 38%; padding-left: 0; }

  /* ── Left: client address (fixed for #10 envelope window) ── */
  /* Target: 2.5"-3.5" from top of page = 63-89mm. At 10mm page margin, the text needs ~53mm from body top. */
  .cl-block { margin-top: 12mm; margin-bottom: 28px; padding-left: 4px; }
  .cl-lbl { font-size: 7pt; color: #888; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
  .cl-name { font-size: 11pt; font-weight: 700; color: #222; line-height: 1.4; }
  .cl-addr { font-size: 10pt; color: #333; line-height: 1.5; }

  /* ── Left: summary ── */
  .summary-hdr { font-size: 8.5pt; font-weight: 700; color: #019547; border-bottom: 1px solid #019547; padding-bottom: 3px; margin-bottom: 5px; }
  .section-hdr { font-weight: 600; font-size: 7.5pt; padding-top: 5px; margin-bottom: 2px; }
  .addr-hdr { font-weight: 600; font-size: 7pt; color: #019547; padding: 5px 0 2px; }
  .prev-row { width: 100%; font-size: 7.5pt; }
  .prev-row td { padding: 3px 4px; }
  .prev-row .r { text-align: right; }
  .prev-row .indent td { padding-left: 8px; color: #555; }
  .prev-row .pmt td { color: #019547; }
  .prev-row .bal td { font-style: italic; color: #888; }
  .prev-row .shdr td { font-weight: 600; padding-top: 6px; }
  .dtl { width: 100%; border-collapse: collapse; font-size: 7.5pt; margin-bottom: 16px; }
  .dtl th { text-align: left; padding: 4px 6px; background: #f3f4f6; font-weight: 600; color: #555; font-size: 6.5pt; text-transform: uppercase; }
  .dtl th.r, .dtl td.r { text-align: right; }
  .dtl td { padding: 4px 6px; border-bottom: 1px solid #f0f0f0; }
  .dtl tr.credit td { color: #019547; }
  .dtl tr.stot td { font-weight: 600; border-top: 1px solid #ddd; border-bottom: none; padding-top: 3px; }
  .dtl tr.tax td { color: #888; font-size: 7pt; border-bottom: none; padding: 2px 6px; }
  .dtl tr.grand td { font-weight: 700; font-size: 8.5pt; border-top: 1px solid #019547; padding-top: 4px; }
  .tax-nums { font-size: 6.5pt; color: #999; margin-top: 4px; }

  /* ── Right column: all content in a bordered container ── */
  .r-container { border: 1px solid #e5e7eb; border-left: 2px solid #019547; }
  .r-section { padding: 10px 14px; }
  .r-section + .r-section { border-top: 1px solid #e5e7eb; }
  .r-section.r-green { background: #e8f5ee; }
  .r-section.r-gray { background: #f8f9fa; }
  /* Summary in right col */
  .r-summary-hdr { font-size: 8.5pt; font-weight: 700; color: #019547; margin-bottom: 6px; }
  .r-prev { width: 100%; font-size: 7.5pt; }
  .r-prev td { padding: 3px 0; }
  .r-prev .r { text-align: right; white-space: nowrap; }
  .r-prev .indent td { padding-left: 6px; color: #555; }
  .r-prev .pmt td { color: #019547; }
  .r-prev .bal td { font-style: italic; color: #888; }
  .r-prev .shdr td { font-weight: 600; padding-top: 6px; }
  /* Amount due */
  .ab-label { font-size: 8.5pt; font-weight: 600; color: #019547; }
  .ab-val { font-size: 18pt; font-weight: 700; color: #222; text-align: right; white-space: nowrap; }
  .ab-date { font-size: 7pt; color: #555; margin-top: 2px; }
  .ab-table { width: 100%; border-collapse: collapse; }
  .ab-table td { padding: 0; border: none; vertical-align: middle; }
  /* QR */
  .qr-table { width: 100%; border-collapse: collapse; }
  .qr-table td { padding: 2px 6px; border: none; vertical-align: middle; font-size: 7.5pt; }
  .qr-placeholder { width: 40px; height: 40px; background: #ccc; font-size: 5pt; color: #888; text-align: center; line-height: 40px; }
  /* Info block */
  .r-info-text { font-size: 6.5pt; color: #555; line-height: 1.4; }
  .r-info-text strong { color: #333; }
  .r-info-text .ri-title { font-weight: 700; font-size: 7pt; color: #333; margin-bottom: 3px; }
  .r-info-text .ri-sep { border-top: 1px solid #e5e7eb; margin: 6px 0; }

  /* ── Footer ── */
  .footer-line { font-size: 6pt; color: #bbb; text-align: center; margin-top: 8px; }
</style>
</head>
<body>

<!-- ═══════ HEADER & MAIN 2 COLUMNS ═══════ -->
<div style="position: relative;">
  <div class="slogan" style="position: absolute; top: 6px; left: 0; right: 0;">Merci de choisir local &mdash; Merci de choisir TARGO</div>
  <table class="main"><tr>

  <!-- ── LEFT 60% ── -->
  <td class="col-l">
    
    <!-- Logo -->
    <div style="height: 26px;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 326.39 70.35" style="height: 26px; width: auto;"><defs><style>.cls-1{fill:#019547;}</style></defs><path class="cls-1" d="M25.83,15H8.41a4.14,4.14,0,0,1-3.89-2.71L0,1.18H66.59L62.07,12.27A4.14,4.14,0,0,1,58.18,15H40.76V69.19H25.81Z"/><path class="cls-1" d="M90.74.68h18.55a5.63,5.63,0,0,1,5.63,5.6l.26,62.91H99.55L99.76,54H71.87L66.41,65.51a6.45,6.45,0,0,1-5.84,3.68H49.35L73.53,12.11A18.7,18.7,0,0,1,90.74.68M100,40.73l.07-26h-8a6.75,6.75,0,0,0-6.26,4.18L76.73,40.73Z"/><path class="cls-1" d="M124.51,6.81a5.64,5.64,0,0,1,5.65-5.65H155.6c8.64,0,15.37,2.44,19.81,6.91,3.81,3.78,5.84,9.14,5.84,15.53v.18c0,11-5.92,17.87-14.59,21.1l16.61,24.29h-14a6.51,6.51,0,0,1-5.39-2.87L151.21,47.41H139.44V69.17h-15Zm30.12,27.41c7.28,0,11.45-3.89,11.45-9.62v-.21c0-6.42-4.46-9.7-11.74-9.7H139.46V34.22Z"/><path class="cls-1" d="M184.74,35.37v-.18C184.74,15.85,199.8,0,220.4,0,232.65,0,240,3.31,247.13,9.33l-6.28,7.57a5.18,5.18,0,0,1-6.84,1,23.71,23.71,0,0,0-14.11-4.13c-10.88,0-19.52,9.62-19.52,21.18v.19c0,12.43,8.54,21.57,20.6,21.57a24,24,0,0,0,14.09-4.07V42.91h-8.68A6.41,6.41,0,0,1,220,36.53V30h29.54V59.52a44,44,0,0,1-29,10.78c-21.18,0-35.74-14.8-35.74-34.93"/><path class="cls-1" d="M254.09,35.37v-.18C254.09,15.85,269.33,0,290.33,0s36.06,15.66,36.06,35v.18c0,19.34-15.27,35.19-36.24,35.19s-36.06-15.64-36.06-35m56.63,0v-.18c0-11.67-8.54-21.39-20.6-21.39S269.73,23.34,269.73,35v.18c0,11.67,8.54,21.37,20.6,21.37S310.72,47,310.72,35.37"/></svg>
    </div>

    <!-- Account info directly under the logo -->
    <table class="meta-band"><tr>
      <td style="text-align:left;"><span class="ml">N&ordm; compte</span><span class="mv">{{ account_number }}</span></td>
      <td style="text-align:center;"><span class="ml">Date</span><span class="mv">{{ invoice_date }}</span></td>
      <td style="text-align:right;"><span class="ml">N&ordm; facture</span><span class="mv">{{ invoice_number }}</span></td>
    </tr></table>

    <!-- Client address (calibrated for #10 envelope window) -->
    <div class="cl-block">
      <div class="cl-lbl">Facturer &agrave;</div>
      <div class="cl-name">{{ client_name }}</div>
      <div class="cl-addr">
        {{ client_address_line1 }}<br>
        {{ client_address_line2 }}
      </div>
    </div>

    <!-- Current charges -->
    <div class="summary-hdr">FRAIS COURANTS</div>

    {% for location in current_charges_locations %}
    <div class="addr-hdr">&#9678; {{ location.name }}</div>
    <table class="dtl">
      <thead><tr><th style="width:55%">Description</th><th class="r">Qt&eacute;</th><th class="r">Unit.</th><th class="r">Montant</th></tr></thead>
      <tbody>
        {% for item in location['items'] %}
        <tr class="{% if item.is_credit %}credit{% endif %}">
          <td>{{ item.description }}</td>
          <td class="r">{{ item.qty }}</td>
          <td class="r">{{ item.unit_price }}</td>
          <td class="r">{{ item.amount }}</td>
        </tr>
        {% endfor %}
        <tr class="stot"><td colspan="3">Sous-total</td><td class="r">$ {{ location.subtotal }}</td></tr>
      </tbody>
    </table>
    {% endfor %}

    <table class="dtl" style="margin-top:4px;">
      <tr class="stot"><td colspan="3" style="width:75%">Sous-total avant taxes</td><td class="r">$ {{ subtotal_before_taxes }}</td></tr>
      <tr class="tax"><td colspan="3">Taxes: TPS ($ {{ tps_amount }}), TVQ ($ {{ tvq_amount }})</td><td class="r">$ {{ total_taxes }}</td></tr>
      <tr class="grand"><td colspan="3">TOTAL</td><td class="r">$ {{ current_charges_total }}</td></tr>
    </table>

    <div class="tax-nums">TPS: 834975559RT0001 &nbsp;|&nbsp; TVQ: 1213765929TQ0001</div>
  </td>

  <!-- ── SPACER ── -->
  <td style="width: 2%; border-left: 15px solid transparent;"></td>

  <!-- ── RIGHT 38%: all in one bordered container ── -->
  <td class="col-r">
    <!-- FACTURE Header floating above summary -->
    <div style="text-align: right; height: 41px;">
      <div class="doc-label" style="line-height:1;">FACTURE</div>
      <div class="doc-page" style="line-height:1.2; margin-top:2px;">Page {{ current_page|default('1') }} de {{ total_pages|default('1') }}</div>
    </div>
    
    <div class="r-container">

      <!-- Account summary -->
      <div class="r-section">
        <div class="r-summary-hdr">SOMMAIRE DU COMPTE</div>
        <table class="r-prev">
          <tr class="shdr"><td colspan="2">Facture pr&eacute;c&eacute;dente ({{ prev_invoice_date }})</td></tr>
          <tr class="indent"><td>Total facture pr&eacute;c&eacute;dente</td><td class="r">$ {{ prev_invoice_total }}</td></tr>
          
          {% for payment in recent_payments %}
          <tr class="indent pmt"><td>Paiement re&ccedil;u &mdash; Merci</td><td class="r">- $ {{ payment.amount }}</td></tr>
          {% endfor %}

          <tr class="indent bal"><td>Solde restant</td><td class="r">$ {{ remaining_balance }}</td></tr>
          <tr class="shdr"><td>Frais courants</td><td class="r">$ {{ subtotal_before_taxes }}</td></tr>
          <tr class="indent"><td>Taxes</td><td class="r">$ {{ total_taxes }}</td></tr>
        </table>
      </div>

      <!-- Amount due -->
      <div class="r-section r-green">
        <table class="ab-table"><tr>
          <td><div class="ab-label">Montant d&ucirc;</div><div class="ab-date">avant le {{ due_date }}</div></td>
          <td class="ab-val">$ {{ total_amount_due }}</td>
        </tr></table>
      </div>

      <!-- QR -->
      <div class="r-section r-green">
        <table class="qr-table"><tr>
          <td style="width:46px;">
            {% if qr_code_base64 %}
              <img src="data:image/png;base64,{{ qr_code_base64 }}" style="width:40px; height:40px;" />
            {% else %}
              <div class="qr-placeholder">QR</div>
            {% endif %}
          </td>
          <td><strong>Payez en ligne</strong><br>Scannez le code QR ou visitez<br><strong style="color:#019547">client.gigafibre.ca</strong></td>
        </tr></table>
      </div>

      <!-- Contact + Message -->
      <div class="r-section r-gray r-info-text">
        <div class="ri-title">Contactez-nous</div>
        Service &agrave; la client&egrave;le<br>
        <strong>819 758-1555</strong><br>
        Lun-Ven 8h-17h<br>
        info@targo.ca &bull; www.targo.ca
        <div class="ri-sep"></div>
        Prendre note que toute facture non acquitt&eacute;e &agrave; la date d'&eacute;ch&eacute;ance sera sujette &agrave; des frais de retard.<br><br>
        Avez-vous une plainte relative &agrave; votre service de t&eacute;l&eacute;communication ou de t&eacute;l&eacute;vision que vous n'&ecirc;tes pas parvenu &agrave; r&eacute;gler? La CPRST pourrait vous aider sans frais&nbsp;: <strong>www.ccts-cprst.ca</strong> ou <strong>1-888-221-1687</strong>.
      </div>

    </div>
  </td>

</tr></table>
</div>

<div class="footer-line">TARGO Communications Inc. &bull; 134 rue Principale, Victoriaville, QC G6P 4E4 &bull; 819 758-1555</div>

</body>
</html>
