<div class="ng-card custom-shadow mb-0">
  <div class="ng-cardHead">
    <div class="ng-cardLabel">
      <h3 class="ng-cardTitle">Activity Add-On Search</h3>
    </div>
    <button class="btn btn-primary" [routerLink]="['/ActivityConfiguration/ActivityAddOn/Add']">
      Add Activity Add-On
    </button>
  </div>

  <div class="ng-searchBody" [formGroup]="searchForm">
    <div class="row">
      <div class="col-lg-3">
        <div class="formControlWrapper">
          <label class="formLabel">Add-On</label>
          <input class="formInput" type="text" formControlName="addOn" placeholder="Search by add-on name">
        </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
    styleClass="p-datatable-gridlines"
    [value]="Result"
    [columns]="cols"
    [paginator]="true"
    [rows]="10"
    [rowsPerPageOptions]="[10, 25, 50, 100]"
    [resizableColumns]="true"
    responsiveLayout="scroll"
    [rowHover]="true"
    dataKey="activityAddonId"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [globalFilterFields]="[
      'addOn',
      'description',
      'applyRateOn',
      'currency',
      'activityAddonId',
      'activityAddonVendor',
      'status',
      'updatedBy',
      'Custom_updated_on'
    ]">

    <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 Add-On')">Excel</button>
          <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF" tooltipPosition="bottom"
            (click)="commonMasterSer.exportPdf(Result, cols, 'Activity Add-On')">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" #globalFilter
                (input)="dt.filterGlobal(globalFilter.value, 'contains')" placeholder="Global Search" />
            </span>
          </div>
        </ng-template>
      </p-toolbar>
    </ng-template>

    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" pSortableColumn="{{ col.field }}">
          {{ col.header }}
          <p-sortIcon [field]="col.field" class="p-sort-icon"></p-sortIcon>
        </th>
        <th>Action</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-data>
      <tr>
        <td>{{ data.addOn }}</td>
        <td>{{ data.description }}</td>
        <td>{{ data.applyRateOn }}</td>
        <td>{{ data.currency }}</td>
        <td>{{ data.activityAddonId }}</td>
        <td>{{ data.activityAddonVendor }}</td>
        <td>
          <span class="status" [ngClass]="{'status-success': data.isActive, 'status-failed': !data.isActive}">
            {{ data.status }}
          </span>
        </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.activityAddonId)">
              <span class="flex-center">Edit</span>
            </button>
            <button mat-menu-item (click)="ManageLang(data.activityAddonId)">
              <span class="flex-center">Manage Language</span>
            </button>
            <button mat-menu-item (click)="updateStatus(data.activityAddonId, data.isActive)">
              <span class="flex-center">{{ data.isActive ? 'Deactivate' : 'Activate' }}</span>
            </button>
          </mat-menu>
        </td>
      </tr>
    </ng-template>

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

<p-toast></p-toast>