<div class="row">
    <div class="col-12">
      <div class="card card-body">
        <h4 class="card-title">รายการ Excel</h4>
        <div class="d-flex mb-3 mt-3">
          <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
          <button class="btn btn-primary ml-auto" (click)="openModal(editTemplateModal)">เพิ่มไฟล์ Excel</button>
        </div>
        <div class="table-responsive">
          <table class="table table-striped mb-0 no-wrap v-middle ">
            <thead class="bg-info text-white">
              <tr>
                <th class="text-center" scope="col">#</th>
                <th scope="col">รูปภาพ</th>
                <th scope="col">ชื่อ</th>
                <th scope="col">รายละเอียด</th>
                <th scope="col" class="text-center">ลิงค์</th>
                <th scope="col" class="text-center">ไฟล์</th>
                <th scope="col" class="text-center">สถานะ</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody>
              <tr  *ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                <td class="text-center">{{i+1}}</td>
                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())"></td>
                <td>{{ data.thName }}</td>
                <td>{{ data.thDesc }}</td>
                <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)" ></i></td>
                <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.logId)"></i></td>
                <td class="text-center">

                  <span class="fa-stack rt_anim" *ngIf="data.status == '0'"  ngbTooltip="รออนุมัติ" container="body" tooltipClass="myhrcolor-1">
                  <i class="fa fa-circle fa-stack-2x text-info"></i>
                  <i class=" fas fa-hourglass-half fa-stack-1x fa-inverse"></i>
                </span>

                <span class="fa-stack rt_anim" *ngIf="data.status == '1'" ngbTooltip="เปิดใช้งาน" container="body" tooltipClass="myhrcolor-2">
                    <i class="fa fa-circle fa-stack-2x text-success"></i>
                    <i class=" fas fa-check  fa-stack-1x fa-inverse"></i>
                  </span>

                  <span class="fa-stack rt_anim" *ngIf="data.status == '2'" ngbTooltip="ไม่อนุมัติ" container="body" tooltipClass="myhrcolor-3">
                  <i class="fa fa-circle fa-stack-2x text-danger"></i>
                  <i class="fas fa-times fa-stack-1x fa-inverse" style="font-size: 1.25em;"></i>
                </span>

                </td>
        
                <td>
                  <button type="button" [disabled]="data.status != 0" class="btn btn-circle btn-primary rounded-circle btn-sm mr-2" (click)="openModal(editTemplateModal,data)" placement="top" ngbTooltip="แก้ไข">
                    <i class="fas fa-edit"></i>
                  </button>
                  <button type="button"  class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ">
                    <i class="fas fa-trash-alt"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="d-flex justify-content-end py-2">

          <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize"  (ngModelChange)="page">
            <option [ngValue]="10">รายการต่อหน้า: 10</option>
            <option [ngValue]="50">รายการต่อหน้า: 50</option>
            <option [ngValue]="100">รายการต่อหน้า: 100</option>
          </select>
          <ngb-pagination  [(page)]="page" [pageSize]="pageSize" [collectionSize]="listExcel.length" [maxSize]="3" [rotate]="true">
            <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
            <ng-template ngbPaginationNext>ถัดไป</ng-template>
          </ngb-pagination>

        </div>

      </div>
    </div>
  </div>
  
  <div class="row" >
    <div class="col-12">
      <div class="py-3">
        <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
      </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-4  mb-3"  *ngFor="let data of filterListExcel()">
      <div class="card border-5 border border-excel h-100 shadow" >
        <div class=" p-2 border-5">
          <img  width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openEmployeeModal(data.getImage())">
        </div>
        <div class="card-body">
          <h4 class="card-title">{{ data.thName }}</h4>
          <p class="card-text ">{{ data.thDesc }}</p>
          <p class="text-info pointer mb-0" (click)="downloadFile(data.excelId)"><i class="fas fa-download mr-1"></i> ดาวน์โหลด</p>
          <p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i> ตัวอย่างวิธีใช้งาน</p>
        </div>
        <div class="card-footer border-bottom-5" >
          <small class="text-muted">วันที่อัพโหลด	 {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
        </div>
      </div>
    </div>
  </div>

  
  <ng-template #editTemplateModal let-modal>
    <div class="modal-header">
      <h5 class="modal-title" id="edittemplateLabel">{{checkEdit?"แก้ไขไฟล์ Excel":"เพิ่มไฟล์ Excel"}}</h5>
      <button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  
    <div class="modal-body">
        <div class="form-group row">
          <label for="nameth" class="col-sm-4 col-form-label">ชื่อ (ไทย)</label>
          <div class="col-sm-8">
            <input type="text" class="form-control"  id="nameth" [(ngModel)]="modelExcel.thName">
          </div>
        </div>
        <div class="form-group row">
          <label for="nameeng" class="col-sm-4 col-form-label">ชื่อ (อังกฤษ)</label>
          <div class="col-sm-8">
            <input type="text" class="form-control"  id="nameeng" [(ngModel)]="modelExcel.engName">
          </div>
        </div>

        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">รายละเอียด (ไทย)</label>
            <div class="col-sm-8">
                <textarea class="form-control" [(ngModel)]="modelExcel.thDesc"></textarea>
            </div>
        </div>
        
        <div class="form-group row">
          <label for="position" class="col-sm-4 col-form-label">รายละเอียด (อังกฤษ)</label>
          <div class="col-sm-8">
              <textarea class="form-control" [(ngModel)]="modelExcel.engDesc"></textarea>
          </div>
        </div>

        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">ดาต้าเบสที่รองรับ</label>
            <div class="col-sm-8">
              <select class="custom-select" [(ngModel)]="modelExcel.dbSupport">
                <option value="SQLServer">SQLServer</option>
                <option value="PostgreSQL">PostgreSQL</option>
                <option value="Oracle">Oracle</option>
            </select>
              <!-- <input type="text" class="form-control"  id="nameeng" [(ngModel)]="modelExcel.dbSupport"> -->
            </div>
        </div>

  
        <div class="form-group row">
          <label for="name" class="col-sm-4 col-form-label">ไฟล์อัพโหลด</label>
          <div class="{{!modelExcel.excelObj||!checkEdit ? 'col-sm-8' : 'col-sm-6'}}">
            <input type="file" class="form-control" (change)="onSelectFile($event)">
            <div class="msg-detail">ไฟล์ที่อนุญาต:*.xlsx *.xlsm</div>
          </div>
          <div class="col-auto" *ngIf="modelExcel.excelObj&&checkEdit">
            <button  class="btn btn-primary" (click)="downloadFile(modelExcel.logId)"><i class="fas fa-download" ></i></button>
          </div>
        </div>

        <div class="form-group row">
          <label for="name" class="col-sm-4 col-form-label">รูปภาพตัวอย่าง</label>
          <div class="col-sm-8">
            <input type="file" class="form-control" (change)="onUploadImage($event)">
            <div class="msg-detail">ไฟล์ที่อนุญาต:*.jpeg, *.jpg, *.png</div>
          </div>
        </div>

        <div class="form-group row">
            <label for="name" class="col-sm-4 col-form-label">Link ตัวอย่าง</label>
            <div class="col-sm-8">
              <input type="text" class="form-control"  id="nameeng" [(ngModel)]="modelExcel.link1">
            </div>
          </div>
        <div class="form-group row">
            <label for="name" class="col-sm-4 col-form-label">แท็ก</label>
            <div class="col-sm-8">
            <tag-input [theme]="'bootstrap'" [(ngModel)]='modelExcel.tags' placeholder="+แท็ก" [onlyFromAutocomplete]="true"
            secondaryPlaceholder="กดปุ่ม Enter เพื่อเพิ่มแท็กใหม่" [addOnBlur]="true" [clearOnBlur]="true">
            <tag-input-dropdown [autocompleteItems]="listTag" [showDropdownIfEmpty]="true">
            </tag-input-dropdown>
          </tag-input>
            </div>
          </div>

          <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">กลุ่ม</label>
            <div class="col-sm-8">
              <select class="custom-select" [(ngModel)]="modelExcel.group.groupId" (change)="selectGroup()">
                <option  *ngFor="let item of listGroup" [ngValue]="item.groupId">{{item.thName}}</option>
            </select>
            </div>
        </div>
       
          <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">แสดงรูปแบบ Pivot</label>
            <div class="col-sm-8  d-flex">
              <div class="form-check form-check-inline">
                <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="pivot0" name="radio-pivot" [value]="0" [(ngModel)]="modelExcel.isPivot">
                    <label class="custom-control-label" for="pivot0">ใช่</label>
                </div>
              </div>
              <div class="form-check form-check-inline">
                <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="pivot1" name="radio-pivot" [value]="1" [(ngModel)]="modelExcel.isPivot">
                    <label class="custom-control-label" for="pivot1">ไม่ใช่</label>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">แสดงรูปแบบ DataGrid</label>
            <div class="col-sm-8  d-flex">
              <div class="form-check form-check-inline">
                <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="datagrid" name="datagridCheck" [value]="0" [(ngModel)]="modelExcel.isDataGrid">
                    <label class="custom-control-label" for="datagrid">ใช่</label>
                </div>
              </div>
              <div class="form-check form-check-inline">
                <div class="custom-control custom-radio">
                    <input type="radio" class="custom-control-input" id="datagrid1" name="datagridCheck" [value]="1" [(ngModel)]="modelExcel.isDataGrid">
                    <label class="custom-control-label" for="datagrid1">ไม่ใช่</label>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">หมายเหตุ</label>
            <div class="col-sm-8">
                <textarea class="form-control"[(ngModel)]="modelExcel.remark"></textarea>
            </div>
          </div>

  
  
        <div class="modal-footer ">
            <button type="submit" class="btn btn-info" (click)="onSumit()" [disabled]="!modelExcel.thName||!modelExcel.engName">บันทึก</button>
            <button type="button" class="btn btn-danger" (click)="closeBtnClick()">ปิด</button>
        </div>
    </div>
  </ng-template>
  