<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
    <div class="text-lg font-bold py-2 px-8 text-primary">
        {{'DocumentUploadManager' | translate}}
    </div>
    <div class="page">
        <div class="border-b border-gray-200 dark:border-white/10 px-8">
            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
                    aria-controls="underline-1">
                    {{'DocumentUploadManager' | translate}}
                </a>
            </nav>
        </div>
        <div class="mt-3 px-2rem !-mt-3 pt-50px">
            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
                <div class="w-full min-height-50px mb-10px justify-between items-center">
                    <div class="flex justify-end">
                        <div class="px-1">
                            <div class="relative shadow-md">
                                <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
                                    [placeholder]="'SearchByNoOrName' | translate" [(ngModel)]="search">
                                <div
                                    class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
                                    <i class="ri-search-line text-gray"></i>
                                </div>
                            </div>
                        </div>
                        <div class="px-1">
                            <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                                (click)="currentModal='add';selectDocumentManager();openDialog()">
                                <i class="ri-add-line"></i>
                                {{'Add' | translate}}
                            </button>
                        </div>
                        <div class="px-1">
                            <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
                                (click)="currentModal='delete';selectDocumentManager();deleteDocumentManager()">
                                <i class="ri-delete-bin-6-line"></i>
                                {{'Delete' | translate}}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="page px-rem">
                    <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search"
                        [dataSource]="syncfutionDataList" [columns]="columns" [selectedItems]="selectedItems"
                        (sendSelectData)="currentModal='edit';selectDocumentManager($event);openDialog()"
                        (sendSelectedItems)="onSelectItemChange($event)">
                    </app-datagrid-syncfution>
                </div>
            </div>
        </div>
    </div>
</div>


<ng-template #documentModal let-modal>
    <h3 mat-dialog-title>
        {{(currentModal=='add'?'AddDocument':'EditDocument') | translate}}
    </h3>
    <div class="w-full flex justify-end mb-1rem">
        <div class="absolute flex">
            <div class="px-1">
                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
                    (click)="selectDocumentManager()">
                    <i class="ti ti-eraser text-base"></i>
                    {{'Clear' |translate}}
                </button>
            </div>
        </div>
    </div>
    <mat-dialog-content>
        <label for="input-label" class="ti-form-label mt-2rem">
            {{'Code' | translate}}
            <span class="text-danger">
                *
                <ng-container *ngIf="currentModal=='add'&&checkPrimary()">
                    {{'DuplicateCode' | translate}}
                </ng-container>
            </span></label>
        <input type="text" id="input-label" class="ti-form-input w-1/2 "
            [ngClass]="{'bg-input-readonly':currentModal=='edit'}" [readonly]="currentModal=='edit'"
            [(ngModel)]="documentManager.select.documentId">
        <label for="detail_th" class="ti-form-label mt-2rem">{{'DocumentNameThai' | translate}}<span
                class="text-danger">*</span></label>
        <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="documentManager.select.tdesc">
        <label for="detail_eng" class="ti-form-label mt-2rem">{{'DocumentNameEng' | translate}}<span
                class="text-danger">*</span></label>
        <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="documentManager.select.edesc">
        <label for="detail_short" class="ti-form-label mt-2rem">{{'DisplayOrder' | translate}}</label>
        <input type="number" id="detail_short" class="ti-form-input h-16" [(ngModel)]="documentManager.select.lineNo">
        <label for="detail_short" class="ti-form-label mt-2rem">{{'Eva' | translate}}<span
                class="text-danger">*</span></label>
        <select class="ti-form-select h-16" [(ngModel)]="documentManager.select.status">
            <option *ngFor="let item of [{data:0,text:'Close'},{data:1,text:'Open'}]" [ngValue]="item.data">
                {{ item.text | translate}}
            </option>
        </select>
        <label class="ti-form-label mt-2rem">
            {{'AttachFile' | translate}}
            <span class="text-danger">*</span></label>
        <div class="flex rounded-md">
            <label class="sr-only">{{'UploadFile' | translate}}</label>
            <input #fileInputMedium id="fileInputMedium" accept=".pdf,.ppt,.pptx,.xls,.xlsx,.doc,.docx" type="file"
                (change)="onFileSelected($event)" hidden>
            <input type="text" [value]="selectedFileName | translate" readonly onclick="fileInputMedium.click();"
                class=" cursor-pointer block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
            <span
                class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
                <button class="text-sm text-gray-500 dark:text-white/70"
                    onclick="fileInputMedium.click();">Browse</button>
            </span>
            <div class="flex items-center ml-2">
                <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md"
                    (click)="fileInputMedium.value = '';selectedFile=null;selectedFileName = 'PleaseSelectFile';documentManager.select.documentFiles=''">
                    <i class="ri-delete-bin-6-line"></i>
                    {{'Delete' | translate}}
                </button>
            </div>
        </div>
        <div class="flex" *ngIf="documentManager.select.documentFiles">
            <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
        text-center text-secondary border-secondary border-b-2 align-items-end"
                (click)="downloadFile(documentManager.select.documentFiles)">
                {{'DownloadFile' | translate}}</h1>
        </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button type="button" mat-button [mat-dialog-close]
            class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
            {{'Back' | translate}}
        </button>
        <button type="button" class="ti-btn ti-btn-success" mat-button (click)="addDocumentManager()"
            [class.ti-btn-disabled]="!documentManager.select.documentId||!documentManager.select.tdesc||!documentManager.select.edesc||!documentManager.select.documentFiles ||(currentModal=='add'&&checkPrimary())"
            [disabled]="!documentManager.select.documentId||!documentManager.select.tdesc||!documentManager.select.edesc||!documentManager.select.documentFiles ||(currentModal=='add'&&checkPrimary())">
            {{'SaveData' | translate}}
        </button>
    </mat-dialog-actions>
</ng-template>