<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.css"
    referrerpolicy="no-referrer" />
  <title>Factura F26200</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
      color: #333;
      font-size: 11pt;
      line-height: 1.6;
    }

    header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .accent-color {
      background-color: #F08119;
    }

    .company-info,
    .invoice-meta {
      width: 48%;
    }

    .invoice-meta {
      text-align: right;
    }

    h1 {
      font-size: 20px;
      margin-bottom: 5px;
    }

    .contact {
      font-size: 14px;
      margin-top: 10px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0px;
      margin-bottom: 15px;
    }

    table th,
    table td {
      border: 0px solid;
      padding: 3px 10px;
      text-align: left;
      vertical-align: top;
    }

    table th {
      margin-bottom: 10px;
    }

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

    .totals td {
      padding: 5px 10px;
    }

    .totals td.label {
      text-align: right;
      font-weight: bold;
    }

    footer {
      margin-top: 40px;
      font-size: 10px;
    }

    .highlight {
      background-color: #eef;
    }

    .accent-color {
      background-color: #F08119;
    }

    @media print {
      * {
        -webkit-print-color-adjust: exact;
      }

      thead {
        display: table-header-group;
      }

      tfoot {
        display: table-footer-group;
      }
    }
  </style>
</head>

<body>

  <header>
    <aside class="flex items-start mb-4 w-full">
      <!-- Bloque IZQUIERDO: imagen arriba + texto abajo, alineado a la izquierda -->
      <div class="w-[70%] flex flex-col items-start text-left">
        <img src="https://rodax-software.com/images/logo1.jpg" alt="Logo Rodax" class="block h-14 w-auto mb-1" />
        <div class="flex w-full">
          <div class="p-1 ">
            <p>Factura nº:<strong>&nbsp;{{invoice_number}}</strong></p>
            <p><span>Fecha:<strong>&nbsp;{{invoice_date}}</strong></p>
          </div>
          <div class="p-1 ml-9">
            <h2 class="font-semibold uppercase mb-1">{{recipient.name}}</h2>
            <p>{{recipient.tin}}</p>
            <p>{{recipient.street}}</p>
            <p>{{recipient.postal_code}}&nbsp;&nbsp;{{recipient.city}}&nbsp;&nbsp;{{recipient.province}}</p>
          </div>
        </div>
      </div>

      <!-- Bloque DERECHO: logo2 arriba y texto DEBAJO -->
      <div class="ml-auto flex flex-col items-end text-right">
        <img src="https://rodax-software.com/images/logo2.jpg" alt="Logo secundario"
          class="block h-5 w-auto md:h-8 mb-1" />
        <div class="not-italic text-xs leading-tight">
          <p>Telf: 91 785 02 47 / 686 62 10 59</p>
          <p><a href="mailto:info@rodax-software.com" class="hover:underline">info@rodax-software.com</a></p>
          <p><a href="https://www.rodax-software.com" target="_blank" rel="noopener"
              class="hover:underline">www.rodax-software.com</a></p>
        </div>
      </div>
    </aside>
  </header>

  <main id="main">
    <section id="details" class="border-b border-black ">

      <div class="relative pt-0 border-b border-black">
        <!-- Badge TOTAL decorado con imagen -->
        <div class="absolute -top-9 right-0">

          <div class="relative text-sm font-semibold text-black pr-2 pl-10 py-2 justify-center bg-red-900"
            style="background-image: url('https://rodax-software.com/images/img-total2.jpg'); background-size: cover; background-position: left;">
            <!-- Texto del total -->
            <span>TOTAL: {{total_amount}}</span>
          </div>
        </div>
      </div>

      <!-- Tu tabla -->
      <table class="table-header">
        <thead>
          <tr class="text-left">
            <th class="py-2">Concepto</th>
            <th class="py-2">Cantidad</th>
            <th class="py-2">Precio&nbsp;unidad</th>
            <th class="py-2">Importe&nbsp;total</th>
          </tr>
        </thead>

        <tbody>
          {{#each items}}
          <tr>
            <td>{{description}}</td>
            <td class="text-right">{{#if quantity}}{{quantity}}{{else}}&nbsp;{{/if}}</td>
            <td class="text-right">{{#if unit_amount}}{{unit_amount}}{{else}}&nbsp;{{/if}}</td>
            <td class="text-right">{{#if subtotal_amount}}{{subtotal_amount}}{{else}}&nbsp;{{/if}}</td>
            </td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </section>

    <section id="resume" class="flex items-center justify-between pb-4 mb-4">

      <div class="grow relative pt-10 self-start">
        {{#if payment_method}}
        <div class="">
          <p class=" text-sm"><strong>Forma de pago:</strong> {{payment_method}}</p>
        </div>
        {{else}}
        <!-- Empty payment method-->
        {{/if}}
        {{#if notes}}
        <div class="pt-4">
          <p class="text-sm"><strong>Notas:</strong> {{notes}} </p>
        </div>
        {{else}}
        <!-- Empty notes-->
        {{/if}}

      </div>

      <div class="relative pt-10 grow">
        <table class=" table-header min-w-full bg-transparent">
          <tbody>
            {{#if discount_percentage}}
            <tr>
              <td class="px-4 text-right">Importe&nbsp;neto</td>
              <td class="w-5">&nbsp;</td>
              <td class="px-4 text-right">{{subtotal_amount}}</td>
            </tr>
            <tr>
              <td class="px-4 text-right">Descuento&nbsp;{{discount_percentage}}</td>
              <td class="w-5">&nbsp;</td>
              <td class="px-4 text-right">{{discount_amount.value}}</td>
            </tr>
            {{else}}
            <!-- dto 0-->
            {{/if}}
            <tr>
              <td class="px-4 text-right">Base&nbsp;imponible</td>
              <td class="w-5">&nbsp;</td>
              <td class="px-4 text-right">{{taxable_amount}}</td>
            </tr>
            {{#if taxes_amount }}
            <tr>
              <td class="px-4 text-right">IVA&nbsp;21%</td>
              <td class="w-5">&nbsp;</td>
              <td class="px-4 text-right">{{taxes_amount}}</td>
            </tr>
            {{else}}
            <!-- iva 0-->
            {{/if}}
            <tr class="">
              <td class="px-4 text-right accent-color">
                Total&nbsp;factura
              </td>
              <td class="w-5">&nbsp;</td>
              <td class="px-4 text-right accent-color">
                {{total_amount}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </main>


  <footer id="footer" class="mt-4">
    <aside>
      <p class="text-center">Insc. en el Reg. Merc. de Madrid, Tomo 20.073, Libro 0, Folio 141, Sección 8, Hoja M-354212
        | CIF: B83999441 -
        Rodax Software S.L.</p>
    </aside>
  </footer>

</body>

</html>