<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Corporate Invoice</title>
<meta charset="utf-8"/>
<link type="text/css" href="invoice.css" rel="stylesheet" />
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body class="main" data-ng-app="invoiceApp" data-ng-controller="invoiceController">
<div class="companyinformation"><img class="logo" alt="Company Logo" data-ng-src="{{data.vendor.logo}}" />
<div>{{data.vendor.companyname}}</div>
<div>{{data.vendor.address}}</div>
<div>{{data.vendor.zip}} {{data.vendor.city}}</div>
<div>{{data.vendor.country}}</div>
<div class="spacing">Tel. {{data.vendor.tel}}</div>
<div>Fax {{data.vendor.fax}}</div>
<div>E-Mail {{data.vendor.email}}</div>
</div>
<div class="addressline">{{data.vendor.companyname}} - {{data.vendor.address}} - {{data.vendor.zip}} {{data.vendor.city}} - {{data.vendor.country}}</div>
<div class="recipient">
<div>{{data.orderer.companyname}}</div>
<div>Attn: {{data.orderer.personname}}</div>
<div data-ng-repeat="addressLine in data.orderer.address">
{{addressLine}}
</div>
<div>{{data.orderer.zip}} {{data.orderer.city}}</div>
<div>{{data.orderer.country | uppercase}}</div>
</div>
<div class="descbox">
<div class="descboxheader">
Invoice
</div>
<div class="descboxcontent">
<table>
<tr>
<td>Process no.:</td>
<td>{{data.voucher.processno}}</td>
</tr>
<tr>
<td>Voucher no.:</td>
<td class="invoice">{{data.voucher.no}}</td>
</tr>
<tr>
<td>Date:</td>
<td>{{data.voucher.date | formatAsDate:data.vendor.locale}}</td>
</tr>
<tr>
<td>Client reference no:</td>
<td>{{data.voucher.clientrefid}}</td>
</tr>
</table>
</div>
</div>
<div class="header">
<table class="header header-footer">
<tr>
<td class="invoicetext"></td>
<td class="right subtotaltext"></td>
<td class="right currency"></td>
<td class="subtotal"></td>
</tr>
</table>
</div>
<div class="footer">
<table class="footer header-footer">
<tr>
<td class="pagecounter"></td>
<td class="right subtotaltext"></td>
<td class="right currency"></td>
<td class="subtotal"></td>
</tr>
</table>
</div>
<p class="companyinfo">
{{data.vendor.companyname}} - {{data.vendor.register}} - Geschäftsführer: {{data.vendor.director}}<br />
{{data.vendor.bankname}} - BLZ: {{data.vendor.bankcode}} - Kto.-Nr: {{data.vendor.bankaccno}} - Swift Code: {{data.vendor.swiftbic}} - USt.IdNr: {{data.vendor.vatid}} - St-Nr: {{data.vendor.taxno}}<br />
Disclaimer: All data on this page is completely fictional. Any similarity to real data is purely coincidental.<br />There is no representation that this data is accurate, complete or current.
</p>
<hr class="invisible" />
<div class="infotable">
<table class="infotable">
<tr>
<td>Valid until</td>
<td></td>
<td>Reference</td>
<td>{{data.voucher.clientrefid}}</td>
<td>Our VAT-ID no.</td>
<td>{{data.vendor.vatid}}</td>
</tr>
<tr>
<td>Shipment</td>
<td>e-mail</td>
<td>Your sign</td>
<td>{{data.orderer.personname}}</td>
<td>Our sign</td>
<td>{{data.vendor.sign}}</td>
</tr>
<tr>
<td>Terms of shipment</td>
<td>Standard</td>
<td>Your voucher</td>
<td>{{data.voucher.no}}</td>
<td>Your VAT-ID no.</td>
<td>{{data.orderer.vatid}}</td>
</tr>
</table>
</div>
<table class="postable">
<thead>
<tr class="postheader">
<td style="padding-right: 1.5mm">Pos.</td>
<td style="padding-right: 1.5mm">Art.-No.</td>
<td style="width:11cm">Description</td>
<td class="right">Qty. Unit</td>
<td class="right">Unit Price</td>
<td class="right">Total Price</td>
<td style="text-align:right">TC</td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="position in data.positions">
<td class="position" />
<td>{{position.khkid | formatAsArticleNumber}}</td>
<td>
<div>{{position.articletitle}}</div>
<div data-ng-repeat="desc in position.articledesc">
{{desc}}
</div>
</td>
<td class="right">{{position.qty}} {{position.unit}}</td>
<td class="right">{{position.unitprice | formatAsValue:data.vendor.locale}}</td>
<td class="right">{{position.total | formatAsValue:data.vendor.locale}}
<div class="sum-subtotal">{{position.subtotal | formatAsValue:data.vendor.locale}}</div>
</td>
<td style="text-align:right">{{data.vat.code}}</td>
</tr>
<tr class="postfooter">
<td></td>
<td></td>
<td></td>
<td class="right">Subtotal</td>
<td class="right">{{data.vendor.currency}}</td>
<td class="subtotal">{{data.subtotal | formatAsValue:data.vendor.locale}}</td>
<td style="text-align:right" />
</tr>
<tr class="postfooter postfootercontent">
<td></td>
<td></td>
<td>VAT with TC {{data.vat.code}}</td>
<td class="right">{{data.vat.value | formatAsPercentage:data.vendor.locale}} of</td>
<td class="right">{{data.subtotal | formatAsValue:data.vendor.locale}}</td>
<td class="right">{{data.subtotalVat | formatAsValue:data.vendor.locale}}</td>
<td></td>
</tr>
<tr class="postfooter">
<td></td>
<td></td>
<td></td>
<td class="right">Total</td>
<td class="right">{{data.vendor.currency}}</td>
<td class="subtotal">{{data.totalWithVat | formatAsValue:data.vendor.locale}}</td>
<td></td>
</tr>
</tbody>
</table>
<div class="footer">
<table class="footer header-footer">
<tr>
<td class="pagecounter"></td>
<td class="right subtotaltext"></td>
<td class="right currency"></td>
<td class="subtotal"></td>
</tr>
</table>
</div>
<div class="posttext">
<p>The invoice amount must be paid with indication of the "Voucher no." by remittance to our bank account indicated below free of bank charges for us.
You may also send us a collection-only check in the currency mentioned above.</p>
<p>Account Holder: {{data.vendor.companyname}}<br /> Account Number: {{data.vendor.bankaccno}}<br /> IBAN: {{data.vendor.iban}}<br /> Bank Name: {{data.vendor.bankname}}<br /> Bank Address: {{data.vendor.bankaddress}}<br /> Bank SWIFT/BIC Code: {{data.vendor.swiftbic}}<br /> Bank Code: {{data.vendor.bankcode}}</p>
<div class="datamatrix" style="float: right; width: 2cm;" message="{{data.voucher.processno}};{{data.voucher.no}};{{data.voucher.date | formatAsDate:data.vendor.locale}};{{data.voucher.clientrefid}};{{data.totalWithVat | formatAsValue:data.vendor.locale}};{{data.orderer.companyname}};{{data.orderer.personname}}">
</div>
<p class="terms">Terms of payment:</p>
<p>10 Days without deduction {{data.totalWithVat | formatAsCurrency:data.vendor.locale:data.vendor.currency}}</p>
</div>
</body>
</html>