<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style type="text/css">
body {
font-family: sans-serif;
color: #000;
border-color: #000;
page-break-inside: avoid;
}
/* #invoice-POS {
padding: 2mm;
margin: 0 auto;
max-width: 500px;
background: #FFF;
box-shadow: 0 0 10px #ccc;
} */
#invoice-POS ::selection {
background: #000;
color: #FFF;
}
#invoice-POS ::moz-selection {
background: #000;
color: #FFF;
}
#invoice-POS h1 {
font-size: 1.5em;
color: #222;
}
#invoice-POS h2 {
font-size: 12px;
}
#invoice-POS h3 {
font-size: 1.2em;
font-weight: 300;
line-height: 2em;
}
#invoice-POS p {
font-size: 0.7em;
color: #000;
line-height: 1.2em;
}
#invoice-POS #top, #invoice-POS #mid, #invoice-POS #bot {
/* Targets all id with 'col-' */
border-bottom: 1px dashed #000;
}
/*#invoice-POS #top {
min-height: 100px;
}*/
#invoice-POS #mid {
min-height: 80px;
}
#invoice-POS #bot {
min-height: 50px;
}
#invoice-POS #top .logo {
height: 60px;
width: 60px;
background: url(http://michaeltruong.ca/images/logo1.png) no-repeat;
background-size: 60px 60px;
}
#invoice-POS .clientlogo {
float: left;
height: 60px;
width: 60px;
background: url(http://michaeltruong.ca/images/client.jpg) no-repeat;
background-size: 60px 60px;
border-radius: 50px;
}
#invoice-POS .info {
display: block;
margin-left: 0;
}
#invoice-POS .title {
float: right;
}
#invoice-POS .title p {
text-align: right;
}
#invoice-POS table {
width: 100%;
border-collapse: collapse;
color: #000;
border-color: #000;
}
#invoice-POS .tabletitle {
font-size: 0.5em;
/* background: #EEE;*/
border-bottom: 1px dashed #000;
}
#invoice-POS .service {
border-bottom: 1px solid #EEE;
}
#invoice-POS .item {
width: 65mm;
/* padding: 5px;*/
}
#invoice-POS .itemtext {
font-size: 12px;
}
#invoice-POS #legalcopy {
margin-top: 5mm;
}
.Qty {
min-width: 12mm;
text-align: center;
}
.RateTop {
width: 15mm;
}
.Amount {
width: 15mm;
}
.tabletitle td {
padding: 5px;
}
.TableOrderDetails {
padding: 6px 0px;
margin: 10px 0px;
font-size: 12px;
line-height: 20px;
}
.text-center {
text-align: center;
}
.linsbar td {
padding: 10px 0px;
}
.linsbar tr {
border-bottom: 1px dashed #000;
border-top: 1px dashed #000;
}
.legal {
font-size: 16px !important;
text-align: center;
line-height: 25px !important;
color: #000 !important;
}
</style>
<div id="invoice-POS">
<center id="top">
<!-- <div class="logo"></div> -->
<div class="info">
<h2 style="font-size: 18px;">{{invoice.companyname}}</h2>
<p>{{invoice.companyname}}</p>
<p>{{invoice.address}}</p>
<p>{{invoice.country}}</p>
<p>Phone No: {{invoice.companyphone}}</p>
<p>CIN: {{invoice.cin}}</p>
<p>GSTN: {{invoice.gstn}}</p>
<p>Reg. {{invoice.reg}}</p>
</div><!--End Info-->
</center><!--End InvoiceTop-->
<center id="top">
<p><strong>{{invoice.shopname}}</strong></p>
</center>
<center id="top">
<p><strong>[TAX-INVOICE]</strong></p>
</center>
<div id="mid">
<div class="info">
<table class="TableOrderDetails">
<tr>
<td>Order No.</td>
<td>: {{invoice.orderdetail.orderno}}</td>
</tr>
<tr>
<td>Bill No.</td>
<td>: {{invoice.orderdetail.billno}}</td>
</tr>
<tr>
<td>Order ID.</td>
<td>: {{invoice.orderdetail.orderno}}</td>
</tr>
<tr>
<td>Mobile No.</td>
<td>: {{invoice.orderdetail.mobile}}</td>
</tr>
<tr>
<td>Token No.</td>
<td>: 289</td>
</tr>
<tr>
<td>Date</td>
<td>: {{invoice.orderdetail.date}}</td>
</tr>
</table>
</div>
</div>
<div id="bot">
<div id="table">
<table>
<tr class="tabletitle">
<td class="item"><h2>Description</h2></td>
<td class="Hours Qty"><h2>Qty</h2></td>
<td class="RateTop text-center"><h2>Rate</h2></td>
<td class="Amount text-center"><h2>Amount</h2></td>
</tr>
{{#each invoice.productdetail}}
<tr class="service">
<td class="tableitem"><p class="itemtext">{{this.description}}</p></td>
<td class="tableitem Qty"><p class="itemtext">{{this.qty}}</p></td>
<td class="tableitem text-center"><p class="itemtext">{{this.rate}}</p></td>
<td class="tableitem text-center"><p class="itemtext">{{this.amount}}</p></td>
</tr>
{{/each}}
</table>
</div>
</div>
</div>
</body>
</html>