<div class="bd-vin-view">
    <div class="header-title">
        <span translate="BDVinView"></span>
    </div>
    <div class="query-panel">
        <table>
            <tr id="toggle-search-tr">
                <td>{{'InvoiceNoColon' | translate}}</td>
                <td><div dx-text-box="searchOptions.InvoiceNo"></div></td>
                <td>{{'VINColon' | translate}}</td>
                <td><div dx-text-box="searchOptions.VIN"></div></td>
                <td>{{'InvoiceCodeColon' | translate}}</td>
                <td><div style="display: inline-block;vertical-align: middle;" dx-text-box="searchOptions.InvoiceCode"></div></td>
            </tr>
            <tr>
                <td style="width: 110px;">{{'VehicleModelColon' | translate}}</td>
                <td><div dx-select-box="searchOptions.VehicleModel"></div></td>
                <td style="width: 125px;">{{'caseNumberColon' | translate}}</td>
                <td><div dx-text-box="searchOptions.CaseNumber"></div></td>
                <td style="line-height: 28px;">
                    <button ng-click="eventService.refreshInvoiceDataGrid();" class="btn btn-primary">{{'Search' | translate}}</button>
                </td>
                <td><span class="fa fa-angle-up hide-search-btn" style="cursor:pointer;" ng-click="eventService.toggleSearchContent();">&nbsp;&nbsp;Collapse</span></td>
            </tr>
        </table>

    </div>
    <div class='data-grid-container'>
        <div class="grid-summary-line">
            &nbsp;&nbsp;<b>{{'Amount' | translate}}</b>&nbsp;&nbsp;&nbsp;&nbsp;
            {{'TotalSelected' | translate}}&nbsp;<span id="total-selected-count">{{selectedIssuedInvoiceCount}}</span>&nbsp;{{'Item' | translate}}
            &nbsp;&nbsp;&nbsp;&nbsp;{{'TotalAmountTitle' | translate}}&nbsp;&nbsp;<span id="total-selected-amount">{{selectedIssuedInvoiceAmount}}</span>
        </div>
        <div class="right-button">
            <button class="btn btn-primary" atms-permission permission-code="{{$root.vatPermission.outputInvoice.bdInvoice.cancelInvoiceCode}}" ng-click="CancelInvoice(selectedIssuedInvoiceData,false);">{{'CancelInvoice' | translate}}</button>
            <button atms-permission permission-code="{{$root.vatPermission.outputInvoice.bdInvoice.cancelAndReprintCode}}" class="btn btn-primary" translate="CancelPrintFapiao" style="width: 150px;"
                    ng-click="CancelInvoice(selectedIssuedInvoiceData,true);"></button>
        </div>
    </div>
    <div class="grid-container">
        <div dx-data-grid="searchOptions.bdVinGridOptions" dx-item-alias="vinGroup" id="bdVinGrid">
            <div data-options="dxTemplate:{name:'gdInvoiceTemplate'}">
                <div class="internal-grid-container">
                    <div class="internal-grid" id="vin-{{vinGroup.key}}" dx-item-alias="invoiceDetail"
                         dx-data-grid="searchOptions.bdVinGridOptions.bdView(vinGroup.data.bdInvoices)">

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

        </div>
    </div>
    <div class="page-footer">
        <ack-pagination page-options="pagingOptions" refresh-table="eventService.refreshInvoiceDataGrid()"></ack-pagination>
    </div>

    <output-invoice-cancel parent-element="bd-vin-view" cancel-title="title" call-back="cancelCore();">
    </output-invoice-cancel>
</div>

<div id="red-letter-bd-user-pop"></div>
<script type="text/ng-template" class="content" id="red-letter-bd-user-page.html">
    <div class="modal-header">
        <span class="close" data-dismiss="modal" aria-hidden="true" ng-click="hidePopPanel()">&times;</span>
        <h4 class="modal-title">{{'BDViewRedLetterConfirmTitle' | translate}}</h4>
    </div>

    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">
                <input type="radio" name="reasonRadio" ng-model="redLetterData.needReasonRdio" value="1" />&nbsp;&nbsp;{{'BDViewRedLetterConfirmReason1' | translate}}
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="reasonRadio" ng-model="redLetterData.needReasonRdio" value="2" />
                <span>
                    &nbsp;&nbsp;{{'BDViewRedLetterConfirmReason2' | translate}} <br />
                    <span class="radio-no2-title">(Customer request)</span>
                </span>
            </div>
        </div>
        <div id="reasonModalForm" dx-validation-group="{}" class="row input-reason-container" ng-if="redLetterData.needReasonRdio == 2">
            <div class="col-md-12">
                <span style="color:red;">*&nbsp;</span>{{'BdInputReasonTitle' | translate}}
                <div dx-text-area="redLetterData.inputReasonOption" dx-validator="validateOption.inputReasonOption"></div>
            </div>
        </div>

        <div class="row upload-file-container">
            <div class="col-md-12">
                <span style="color:red;">*&nbsp;</span>{{'BdChoseEvidenceTitle' | translate}}&nbsp;&nbsp;&nbsp;&nbsp;
                <span ng-click="uploadFile();" class="add-file-btn">{{'AddFile' | translate}}</span>
                <span id="UploadFileCheckTipId" style="color: red; display: none; font-size: 11px;">&nbsp;&nbsp;&nbsp;&nbsp;{{'UploadFileCheckTip' | translate}}</span>
                <div class="files-container">
                    <div class="file-line" ng-repeat="item in uploadFileOption.files">
                        <span class="col-md-10 file-name">{{item.data.fileName}}</span> <!--ng-click="downloadEvidenceFile(item.data)"-->
                        <span class="col-md-2 delete-file" aria-hidden="true" ng-click="deleteEvidenceFile(item.data.fileID)"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row recieving-fapiao-tip">
            <div class="col-md-12">
                <input type="checkbox" ng-model="redLetterData.isRevievingAll" /> <span style="color:red;">*&nbsp;</span>{{'CancelDialogText' | translate}}
                <span id="CancelDialogTextTipId" style="color:red;display: none; font-size: 11px;">&nbsp;&nbsp;&nbsp;&nbsp;{{'CancelDialogTextTip' | translate}}</span>
            </div>

        </div>
    </div>

    <div class="modal-footer">
        <button ng-click="confirmRedLetterInvoice(uploadFileOption.files);" class="btn btn-primary btn-first">{{'ENConfirm' | translate}}</button>
        <button ng-click="hidePopPanel();" class="btn btn-primary btn-second">{{'ENCancel' | translate}}</button>
    </div>

</script>

<upload-file-modal upload-file-option="uploadFileOption" upload-file-type="uploadFileType"></upload-file-modal> 

<edit-invoice-modal operate-type="invoiceOperateType" on-closed="closeInvoiceModal(param)" invoice-model="invoiceModel"></edit-invoice-modal>