<div class="ng-card mt-20 mb-0">
<div class="ng-cardHead">
  <div class="ng-cardLabel">
    <h3 class="ng-cardTitle">Search Flight Contract</h3>
  </div>
  <button pButton type="button" label="Add Flight" class="btn-primary"
    [routerLink]="['/Services/FlightServices/Add']"></button>
</div>
  <div class="ng-searchBody" [formGroup]="Formdata">
    <div class="row">
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Contract Name
          <small class="astrick">*</small>
        </label>
      <input class="formInput" formControlName="contract_name" type="text" />
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Supplier Name
          <small class="astrick">*</small>
        </label>
      <input class="formInput" formControlName="Supplier_Name" type="text" />
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Trip Type</label>
      <ng-select #select [items]="lovKeyDataObj.AirTripType" formControlName="_trip_type" bindLabel="lov_value"
        bindValue="lov_key" class="is-invalid" placeholder="Select">
        <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">Trip Type</div>
          </div>
          <div class="select-search">
            <span class="material-icons"> search </span>
            <input type="text" #search (input)="select.filter(search.value)" />
          </div>
        </ng-template>
      </ng-select>
    </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper"   >
        <label class="formLabel">Airline</label>
        <ng-select #select [items]="AirlineList" formControlName="airline_code" (keyup)="GetAllAirline($event.target)"
          bindLabel="airline_name" bindValue="airline_code" class="is-invalid" placeholder="">
          <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">Airline</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Flight no</label>
        <input class="formInput" formControlName="flight_no" type="text" />
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Origin</label>
        <ng-select #select [items]="AirportListFrom" formControlName="from_airport"
          (keyup)="getAirportDetails($event.target, true)" bindLabel="ac" bindValue="ac" class="is-invalid"
          placeholder="">
          <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">Origin</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Destination</label>
        <ng-select #select [items]="AirportListTO" formControlName="to_airport"
          (keyup)="getAirportDetails($event.target, false)" bindLabel="ac" bindValue="ac" class="is-invalid"
          placeholder="">
          <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">Destination</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Departure Days</label>
        <ng-select #select [items]="lovKeyDataObj.DaySelect" formControlName="dep_days" bindLabel="lov_value"
          bindValue="lov_key" class="is-invalid" [multiple]="true" placeholder="Select">
          <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">Departure Days</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Return Days</label>
        <ng-select #select [items]="lovKeyDataObj.DaySelect" bindLabel="lov_value" bindValue="lov_key"
          formControlName="ret_days" class="is-invalid" [multiple]="true" placeholder="Select">
          <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">Return Days</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label for="range" class="formLabel">Departure Date</label>
        <p-calendar formControlName="departure_date" selectionMode="range" [readonlyInput]="true" inputId="range">
        </p-calendar>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label for="range" class="formLabel">Return Date</label>
        <p-calendar formControlName="return_date" selectionMode="range" [readonlyInput]="true" inputId="range1">
        </p-calendar>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">PNR</label>
        <input class="formInput" formControlName="pnr" type="text" />
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper mt-20">
        <mat-checkbox formControlName="is_multi_day">Is Multi Day Operation</mat-checkbox>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Currency</label>
        <ng-select #select formControlName="currency_code" [items]="CurrencyList" bindLabel="currency_code"
          formControlName="currency_code" bindValue="currency_code" class="is-invalid" placeholder="Select">
          <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">Currency</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Fare Type</label>
        <ng-select #select [items]="lovKeyDataObj.AirFareType" formControlName="fare_type" bindLabel="lov_value"
          bindValue="lov_key" class="is-invalid" placeholder="Select">
          <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">Fare Type</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">RBD</label>
        <ng-select #select [items]="AtoZ" formControlName="rbd" class="is-invalid" placeholder="Select">
          <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">RBD</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Cabin Class</label>
        <ng-select #select [items]="lovKeyDataObj.AirCabinClass" formControlName="Cabin_Class" bindLabel="lov_value"
          bindValue="lov_key" class="is-invalid" placeholder="Select">
          <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">Cabin Class</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="formControlWrapper">
        <label class="formLabel">Confirmation Type</label>
        <ng-select #select [items]="Confirmation_Type" formControlName="is_instant_confirmation" bindLabel="name"
          bindValue="name" class="is-invalid" placeholder="Select">
          <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">Confirmation Type</div>
            </div>
            <div class="select-search">
              <span class="material-icons"> search </span>
              <input type="text" #search (input)="select.filter(search.value)" />
            </div>
          </ng-template>
        </ng-select>
      </div>
    </div>
  </div>
  </div>
  <div class="ng-searchFooter">
    <button pButton type="button" label="Reset" (click)="ResetVal()" class="btn-secondary btn mr-10"></button>
    <button pButton type="button" label="Search" (click)="GetFlightDetails()" class="btn-primary btn"></button>
  </div>
</div>
  <div class="dataTable actionButtonSticky custom-shadow">
  <p-table #dt [value]="FlightAllDetails" [columns]="cols" [rows]="3" [resizableColumns]="true"
    styleClass="p-datatable-gridlines" responsiveLayout="scroll" selectionMode="multiple" [paginator]="true"
    [globalFilterFields]="[
      'contract_id',
      'contract_name',
      'supplier_name',
      '_trip_type',
      'validating_airline',
      'flight_no',
      'from_airport',
      'to_airport',
      'pnr',
      'is_multi_day',
      'currency_code',
      'is_active',
    ]" [rowHover]="true" dataKey="id" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [showCurrentPageReport]="true">
    <ng-template pTemplate="caption">
      <p-toolbar>
        <ng-template pTemplate="left">
          <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 class="btn-secondary" pTooltip="PDF" label="PDF"
            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="text" #searchInp (input)="dt.filterGlobal(searchInp.value, 'contains')"
                placeholder="Search..." />
            </span>
          </div>
        </ng-template>
      </p-toolbar>
    </ng-template>
    <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="contract_id">
          Contract Id
          <p-sortIcon field="contract_id" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="contract_name">
          Contract Name
          <p-sortIcon field="contract_name" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="supplier_name">
          Supplier Name
          <p-sortIcon field="supplier_name" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="_trip_type">
          Trip Type
          <p-sortIcon field="_trip_type" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="validating_airline">
          Airline
          <p-sortIcon field="validating_airline" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="flight_no">
          Flight No.
          <p-sortIcon field="flight_no" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="from_airport">
          Origin
          <p-sortIcon field="from_airport" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="to_airport">
          Destination
          <p-sortIcon field="to_airport" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="pnr">
          PNR
          <p-sortIcon field="pnr" class="p-sort-icon"></p-sortIcon>
        </th>
        <th pSortableColumn="is_multi_day">
          Is Multi Day Operation
          <p-sortIcon field="is_multi_day" 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="inventoryStatus">Action</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-FlightAllDetails>
      <tr>
        <td>{{ FlightAllDetails.contract_id }}</td>
        <td>{{ FlightAllDetails.contract_name }}</td>
        <td>{{ FlightAllDetails.supplier_name }}</td>
        <td>{{FlightAllDetails._trip_type == lovKeyDataObj.AirTripType[0].lov_key ?
          lovKeyDataObj.AirTripType[0].lov_value : lovKeyDataObj.AirTripType[1].lov_value }}</td>
        <td>{{FlightAllDetails.validating_airline }}</td>
        <td>{{FlightAllDetails.flight_no }}</td>
        <td>{{FlightAllDetails.from_airport }}</td>
        <td>{{FlightAllDetails.to_airport }}</td>
        <td>{{FlightAllDetails.pnr }}</td>
        <td>{{FlightAllDetails.is_multi_day ? 'Yes' : 'NO' }}</td>
        <td>{{FlightAllDetails.currency_code }}</td>
        <td>
          <span
            [ngClass]="{'booking-history-status-success':FlightAllDetails.is_active,'booking-history-status-fail':FlightAllDetails.is_active}">{{FlightAllDetails.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)="openDialog(FlightAllDetails.contract_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> edit </span>
                  <span> Edit Contract Details </span>
                </span>
              </button>

              <button mat-menu-item (click)="EditFlightDetails(FlightAllDetails.contract_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> edit </span>
                  <span> Edit Flight Details</span>
                </span>
              </button>
              <button mat-menu-item (click)="editRateInventry(FlightAllDetails.contract_id)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> edit </span>
                  <span> Edit Rate & Inventory </span>
                </span>
              </button>
              <button mat-menu-item (click)="updateStatus(FlightAllDetails.contract_id , FlightAllDetails.is_active)">
                <span class="flex-center">
                  <span class="mr-10 f-20 material-icons"> check_circle </span>
                  <span> {{FlightAllDetails.is_active
                    ? 'Deactive' : 'Active' }} </span>
                </span>
              </button>
            </mat-menu>
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>
<p-toast></p-toast>