thephucit/invoice.html

## invoice.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Hoá đơn {{ invoice.code }}</title>
    <style>
        .clearfix:after {
          content: "";
          display: table;
          clear: both;
        }

        a {
          color: #0087C3;
          text-decoration: none;
        }

        body {
          position: relative;
          width: 21cm;
          height: 29.7cm;
          margin: 0 auto;
          color: #555555;
          background: #FFFFFF;
          font-family: Arial, sans-serif;
          font-size: 14px;
        }

        header {
          padding: 10px 0;
          margin-bottom: 20px;
          border-bottom: 1px solid #AAAAAA;
        }

        #logo {
          float: left;
          margin-top: 8px;
        }

        #logo img {
          height: 70px;
        }

        #company {
          float: right;
          text-align: right;
        }


        #details {
          margin-bottom: 50px;
        }

        #client {
          padding-left: 6px;
          border-left: 6px solid #0087C3;
          float: left;
        }

        #client .to {
          color: #777777;
        }

        h2.name {
          font-size: 1.4em;
          font-weight: normal;
          margin: 0;
        }

        #invoice {
          float: right;
          text-align: right;
        }

        #invoice h1 {
          color: #0087C3;
          font-size: 2.4em;
          line-height: 1em;
          font-weight: normal;
          margin: 0  0 10px 0;
        }

        #invoice .date {
          font-size: 1.1em;
          color: #777777;
        }

        table {
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          margin-bottom: 20px;
        }

        table th,
        table td {
          padding: 20px;
          background: #EEEEEE;
          text-align: center;
          border-bottom: 1px solid #FFFFFF;
        }

        table th {
          white-space: nowrap;
          font-weight: normal;
        }

        table td {
          text-align: right;
        }

        table td h3{
          color: #57B223;
          font-size: 1.2em;
          font-weight: normal;
          margin: 0 0 0.2em 0;
        }

        table .no {
          color: #FFFFFF;
          font-size: 1.6em;
          background: #57B223;
        }

        table .desc {
          text-align: left;
        }

        table .unit {
          background: #DDDDDD;
        }

        table .qty {
        }

        table .total {
          background: #57B223;
          color: #FFFFFF;
        }

        table td.unit,
        table td.qty,
        table td.total {
          font-size: 1.2em;
        }

        table tbody tr:last-child td {
          border: none;
        }

        table tfoot td {
          padding: 10px 20px;
          background: #FFFFFF;
          border-bottom: none;
          font-size: 1.2em;
          white-space: nowrap;
          border-top: 1px solid #AAAAAA;
        }

        table tfoot tr:first-child td {
          border-top: none;
        }

        table tfoot tr:last-child td {
          color: #57B223;
          font-size: 1.4em;
          border-top: 1px solid #57B223;

        }

        table tfoot tr td:first-child {
          border: none;
        }

        #thanks{
          font-size: 2em;
          margin-bottom: 50px;
        }

        #notices{
          padding-left: 6px;
          border-left: 6px solid #0087C3;
        }

        #notices .notice {
          font-size: 1.2em;
        }

        footer {
          color: #777777;
          width: 100%;
          height: 30px;
          position: absolute;
          bottom: 0;
          border-top: 1px solid #AAAAAA;
          padding: 8px 0;
          text-align: center;
        }
    </style>
</head>

<body>
    <header class="clearfix">
        <div id="logo">
            <img src="{{ setting.logo.getPath() }}">
        </div>
        <div id="company">
            <h2 class="name">{{ setting.company_name }}</h2>
            <div>{{ setting.company_address }}</div>
            <div>{{ setting.company_phone }}</div>
            <div><a href="mailto:{{ setting.company_email }}">{{ setting.company_email }}</a></div>
        </div>
        </div>
    </header>
    <main>
        <div id="details" class="clearfix">
            <div id="client">
                <div class="to">HOÁ ĐƠN ĐẾN:</div>
                <h2 class="name">{{ invoice.customer.name }}</h2>
                <div class="address">{{ invoice.customer.street }}</div>
                <div class="email"><a href="mailto:{{ invoice.customer.email }}">{{ invoice.customer.email }}</a></div>
            </div>
            <div id="invoice">
                <h1>{{ invoice.code }}</h1>
                <div class="date">Ngày lập hoá đơn: {{ invoice.date_make_invoice.format('d/m/Y') }}</div>
                <div class="date">Ngày hết hạn: {{ invoice.date_expried_invoice.format('d/m/Y') }}</div>
            </div>
        </div>
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th class="no">#</th>
                    <th class="desc">SẢN PHẨM</th>
                    <th class="unit">ĐƠN GIÁ</th>
                    <th class="qty">SỐ LƯỢNG</th>
                    <th class="total">THÀNH TIỀN</th>
                </tr>
            </thead>
            <tbody>
                {% for item in invoice.items %}
                    <tr>
                        <td class="no" style="text-align: center">{{ loop.index }}</td>
                        <td class="desc">
                            <h3>{{ item.material.name }}</h3>
                        </td>
                        <td class="unit">{{ item.price | number_format }} {{ invoice.currency.name }}</td>
                        <td class="qty">{{ item.quantity | number_format }}</td>
                        <td class="total">{{ item.totalWithoutTax() | number_format }} {{ invoice.currency.name }}</td>
                    </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2"></td>
                    <td colspan="2">TỔNG PHỤ</td>
                    <td>{{ invoice.subtotal() | number_format }} {{ invoice.currency.name }}</td>
                </tr>

                {% for item in invoice.items %}
                    {% if (item.tax) %}
                        <tr>
                            <td colspan="2"></td>
                            <td colspan="2">{{ item.tax.name }}</td>
                            <td>{{ item.totalWithTax() | number_format }} {{ invoice.currency.name }}</td>
                        </tr>
                    {% endif %}
                {% endfor %}

                {% if (invoice.invoice_discount) %}
                    <tr>
                        <td colspan="2"></td>
                        <td colspan="2">GIẢM GIÁ</td>
                        <td>{{ invoice.discount() | number_format }} {{ invoice.currency.name }}</td>
                    </tr>
                {% endif %}

                <tr>
                    <td colspan="2"></td>
                    <td colspan="2">TỔNG CỘNG</td>
                    <td>{{ invoice.total() | number_format }} {{ invoice.currency.name }}</td>
                </tr>
            </tfoot>
        </table>
        <div id="thanks">Cảm ơn!</div>
        <div id="notices">
            <div>Lưu ý:</div>
            <div class="notice">Khoản phí tài chính 1,5% sẽ được thực hiện trên số dư chưa thanh toán sau 30 ngày.</div>
        </div>
    </main>
    <footer>Hoá đơn được tạo bởi phần mềm kế toán Công Ty TNHH Cỏ May.</footer>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Hoá đơn {{ invoice.code }}</title>
	<style>
	.clearfix:after {
	content: "";
	display: table;
	clear: both;
	}

	a {
	color: #0087C3;
	text-decoration: none;
	}

	body {
	position: relative;
	width: 21cm;
	height: 29.7cm;
	margin: 0 auto;
	color: #555555;
	background: #FFFFFF;
	font-family: Arial, sans-serif;
	font-size: 14px;
	}

	header {
	padding: 10px 0;
	margin-bottom: 20px;
	border-bottom: 1px solid #AAAAAA;
	}

	#logo {
	float: left;
	margin-top: 8px;
	}

	#logo img {
	height: 70px;
	}

	#company {
	float: right;
	text-align: right;
	}


	#details {
	margin-bottom: 50px;
	}

	#client {
	padding-left: 6px;
	border-left: 6px solid #0087C3;
	float: left;
	}

	#client .to {
	color: #777777;
	}

	h2.name {
	font-size: 1.4em;
	font-weight: normal;
	margin: 0;
	}

	#invoice {
	float: right;
	text-align: right;
	}

	#invoice h1 {
	color: #0087C3;
	font-size: 2.4em;
	line-height: 1em;
	font-weight: normal;
	margin: 0 0 10px 0;
	}

	#invoice .date {
	font-size: 1.1em;
	color: #777777;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 20px;
	}

	table th,
	table td {
	padding: 20px;
	background: #EEEEEE;
	text-align: center;
	border-bottom: 1px solid #FFFFFF;
	}

	table th {
	white-space: nowrap;
	font-weight: normal;
	}

	table td {
	text-align: right;
	}

	table td h3{
	color: #57B223;
	font-size: 1.2em;
	font-weight: normal;
	margin: 0 0 0.2em 0;
	}

	table .no {
	color: #FFFFFF;
	font-size: 1.6em;
	background: #57B223;
	}

	table .desc {
	text-align: left;
	}

	table .unit {
	background: #DDDDDD;
	}

	table .qty {
	}

	table .total {
	background: #57B223;
	color: #FFFFFF;
	}

	table td.unit,
	table td.qty,
	table td.total {
	font-size: 1.2em;
	}

	table tbody tr:last-child td {
	border: none;
	}

	table tfoot td {
	padding: 10px 20px;
	background: #FFFFFF;
	border-bottom: none;
	font-size: 1.2em;
	white-space: nowrap;
	border-top: 1px solid #AAAAAA;
	}

	table tfoot tr:first-child td {
	border-top: none;
	}

	table tfoot tr:last-child td {
	color: #57B223;
	font-size: 1.4em;
	border-top: 1px solid #57B223;

	}

	table tfoot tr td:first-child {
	border: none;
	}

	#thanks{
	font-size: 2em;
	margin-bottom: 50px;
	}

	#notices{
	padding-left: 6px;
	border-left: 6px solid #0087C3;
	}

	#notices .notice {
	font-size: 1.2em;
	}

	footer {
	color: #777777;
	width: 100%;
	height: 30px;
	position: absolute;
	bottom: 0;
	border-top: 1px solid #AAAAAA;
	padding: 8px 0;
	text-align: center;
	}
	</style>
	</head>

	<body>
	<header class="clearfix">
	<div id="logo">
	<img src="{{ setting.logo.getPath() }}">
	</div>
	<div id="company">
	<h2 class="name">{{ setting.company_name }}</h2>
	<div>{{ setting.company_address }}</div>
	<div>{{ setting.company_phone }}</div>
	<div><a href="mailto:{{ setting.company_email }}">{{ setting.company_email }}</a></div>
	</div>
	</div>
	</header>
	<main>
	<div id="details" class="clearfix">
	<div id="client">
	<div class="to">HOÁ ĐƠN ĐẾN:</div>
	<h2 class="name">{{ invoice.customer.name }}</h2>
	<div class="address">{{ invoice.customer.street }}</div>
	<div class="email"><a href="mailto:{{ invoice.customer.email }}">{{ invoice.customer.email }}</a></div>
	</div>
	<div id="invoice">
	<h1>{{ invoice.code }}</h1>
	<div class="date">Ngày lập hoá đơn: {{ invoice.date_make_invoice.format('d/m/Y') }}</div>
	<div class="date">Ngày hết hạn: {{ invoice.date_expried_invoice.format('d/m/Y') }}</div>
	</div>
	</div>
	<table border="0" cellspacing="0" cellpadding="0">
	<thead>
	<tr>
	<th class="no">#</th>
	<th class="desc">SẢN PHẨM</th>
	<th class="unit">ĐƠN GIÁ</th>
	<th class="qty">SỐ LƯỢNG</th>
	<th class="total">THÀNH TIỀN</th>
	</tr>
	</thead>
	<tbody>
	{% for item in invoice.items %}
	<tr>
	<td class="no" style="text-align: center">{{ loop.index }}</td>
	<td class="desc">
	<h3>{{ item.material.name }}</h3>
	</td>
	<td class="unit">{{ item.price \| number_format }} {{ invoice.currency.name }}</td>
	<td class="qty">{{ item.quantity \| number_format }}</td>
	<td class="total">{{ item.totalWithoutTax() \| number_format }} {{ invoice.currency.name }}</td>
	</tr>
	{% endfor %}
	</tbody>
	<tfoot>
	<tr>
	<td colspan="2"></td>
	<td colspan="2">TỔNG PHỤ</td>
	<td>{{ invoice.subtotal() \| number_format }} {{ invoice.currency.name }}</td>
	</tr>

	{% for item in invoice.items %}
	{% if (item.tax) %}
	<tr>
	<td colspan="2"></td>
	<td colspan="2">{{ item.tax.name }}</td>
	<td>{{ item.totalWithTax() \| number_format }} {{ invoice.currency.name }}</td>
	</tr>
	{% endif %}
	{% endfor %}

	{% if (invoice.invoice_discount) %}
	<tr>
	<td colspan="2"></td>
	<td colspan="2">GIẢM GIÁ</td>
	<td>{{ invoice.discount() \| number_format }} {{ invoice.currency.name }}</td>
	</tr>
	{% endif %}

	<tr>
	<td colspan="2"></td>
	<td colspan="2">TỔNG CỘNG</td>
	<td>{{ invoice.total() \| number_format }} {{ invoice.currency.name }}</td>
	</tr>
	</tfoot>
	</table>
	<div id="thanks">Cảm ơn!</div>
	<div id="notices">
	<div>Lưu ý:</div>
	<div class="notice">Khoản phí tài chính 1,5% sẽ được thực hiện trên số dư chưa thanh toán sau 30 ngày.</div>
	</div>
	</main>
	<footer>Hoá đơn được tạo bởi phần mềm kế toán Công Ty TNHH Cỏ May.</footer>
	</body>

	</html>