<div class="row">
  <div class="col-12">
    <div class="card card-body">
      <h4 class="card-title">รายการเอกสาร</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)">เพิ่มไฟล์เอกสาร</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">รายละเอียด</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" class="text-center">สถานะ</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr  *ngFor="let data of filterListDoc() | 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.id}}</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,'tha')"></i></td>
              <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.logId,'eng')"></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]="listDoc.length" [maxSize]="3" [rotate]="true">
          <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
          <ng-template ngbPaginationNext>ถัดไป</ng-template>
        </ngb-pagination>

      </div>

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


<ng-template #editTemplateModal let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="edittemplateLabel">{{checkEdit?"แก้ไขไฟล์เอกสาร":"เพิ่มไฟล์เอกสาร"}}</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)]="modelDoc.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)]="modelDoc.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)]="modelDoc.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)]="modelDoc.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)]="modelDoc.langSupport">
                <option value="THA">ไทย</option>
                <option value="ENG">English</option>
            </select>
            <!-- <input type="text" class="form-control"  id="nameeng" [(ngModel)]="modelDoc.langSupport"> -->
          </div>
      </div>



      <div class="form-group row">
        <label for="name" class="col-sm-4 col-form-label">ไฟล์อัพโหลด (ไทย)</label>
        <div class="{{!modelDoc.thDocObj||!checkEdit ? 'col-sm-8' : 'col-sm-6'}}">
          <input type="file" class="form-control" (change)="onSelectFile($event,'th')">
          <div class="msg-detail">ไฟล์ที่อนุญาต:*.doc</div>
        </div>
        <div class="col-auto" *ngIf="modelDoc.thDocObj&&checkEdit">
          <button  class="btn btn-primary" (click)="downloadFile(modelDoc.logId,'tha')"><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="{{!modelDoc.engDocObj||!checkEdit ? 'col-sm-8' : 'col-sm-6'}}">
          <input type="file" class="form-control" (change)="onSelectFile($event,'eng')">
          <div class="msg-detail">ไฟล์ที่อนุญาต:*.doc</div>
        </div>
        <div class="col-auto" *ngIf="modelDoc.engDocObj&&checkEdit">
          <button  class="btn btn-primary" (click)="downloadFile(modelDoc.logId,'eng')"><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)]="modelDoc.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)]='modelDoc.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)]="modelDoc.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">หมายเหตุ</label>
          <div class="col-sm-8">
              <textarea class="form-control"[(ngModel)]="modelDoc.remark"></textarea>
          </div>
        </div>



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