{include file="{$template}/header.tpl"}

{if isset($RSThemes['pages'][$templatefile]) && file_exists($RSThemes['pages'][$templatefile]['fullPath'])}
    {include file=$RSThemes['pages'][$templatefile]['fullPath']}
{else}
    {if $invalidInvoiceIdRequested}
        {include file="$template/includes/alert.tpl" type="danger" msg=$LANG.invoiceserror}
        {include file="{$template}/footer.tpl"}
    {else}
        {if $paymentmethod|strstr:"Bank Transfer"}
            {assign var="bankTransfer" value=true}
        {/if}
        <div class="invoice">
            {* custom alert that can be provided by the hooks (ClientAreaPageViewInvoice for example) *}
            {if isset($customAlert) && is_array($customAlert)}
                {include file="$template/includes/alert.tpl" type="success" msg=$customAlert.message}
            {elseif $paymentSuccessAwaitingNotification}
                {include file="$template/includes/alert.tpl" type="success" msg=$LANG.invoicePaymentSuccessAwaitingNotify}
            {elseif $paymentSuccess}
                {include file="$template/includes/alert.tpl" type="success" msg=$LANG.invoicepaymentsuccessconfirmation}
            {elseif $paymentInititated}
                {include file="$template/includes/alert.tpl" type="info" msg=$LANG.invoicePaymentInitiated}
            {elseif $pendingReview}
                {include file="$template/includes/alert.tpl" type="info" msg=$LANG.invoicepaymentpendingreview}
            {elseif $paymentFailed}
                {include file="$template/includes/alert.tpl" type="danger" msg=$LANG.invoicepaymentfailedconfirmation}
            {elseif $offlineReview}
                {include file="$template/includes/alert.tpl" type="info" msg=$LANG.invoiceofflinepaid}
            {/if}
            <div class="section">
                <div class="section-body">
                    <div class="row">
                        <div class="col-md-7">
                            <span class="invoice-title"> {$pagetitle}
                                {if $status eq "Draft"}
                                    <span class="invoice-status label {if $RSThemes.styles.name != "modern"}label-lg{/if} label-info">{$LANG.invoicesdraft}</span>                                    
                                {elseif $status eq "Unpaid"}
                                    <span class="invoice-status label {if $RSThemes.styles.name != "modern"}label-lg{/if} label-danger">{$LANG.invoicesunpaid}</span>
                                {elseif $status eq "Paid"}
                                    <span class="invoice-status label {if $RSThemes.styles.name != "modern"}label-lg{/if} label-success">{$LANG.invoicespaid}</span>                                   
                                {elseif $status eq "Refunded"}
                                    <span class="invoice-status label {if $RSThemes.styles.name != "modern"}label-lg{/if} label-info">{$LANG.invoicesrefunded}</span>                                          
                                {elseif $status eq "Cancelled"}
                                    <span class="invoice-status label {if $RSThemes.styles.name != "modern"}label-lg{/if} label-info">{$LANG.invoicescancelled}</span>         
                                {elseif $status eq "Collections"}
                                    <span class="invoice-status label {if $RSThemes.styles.name != "modern"}label-lg{/if} label-info">{$LANG.invoicescollections}</span>         
                                {elseif $status eq "Payment Pending"}
                                    <span class="invoice-status label {if $RSThemes.styles.name != "modern"}label-lg{/if} label-warning">{$LANG.invoicesPaymentPending}</span>          
                                {/if}
                            </span>
                        </div>
                        <div class="col-md-5">
                            <ul class="list-info list-info-50">
                                <li>
                                    <span class="list-info-text">{$LANG.invoicesdatecreated}</span>
                                    <span class="list-info-title">{$date}</span>
                                </li>
                                {if $status eq "Unpaid" || $status eq "Draft"}
                                    <li>
                                        <span class="list-info-text">{$LANG.invoicesdatedue}</span>
                                        <span class="list-info-title">{$datedue}</span>
                                    </li>
                                {/if}
                                {if $status neq "Unpaid"}
                                    {if $RSThemes.pages.viewinvoice.config.displayDueWhenPaid}
                                        <li>
                                            <span class="list-info-text">{$LANG.invoicesdatedue}</span>
                                            <span class="list-info-title">{$datedue}</span>
                                        </li>
                                    {/if}
                                    <li>
                                        <span class="list-info-text">{$LANG.orderpaymentmethod}</span>
                                        <span class="list-info-title">{$paymentmethod}{if $paymethoddisplayname} ({$paymethoddisplayname}){/if}</span>
                                    </li>
                                {/if}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="section-body">
                    <div class="row">
                        <div class="col-md-7">
                            <h3>{$LANG.invoicespayto}:</h3>
                            <address>
                                {$payto}
                                {if $taxCode}<br />{$taxIdLabel}: {$taxCode}{/if}
                            </address>
                        </div>
                        <div class="col-md-5">
                            <h3>{$LANG.invoicesinvoicedto}:</h3>
                            <address> 
                                {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 from=$customfields item=customfield}
                                {$customfield.fieldname}: {$customfield.value}<br />
                                {/foreach}
                                {/if}
                            </address>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section">
                <h3>{$LANG.invoicelineitems}</h3>
                <div class="section-body">
                    <div class="table-responsive">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <th width="61%">{$LANG.invoicesdescription}</th>
                                    <th width="20%"></th>
                                    <th width="19%" class="">{$LANG.invoicesamount}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {foreach from=$invoiceitems item=item}
                                    <tr>
                                        <td colspan="2">{$item.description}{if $item.taxed eq "true"} *{/if}</td>
                                        <td class="">{$item.amount}</td>
                                    </tr>
                                {/foreach}
                                <tr class="sub-total-row first">
                                    <td></td>
                                    <td>{$LANG.invoicessubtotal}</td>
                                    <td>{$subtotal}</td>
                                </tr>
                                {if $taxname}
                                    <tr class="sub-total-row">
                                        <td></td>
                                        <td>{$taxrate}% {$taxname}</td>
                                        <td>{$tax}</td>
                                    </tr>
                                {/if}
                                {if $taxname2}
                                    <tr class="sub-total-row">
                                        <td></td>
                                        <td>{$taxrate2}% {$taxname2}</td>
                                        <td>{$tax2}</td>
                                    </tr>
                                {/if}
                                <tr class="sub-total-row last">
                                    <td></td>
                                    <td>{$LANG.invoicescredit}</td>
                                    <td>{$credit}</td>
                                </tr>
                                <tr class="total-row">
                                    <td></td>
                                    <td>{$LANG.invoicestotal}</td>
                                    <td>{$invoiceamount}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    {if $taxrate}
                        <p>* {$LANG.invoicestaxindicator}</p>
                    {/if}
                </div>
            </div>

            <div class="section">
                <h3>{lang key='billing.ledger.title'}</h3>
                <div class="section-body">
                    <div class="table table-condensed m-b-0">    
                        <table class="table table-condensed m-b-0">
                            <thead>
                                <tr>
                                    <th width="41%" class="">{lang key='billing.ledger.date'}</td>
                                    <th width="20%" class="">{lang key='billing.ledger.type'}</td>
                                    <th width="20%" class="">{lang key='billing.ledger.reference'}</td>
                                    <th width="19%" class="">{lang key='invoicestransamount'}</td>
                                </tr>
                            </thead>
                            <tbody>
                                {foreach from=$transactions item=transaction}
                                    <tr>
                                        <td class="">{$transaction.date}</td>
                                        <td class="">
                                            {if $transaction.gateway}
                                                {$transaction.gateway} &mdash;
                                            {/if}
                                            {$transaction.typeLabel}
                                        </td>
                                        <td class="">
                                            {if $transaction.referenceHref}
                                                <a href="{$transaction.referenceHref}" target="_blank">
                                            {/if}
                                            {if $transaction.isCreditNote}
                                                {lang key='billing.creditnote'}
                                            {elseif $transaction.isDebitNote}
                                                {lang key='billing.debitnote'}
                                            {/if}
                                            {$transaction.referenceId|truncate:24:"...":false:true}
                                            {if $transaction.referenceHref}
                                                </a>
                                            {/if}
                                        </td>
                                        <td class="">{$transaction.amount}</td>
                                    </tr>
                                {foreachelse}
                                    <tr>
                                        <td class="" colspan="4">{$LANG.invoicestransnonefound}</td>
                                    </tr>
                                {/foreach}
                                <tr class="total-row">
                                    <td></td>
                                    <td></td>
                                    <td>{$LANG.invoicesbalance}</td>
                                    <td>{$balance}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {if isset($invoiceQrHtml) && !empty($invoiceQrHtml)}
                <div class="invoice-qr-wrapper mt-3 mb-4">
                    {$invoiceQrHtml}
                </div>
            {/if}
            {if $notes}
                <div class="notes">
                    <div class="notes-heading">
                        <h3 class="notes-title"><strong>{$LANG.invoicesnotes}</strong></h3>
                    </div>
                    <div class="well notes-body">
                        {$notes}
                    </div>
                </div>      
            {/if}
            {if $RSThemes.pages.viewinvoice.config.displayBankDetailsOnInvoice && $bankTransfer && $paymentbutton != ""}
                <div class="section section--bank-details">
                    <div class="section-header"><h3 clas="section-title">{$rslang->trans('billing.invoice.bank_transfer_details')}</h3></div>
                    <div class="section-body">
                        {$paymentbutton}   
                    </div>
                </div>
            {/if}
        </div>   
        </div>
        <div class="main-sidebar {if $sidebarOnRight || $RSThemes['layouts']['name'] == 'left-nav-wide'} main-sidebar-right {/if}">
            <div class="sidebar-sticky" {if $RSThemes.addonSettings.show_affixed_navigation == 'enabled'}data-sidebar-sticky{/if}>
                {if $status == "Unpaid"}
                    <div class="panel panel-summary panel-summary-{$sidebarBoxStyle} view-invoice panel-view-invoice">
                        <div class="panel-body">
                            <div class="price price-sm price-left-h">
                                <span class="price-title">{$LANG.invoicestotaldue}</span> 
                                <span class="price-amount">{$balance}</span>
                            </div>
                        </div>
                        <div class="panel-footer">
                            {if $status eq "Unpaid" && $allowchangegateway}
                                <label>{$LANG.orderpaymentmethod}:</label>
                                <form method="post" action="{$smarty.server.PHP_SELF}?id={$invoiceid}">
                                    <div class="form-group">
                                        {$tokenInput}
                                        <select name="gateway" class="form-control" onchange="submit()" data-toggle="tooltip" title="Select Payment Method" aria-label="Select Payment Method">
                                            {foreach $availableGateways as $gatewayModule => $gatewayName}
                                                <option value="{$gatewayModule}"{if $gatewayModule == $selectedGateway} selected="selected"{/if}>{$gatewayName}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                </form>
                            {else}
                                {$paymentmethod}{if $paymethoddisplayname} ({$paymethoddisplayname}){/if}
                            {/if}
                            {if $status eq "Unpaid" || $status eq "Draft"}
                                <span class="small-text"></span>
                                <div class="payment-form payment-btn-container {if $RSThemes.pages.viewinvoice.config.displayGatewayImages && !$bankTransfer}text-center{/if}  {if $bankTransfer}bank-transfer{/if}" data-display-button="{if $RSThemes.pages.viewinvoice.config.displayGatewayImages}false{else}true{/if}" data-btntext="{$LANG.makepayment}" data-btnsubscribetext="{$rslang->trans('billing.subscribe')}">
                                    {$paymentbutton|replace:'<script src="/templates/six/js/scripts.min.js"></script>':""}
                                </div>
                            {/if}
                        </div>
                    </div>
                    {if $manualapplycredit}
                        <div class="panel panel-sidebar panel-add-funds panel-view-invoice">
                            <div class="panel-heading">
                                <h3 class="panel-title">{$LANG.invoiceaddcreditapply}</h3>
                            </div>
                            <div class="panel-body">
                                <form method="post" action="{$smarty.server.PHP_SELF}?id={$invoiceid}">
                                    <input type="hidden" name="applycredit" value="true">                              
                                    <div class="m-b-1x">{$LANG.invoiceaddcreditdesc1}: <b>{$totalcredit}</b></div>
                                    <div class="form-group">
                                        <label class="control-label">{$LANG.invoiceaddcreditamount}</label>
                                        <input type="text" name="creditamount" value="{$creditamount}" class="form-control" />
                                    </div>
                                    <input type="submit" value="{$LANG.invoiceaddcreditapply}" class="btn btn-primary-faded btn-block" />
                                </form>    
                            </div>
                        </div>
                    {/if}
                {/if}    
                <div class="panel panel-sidebar">
                    <div class="panel-heading">
                        <h6 class="panel-title">
                            <i class="fa fa-bookmark"></i>&nbsp; {$LANG.actions}
                            <i class="fa fa-chevron-up panel-minimise pull-right"></i>
                        </h6>
                    </div>
                    <div class="list-group">
                        <a tabindex="0" href="dl.php?type=i&amp;id={$invoiceid}" class="list-group-item">
                            <i class="ls ls-download"></i>{$LANG.invoicesdownload}
                        </a>
                    </div>
                </div>
            </div>
            {include file="{$template}/footer.tpl"}
        </div>
    {/if}
{/if}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const paymentBtnContainer = document.querySelector('.payment-btn-container');

        if (paymentBtnContainer) {
            const loaderHTML = `
            <div class="loader loader-button hidden">
                <div class="spinner spinner-sm">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
            </div>`;

            paymentBtnContainer.insertAdjacentHTML('beforeend', loaderHTML);

            const loader = paymentBtnContainer.querySelector('.loader');

            const submitBtn = paymentBtnContainer.querySelector('button[type="submit"], input[type="submit"]');

            if (submitBtn) {
                submitBtn.addEventListener('click', function() {

                    submitBtn.style.color = 'transparent';
                    loader.classList.remove('hidden');
                    loader.classList.add('d-flex');

                });
            }
        }
    });
</script>


