<div class="col-md-12" ng-controller="BulkImportFixedDepositTransactionsController"  ng-init="refreshImportTable()">
    <ul class="breadcrumb">
        <li><a href="#/bulkimport">{{'label.anchor.bulkimport' | translate}}</a></li>
        <li class="active">{{'label.anchor.importfdtransactions' | translate}}</li>
    </ul>
    <api-validate></api-validate>

    <div style="margin-top:20px;" class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{{'label.input.fdtransactionstemplate' | translate}}</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <form name="bulkImportFixedDepositsTransactions" role="form">
                    <div class="form-group">
                        <label class="control-label col-sm-2">
                            {{'label.anchor.office' | translate}}
                        </label>
                        <div class="col-sm-3">
                            <div>
                                <select chosen="offices" id="officeId" ng-model="formData.officeId"  class="form-control"
                                        ng-options="office.id as office.name for office in offices" value="{{office.id}}"
                                        ng-change="changeOffice()">
                                    <option value="">--{{'label.menu.selectoffice' | translate}}--</option>
                                </select>
                            </div>
                        </div> &nbsp; &nbsp; &nbsp;
                        <a target="_blank" class='btn btn-primary' href="{{hostUrl}}{{first.templateUrl}}{{first.queryParams}}" has-permission='READ_CLIENT'><i
                                class="fa fa-cloud-download"></i>{{'label.button.download' | translate}}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{{'label.anchor.importfdtransactions' | translate}}</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <form class="form-inline" role="form">
                    <label class="control-label col-sm-2" for="file">{{'label.input.selectexcelfile' | translate}}<span
                            class="required">*</span></label>

                    <div class="col-sm-2">
                        <input type="file" id="file" accept=".xls,.xlsx"  class="form-control btn btn-default" ngf-select="onFileSelect($files)">
                    </div>
                    <button style="margin-left:10px;" type="button" class="form-control btn btn-primary col-sm-2" ng-click="upload()">
                        {{'label.button.upload' | translate}}
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{{'label.heading.documents' | translate}}</h3>
            <button style="margin-left:1050px;" type="button" class="btn btn-primary" ng-click="refreshImportTable()">
                <i class="fa fa-repeat "></i> {{'label.button.refresh' | translate}}
            </button>
        </div>
        <div class="panel-body">
            <table class="table">
                <thead>
                <tr class="graybg">
                    <th>{{ 'label.heading.name' | translate }}</th>
                    <th>{{ 'label.heading.importtime' | translate }}</th>
                    <th>{{ 'label.heading.endtime' | translate }}</th>
                    <th>{{ 'label.heading.completed' | translate }}</th>
                    <th>{{ 'label.heading.totalrecords' | translate }}</th>
                    <th>{{ 'label.heading.successcount' | translate }}</th>
                    <th>{{ 'label.heading.failurecount' | translate }}</th>
                    <th>{{ 'label.button.download' | translate }}</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="import in imports"  ng-class="{'bg-success': import.completed, 'bg-danger': !import.completed}">
                    <td>{{import.name}}</td>
                    <td>{{import.importTime | DateFormat}}</td>
                    <td>{{import.endTime | DateFormat}}</td>
                    <td>{{import.completed}}</td>
                    <td>{{import.totalRecords}}</td>
                    <td>{{import.successCount}}</td>
                    <td>{{import.failureCount}}</td>
                    <td ng-show='import.completed'><a target="_blank" href="{{hostUrl}}{{import.docUrl}}" has-permission='READ_DOCUMENT'><i
                            class="fa fa-cloud-download"></i></a></td>

                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="clearfix"></div>
</div>