<div class="card">
    <div class="card-body">
        <h4 class="card-title">Excel Report</h4>
        <div class="row">
            <div class="d-flex col-12 justify-content-center" *ngIf="loading">
                <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">
                <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)]="select[item.key]">
                            </ng-container>
                            <ng-container *ngIf="item.type=='list'">
                                <select class="custom-select" [(ngModel)]="select[item.key]">
                                    <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)]="select[item.key]">
                                            <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]="select[item.key].tdesc" (click)="openModal(item,modalData)">
                                    <div class="input-group-append">
                                        <button class="btn mr-0 btn-info" type="button"
                                            (click)="openModal(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)="select[item.key]={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)="select[item.key]=''"><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>

<ng-template #modalData let-modal>
    <div class="modal-content dialog-height">
        <div class="modal-body" [perfectScrollbar]="{}">
            <div class="card" style="margin-bottom:-15px">
                <div class="card-header bg-myhr">
                    <h5 class="card-title">
                        {{modalDetail.text.cardHead }}</h5>
                </div>
                <div class="card-body pb-0 pt-1">
                    <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-myhr"
                                    *ngFor="let item of valueDetailFilter() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize; let i=index"
                                    (click)="selectData(item);modal.dismiss()">
                                    <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)]="pageSize" (ngModelChange)="page=1">
                            <option *ngFor="let item of [10,50,100]" [ngValue]="item">
                                {{"Items per page"}}: {{item}}
                            </option>
                        </select>
                        <ngb-pagination [collectionSize]="valueDetailFilter().length" [(page)]="page"
                            [pageSize]="pageSize" [maxSize]="3" [rotate]="true">
                            <ng-template ngbPaginationPrevious>{{"Prev"}}</ng-template>
                            <ng-template ngbPaginationNext>{{"Next"}}</ng-template>
                        </ngb-pagination>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" (click)="modal.close()">
                {{"ปิด"}}
            </button>
        </div>
    </div>
</ng-template>