<div class="gd-vin-view" 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="GDVinView"></span>
    </div>
    <div class="query-panel">
        <table class="query-table">
            <tr>
                <td><span translate="InvoiceNoColon"></span></td>
                <td>
                    <div dx-text-box="gdVinInvoice.invoiceNumberOptions"></div>
                </td>
                <td><span translate="VINColon"></span></td>
                <td><div dx-text-box="gdVinInvoice.vinOptions"></div></td>
                <td><span translate="InvoiceCodeColon"></span></td>
                <td><div dx-text-box="gdVinInvoice.invoiceCodeOptions"></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="caseNumberColon"></span></td>
                <td><div dx-text-box="gdVinInvoice.caseNumberOptions"></div></td>
                <td><span translate="VehicleModelColon"></span></td>
                <td><div dx-select-box="gdVinInvoice.vehicleModelColonOptions"></div></td>
                <td></td>
                <td></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> {{gdVinDetailVariables.selectedTableRows.length}} <span translate="Item"></span>
            <!--<span style="margin-right:10px;">|</span>
            <span translate="TotalAmount"></span><span> {{gdVinInvoiceVariables.selectedTotalAmount|currency:''}} </span>-->
        </div>
        <div class="right-button">
            <button atms-permission permission-code="{{$root.vatPermission.outputInvoice.gdInvoice.cancelInvoiceCode}}" class="btn btn-tesla-defaut" translate="CancelFapiao" ng-click="eventService.cancelFapiao();"></button>
            <button atms-permission permission-code="{{$root.vatPermission.outputInvoice.gdInvoice.RedLetterCode}}" class="btn btn-tesla-defaut" translate="RedLetter" style="margin-right:0;"
                    ng-click="eventService.confirmRedLetter();"></button>
        </div>
    </div>
    <div class="grid-container">
        <div dx-data-grid="gdVinInvoice.gdVinGridOptions" dx-item-alias="vinGroup" id="gdVinGrid">
            <div data-options="dxTemplate:{name:'gdInvoiceTemplate'}">
                <div class="internal-grid-container">
                    <!--<span>{{vinGroup.key}}</span>-->
                    <div class="internal-grid" id="vin-{{vinGroup.key}}" dx-item-alias="invoiceDetail"
                         dx-data-grid="gdVinInvoice.gdVinGridOptions.gdView(vinGroup.data.gdInvoices)">

                        <div data-options="dxTemplate:{name:'detailTemplate'}">
                            <a href="javascript:void(0);" style="color: #6699cc;"
                               translate="View" ng-click="eventService.showDetail(invoiceDetail.data);"></a>

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="page-footer">
        <ack-pagination page-options="pagingOptions" refresh-table="eventService.refreshInvoiceDataGrid()"></ack-pagination>
    </div>
    <invoice-detail-vehicle detail-key="gdVinDetailVariables.selectedGDInvoice.gdInvoiceID" parent-page="{{gdVinInvoiceVariables.pageName}}"
                            parent-element="gd-vin-view" invoice-status="gdVinDetailVariables.selectedGDInvoice.gdStatus"
                            parent-refresh="eventService.refreshInvoiceDataGrid()" hide-action="true"></invoice-detail-vehicle>
    <output-invoice-cancel parent-element="gd-vin-view" cancel-title="title" call-back="eventService.cancelInvoiceCore();">
    </output-invoice-cancel>
</div>