<div class="row">
    <div class="col-12">
        <div class="card card-body">
            <h4 class="card-title">รายการเอกสาร</h4>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Search By
                </div>
                <div class="col-8 col-lg-3">
                    <select class="custom-select" [(ngModel)]="searchBy">
                        <option style="color: red" [class.d-none]="searchBy==''" [value]="''">
                            {{searchBy!=''?'ยกเลิก':''}}</option>
                        <option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option>
                        <option [value]="'module'">โมดูล</option>
                        <option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option>
                        <option [value]="'ename'">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</option>
                        <option [value]="'tdesc'">รายละเอียด (ภาษาไทย)</option>
                        <option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option>
                    </select>
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Condition
                </div>
                <div class="col-8 col-lg-3">
                    <select class="custom-select" [(ngModel)]="condition">
                        <option style="color: red" [class.d-none]="condition==''" [value]="''">
                            {{condition!=''?'ยกเลิก':''}}</option>
                        <option value="includes">คำในประโยค</option>
                        <option value="lt">น้อยกว่า</option>
                        <option value="gt">มากกว่า</option>
                        <option value="eq">เท่ากับ</option>
                        <option value="lte">น้อยกว่าเท่ากับ</option>
                        <option value="gte">มากกว่าเท่ากับ</option>
                        <option value="neq">ไม่เท่ากับ</option>
                    </select>
                </div>
            </div>
            <div class="row align-items-center mb-2">
                <div class="col-4 col-lg-3 text-right">
                    Key Value
                </div>
                <div class="col-8 col-lg-3">
                    <input type="text" class="form-control" [(ngModel)]="searchValue">
                </div>
            </div>
            <div class="row justify-content-center align-items-center mb-2">
                <button type="button" class="btn btn-info"
                    (click)="openTemplate.clear();templateListSearch()">ค้นหา</button>
            </div>
            <div class="row m-0 justify-content-end align-items-center">
                <button type="button" class="btn btn-info" (click)="openAddGroupModal(addGroupModal)">Add Group</button>
            </div>
            <div class="table-responsive">
                <table class="table mb-0 no-wrap v-middle ">
                    <thead class="bg-info text-white">
                        <tr>
                            <th class="text-center" scope="col">ชื่อกลุ่มรายงาน(Thai)</th>
                            <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
                            <th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th>
                            <th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th>
                            <th class="text-center" scope="col">สร้างเมื่อ</th>
                            <th class="text-center" scope="col" style="min-width: 120px;">โมดูล</th>
                            <th class="text-center" scope="col">Add file</th>
                        </tr>
                    </thead>
                    <tbody *ngIf="!template.filter.length">
                        <tr style="background-color:#ebf2f6">
                            <td colspan="7" class="text-center">ไม่พบข้อมูล</td>
                        </tr>
                    </tbody>
                    <tbody *ngIf="template.filter.length">
                        <ng-container
                            *ngFor="let items of template.filter | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                            <tr (mouseenter)="tableHover.set(items.templateId,!tableHover.get(items.templateId))"
                                (mouseleave)="tableHover.clear()"
                                [ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
                                <td colspan="6" class="font-16 font-medium">
                                    <span class="cursor-pointer text-info" style="text-decoration: underline;"
                                        (click)="openAddGroupModal(addGroupModal,items)">
                                        {{items.tname}}
                                    </span>
                                    <span>
                                        -{{items.ename}}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <ng-container *ngIf="items.templateFile.length">
                                        <ng-container *ngIf="!openTemplate.get(items.templateId)">
                                            <button type="button" title="เปิด" class="btn"
                                                style="border:3px solid #2962ff;border-radius: 10%;" (click)="
                                            openTemplate.set(items.templateId,true)"
                                                (mouseenter)="buttonHover.set(items.templateId+'open',!buttonHover.get(items.templateId))"
                                                (mouseleave)="buttonHover.clear()"
                                                [ngStyle]="{'background-color':buttonHover.get(items.templateId+'open')?'#dfdfdf':'#ffffff'}">
                                                <i class="fa fa-arrow-right text-info"></i>
                                            </button>
                                        </ng-container>
                                        <ng-container *ngIf="openTemplate.get(items.templateId)">
                                            <button type="button" title="ปิด" class="btn"
                                                style="border:3px solid #2962ff;border-radius: 10%;" (click)="
                                            openTemplate.set(items.templateId,false)"
                                                (mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))"
                                                (mouseleave)="buttonHover.clear()"
                                                [ngStyle]="{'background-color':buttonHover.get(items.templateId+'close')?'#dfdfdf':'#ffffff'}">
                                                <i class="fa fa-arrow-down text-info"></i>
                                            </button>
                                        </ng-container>
                                        &nbsp;
                                    </ng-container>
                                    <button type="button" title="เพิ่ม EXCCHILD" class="btn"
                                        style="border:3px solid #2962ff;border-radius: 10%;"
                                        (click)="openAddChildModal(addChildModal,items,'add')"
                                        (mouseenter)="buttonHover.set(items.templateId+'add',!buttonHover.get(items.templateId))"
                                        (mouseleave)="buttonHover.clear()"
                                        [ngStyle]="{'background-color':buttonHover.get(items.templateId+'add')?'#dfdfdf':'#ffffff'}">
                                        <i class="fa fa-floppy-o text-info"></i>
                                    </button>
                                    &nbsp;
                                    <button type="button" title="ลบ" class="btn"
                                        style="border:3px solid #2962ff;border-radius: 10%;"
                                        (mouseenter)="buttonHover.set(items.templateId+'delete',!buttonHover.get(items.templateId))"
                                        (mouseleave)="buttonHover.clear()"
                                        [ngStyle]="{'background-color':buttonHover.get(items.templateId+'delete')?'#dfdfdf':'#ffffff'}"
                                        (click)="deleteTemplate(items)">
                                        <i class="fa fa-trash text-danger"></i>
                                    </button>
                                </td>
                            </tr>
                            <ng-container *ngIf="openTemplate.get(items.templateId)">
                                <ng-container
                                    *ngFor="let item of items.templateFile | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
                                    <tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))"
                                        (mouseleave)="tableHover.clear()"
                                        [ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
                                        <ng-container *ngIf="downloadTemplateFileLoading.get(item.fileName)">
                                            <td colspan="7" class="text-center">
                                                <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1"
                                                    role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>
                                            </td>
                                        </ng-container>
                                        <ng-container *ngIf="!downloadTemplateFileLoading.get(item.fileName)">
                                            <td style="white-space: normal !important;word-break: break-word;">
                                                <i *ngIf="item.menuActive=='0'"
                                                    class="fa fa-times text-danger cursor-pointer"
                                                    style="text-decoration: underline;"
                                                    (click)="menuActiveTemplateFile(item)"></i>
                                                <i *ngIf="item.menuActive=='1'"
                                                    class="fa fa-check text-success cursor-pointer"
                                                    style="text-decoration: underline;"
                                                    (click)="menuActiveTemplateFile(item)"></i>
                                                &nbsp;
                                                <span class="cursor-pointer text-info"
                                                    style="text-decoration: underline;"
                                                    (click)="openAddChildModal(addChildModal,item,'edit')">
                                                    {{item.tdesc}}
                                                </span>
                                            </td>
                                            <td style="white-space: normal !important;word-break: break-word;">
                                                {{item.edesc}}</td>
                                            <td class="text-center"
                                                style="white-space: normal !important;word-break: break-word;">
                                                <!-- {{item.createBy.thFullName}}</td> -->
                                            <td class="text-center"
                                                style="white-space: normal !important;word-break: break-word;">
                                                {{formatISOToLocal(item.createDate).date}}</td>
                                            <td class="text-center"
                                                style="white-space: normal !important;word-break: break-word;">
                                                {{formatISOToLocal(item.createDate).time}}</td>
                                            <td class="text-center"
                                                style="white-space: normal !important;word-break: break-word;">
                                                {{item.module}}</td>
                                            <td class="text-center" class="text-center">
                                                <button type="button" title="Download File" class="btn"
                                                    style="border:3px solid #2962ff;border-radius: 10%"
                                                    (mouseenter)="buttonHover.set(item.fileName+'copy',!buttonHover.get(item.fileName))"
                                                    (mouseleave)="buttonHover.clear()"
                                                    [ngStyle]="{'background-color':buttonHover.get(item.fileName+'copy')?'#dfdfdf':'#ffffff'}"
                                                    (click)="downloadTemplateFile(item)">
                                                    <i class="fa fa-files-o text-info"></i>
                                                </button>
                                                &nbsp;
                                                <button type="button" title="Print" class="btn"
                                                    style="border:3px solid #2962ff;border-radius: 10%"
                                                    (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
                                                    (mouseleave)="buttonHover.clear()"
                                                    [ngStyle]="{'background-color':buttonHover.get(item.fileName+'print')?'#dfdfdf':'#ffffff'}"
                                                    (click)="openPrintModal(printModal,item);">
                                                    <i class="fa fa-print text-info"></i>
                                                </button>
                                                &nbsp;
                                                <button type="button" title="ลบ" class="btn"
                                                    style="border:3px solid #2962ff;border-radius: 10%;"
                                                    (mouseenter)="buttonHover.set(item.fileName+'delete',!buttonHover.get(item.fileName))"
                                                    (mouseleave)="buttonHover.clear()"
                                                    [ngStyle]="{'background-color':buttonHover.get(item.fileName+'delete')?'#dfdfdf':'#ffffff'}"
                                                    (click)="deleteTemplateFile(item)">
                                                    <i class="fa fa-trash text-danger"></i>
                                                </button>
                                            </td>
                                        </ng-container>
                                    </tr>
                                </ng-container>
                            </ng-container>
                        </ng-container>
                    </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]="template.filter.length"
                    [maxSize]="3" [rotate]="true">
                    <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
                    <ng-template ngbPaginationNext>ถัดไป</ng-template>
                </ngb-pagination>
            </div>
            <div class="row justify-content-end align-items-center">
                <i class="fa fa-times text-danger"></i>&nbsp;=&nbsp;used on menu&nbsp;&nbsp;&nbsp;
                <i class="fa fa-check text-success"></i>&nbsp;=&nbsp;unused on menu&nbsp;&nbsp;&nbsp;
                <i class="fa fa-files-o text-info"></i>&nbsp;=&nbsp;copy template&nbsp;&nbsp;&nbsp;
                <i class="fa fa-print text-info"></i>&nbsp;=&nbsp;print report
            </div>
        </div>
    </div>
</div>


<ng-template #addGroupModal let-modal>
    <div class="modal-header">
        <h5 class="modal-title" id="edittemplateLabel">EXCHEAD, Template header excel</h5>
        <button type="button" class="close" (click)="modal.dismiss()" 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" disabled [value]="bodyTemplate.data.templateId">
            </div>
        </div>
        <div class="form-group row">
            <label for="nameth" class="col-sm-4 col-form-label">ชื่อกลุ่มรายงาน (ภาษาไทย)<span
                    style="color: red">*</span></label>
            <div class="col-sm-8">
                <input type="text" class="form-control" [(ngModel)]="bodyTemplate.data.tname">
            </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" [(ngModel)]="bodyTemplate.data.ename">
            </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)]="bodyTemplate.data.tdesc"></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)]="bodyTemplate.data.edesc"></textarea>
            </div>
        </div>
        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">โมดูล<span style="color: red">*</span></label>
            <div class="col-sm-8">
                <select class=" custom-select" [disabled]="bodyTemplate.status=='edit'"
                    [(ngModel)]="bodyTemplate.data.module">
                    <option style="color: red" [class.d-none]="bodyTemplate.data.module==''" [value]="''">
                        {{bodyTemplate.data.module!=''?'ยกเลิก':''}}</option>
                    <option *ngFor="let item of module.data" [ngValue]="item.code">{{item.tdesc}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="modal-footer ">
        <button type="submit" class="btn btn-info" [disabled]="!bodyTemplate.data.tname||!bodyTemplate.data.module"
            (click)="modal.close()">บันทึก</button>
        <button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
    </div>
</ng-template>


<ng-template #addChildModal let-modal>
    <div class="modal-header">
        <h5 class="modal-title" id="edittemplateLabel">EXCCHILD, Template file excel</h5>
        <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="form-group row ml-0">
            <div class="custom-control custom-radio col-sm-4 d-flex align-items-center">
                <input type="radio" class="custom-control-input cursor-pointer" name="excelFile" id="excelFilePortal"
                    [checked]="templateFileType=='portal'"
                    (click)="templateFileType='portal';templateFile.fileData='';templateFile.fileType='';templateFileName=''">
                <label class="custom-control-label cursor-pointer" for="excelFilePortal">เลือกเอ็กเซลล์ไฟล์จาก
                    Portal<span *ngIf="templateFileType=='portal'" style="color: red">*</span></label>
            </div>
            <div class="col-sm-8 d-flex align-items-center">
                <ng-container *ngIf="templateFileType=='portal'">
                    <input *ngIf="templateFile.portalId" type="text" class="form-control col-10 bg-white"
                        [value]="templateFile.portalId" readonly>
                    <button type="button" class="btn btn-info mr-2 col-auto"
                        (click)="openExcelPortalModal(excel_portalModal)"><i
                            class="fa fa-search text-white"></i></button>
                </ng-container>
            </div>
        </div>
        <div class="form-group row ml-0">
            <div class="custom-control custom-radio col-sm-4">
                <input type="radio" class="custom-control-input cursor-pointer" name="excelFile" id="excelFileUpload"
                    [checked]="templateFileType=='upload'" (click)="templateFileType='upload';templateFile.portalId=''">
                <label class="custom-control-label cursor-pointer" for="excelFileUpload">อัพโหลดเอ็กเซลล์ไฟล์<span
                        *ngIf="templateFileType=='upload'" style="color: red">*</span></label>
            </div>
            <div class="col-sm-8 d-flex align-items-center">
                <ng-container *ngIf="templateFileType=='upload'">
                    <input #fileInput type="file" accept=".xlsx" (change)="onFileSelected($event)"
                        style="display:none;" />
                    <button (click)="fileInput.click()">เลือกไฟล์</button>
                    &nbsp;
                    <span *ngIf="templateFileName">{{ templateFileName }}</span>
                </ng-container>
            </div>
        </div>
        <div class="form-group row">
            <label for="nameth" class="col-sm-4 col-form-label">รายละเอียด (ภาษาไทย)<span
                    style="color: red">*</span></label>
            <div class="col-sm-8">
                <input type="text" class="form-control" [(ngModel)]="templateFile.tdesc">
            </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" [(ngModel)]="templateFile.edesc">
            </div>
        </div>
        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">แบ่งปัน</label>
            <div class="row col-sm-8">
                <div class="custom-control custom-radio m-2">
                    <input type="radio" class="custom-control-input cursor-pointer" name="share" id="shareNo"
                        [checked]="templateFile.isShare=='0'" (click)="templateFile.isShare='0'">
                    <label class="custom-control-label cursor-pointer" for="shareNo">ไม่ใช่</label>
                </div>
                <div class="custom-control custom-radio m-2">
                    <input type="radio" class="custom-control-input cursor-pointer" name="share" id="shareYes"
                        [checked]="templateFile.isShare=='1'" (click)="templateFile.isShare='1'">
                    <label class="custom-control-label cursor-pointer" for="shareYes">ใช่</label>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">แสดงรูปแบบ pivot</label>
            <div class="row col-sm-8">
                <div class="custom-control custom-radio m-2">
                    <input type="radio" class="custom-control-input cursor-pointer" name="pivot" id="pivotNo"
                        [checked]="templateFile.isPivot=='0'" (click)="templateFile.isPivot='0'">
                    <label class="custom-control-label cursor-pointer" for="pivotNo">ไม่ใช่</label>
                </div>
                <div class="custom-control custom-radio m-2">
                    <input type="radio" class="custom-control-input cursor-pointer" name="pivot" id="pivotYes"
                        [checked]="templateFile.isPivot=='1'" (click)="templateFile.isPivot='1'">
                    <label class="custom-control-label cursor-pointer" for="pivotYes">ใช่</label>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="position" class="col-sm-4 col-form-label">แสดงรูปแบบ datagrid</label>
            <div class="row col-sm-8">
                <div class="custom-control custom-radio m-2">
                    <input type="radio" class="custom-control-input cursor-pointer" name="datagt" id="datagtNo"
                        [checked]="templateFile.isDataGrid=='0'" (click)="templateFile.isDataGrid='0'">
                    <label class="custom-control-label cursor-pointer" for="datagtNo">ไม่ใช่</label>
                </div>
                <div class="custom-control custom-radio m-2">
                    <input type="radio" class="custom-control-input cursor-pointer" name="datagt" id="datagtYes"
                        [checked]="templateFile.isDataGrid=='1'" (click)="templateFile.isDataGrid='1'">
                    <label class="custom-control-label cursor-pointer" for="datagtYes">ใช่</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 d-flex justify-content-center align-content-center">
                <button type="button" class="btn btn-info" (click)="openGridModal(gridModal)">Datagrid</button>
                &nbsp;
                <button type="button" class="btn btn-info" (click)="openPivotModal(pivotModal)">Pivot</button>
            </div>
        </div>
    </div>
    <div class="modal-footer ">
        <button type="submit" class="btn btn-info"
            [disabled]="(!templateFile.portalId&&!templateFile.fileData)||!templateFile.tdesc"
            (click)="postTemplateFile()">บันทึก</button>
        <button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
    </div>
</ng-template>

<ng-template #excel_portalModal let-modal>
    <div class="modal-header">
        <h5 class="modal-title" id="edittemplateLabel">EXCEL_PORTAL</h5>
        <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="row align-items-center mb-2">
            <div class="col-12 col-lg-3 mb-2">
                <select class="custom-select" [(ngModel)]="excelPortalSearch.groupId">
                    <option value="" *ngIf="excelPortalSearch.groupId==''" disabled selected hidden>เลือกกลุ่ม
                    </option>
                    <option style="color: red" [class.d-none]="excelPortalSearch.groupId==''" [value]="''">
                        {{excelPortalSearch.groupId!=''?'ยกเลิก':''}}</option>
                    <option *ngFor="let item of excelPortalGroup.data; let i=index" [ngValue]="item.groupId">
                        {{item.thName}}
                    </option>
                </select>
            </div>
            <div class="col-12 col-lg-3 mb-2">
                <select class="custom-select" [(ngModel)]="excelPortalSearch.tags">
                    <option value="" *ngIf="excelPortalSearch.tags==''" disabled selected hidden>เลือกtags
                    </option>
                    <option style="color: red" [class.d-none]="excelPortalSearch.tags==''" [value]="''">
                        {{excelPortalSearch.tags!=''?'ยกเลิก':''}}</option>
                    <option *ngFor="let item of excelPortalTags.data; let i=index" [ngValue]="item.value">{{item.value}}
                    </option>
                </select>
            </div>
            <div class="col-12 col-lg-6 d-flex justify-content-end mb-2">
                <div class="col-12 col-lg-6 p-0">
                    <input type="text" class="form-control" placeholder="ค้นหา" [(ngModel)]="excelPortalSearch.search">
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table mb-0 no-wrap v-middle ">
                <thead class="bg-info text-white">
                    <tr>
                        <th class="text-center" scope="col">Ex.</th>
                        <th class="text-center" scope="col">VDO</th>
                        <th class="text-center" scope="col" style="min-width: 200px">Name</th>
                        <th class="text-center" scope="col" style="min-width: 200px">Description</th>
                        <th class="text-center" scope="col">Database Support</th>
                        <th class="text-center" scope="col">Pivot</th>
                        <th class="text-center" scope="col">DataGrid</th>
                        <th class="text-center" scope="col">Download</th>
                        <th class="text-center" scope="col">Last Download</th>
                        <th class="text-center" scope="col">Upload Date</th>
                    </tr>
                </thead>
                <tbody *ngIf="!excelPortalFilter().length">
                    <tr style="background-color:#ebf2f6">
                        <td colspan="10" class="text-center">ไม่พบข้อมูล</td>
                    </tr>
                </tbody>
                <tbody *ngIf="excelPortalFilter().length">
                    <ng-container
                        *ngFor="let item of excelPortalFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal ; let i = index">
                        <tr (mouseenter)="tableHover.set(item.excelId,!tableHover.get(item.excelId))"
                            (mouseleave)="tableHover.clear()"
                            [ngStyle]="{'background-color':tableHover.get(item.excelId)?'rgb(201 223 235)':'#ebf2f6'}">
                            <td><img *ngIf="item.getImg()" class="border p-1" [src]="item.getImg()">
                            </td>
                            <td>
                                <button *ngIf="item.link1" type="button" class="btn btn-info"
                                    (click)="openVideoModal(videoModal,item.link1)"><i
                                        class="fa fa-search text-white"></i></button>
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.thName}}
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.thDesc}}
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.dbSupport}}
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.isPivot}}
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.isDataGrid}}
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.dwTime}}
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.downloadDate}} {{item.downloadTime}}
                            </td>
                            <td class="cursor-pointer" (click)="modal.close(item)"
                                style="white-space: normal !important;word-break: break-word;">
                                {{item.uploadDate}} {{item.uploadTime}}
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </table>
        </div>
        <div class="d-flex justify-content-end py-2">
            <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSizeModal"
                (ngModelChange)="pageModal">
                <option [ngValue]="10">รายการต่อหน้า: 10</option>
                <option [ngValue]="50">รายการต่อหน้า: 50</option>
                <option [ngValue]="100">รายการต่อหน้า: 100</option>
            </select>
            <ngb-pagination [(page)]="pageModal" [pageSize]="pageSizeModal"
                [collectionSize]="excelPortalFilter().length" [maxSize]="3" [rotate]="true">
                <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
                <ng-template ngbPaginationNext>ถัดไป</ng-template>
            </ngb-pagination>
        </div>
    </div>
    <div class="modal-footer ">
        <button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
    </div>
</ng-template>

<ng-template #videoModal let-modal>
    <div style="width: 100%; height: 70vh;">
        <iframe class="w-100 h-100" [src]="videoLink | safeUrl" frameborder="0" allow="autoplay; encrypted-media"
            allowfullscreen>
        </iframe>
    </div>
</ng-template>


<ng-template #printModal let-modal>
    <div class="modal-header">
        <h5 class="modal-title" id="edittemplateLabel">Excel Report</h5>
        <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="d-flex col-12 justify-content-center" *ngIf="loading||loadingExcel">
                <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
            <ng-container *ngIf="!loading&&!loadingExcel">
                <ng-container *ngFor="let item of variableSheet; let i=index">
                    <div class="col-12 row">
                        <div class="col-3 form-group justify-content-center font-weight-bold control-label col-form-label font-14"
                            style="text-align: end;">
                            {{item.label}}
                        </div>
                        <div class="col-3 d-flex form-group align-items-center">
                            <ng-container *ngIf="item.type=='text'">
                                <input type="text" class="form-control" [(ngModel)]="item.value">
                            </ng-container>
                            <ng-container *ngIf="item.type=='list'">
                                <select class="custom-select" [(ngModel)]="item.value">
                                    <option *ngFor="let list of item.option" [value]="list.value">
                                        {{list.text}}
                                    </option>
                                </select>
                            </ng-container>
                            <ng-container *ngIf="item.type=='radio'">
                                <div class="row m-0">
                                    <ng-container *ngFor="let radioItem of item.option">
                                        <div class="col-auto custom-control custom-radio">
                                            <input type="radio" class="custom-control-input"
                                                [name]="'group-' + item.label" [id]="radioItem.text+radioItem.value"
                                                [value]="radioItem.value" [(ngModel)]="item.value">
                                            <label class="custom-control-label"
                                                [for]="radioItem.text+radioItem.value">{{radioItem.text}}</label>
                                        </div>
                                    </ng-container>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="item.type=='help'">
                                <div class="input-group">
                                    <input type="text" readonly class="form-control bg-white cursor-pointer"
                                        [value]="item.value.tdesc" (click)="openModalData(item,modalData)">
                                    <div class="input-group-append">
                                        <button class="btn mr-0 btn-info" type="button"
                                            (click)="openModalData(item,modalData)">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </ng-container>
                            <ng-container *ngIf="item.type=='calendar'">
                                <div class="input-group">
                                    <input class="form-control bg-white cursor-pointer"
                                        placeholder="{{ 'dd.mm.yyyy'  }}" name="dp1" ngbDatepicker #d1="ngbDatepicker"
                                        [(ngModel)]="select[item.key]" readonly (click)="d1.toggle()"
                                        (ngModelChange)="formatNgbDate(item.key,select[item.key])" #c1="ngModel"
                                        (change)="validateDate(c1)">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-info no-shadow" (click)="d1.toggle()"
                                            type="button">
                                            <i class="far fa-calendar-alt"></i>
                                        </button>
                                    </div>
                                </div>
                            </ng-container>
                        </div>
                        <div class="col">
                            <ng-container *ngIf="item.type=='help'">
                                <button type="button" class="btn btn-danger  btn-sm btn-circle"
                                    (click)="item.value={id:'',tdesc:'',edesc:''}"><i class="fa fa-times"></i>
                                </button>
                            </ng-container>
                            <ng-container *ngIf="item.type=='calendar'">
                                <button type="button" class="btn btn-danger  btn-sm btn-circle"
                                    (click)="select[item.key]=null ;formatNgbDate(item.key)"><i class="fa fa-times"></i>
                                </button>
                            </ng-container>
                            <ng-container *ngIf="item.type=='list'">
                                <button type="button" class="btn btn-danger  btn-sm btn-circle"
                                    (click)="item.value=''"><i class="fa fa-times"></i>
                                </button>
                            </ng-container>
                        </div>
                    </div>
                </ng-container>
                <!-- <div *ngIf="variableSheet.length&&!loadingExcel"
                    class="col-12 justify-content-center align-content-center d-flex" style="margin-bottom: 1rem;">
                    <button type="submit" class="btn btn-info waves-effect waves-light btn-w-100"
                        (click)="dowloadExcelReport()">
                        {{"Print" }}
                    </button>
                </div>
                <div *ngIf="loadingExcel" class="col-12 justify-content-center align-content-center d-flex"
                    style="margin-bottom: 1rem;">
                    <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div> -->
                <div *ngIf="!variableSheet.length" class="col-12 justify-content-center align-content-center d-flex"
                    style="margin-bottom: 1rem;margin-top: 1rem;">
                    <div
                        class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14">
                        {{'No Data Found' }}
                    </div>
                </div>
            </ng-container>
        </div>
    </div>
    <div class="modal-footer ">
        <ng-container *ngIf="variableSheet.length">
            <button type="submit" class="btn btn-info waves-effect waves-light btn-w-100" [disabled]="loadingExcel"
                (click)="dowloadExcelReport()">
                {{"Print" }}
            </button>
        </ng-container>
        <button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
    </div>
</ng-template>

<ng-template #modalData let-modal>
    <div class="modal-header">
        <h5 class="modal-title" id="edittemplateLabel"> {{modalDetail.text.cardHead }}</h5>
        <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="d-flex mb-1">
            <input type="text" placeholder="{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
                class=" form-control w-75 border-color-gray-full-focus" [(ngModel)]='searchModal'>
        </div>
        <div class="table-responsive">
            <table class="table  table-hover table-striped-myhr table-sm  mb-0 no-wrap v-middle ">
                <thead class="bg-info ">
                    <tr class="text-white font-weight-normal">
                        <th class="font-weight-normal text-center" scope="col"
                            *ngFor="let item of modalDetail.text.tableHead">
                            {{item}}
                        </th>
                    </tr>
                </thead>
                <tbody *ngIf="!valueDetailFilter().length">
                    <tr>
                        <td colspan="9" class="font-weight-normal text-center">
                            {{"No Data Found" }}
                        </td>
                    </tr>
                </tbody>
                <tbody *ngIf="valueDetailFilter().length">
                    <tr class="cursor-pointer"
                        *ngFor="let item of valueDetailFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal; let i=index"
                        (click)="selectData(item);modal.dismiss()"
                        (mouseenter)="tableHover.set(item.id,!tableHover.get(item.id))"
                        (mouseleave)="tableHover.clear()"
                        [ngStyle]="{'background-color':tableHover.get(item.id)?'rgb(201 223 235)':'#ffffff'}">
                        <td class="align-middle text-center">
                            {{item.id}}
                        </td>
                        <td class="align-middle text-center">
                            {{item.tdesc}}
                        </td>
                        <td class="align-middle text-center">
                            {{item.edesc}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="d-flex justify-content-end p-2">
            <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
                [(ngModel)]="pageSizeModal" (ngModelChange)="pageModal=1">
                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
                    {{"Items per page"}}: {{item}}
                </option>
            </select>
            <ngb-pagination [collectionSize]="valueDetailFilter().length" [(page)]="pageModal"
                [pageSize]="pageSizeModal" [maxSize]="3" [rotate]="true">
                <ng-template ngbPaginationPrevious>{{"Prev"}}</ng-template>
                <ng-template ngbPaginationNext>{{"Next"}}</ng-template>
            </ngb-pagination>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" (click)="modal.close()">
            {{"Close"}}
        </button>
    </div>
</ng-template>



<ng-template #gridModal let-modal>
    <div class="modal-header">
        <h5 class="modal-title" id="edittemplateLabel">GridData</h5>
        <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ejs-grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="{ pageSize: 5 }">
            <e-columns>
                <e-column field="id" headerText="ID" width="100"></e-column>
                <e-column field="name" headerText="Name" width="150"></e-column>
                <e-column field="age" headerText="Age" width="100"></e-column>
            </e-columns>
        </ejs-grid>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" (click)="modal.close()">
            {{"Close"}}
        </button>
    </div>
</ng-template>
<ng-template #pivotModal let-modal>
    <div class="modal-header">
        <h5 class="modal-title" id="edittemplateLabel">Pivot</h5>
        <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ejs-pivotview [dataSourceSettings]="pivotDataSource" height="300"></ejs-pivotview>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" (click)="modal.close()">
            {{"Close"}}
        </button>
    </div>
</ng-template>