<div class="app-mainHeader">
  <div>Search Experience</div>
  <button pButton type="button" label="Add Experience" class="btn-primary"
    [routerLink]="['/Services/ActivityServices/ExpServices/Add']"></button>
</div>
<div class="app-mainCard">
  <div class="app-mainGrid4 align-end" [formGroup]="ExpSearch">
    <div class="app-grid1-3">
      <label class="formLabel">Experience Name</label>
      <input class="formInput" formControlName="activity_name" type="text" />
    </div>
    <div class="ng-hideHead">
      <label class="formLabel">Supplier</label>
      <ng-select #selectExp formControlName="category_id" [items]="ExpSupData" bindLabel="category_name"
        bindValue="activity_category_id">ExpCity
        <ng-template ng-header-tmp>
          <div class="select-mobileHeader">
            <button matRipple class="select-mobileBack">
              <i class="material-icons"> arrow_back </i>
            </button>
            <div class="select-mobileTitle">Supplier</div>
          </div>
          <div class="select-search">
            <span class="material-icons"> search </span>
            <input type="text" #searchExp (input)="selectExp.filter(searchExp.value)" />
          </div>
        </ng-template>
      </ng-select>
    </div>
    <div class="ng-hideHead">
      <label class="formLabel">Experience Category</label>
      <ng-select #selectExp formControlName="category_id" [items]="Experience_Type"
        (change)="GetSubCategory($event.activity_category_id)" bindLabel="category_name"
        bindValue="activity_category_id">

      </ng-select>
    </div>
    <div class="">
      <label class="formLabel" for="">Experience Sub-Category</label>
      <ng-select #select [items]="SubCategory" bindLabel="category_name" formControlName="sub_category_id"
        bindValue="activity_category_id" class="is-invalid" placeholder="select" [multiple]="false">
      </ng-select>
    </div>
    <div>
      <label class="formLabel">Country</label>
      <ng-select [items]="CountryData" bindLabel="country_name" bindValue="alpha_2_code" #selectCountry
        (change)="ExpCity()" formControlName="country_code">

      </ng-select>
    </div>
    <div>
      <label class="formLabel">City</label>
      <ng-select [items]="CityData" bindLabel="city_name" bindValue="city_id" #selectCity formControlName="city_id">
        <ng-template ng-header-tmp>
          <div class="select-mobileHeader">
            <button matRipple class="select-mobileBack">
              <i class="material-icons"> arrow_back </i>
            </button>
            <div class="select-mobileTitle">City</div>
          </div>
          <div class="select-search">
            <span class="material-icons"> search </span>
            <input type="text" #searchCity (input)="selectCity.filter(searchCity.value)" />
          </div>
        </ng-template>
      </ng-select>
    </div>
    <div class="mb-10">
      <mat-checkbox formControlName="is_pickup_included" inputId="pickup">Pickup Included</mat-checkbox>
    </div>
    <div class="mb-10">
      <mat-checkbox formControlName="is_drop_included" inputId="dropoff">Drop Off Included</mat-checkbox>
    </div>
  </div>
  <div class="mt-20">
    <button pButton type="button" label="Reset" (click)="ResetExp()" class="btn-secondary btn mr-10"></button>
    <button pButton type="button" label="Search" (click)="SearchExp()" class="btn-primary btn"></button>
  </div>
  <div class="app-seperator"></div>
  <p-table #dt [value]="ExpData" [columns]="cols" [rows]="25" [resizableColumns]="true"
    styleClass="p-datatable-gridlines" responsiveLayout="scroll" selectionMode="multiple" [paginator]="true"
    [globalFilterFields]="[
     'activity_id',
     'activity_name',
     'category',
     'country_name',
     'city_name',
     'is_pickup_included',
     'is_drop_included',
     'is_active'
  ]" [rowHover]="true" dataKey="id" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [showCurrentPageReport]="true">
    <ng-template pTemplate="caption">
      <p-toolbar *ngIf="ExpData">
        <ng-template pTemplate="left">
          <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>
        </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="activity_id">
          Experience Id
          <p-sortIcon field="activity_id" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="activity_name">
          Experience Name
          <p-sortIcon field="activity_name" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="Supplier">
          Supplier
          <p-sortIcon field="Supplier" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="country_name">
          Country
          <p-sortIcon field="country_name" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="city_name">
          City
          <p-sortIcon field="city_name" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="is_pickup_included">
          Pickup Included
          <p-sortIcon field="is_pickup_included" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="is_drop_included">
          Drop Off Included
          <p-sortIcon field="is_drop_included" 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
          <p-sortIcon field="Action" class="p-sort-icon"></p-sortIcon>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-exp>
      <tr>
        <td>
          <span> {{exp.activity_id}} </span>
        </td>
        <td>
          <span> {{exp.activity_name}} </span>
        </td>
        <td>
          <span> - </span>
        </td>
        <td>
          <span> {{exp.country_name}} </span>
        </td>
        <td>
          <span> {{exp.city_name}} </span>
        </td>
        <td>
          <span> {{exp.is_pickup_included ? 'Yes' : 'No'}} </span>
        </td>
        <td>
          <span> {{exp.is_drop_included ? 'Yes' : 'No'}} </span>
        </td>
        <td> <span class="booking-history-status"
            [ngClass]="{'booking-history-status-success':exp.is_active,'booking-history-status-fail':exp.is_active == false}">{{
            exp.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(exp.activity_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> edit </span>
                  <span> Edit </span>
                </span>
              </button>
              <button mat-menu-item class="d-flex align-center" (click)="UpdateStatus(exp.activity_id,exp.is_active)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> check_circle </span>
                  <span> {{exp.is_active ? 'Deactivate' : 'Activate' }} </span>
                </span>
              </button>
              <button mat-menu-item (click)="Manage(exp.activity_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> settings </span>
                  <span> Manage </span>
                </span>
              </button>
              <button mat-menu-item (click)="manageTrans(exp.activity_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> settings </span>
                  <span> Manage Translation</span>
                </span>
              </button>
            </mat-menu>

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