<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="{$charset}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$companyname} - {$pagetitle}</title>

    <link href="{$WEB_ROOT}/assets/fonts/css/fontawesome.min.css" rel="stylesheet">
    <link href="{$WEB_ROOT}/assets/fonts/css/fontawesome-solid.min.css" rel="stylesheet">
    <link href="{$WEB_ROOT}/assets/fonts/css/fontawesome-regular.min.css" rel="stylesheet">
    <link href="{$WEB_ROOT}/assets/fonts/css/fontawesome-light.min.css" rel="stylesheet">
    <link href="{$WEB_ROOT}/assets/fonts/css/fontawesome-brands.min.css" rel="stylesheet">
    <link href="{$WEB_ROOT}/assets/fonts/css/fontawesome-duotone.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{$WEB_ROOT}/templates/lagom2/core/styles/modern/assets/css/vars/minified.css">
    <link rel="stylesheet" href="{$WEB_ROOT}/templates/lagom2/assets/css/theme.css">
    <script>var whmcsBaseUrl = "{$WEB_ROOT}";</script>
    <script src="{$WEB_ROOT}/templates/twenty-one/js/scripts.min.js?v={$versionHash}"></script>
    
</head>
<body>
    <div class="main-body">
        <div class="container">
            <div class="main-grid">
                <div class="main-content">
                    <div class="invoice invoice-debit-note">
                        <div class="section">
                            <div class="section-body">
                                <div class="row">
                                    <div class="col-md-7">
                                        {if $logo}
                                            <p><img src="{$logo}" title="{$companyname}" /></p>
                                        {else}
                                            <h2 class="invoice-title">{$companyname}</h2>
                                        {/if}
                                        <h3>{$pagetitle}</h3>
                                    </div>
                                    <div class="col-md-5">
                                        <ul class="list-info list-info-50">
                                            <li>
                                                <span class="list-info-text">{lang key='billing.issuedate'}</span>
                                                <span class="list-info-title">{$dateIssued}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section">
                            <div class="section-body">
                                <div class="row">
                                    <div class="col-md-7">
                                        <h3>{lang key='billing.issuedby'}</h3>
                                        <address>
                                            {$issuedBy}
                                            {if $taxCode}<br />{$taxIdLabel}: {$taxCode}{/if}
                                        </address>
                                    </div>
                                    <div class="col-md-5">
                                        <h3>{lang key='billing.issuedto'}</h3>
                                        <address class="small-text">
                                            {if $clientsdetails.companyname}{$clientsdetails.companyname}<br />{/if}
                                            {$clientsdetails.firstname} {$clientsdetails.lastname}<br />
                                            {$clientsdetails.address1}, {$clientsdetails.address2}<br />
                                            {$clientsdetails.city}, {$clientsdetails.state}, {$clientsdetails.postcode}<br />
                                            {$clientsdetails.country}
                                            {if $clientsdetails.tax_id}
                                                <br />{$taxIdLabel}: {$clientsdetails.tax_id}
                                            {/if}
                                            {if $customfields}
                                                <br /><br />
                                                {foreach $customfields as $customfield}
                                                    {$customfield.fieldname}: {$customfield.value}<br />
                                                {/foreach}
                                            {/if}
                                        </address>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section">
                            <h3>{$itemTableTitle}</h3>
                            <div class="section-body">
                                <div class="table-responsive">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <th width="61%">{lang key='invoicesdescription'}</th>
                                                <th width="20%"></th>
                                                <th width="19%">{lang key='invoicesamount'}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {foreach $billingNote->lineItems as $item}
                                            <tr>
                                                <td colspan="2">{$item->description}{if $item->isTaxed eq "true"} *{/if}</td>
                                                <td>{$item->amount}</td>
                                            </tr>
                                        {/foreach}
                                        <tr class="sub-total-row first">
                                            <td></td>
                                            <td>{lang key='invoicessubtotal'}</td>
                                            <td>{$billingNote->subTotal}</td>
                                        </tr>
                                        {foreach $billingNote->taxes as $tax}
                                            <tr class="sub-total-row last">
                                                <td></td>
                                                <td>{$tax->rate} {$tax->name}</td>
                                                <td>{$tax->price}</td>
                                            </tr>
                                        {/foreach}
                                            <tr class="total-row">
                                                <td></td>
                                                <td><strong>{lang key='invoicestotal'}</strong></td>
                                                <td>{$billingNote->total}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        {if $taxrate}
                            <p>* {lang key='invoicestaxindicator'}</p>
                        {/if}
                        <div class="section">
                            <h3>{lang key='billing.ledger.title'}</h3>
                            <div class="section-body">
                                <div class="table-responsive">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <th width="41%">{lang key='billing.ledger.date'}</td>
                                                <th width="20%">{lang key='billing.ledger.type'}</td>
                                                <th width="20%">{lang key='billing.ledger.reference'}</td>
                                                <th width="19%">{lang key='invoicestransamount'}</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {foreach $transactions as $transaction}
                                                <tr>
                                                    <td>{$transaction->clientDate}</td>
                                                    <td>{$transaction->typeLabel}</td>
                                                    <td>{$transaction->clientReferenceId}</td>
                                                    <td>{$transaction->amount}</td>
                                                </tr>
                                                {foreachelse}
                                                <tr>
                                                    <td colspan="4">{lang key='invoicestransnonefound'}</td>
                                                </tr>
                                            {/foreach}
                                            <tr class="total-row">
                                                <td></td>
                                                <td></td>
                                                <td>{lang key='invoicesbalance'}</td>
                                                <td>{$billingNote->balance}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="debit-note-action d-print-none mt-4">
                            <a href="javascript:window.print()" class="btn btn-default"><i class="fas fa-print"></i> {lang key='print'}</a>
                        </div>

                    </div>
                    <p class="text-center d-print-none mt-4">
                        <a class="btn btn-link" href="{$WEB_ROOT}/clientarea.php?action=invoices">{lang key='invoicesbacktoclientarea'}</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>