344 lines
8.7 KiB
Handlebars
344 lines
8.7 KiB
Handlebars
|
<!DOCTYPE html>
|
||
|
|
<html lang="es">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<link rel="stylesheet" href="{{ asset 'tailwind.css' }}" />
|
||
|
|
|
||
|
|
<title>Factura proforma</title>
|
||
|
|
<style type="text/css">
|
||
|
|
/* ---------------------------- */
|
||
|
|
/* ESTRUCTURA CABECERA */
|
||
|
|
/* ---------------------------- */
|
||
|
|
|
||
|
|
header {
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Fila superior */
|
||
|
|
.top-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Bloque izquierdo */
|
||
|
|
.left-block {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
height: 70px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.company-text {
|
||
|
|
font-size: 7pt;
|
||
|
|
line-height: 1;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Bloque derecho */
|
||
|
|
.right-block {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: flex-end;
|
||
|
|
width: 40%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.factura-img {
|
||
|
|
height: 45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Fila inferior */
|
||
|
|
.bottom-header {
|
||
|
|
margin-top: 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Cuadros */
|
||
|
|
.info-box {
|
||
|
|
border: 1px solid black;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 8px 12px;
|
||
|
|
width: 45%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-dire {
|
||
|
|
width: 65%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------- */
|
||
|
|
/* ESTRUCTURA BODY */
|
||
|
|
/* ---------------------------- */
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: Tahoma, sans-serif;
|
||
|
|
margin: 40px;
|
||
|
|
color: #333;
|
||
|
|
font-size: 9pt;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin-top: 0px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
table th,
|
||
|
|
table td {
|
||
|
|
border-top: 0px solid;
|
||
|
|
border-left: 1px solid #000;
|
||
|
|
border-right: 1px solid #000;
|
||
|
|
border-bottom: 0px solid;
|
||
|
|
padding: 3px 10px;
|
||
|
|
text-align: left;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
table th {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-top: 1px solid #000;
|
||
|
|
border-bottom: 1px solid #000;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #e7e0df;
|
||
|
|
color: #ff0014;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals {
|
||
|
|
margin-top: 20px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals td {
|
||
|
|
padding: 5px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals td.label {
|
||
|
|
text-align: right;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resume-table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
font-size: 9pt;
|
||
|
|
font-family: Tahoma, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Columna izquierda (notas / forma de pago) */
|
||
|
|
.left-col {
|
||
|
|
width: 70%;
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Etiquetas */
|
||
|
|
.resume-table .label {
|
||
|
|
width: 15%;
|
||
|
|
padding: 6px 8px;
|
||
|
|
text-align: right;
|
||
|
|
border: 1px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Valores numéricos */
|
||
|
|
.resume-table .value {
|
||
|
|
width: 15%;
|
||
|
|
padding: 6px 8px;
|
||
|
|
text-align: right;
|
||
|
|
border: 1px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Total factura */
|
||
|
|
.total-row .label,
|
||
|
|
.total-row .value {
|
||
|
|
background-color: #eee;
|
||
|
|
font-size: 9pt;
|
||
|
|
border: 1px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total {
|
||
|
|
color: #d10000;
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resume-table .empty {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
margin-top: 40px;
|
||
|
|
font-size: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media print {
|
||
|
|
* {
|
||
|
|
-webkit-print-color-adjust: exact;
|
||
|
|
}
|
||
|
|
|
||
|
|
thead {
|
||
|
|
display: table-header-group;
|
||
|
|
}
|
||
|
|
|
||
|
|
tfoot {
|
||
|
|
display: table-footer-group;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
|
||
|
|
<!-- FILA SUPERIOR: logo + dirección / imagen factura -->
|
||
|
|
<div class="top-header">
|
||
|
|
<div class="left-block">
|
||
|
|
<img src="{{asset 'logo_acana.jpg'}}" alt="Logo Acana" class="logo" />
|
||
|
|
|
||
|
|
<div class="company-text">
|
||
|
|
<p>Aliso Design S.L. B86913910</p>
|
||
|
|
<p>C/ La Fundición, 27. Pol. Santa Ana</p>
|
||
|
|
<p>Rivas Vaciamadrid 28522 Madrid</p>
|
||
|
|
<p>Telf: 91 301 65 57 / 91 301 65 58</p>
|
||
|
|
<p>
|
||
|
|
<a href="mailto:info@acanainteriorismo.com">info@acanainteriorismo.com</a> -
|
||
|
|
<a href="https://www.acanainteriorismo.com" target="_blank">www.acanainteriorismo.com</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="right-block">
|
||
|
|
<img src="{{asset 'factura_acana.jpg' }}" alt="Factura" class="factura-img" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FILA INFERIOR: cuadro factura + cuadro cliente -->
|
||
|
|
<div class="bottom-header">
|
||
|
|
|
||
|
|
<div class="info-box">
|
||
|
|
<p>Factura nº: <strong>{{series}}{{invoice_number}}</strong></p>
|
||
|
|
<p>Fecha: <strong>{{invoice_date}}</strong></p>
|
||
|
|
<p>Página <span class="pageNumber"></span> de <span class="totalPages"></span></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="info-box info-dire">
|
||
|
|
<h2 class="font-semibold uppercase mb-1">{{recipient.name}}</h2>
|
||
|
|
<p>{{recipient.tin}}</p>
|
||
|
|
<p>{{recipient.street}}</p>
|
||
|
|
<p>{{recipient.postal_code}} {{recipient.city}} {{recipient.province}}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main id="main">
|
||
|
|
<section id="details">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Tu tabla -->
|
||
|
|
<table class="table-header">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th class="py-2">Concepto</th>
|
||
|
|
<th class="py-2">Ud.</th>
|
||
|
|
<th class="py-2">Imp.</th>
|
||
|
|
<th class="py-2"> </th>
|
||
|
|
<th class="py-2">Imp. total</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody>
|
||
|
|
{{#each items}}
|
||
|
|
<tr>
|
||
|
|
<td>{{description}}</td>
|
||
|
|
<td class="text-right">{{#if quantity}}{{quantity}}{{else}} {{/if}}</td>
|
||
|
|
<td class="text-right">{{#if unit_amount}}{{unit_amount}}{{else}} {{/if}}</td>
|
||
|
|
<td class="text-right">{{#if discount_percentage}}{{discount_percentage}}{{else}} {{/if}}</td>
|
||
|
|
<td class="text-right">{{#if taxable_amount}}{{taxable_amount}}{{else}} {{/if}}</td>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
{{/each}}
|
||
|
|
|
||
|
|
<tr class="resume-table">
|
||
|
|
<!-- Columna izquierda: notas y forma de pago -->
|
||
|
|
<td class="left-col" rowspan="10">
|
||
|
|
{{#if payment_method}}
|
||
|
|
<p><strong>Forma de pago:</strong> {{payment_method}}</p>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
{{#if notes}}
|
||
|
|
<p class="mt-2"><strong>Notas:</strong> {{notes}}</p>
|
||
|
|
{{/if}}
|
||
|
|
</td>
|
||
|
|
<!-- Columna derecha: totales -->
|
||
|
|
{{#if discount_percentage}}
|
||
|
|
<td colspan="2" class="label">Importe neto</td>
|
||
|
|
<td colspan="2" class="value">{{subtotal_amount}}</td>
|
||
|
|
{{else}}
|
||
|
|
<td colspan="2" class="label">Base imponible</td>
|
||
|
|
<td colspan="2" class="value">{{taxable_amount}}</td>
|
||
|
|
{{/if}}
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
{{#if discount_percentage}}
|
||
|
|
<tr class="resume-table">
|
||
|
|
<td colspan="2" class="label">Dto {{discount_percentage}}</td>
|
||
|
|
<td colspan="2" class="value">{{discount_amount.value}}</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="resume-table">
|
||
|
|
<td colspan="2" class="label">Base imponible</td>
|
||
|
|
<td colspan="2" class="value">{{taxable_amount}}</td>
|
||
|
|
</tr>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
{{#each taxes}}
|
||
|
|
<tr class="resume-table">
|
||
|
|
<td colspan="2" class="label">{{tax_name}}</td>
|
||
|
|
<td colspan="2" class="value">{{taxes_amount}}</td>
|
||
|
|
</tr>
|
||
|
|
{{/each}}
|
||
|
|
|
||
|
|
<tr class="total-row">
|
||
|
|
<td colspan="2" class="label"><strong>Total factura</strong></td>
|
||
|
|
<td colspan="2" class="value total"><strong>{{total_amount}}</strong></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
|
||
|
|
<footer id="footer" class="mt-4 border-t border-black">
|
||
|
|
<aside class="mt-4">
|
||
|
|
<tfoot>
|
||
|
|
<p class="text-center">Insc. en el Reg. Merc. de Madrid, Tomo 31.839, Libro 0, Folio 191, Sección 8, Hoja
|
||
|
|
M-572991
|
||
|
|
CIF: B86913910</p>
|
||
|
|
<p class="text-left" style="font-size: 6pt;">Información en protección de datos<br />De conformidad con lo
|
||
|
|
dispuesto en el RGPD y LOPDGDD,
|
||
|
|
informamos que los datos personales serán tratados por
|
||
|
|
ALISO DESIGN S.L para cumplir con la obligación tributaria de emitir facturas. Podrá solicitar más
|
||
|
|
información, y ejercer sus derechos escribiendo a info@acanainteriorismo.com o mediante correo postal a la
|
||
|
|
dirección CALLE
|
||
|
|
LA FUNDICION 27 POL. IND. SANTA ANA (28522) RIVAS-VACIAMADRID, MADRID. Para el ejercicio de sus derechos, en
|
||
|
|
caso
|
||
|
|
de que sea necesario, se le solicitará documento que acredite su identidad. Si siente vulnerados sus derechos
|
||
|
|
puede presentar una reclamación ante la AEPD, en su web: www.aepd.es.</p>
|
||
|
|
</tfoot>
|
||
|
|
</aside>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|