<!DOCTYPE html>
<!-- done -->
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="Asset/font-awesome.min.css">
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        html {
            width: 100%;
        }

        .w-100p {
            width: 100%;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        div h3 {
            margin: 10px 0;
        }

        th, td {
            text-align: left;
            border: 1px solid #ccc;
        }

        .head-info {
            float: left;
            width: 50%;
        }

        .invoice-info-table {
            width: 100%;
            font-size: 18px;
            text-align: left;
        }

        .total-table-box {
            float: right;
            width: 36%;
            font-weight: bold;
            /* margin-top:5%; */
            margin-bottom: 3%;
            font-size: 20px;
        }

        tbody tr:nth-child(odd) {
            background: #eee;
        }

        .total-table {
            width: 100%;
        }

            .total-table td:nth-child(2) {
                padding-left: 20px
            }
    </style>
</head>
<body style="font-family:FontAwesome; margin:20px">
    <div class="w-100p">
        <div style="padding-bottom: 1rem; float:left;">
            <h1><b>INVOICE REPORT</b></h1><br style="clear:both;">
        </div>
        <div class="total-table-box">
            <table class="total-table">
                <tr>
                    <td>Total</td>
                    <td>S$ {{Sum 'grand_total' invoice_close}}</td>
                </tr>

                <tr>
                    <td>Total Tax</td>
                    <td>S$ {{Sum 'tax' invoice_close}}</td>
                </tr>
                {{#each payment}}
                <tr>
                    <td>{{ name }}</td>
                    <td>S$ {{subtotal}}</td>
                </tr>
                {{/each}}
            </table>
        </div>
        <div class="head-info">
            <div>
                <h3>Company Name : {{config.company_name}}</h3>
                <h3>Time From : {{datetime_start}}</h3>
                <h3>Time To : {{datetime_end}}</h3>
            </div>
        </div>
        <div class="w-100p">
            <table class="invoice-info-table">
                <tbody>
                    <tr style="font-size: 18px; font-weight: 600;">
                        <td>Invoice No.</td>
                        <td>Subtotal</td>
                        <td>Discount</td>
                        <td>GST</td>
                        <td>Ser.Charge</td>
                        <td>Payment</td>
                        <td>Total</td>
                        <td>DateTime</td>
                    </tr>
                    {{#each invoice_close}}
                    <tr>
                        <td>{{ref_id}}</td>
                        <td>{{subtotal}}</td>
                        <td>{{discount_amount}}</td>
                        <td>{{tax}}</td>
                        <td>{{service_charge}}</td>
                        <td>{{payment.0.payment_method.name}}</td>
                        <td>{{grand_total}}</td>
                        <td>{{datetime_close}}</td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>

    </div>
</body>
</html>
