<!DOCTYPE html> <html lang="es"> <body> <section class="container"> <!-- Header component --> <report-header :locale="ticket.locale"></report-header> <!-- End header component --> <section class="main"> <section class="columns"> <section class="size50"> <section class="size75"> <h1 class="title uppercase">{{$t('title')}}</h1> <table class="row-oriented"> <tbody> <tr> <td class="font gray uppercase">{{$t('clientId')}}</td> <th>{{client.id}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('ticketId')}}</td> <th>{{ticket.id}}</th> </tr> <tr> <td class="font gray uppercase">{{$t('date')}}</td> <th>{{shipped}}</th> </tr> </tbody> </table> </section> </section> <section class="size50"> <section class="panel"> <section class="header">{{$t('deliveryAddress')}}</section> <section class="body"> <h3 class="uppercase">{{address.nickname}}</h3> <section> {{address.street}} </section> <section> {{address.postalCode}}, {{address.city}} ({{address.province}}) </section> </section> </section> <section class="panel"> <section class="header">{{$t('fiscalData')}}</section> <section class="body"> <section> {{client.socialName}} </section> <section> {{client.street}} </section> <section> {{client.fi}} </section> </section> </section> </section> </section> <!-- Sales block --> <h3>{{$t('saleLines')}}</h3> <table class="column-oriented"> <thead> <tr> <td>{{$t('reference')}}</td> <td class="number">{{$t('quantity')}}</td> <td>{{$t('concept')}}</td> <td class="number">{{$t('price')}}</td> <td class="centered">{{$t('discount')}}</td> <td class="centered">{{$t('vat')}}</td> <td class="number">{{$t('amount')}}</td> </tr> </thead> <tbody> <template v-for="sale in sales"> <tr class="font bold" :key="sale.id"> <td>{{sale.itemFk}}</td> <td class="number">{{sale.quantity}}</td> <td>{{sale.concept}}</td> <td class="number">{{sale.price | currency('EUR')}}</td> <td class="centered">{{sale.discount | percent}}</td> <td class="centered">{{sale.vatType}}</td> <td class="number">{{sale.price * sale.quantity * (1 - sale.discount / 100) | currency('EUR')}}</td> </tr> <tr class="description"> <td colspan="2" class="centered"> <strong class="font gray" v-if="sale.val1">{{sale.tag1}}</strong> <span>{{sale.val1}}</span> </td> <td colspan="3" class="centered"> <strong class="font gray" v-if="sale.val2">{{sale.tag2}}</strong> <span>{{sale.val2}}</span> </td> <td colspan="2" class="centered"> <strong class="font gray" v-if="sale.val3">{{sale.tag3}}</strong> <span>{{sale.val3}}</span> </td> </tr> <tr class="description phytosanitary" v-if="sale.passportNumber"> <td colspan="7"> {{sale.ediBotanic}} {{sale.denomination}} {{sale.countryCode}}-{{sale.passportNumber}} <span v-if="sale.isProtectedZone">ZP</span> </td> </tr> </template> <!-- FIXME - APPLY CSS POST-RENDER --> <tr > <td colspan="7"></td> </tr> </tbody> <tfoot> <tr> <td colspan="6"> <span class="pull-right">{{$t('subtotal')}}</span> </td> <td class="number">{{getSubTotal() | currency('EUR')}}</td> </tr> </tfoot> </table> <!-- End of sales block --> <section class="columns"> <!-- Services block--> <section class="size100" v-if="services.length > 0"> <h3>{{$t('services')}}</h3> <table class="column-oriented"> <thead> <tr> <td>{{$t('concept')}}</td> <td class="number">{{$t('quantity')}}</td> <td>{{$t('vatType')}}</td> <td class="number">{{$t('amount')}}</td> </tr> </thead> <tbody> <tr v-for="service in services"> <td>{{service.description}}</td> <td class="number">{{service.quantity}}</td> <td>{{service.taxDescription}}</td> <td class="number">{{service.price | currency('EUR')}}</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"></td> <td class="number">{{$t('total')}} {{serviceTotal | currency('EUR')}}</td> </tr> </tfoot> </table> </section> <!-- End of services block --> <!-- Taxes block --> <section id="taxes" class="size50 pull-right" v-if="taxes"> <h3>{{$t('taxBreakdown')}}</h3> <table class="column-oriented"> <thead> <tr> <td>{{$t('type')}}</td> <td class="number">{{$t('taxBase')}}</td> <td>{{$t('tax')}}</td> <td class="number">{{$t('fee')}}</td> </tr> </thead> <tbody> <tr v-for="tax in taxes"> <td>{{tax.name}}</td> <td class="number">{{tax.Base | currency('EUR')}}</td> <td>{{tax.vatPercent | percent}}</td> <td class="number">{{tax.tax | currency('EUR')}}</td> </tr> </tbody> <tfoot> <tr class="font bold"> <td>{{$t('subtotal')}}</td> <td class="number">{{getTotalBase() | currency('EUR')}}</td> <td></td> <td class="number">{{getTotalTax()| currency('EUR')}}</td> </tr> <tr class="font bold"> <td colspan="2">{{$t('total')}}</td> <td colspan="2" class="number">{{getTotal() | currency('EUR')}}</td> </tr> </tfoot> </table> </section> <!-- End of taxes block --> <!-- Packages block --> <section id="packagings" class="size100" v-if="packagings.length > 0"> <h3>{{$t('packagings')}}</h3> <table class="column-oriented"> <thead> <tr> <td>Id</td> <td>{{$t('concept')}}</td> <td class="number">{{$t('quantity')}}</td> </tr> </thead> <tbody> <tr v-for="packaging in packagings"> <td>{{packaging.itemFk}}</td> <td>{{packaging.name}}</td> <td class="number">{{packaging.quantity}}</td> </tr> </tbody> </table> </section> <!-- End of packages block --> <!-- Signature block --> <section class="size50 pull-left"> <section id="signature" class="panel" v-if="signature && signature.id"> <section class="header">{{$t('digitalSignature')}}</section> <section class="body centered"> <img v-bind:src="dmsPath"/> <section>{{signature.created | date}}</section> </section> </section> </section> <!-- End of signature block --> </section> </section> <!-- Footer component --> <report-footer id="pageFooter" :left-text="$t('ticket', [ticket.id])" :center-text="client.socialName" :locale="client.locale"> </report-footer> <!-- End footer component --> </section> </body> </html>