<div class="app-mainHeader mt-20">
  <div>Optional Add-Ons</div>
  <button pButton type="button" label="Add Optional Add-Ons" class="btn-primary"
    [routerLink]="['/Services/ActivityServices/ExpServices/Manage/AddOptionalAddOn']"></button>
</div>
<div class="app-mainCard">
  <div class="app-mainGrid4">
    <div class="">
      <label class="formLabel">Add-On</label>
      <input class="formInput" [(ngModel)]="add_on" type="text" />
    </div>
  </div>
  <div class="mt-20">
    <button pButton type="button" label="Reset" (click)="ResetExp()" class="btn btn-secondary mr-10"></button>
    <button pButton type="button" label="Search" (click)="SearchExp()" class="btn btn-primary"></button>
  </div>
</div>

<div class="card">
  <p-table #dt [value]="OptAddData" [columns]="cols" [rows]="3" [resizableColumns]="true"
    styleClass="p-datatable-gridlines" responsiveLayout="scroll" selectionMode="multiple" [(selection)]="OptAddData"
    [paginator]="true" [globalFilterFields]="[
      'add_on_name',
      'add_on_description',
      'rate_type',
      'currency_code',
      'rate',
      'is_active'
    ]" [rowHover]="true" dataKey="id" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [showCurrentPageReport]="true">
    <ng-template pTemplate="caption">
      <p-toolbar *ngIf="OptAddData">
        <ng-template pTemplate="left">
          <div class="p-button-set">
            <button type="button" pButton class="btn-secondary mr-10" pTooltip="Copy" label="Copy"
              tooltipPosition="bottom"></button>
            <button type="button" pButton (click)="dt.exportCSV()" class="btn-secondary mr-10" pTooltip="CSV"
              label="CSV" tooltipPosition="bottom"></button>
            <button type="button" pButton (click)="exportExcel()" class="btn-secondary mr-10" pTooltip="XLS"
              label="Excel" tooltipPosition="bottom"></button>
            <button type="button" pButton (click)="exportPdf()" class="btn-secondary  mr-10" pTooltip="PDF" label="PDF"
              tooltipPosition="bottom"></button>
            <button type="button" pButton class="btn-secondary" pTooltip="Print" label="Print"
              tooltipPosition="bottom"></button>
          </div>
        </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="add_on_name">
          Add-On
          <p-sortIcon field="add_on_name" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="add_on_description">
          Description
          <p-sortIcon field="add_on_description" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="rate_type">
          Rate Type
          <p-sortIcon field="rate_type" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="currency_code">
          Currency
          <p-sortIcon field="currency_code" class="p-sort-icon"></p-sortIcon>
        </th>

        <th pSortableColumn="is_active">
          Status
          <p-sortIcon field="is_active" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="Action">Action</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-ons>
      <tr>
        <td>{{ ons.add_on_name }}</td>
        <td>{{ ons.add_on_description }}</td>
        <td>{{ ons.rate_type }}</td>
        <td>{{ ons.currency_code }}</td>
        <td>
          <span class="product-badge" [ngClass]="{
              'status-active': ons.is_active,
              'status-inactive': ons.is_active == false
            }">{{ ons.is_active ? "Active" : "Deactive" }}</span>
        </td>
        <td>
          <div class="actionButton">
            <button mat-icon-button [matMenuTriggerFor]="menu">
              <span class="material-icons"> more_horiz </span>
            </button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item (click)="Edit(ons.activity_add_on_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> edit </span>
                  <span> Edit </span>
                </span>
              </button>
              <button mat-menu-item (click)="UpdateStatus(ons.activity_add_on_id, ons.is_active)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> check_circle </span>
                  <span>
                    {{ ons.is_active ? "Deactivate" : "Activate" }}
                  </span>
                </span>
              </button>
            </mat-menu>
          </div>
        </td>
      </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
      <tr *ngIf="OptAddData === null || OptAddData" class="ResultNotFound">
        <td>
          No data found
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>
<p-toast></p-toast>