<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">ลิงค์</th>
                <th scope="col">สถานะ</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody>
              <tr  *ngFor="let data of filterListCourse() | 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()}}"></td>
                <!-- <td >{{data.id}}</td> -->
                <td>{{ data.thName }}</td>
                <td class="text-wrap">{{ data.thDesc }}</td>
                <td>{{data.courseType}}</td>
                <td><a href="{{data.link1}}"  target="_blank">คลิก</a></td>
                <td>{{ getStatus(data.status) }}</td>
                <!-- <td><a (click)="downloadFile(data.logId)">ดาวน์โหลด</a></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" [disabled]="data.status != 0" 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>
                  <!-- <a href="javascript: void(0);" (click)="openModal(editTemplateModal,data)" class="link mr-2"
                    placement="top" ngbTooltip="แก้ไข">
                    <i-feather name="edit-2" class="feather-sm text-primary"></i-feather>
                  </a>
                  <a href="javascript: void(0);" class="link" (click)="deleteFile(data)" placement="top"
                    ngbTooltip="ลบ">
                    <i-feather name="trash-2" class="feather-sm text-danger"></i-feather>
                  </a> -->
                </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]="listCourse.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)]="modelCourse.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)]="modelCourse.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)]="modelCourse.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)]="modelCourse.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">
              <textarea class="form-control" [(ngModel)]="modelCourse.objective"></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)]="modelCourse.courseOutline"></textarea>
          </div>
        </div>

        <div class="form-group row">
          <label for="position" class="col-sm-4 col-form-label">ประเภทหลักสูตร</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" [(ngModel)]="modelCourse.courseType" >
          </div>
        </div>

        <div class="form-group row">
          <label for="position" class="col-sm-4 col-form-label">ระดับผู้เรียน</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" [(ngModel)]="modelCourse.courseLevel" >
          </div>
        </div>
        
        <div class="form-group row">
          <label for="position" class="col-sm-4 col-form-label">ระยะเวลาในการเรียนรู้ (ชั่วโมง)</label>
          <div class="col-sm-8">
            <input type="text" class="form-control"  [(ngModel)]="modelCourse.courseTime">
          </div>
        </div>

        <div class="form-group row">
          <label for="position" class="col-sm-4 col-form-label">ชื่อผู้สอน</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" [(ngModel)]="modelCourse.courseTrainer" >
          </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)]="modelCourse.courseTrainerDetail"></textarea>
          </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)="onSelectFile($event)">
          </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>
        </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)]="modelCourse.link1">
            </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)]="modelCourse.remark"></textarea>
            </div>
          </div>

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