<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="Asset/font-awesome.min.css">
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 100%;
        }

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

        td {
            padding: 2px;
        }

        tbody tr:nth-child(odd) {
            background: #eee;
        }
    </style>
</head>

<body style="font-family:FontAwesome; margin:5%">
    <div>
        <div style="padding-bottom: 5%">
            <h1 style='float:left'>
                <b>Employee Service Sales Performance and Commission Report</b>
            </h1>
            <br style="clear:both;">
        </div>
        <div style="width: 100%;overflow: hidden;">
            <div style="float: left; line-height:50%">
                <h3>Company Name : {{config.company_name}}</h3>
                <h3>Time From : {{datetime_start}}</h3>
                <h3>Time To : {{datetime_end}}</h3>
            </div>
        </div>
        <div>
            {{#each user}}
            <div style="line-height:40px;padding:12px; margin-top:5%;overflow:hidden;text-align: center;font-size:16px;font-weight: 500;border:1px solid rgb(202,203,204);">
                <div style="float:left;width:33%;text-align: left; font-size:20px; font-weight:bold;">{{name}}</div>
                <div style="float:left;width:33%;text-align: center;">Transaction Amount: {{currency_symbol}}{{ Sum 'actual_price' itemized}}</div>
                <div style="float:left;width:33%;text-align: right;">Total Number of Service: {{Count itemized}}</div>
            </div>
            <table style="font-size:18px;width: 100%; text-align:left;">
                <col width="40%">
                <col width="20%">
                <col width="20%">
                <col width="20%">
                <tbody>
	                <tr style="font-size:18px;">
	                    <td>Invoice Reference Id</td>
	                    <td>Service Name</td>
	                    <td>Actual Price</td>
	                    <td>Datetime</td>
	                </tr>
	              
	                {{#each itemized}}
	                <tr>
	                    <td>{{invoice_ref_id}}</td>
	                    <td>{{item.name}}</td>
	                    <td>{{actual_price}}</td>
	                    <td>{{datetime}}</td>
	                </tr>
	                {{/each}}
                </tbody>
            </table>
            {{/each}}
        </div>
    </div>
</body>

</html>
