<html lang="{{lang_code}}">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
    referrerpolicy="no-referrer" />
  <title>Presupuesto #{{id}}</title>
  <style>
    @page {
      size: A4;
    }

    @media print {

      html,
      body {
        width: 210mm;
        height: 297mm;
      }
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
      font-size: 11pt;
      line-height: 1.6;
    }

    #header {}

    #footer {}

    @media print {
      thead {
        display: table-header-group;
      }

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

<body>

  <header id="header">
    <aside class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold">DISTRIBUIDOR OFICIAL</h3>
      <div id="logo" class="w-32">
        <svg viewBox="0 0 336 133" fill="none" xmlns="http://www.w3.org/2000/svg" class="uecko-logo">
          <path
            d="M49.7002 83.0001H66.9002V22.5001H49.7002V56.2001C49.7002 64.3001 45.5002 68.5001 39.0002 68.5001C32.5002 68.5001 28.6002 64.3001 28.6002 56.2001V22.5001H0.700195V33.2001H11.4002V61.6001C11.4002 75.5001 19.0002 84.1001 31.9002 84.1001C40.6002 84.1001 45.7002 79.5001 49.6002 74.4001V83.0001H49.7002ZM120.6 48.0001H94.8002C96.2002 40.2001 100.8 35.1001 107.9 35.1001C115.1 35.2001 119.6 40.3001 120.6 48.0001ZM137.1 58.7001C137.2 57.1001 137.3 56.1001 137.3 54.4001V54.2001C137.3 37.0001 128 21.4001 107.8 21.4001C90.2002 21.4001 77.9002 35.6001 77.9002 52.9001V53.1001C77.9002 71.6001 91.3002 84.4001 109.5 84.4001C120.4 84.4001 128.6 80.1001 134.2 73.1001L124.4 64.4001C119.7 68.8001 115.5 70.6001 109.7 70.6001C102 70.6001 96.6002 66.5001 94.9002 58.7001H137.1ZM162.2 52.9001V52.7001C162.2 43.8001 168.3 36.2001 176.9 36.2001C183 36.2001 186.8 38.8001 190.7 42.9001L201.2 31.6001C195.6 25.3001 188.4 21.4001 177 21.4001C158.5 21.4001 145.3 35.6001 145.3 52.9001V53.1001C145.3 70.4001 158.6 84.4001 176.8 84.4001C188.9 84.4001 195.6 79.8001 201.5 73.3001L191.5 63.1001C187.3 67.1001 183.4 69.5001 177.6 69.5001C168.2 69.6001 162.2 62.1001 162.2 52.9001ZM269.1 83.0001L245.3 46.3001L268.3 22.5001H247.8L227.7 44.5001V0.600098H210.5V83.0001H227.7V64.6001L233.7 58.3001L249.5 83.0001H269.1ZM318.5 53.1001C318.5 62.0001 312.6 69.6001 302.8 69.6001C293.3 69.6001 286.9 61.8001 286.9 52.9001V52.7001C286.9 43.8001 292.8 36.2001 302.6 36.2001C312.1 36.2001 318.5 44.0001 318.5 52.9001V53.1001ZM335.4 52.9001V52.7001C335.4 35.3001 321.5 21.4001 302.8 21.4001C284 21.4001 270 35.5001 270 52.9001V53.1001C270 70.5001 283.9 84.4001 302.6 84.4001C321.4 84.4001 335.4 70.3001 335.4 52.9001Z"
            fill="black" class="uecko-logo"></path>
        </svg>
      </div>
    </aside>
    <section class="flex pb-2 space-x-4">
      <img id="dealer-logo" src={{dealer.logo}} alt="Logo distribuidor" />
      <address class="text-base not-italic font-medium whitespace-pre-line" id="from">{{dealer.contact_information}}
      </address>
    </section>
    <section class="grid grid-cols-2 gap-4 pb-4 mb-4 border-b">
      <aside>
        <p class="text-sm"><strong>Presupuesto nº:</strong> {{reference}}</p>
        <p class="text-sm"><strong>Fecha:</strong> {{date}}</p>
        <p class="text-sm"><strong>Validez:</strong> {{validity}}</p>
        <p class="text-sm"><strong>Vendedor:</strong> {{dealer.name}}</p>
        <p class="text-sm"><strong>Referencia cliente:</strong> {{customer_reference}}</p>
      </aside>
      <address class="text-base not-italic font-semibold whitespace-pre-line" id="to">{{customer_information}}
      </address>
    </section>
    <aside class="flex items-center justify-between mb-4">
      <h3 class="text-2xl font-normal">PRESUPUESTO</h3>
      <div id="header-pagination">
        Página <span class="pageNumber"></span> de <span class="totalPages"></span>
      </div>
    </aside>
  </header>


  <main id="main">
    <section id="details">
      <table class="table-header">
        <thead>
          <tr>
            <th class="px-2 py-2 text-right border">Cant.</th>
            <th class="px-2 py-2 border">Descripción</th>
            <th class="px-2 py-2 text-right border">Prec. Unitario</th>
            <th class="px-2 py-2 text-right border">Subtotal</th>
            <th class="px-2 py-2 text-right border">Dto (%)</th>
            <th class="px-2 py-2 text-right border">Importe total</th>
          </tr>
        </thead>
        <tbody class="table-body">
          {{#each items}}
          <tr class="text-sm border-b">
            <td class="content-start px-2 py-2 text-right">{{quantity}}</td>
            <td class="px-2 py-2 font-medium">{{description}}</td>
            <td class="content-start px-2 py-2 text-right">{{unit_price}}</td>
            <td class="content-start px-2 py-2 text-right">{{subtotal_price}}</td>
            <td class="content-start px-2 py-2 text-right">{{discount}}</td>
            <td class="content-start px-2 py-2 text-right">{{total_price}}</td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </section>

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

      <div class="grow">
        <div class="pt-4">
          <p class="text-sm"><strong>Forma de pago:</strong> {{payment_method}}</p>
        </div>
        <div class="pt-4">
          <p class="text-sm"><strong>Notas:</strong> {{notes}} </p>
        </div>
      </div>

      <div class="grow">
        <table class="min-w-full bg-transparent">
          <tbody>
            <tr class="border-b">
              <td class="px-4 py-2">Importe neto</td>
              <td class="px-4 py-2"></td>
              <td class="px-4 py-2 text-right border">{{subtotal_price}}</td>
            </tr>
            <tr class="border-b">
              <td class="px-4 py-2">% Descuento</td>
              <td class="px-4 py-2 text-right border">{{discount.amount}}</td>
              <td class="px-4 py-2 text-right border">{{discount_price}}</td>
            </tr>
            <tr class="border-b">
              <td class="px-4 py-2">Base imponible</td>
              <td class="px-4 py-2"></td>
              <td class="px-4 py-2 text-right border">{{before_tax_price}}</td>
            </tr>
            <tr class="border-b">
              <td class="px-4 py-2">% IVA</td>
              <td class="px-4 py-2 text-right border">{{tax}}</td>
              <td class="px-4 py-2 text-right border">{{tax_price}}</td>
            </tr>
            <tr class="border-b">
              <td class="px-4 py-2">Importe total</td>
              <td class="px-4 py-2"></td>
              <td class="px-4 py-2 text-right border">{{total_price}}</td>
            </tr>
          </tbody>
        </table>

      </div>

    </section>
    <section id="legal_terms">
      <p class="text-xs text-gray-500">{{quote.default_legal_terms}}</p>
    </section>
  </main>



  <footer id="footer" class="mt-4">
    <aside><img src="https://uecko.com/assets/img/uecko-footer_logos.jpg" class="w-full" /></aside>
  </footer>

</body>

</html>