<div class="special-vat-page" atms-permission permission-control-type="prohibit" permission-code="{{$root.vatPermission.outputInvoice.gdInvoice.queryCode}}">
    <!--<div id="litterTitle">
        <span translate="IssuedInvoiceSpecial"></span>
    </div>-->
    <div class="header-title">
        <span translate="IssuedInvoiceSpecial"></span>
    </div>
    <div class="query-panel">
        <table class="query-table">
            <tr>
                <td><span translate="InvoiceNoColon"></span></td>
                <td>
                    <div dx-text-box="specialInvoice.invoiceNumberOptions"></div>
                </td>
                <td><span translate="VRLColon"></span></td>
                <td><div dx-select-box="specialInvoice.VRLOptions"></div></td>
                <td><span translate="EntityColon"></span></td>
                <td><div dx-select-box="specialInvoice.entityOptions"></div></td>
                <td ng-show="!hasShowMoreSearchBox"><button class="btn btn-tesla-primary" translate="Search" ng-click="eventService.refreshInvoiceDataGrid();"></button></td>
                <td ng-show="!hasShowMoreSearchBox" style="width:8%">
                    <span class="lbl-name">
                        <a href="javascript:void(0)" ng-click="eventService.showOrHideSearchBox()">
                            <span>
                                <i class="fa fa-chevron-down" aria-hidden="true"></i>
                                <span translate="Expand"></span>
                            </span>
                        </a>
                    </span>
                </td>
            </tr>
            <tr ng-show="hasShowMoreSearchBox">
                <td><span translate="IssuedPeriodColon"></span></td>
                <td><div dx-date-box="specialInvoice.issuedPeriodFromOptions"></div></td>
                <td style="text-align:center;"><span>-</span></td>
                <td><div dx-date-box="specialInvoice.issuedPeriodToOptions"></div></td>

                <td><span translate="StatusColon"></span></td>
                <td>
                    <div dx-tag-box="specialInvoice.statusOptions">
                        <div data-options="dxTemplate: { name: 'dropDownButton' }">
                            <span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
                        </div>
                    </div>
                </td>
                <td><button class="btn btn-tesla-primary" translate="Search" ng-click="eventService.refreshInvoiceDataGrid();"></button></td>
                <td>
                    <a href="javascript:void(0);" ng-click="eventService.showOrHideSearchBox()" ng-show="hasShowMoreSearchBox">
                        <span>
                            <i class="fa fa-chevron-up" aria-hidden="true"></i>
                            <span>{{'Collapse' | translate}}</span>
                        </span>
                    </a>
                </td>
            </tr>
        </table>

    </div>
    <div class='action-row'>
        <div class="prompt-line">
            <span class="emphasize" translate="Amount"></span>
            <span translate="HasChooseItemCount"></span> {{specialInvoiceVariables.selectedTableRows.length}} <span translate="Item"></span>
            <span style="margin-right:10px;">|</span>
            <span translate="TotalAmount"></span><span> {{specialInvoiceVariables.selectedTotalAmount|currency:''}} </span>
        </div>
        <div class="right-button">
            <button atms-permission permission-code="{{$root.vatPermission.outputInvoice.gdInvoice.cancelAndReprintCode}}" class="btn btn-tesla-defaut" translate="CancelPrintFapiao" ng-click="eventService.cancelandPrintFapiao();"></button>
            <button atms-permission permission-code="{{$root.vatPermission.outputInvoice.gdInvoice.cancelInvoiceCode}}" class="btn btn-tesla-defaut" atms-permission translate="CancelFapiao" style="margin-right:0;"
                    ng-click="eventService.cancelFapiao();"></button>
        </div>
    </div>
    <div class="grid-container">
        <div dx-data-grid="specialInvoice.specialGridContainer" dx-item-alias="invoice" id="specialGrid">
            <div data-options="dxTemplate:{name:'detailTemplate'}">
                <a href="javascript:void(0);" style="color: #6699cc;"
                   translate="View" ng-click="eventService.showDetail(invoice.data);"></a>

            </div>
        </div>
    </div>
    <div class="page-footer">
        <ack-pagination page-options="pagingOptions" refresh-table="eventService.refreshInvoiceDataGrid()"></ack-pagination>
    </div>
    <invoice-detail-vehicle detail-key="specialInvoiceVariables.selectedInvoice.id" parent-page="{{specialInvoiceVariables.pageName}}"
                            parent-element="special-vat-page" invoice-status="specialInvoiceVariables.selectedInvoice.status"
                            parent-refresh="eventService.refreshInvoiceDataGrid()"></invoice-detail-vehicle>
    <output-invoice-cancel parent-element="special-vat-page" cancel-title="title" call-back="eventService.cancelInvoiceCore();">
    </output-invoice-cancel>
</div>