<div class="issued-invoice-bd-view-container" id="issued-invoice-bd-view-container">

    <div class="page-container page-search-container">
        <span class="search-title">{{'BDViewPageTitleSecond' | translate}}</span>
        <div class="search-form-body">
            <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>{{'IssuedPeriodColon' | translate}}</td>
                    <td><div style="display: inline-block;vertical-align: middle;" dx-date-box="searchOptions.IssuedPeriodStart"></div></td>
                    <td>-</td>
                    <td><div style="display: inline-block;vertical-align: middle;" dx-date-box="searchOptions.IssuedPeriodEnd"></div></td>
                </tr>
                <tr>
                    <!--<td style="width: 110px;">{{'VehicleModelColon' | translate}}</td>
                    <td><div dx-text-box="searchOptions.VehicleModel"></div></td>-->
                    <td style="width: 110px;">{{'GDStatus' | translate}}:</td>
                    <td style="max-width:200px;"><div dx-tag-box="searchOptions.gdStatus"></div></td>
                    <td style="width: 125px;">{{'IssuaranceTypeColon' | translate}}</td>
                    <td><div dx-select-box="searchOptions.IssuanceType"></div></td>
                    <td style="line-height: 28px;">
                        <button ng-click="getOutputInvoicePrintedList();" class="btn btn-primary">{{'Search' | translate}}</button>
                    </td>
                    <td><span class="fa fa-angle-up hide-search-btn" ng-click="toggleSearchContent();">&nbsp;&nbsp;Collapse</span></td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>

    </div>

    <div class="page-container page-fast-search-container">
        <div class="fast-search-field"><input type="checkbox" ng-change="getOutputInvoicePrintedList();" ng-model="searchEntity.todayOnly" />{{'TodayOnly' | translate}}</div>
        <div class="fast-search-field"><input type="checkbox" ng-change="getOutputInvoicePrintedList();" ng-model="searchEntity.duplicateOnly" />{{'DuplicateOnly' | translate}}</div>
        <div class="fast-search-field"><input type="checkbox" ng-change="getOutputInvoicePrintedList();" ng-model="searchEntity.normalOrMatched" />{{'NormalOrmatched' | translate}}</div>
        <div class="fast-search-field"><input type="checkbox" ng-change="getOutputInvoicePrintedList();" ng-model="searchEntity.unMatched" />{{'UnMatched' | translate}}</div>
        <!--<button class="btn btn-primary" ng-click="redLetterBdUserInvoice(selectedIssuedInvoiceData);">{{'RedLetter' | translate}}</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>

        <!--<button ngf-select ng-model="uploadOption.uploadFiles" ngf-multiple="false"
                ngf-allow-dir="false" class="btn btn-primary" accept=".txt">
            
            {{'SelectUploadVinFile' | translate}}
        </button>--><!--accept=".xls,.xlsx"-->

        <!--  <button class="btn btn-primary" style="width: 120px;" ng-click="printGDInvoice();">{{'PrintGDInvoice' | translate}}</button> -->
    </div>

    <div class="page-container 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 id="dxIssuedInvoiceDataGridContainer" dx-data-grid="dataGridOption"></div>
    </div>

    <div class="page-footer" style=" padding-right: 20px;">
        <ack-pagination page-options="pagingOptions" refresh-table="pagingService.pageIndexChanging()"></ack-pagination>
    </div>

    <output-invoice-cancel parent-element="issued-invoice-bd-view-container" 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>

<div id="red-letter-gd-bd-pop">
</div>
<script type="text/ng-template" class="content" id="red-letter-gd-bd-page.html">

    <div class="modal-header">
        <span class="close" data-dismiss="modal" aria-hidden="true" ng-click="hidePopPanel()">&times;</span>

        <h4 class="modal-title">
            <i style="color: #b22;font-size: 23px; cursor: pointer;" class="fa fa-arrow-circle-o-left"></i>
            &nbsp;{{'GDBDRedLetterConfirmTitle' | translate}}
        </h4>
    </div>

    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">
                <p>
                    {{'GDBDRedLetterConfirmInfo' | translate}}
                    <br />
                </p>
                <div>
                    <span class="cell-info-title">{{'VINNumberTitle' | translate}}&nbsp;&nbsp;{{data.vin}}</span>
                </div>
                <div>
                    <span>{{'ModelSeriesG' | translate}}:&nbsp;&nbsp;{{data.vehicleModel}}</span>
                </div>
                <div>
                    <span>{{'VRL' | translate}}:&nbsp;&nbsp;{{data.vehicleroutinglocation}}</span>
                </div>
            </div>
        </div>
        <div class="row gd-bd-pop-grid-container">
            <div class="col-md-12">
                <div dx-data-grid="dataGridGdBdOptions"></div>
            </div>
        </div>
    </div>

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

</script>

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

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