<table class="table table-hover portlet light bg-inverse" id="repTable" style="width: 100%;">
    <thead>
        <tr>
            <th style="width: 10px !important;">#</th>
            <th>   Pt. Code</th>
            <th>   Reg. Date</th>
            <th >   Pt. Ref No.</th>
            <th>   Pt. Name</th>
            <th style="text-align:left ;">
                <span style="float:left ; width: 80%;">Service</span>
                <span style="float:right ; width: 20%;">Price</span>
            </th>
            <!--th>   Service      </th>
            <th>   Service    Price  </th-->
            <th>   Amount Due   </th>
            <th>   Vat   </th>
            <th>  Total  Amount Due   </th>
        </tr>
    </thead>
    <tbody>
        {assign var="i" value="1"}
        {foreach $allData as $data}
        <tr class="odd " >
            <td>{$i}</td>
            <td>{$data.code}</td>
            <td>{$data.visitdate}</td>
            <td>{$data.statusno}</td>
            <td>
                <a href="{$hosturl}/controllers/patienthistory.php?ac=show&patientid={$data.patientid}"
                   target="_new">{$data.patient_name}    </a>
            </td>
            <td>{$data.testsWithPrice}</td>
            <!--td>{$data.tests}</td>
            <td>{$data.price}</td-->
            <td>{$data.cost}</td>
            <td>{$data.vat}</td>
            <td>{$data.total}</td>
        </tr>
        {assign var="i" value={$i+1}}
        {/foreach}
    </tbody>
</table>

<div id="totalDiv">
    {if !empty($allData)}
    <table class="table table-hover portlet light bg-inverse ">
        <tr>
        <tr>
            <th>   Amount Due      </th>
            <td>{$totalCost} </td>
            <th>   Vat     </th>
            <td>{$totalVat} </td>
            <th>  Total  Amount Due     </th>
            <td>{$totalDue} </td>
        </tr>
    </table>
    {/if}
</div>


{literal}
<script type="text/javascript" >
    $('#repTable').dataTable({"scrollX": true});
</script>
{/literal}