<div class="ng-card custom-shadow mb-0">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
            <h3 class="ng-cardTitle">Activity Category Search</h3>
        </div>
        <button class="btn btn-primary" [routerLink]="['/ActivityConfiguration/ActivityCategory/Add']">Add Category</button>
    </div>
    <div class="ng-searchBody" [formGroup]="categorySearchForm">
        <div class="row">
            <div class="col-lg-4">
                <div class="formControlWrapper">
                    <label class="formLabel">Category Name</label>
                    <input class="formInput" type="text" formControlName="categoryName">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="formControlWrapper">
                    <label class="formLabel">Parent Category</label>
                    <ng-select class="is-invalid" placeholder="Select" formControlName="parentCategoryId">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Parent Category</h4>
                                    </div>
                                    <button class="temp_mobileBackButton">
                                        <i class="material-icons">close</i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-option value="">Select</ng-option>
                        <ng-option *ngFor="let data of AllParentCategory" [value]="data.activityCategoryId">{{data.categoryName}}</ng-option>
                    </ng-select>
                </div>
            </div>
        </div>
    </div>
    <div class="ng-searchFooter">
        <button class="btn btn-secondary mr-10 ResetBtn" (click)="Reset()">Reset</button>
        <button class="btn btn-primary SearchBtn" (click)="Search()">Search</button>
    </div>
</div>

<div class="dataTable actionButtonSticky custom-shadow">
    <p-table #dt 
        [resizableColumns]="true" 
        [columns]="cols" 
        [value]="Result" 
        [rows]="10" 
        [rowsPerPageOptions]="[10, 25, 50, 100]"
        styleClass="p-datatable-gridlines" 
        responsiveLayout="scroll" 
        [paginator]="true" 
        [rowHover]="true" 
        dataKey="activityCategoryId"
        [globalFilterFields]="[
            'categoryName',
            'parentCategoryName',
            'activityCategoryId',
            'status',
            'createdBy',
            'Custom_created_on',
            'updatedBy',
            'Custom_updated_on'
        ]"
        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" 
        [showCurrentPageReport]="true">

        <ng-template pTemplate="caption">
            <p-toolbar *ngIf="Result && Result.length > 0">
                <ng-template pTemplate="left">
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="CSV" tooltipPosition="bottom"
                        (click)="dt.exportCSV()">CSV</button>
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="XLS" tooltipPosition="bottom"
                        (click)="commonMasterSer.exportExcel(Result, cols, 'Activity Category')">Excel</button>
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF" tooltipPosition="bottom"
                        (click)="commonMasterSer.exportPdf(Result, cols, 'Activity Category')">PDF</button>
                </ng-template>
                <ng-template pTemplate="right">
                    <div class="p-d-flex p-ai-center">
                        <span class="p-input-icon-left">
                            <i class="pi pi-search"></i>
                            <input pInputText type="search" #searchInp
                                (input)="dt.filterGlobal(searchInp.value, 'contains')" placeholder="Search" />
                        </span>
                    </div>
                </ng-template>
            </p-toolbar>
        </ng-template>

        <ng-template pTemplate="header">
            <tr>
                <th pSortableColumn="categoryName">
                    Category Name
                    <p-sortIcon field="categoryName" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="parentCategoryName">
                    Parent Category
                    <p-sortIcon field="parentCategoryName" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="activityCategoryId">
                    Category Id
                    <p-sortIcon field="activityCategoryId" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="status">
                    Status
                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="createdBy">
                    Created By
                    <p-sortIcon field="createdBy" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="Custom_created_on">
                    Created On
                    <p-sortIcon field="Custom_created_on" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="updatedBy">
                    Updated By
                    <p-sortIcon field="updatedBy" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="Custom_updated_on">
                    Updated On
                    <p-sortIcon field="Custom_updated_on" class="p-sort-icon"></p-sortIcon>
                </th>
                <th>Action</th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-data>
            <tr>
                <td>{{ data.categoryName }}</td>
                <td>{{ data.parentCategoryName }}</td>
                <td>{{ data.activityCategoryId }}</td>
                <td>
                    <span class="status" [ngClass]="{'status-success': data.isActive, 'status-failed': !data.isActive}">
                        {{ data.status }}
                    </span>
                </td>
                <td>{{ data.createdBy }}</td>
                <td>{{ data.Custom_created_on }}</td>
                <td>{{ data.updatedBy }}</td>
                <td>{{ data.Custom_updated_on }}</td>
                <td>
                    <button mat-icon-button [matMenuTriggerFor]="menu">
                        <span class="material-icons">more_horiz</span>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="Edit(data.activityCategoryId)">
                            <span class="flex-center">
                                <span>Edit</span>
                            </span>
                        </button>
                        <button mat-menu-item (click)="ManageLang(data.activityCategoryId)">
                            <span class="flex-center">
                                <span>Manage Language</span>
                            </span>
                        </button>
                        <button mat-menu-item (click)="updateStatus(data.activityCategoryId, data.isActive)">
                            <span class="flex-center">
                                <span>{{ !data.isActive ? 'Active' : 'Deactive' }}</span>
                            </span>
                        </button>
                    </mat-menu>
                </td>
            </tr>
        </ng-template>

        <ng-template pTemplate="emptymessage">
            <tr *ngIf="Result === null || Result?.length === 0" class="resultNotFound">
                <td colspan="9">No data found</td>
            </tr>
        </ng-template>
    </p-table>
</div>