<div id="vatInvoiceMapping">

    <div class="vat-invoice-mapping-title">
        <div class="title" translate="invoiceMappingDesc"></div>
        <div class="alert alert-warning" style="width:400px;margin-bottom:5px;" ng-show="ImportErrorTab" ng-click="toggleErrorTab()">
            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>{{errorMsg}}
        </div>

        <div class="btn-right" ng-if="excelSource.dataList.length <= 0">
            <span ng-click="refresh()" atms-permission permission-control-type="ngIf" permission-code="02.001.018"><i class="fa fa-refresh" aria-hidden="true"></i>{{'Refresh' | translate}}</span>&nbsp;&nbsp;
            <span ng-click="clear()" atms-permission permission-control-type="ngIf" permission-code="02.001.018"><i class="fa fa-trash-o" aria-hidden="true"></i>{{'ClearAll' | translate}}</span>
        </div> 
    </div>

    <div class="vat-invoice-mapping-toolbar">
        <button type="button" atms-permission permission-code="02.001.018" ngf-select="" ng-model="selectedFileName" ngf-drag-over-class="'dragover'" accept=".xls,.xlsx" ngf-multiple="false" ngf-allow-dir="false" class="btn btn-vat-third">
            {{'SelectFile' | translate}}
        </button>
        <div class="import-info-wrapper" ng-if="excelSource.dataList.length > 0">
            <span title="{{fileName}}">{{'FileName' | translate}}{{fileName | limitString:10}}</span>&nbsp;&nbsp;&nbsp;&nbsp;|
            <span translate="WorkSheet"></span>
            <div class="ui-select-no-border">
                <ui-select ng-model="selectedSheet.sheetName" on-select="" search-enabled="false">
                    <ui-select-match title="{{$select.selected}}">{{$select.selected | limitString:7}}</ui-select-match>
                    <ui-select-choices repeat="sheet in excelSource.sheetNameList track by $index">
                        <div title="{{sheet}}" ng-click="changeSheet($index)">{{sheet | limitString:9}}</div>
                    </ui-select-choices>
                </ui-select>
            </div>
            &nbsp;&nbsp;|
            <span translate="StartRowNum"></span><input id="StartRowNum" ng-model="StartRowNum" type="text" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9]+/,'');}).call(this)" />
        </div>
        <button class="btn btn-vat-primary" atms-permission permission-control-type="ngIf" permission-code="02.001.018" ng-if="mapppingList.length <= 0" translate="ImportBtn" ng-click="save2Server(1)"></button>
        <div class="btn-wrapper" ng-if="mapppingList.length >0">
            <button class="btn btn-vat-primary" atms-permission permission-control-type="ngIf" permission-code="02.001.018" translate="ConverImportBtn" ng-click="save2Server(1)"></button>|<button class="btn btn-vat-primary" atms-permission permission-control-type="ngIf" permission-code="02.001.018" translate="AddImportBtn" ng-click="save2Server(2)"></button>
        </div>
    </div>

    <!--<div class="vat-invoice-mapping-result" ng-if="!isImportView">
        <div class="listView" ui-grid="gridOptions" ui-grid-selection></div>
        <div class="footer"><span translate="TotalNo" />{{ mapppingList.length }}</div> 
    </div>
    <div class="vat-invoice-mapping-import" ng-if="isImportView">
        <div class="import-table-cont">
            <table class="import-table">
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th ng-repeat="m in firstDataRow track by $index">{{$index + 1}}</th>
                    </tr>
                    <tr>
                        <th>&nbsp;</th>
                        <th ng-repeat="i in firstDataRow track by $index">
                            <div class="dropdown">
                                <button class="btn dropdown-toggle select-button" data-toggle="dropdown">
                                    <span class="pull-left" ng-if="selectedColumnMap[$index]">{{selectedColumnMap[$index]}}</span>
                                    <span class="pull-left" ng-if="!selectedColumnMap[$index]" translate="PleaseSelectColumn"></span>
                                    <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li ng-repeat="col in allColumns track by $index" ng-click="mappingColumn($parent.$index,$index,col)">{{col}}</li>
                                </ul>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in excelSource.dataList track by $index" ng-class-even="'row-even'" ng-class-odd="'row-odd'">
                        <td style="text-align: center; width: 30px;">{{$index+1}}</td>
                        <td ng-repeat="cell in row track by $index">
                            {{ cell }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>-->

    <div id="tab_total">
        <div class="dt-import-wrapper" ng-if="showImportTable">
            <div class="import-table-cont">
                <table class="import-table">
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th ng-repeat="m in firstDataRow track by $index">{{$index + 1}}</th>
                        </tr>
                        <tr>
                            <th>&nbsp;</th>
                            <th ng-repeat="i in firstDataRow track by $index">
                                <div class="dropdown">
                                    <button class="btn dropdown-toggle select-button" data-toggle="dropdown">
                                        <span class="pull-left" ng-if="selectedColumnMap[$index]">{{selectedColumnMap[$index]}}</span>
                                        <span class="pull-left" ng-if="!selectedColumnMap[$index]" translate="PleaseSelectColumn"></span>
                                        <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li ng-repeat="col in allColumns track by $index" ng-click="mappingColumn($parent.$index,$index,col)">{{col}}</li>
                                    </ul>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in excelSource.dataList track by $index" ng-class-even="'row-even'" ng-class-odd="'row-odd'">
                            <td style="text-align: center; width: 30px;">{{$index+1}}</td>
                            <td ng-repeat="cell in row track by $index">
                                {{ cell }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="dt-init-wrapper" ng-if="showInitTable">
            <div class="balance-ouput-grid-wrapper" id="balance-ouput-grid-wrapper">
                <div ui-grid="gridOptions" style="width:100%;" ng-style="getGridHeight()"></div>
                <div class="footer-info" style="text-align:right;" ng-if="mapppingList.length>0">{{'TotalNo' | translate}}:{{mapppingList.length}}</div>
            </div>
        </div>
        <div class="error-info-wrapper" id="error-info-wrapper" ng-show="showErrorTable">
            <div ui-grid="gridOptionsErrorMsg" style="width:100%;" ng-style="getErrorGridHeight()"></div>
        </div>
        <div>
            <div ng-show="showErrorTable" id="content-resizer"
                 resizer="horizontal"
                 resizer-height="6"
                 bottom-min="0"
                 bottom-max="400"
                 resizer-top="#balance-ouput-grid-wrapper"
                 resizer-bottom="#error-info-wrapper">
                <div id="topIcon" ng-click="toggleErrorTab()">
                    <img src="../../../../app-resources/images/collapse.png" />
                </div>
            </div>
        </div>
    </div>

    <div class="error-list-modal">
        <div class="modal fade" id="errorListModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" style="width: 720px; height: 200px;" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title">
                            {{'ImportErrorPopUpTitle' | translate}}
                        </div>
                    </div>
                    <div class="modal-body">
                        {{'ImportErrorPopUpErrorDetail' | translate}}:
                        <br />
                        <table>
                            <thead>
                                <tr>
                                    <th width="10%" style="text-align:center;">{{'ImportErrorPopUpNoCol' | translate}}</th>
                                    <th width="20%">{{'ImportErrorPopUpErrorTypeCol' | translate}}</th>
                                    <th width="10%" style="text-align:center;">{{'ImportErrorPopUpErrorCountCol' | translate}}</th>
                                    <th width="60%">{{'ImportErrorPopUpErrorDescCol' | translate}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="error in errorMsgMap track by $index">
                                    <td width="10%" style="text-align:center;">{{$index + 1}}</td>
                                    <td width="20%">{{error.errorType}}</td>
                                    <td width="10%" style="text-align:center;">{{error.errorCount}}</td>
                                    <td width="60%" ng-bind-html="error.errorContent"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" translate="Confirm" data-dismiss="modal"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>