

<div class="ng-card custom-shadow mb-0">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
          <h3 class="ng-cardTitle">Flight Inventory Report</h3>
        </div>
    </div>
    <div class="ng-searchBody">
        <div class="row" [formGroup]="Formdata">
            <div class="col-lg-3">
                <div class="formControlWrapper">
                    <label class="formLabel">Airline</label>
                    <ng-select #AirlineNg formControlName="validating_airline" class="is-invalid"
                        placeholder="Please enter 3 or more characters"
                        (keyup)="_flightContractService.getAirLineBySearch($event.target['value'])"
                        (close)="_flightContractService.AirlineList = []" [loading]="_flightContractService.ddLoader.AirLine">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Airline</h4>
                                    </div>
                                    <button matRipple (click)="AirlineNg.close()" class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-option *ngFor="let item of _flightContractService.AirlineList"
                            [value]="item.airline_code">{{item.airline_name}}
                            ({{item.airline_code}})
                        </ng-option>
                    </ng-select>
                </div>
            </div>
            <div class="col-lg-3" *ngIf="_commonService.clientId != '2109111018200000021'">
                <div class="formControlWrapper">
                    <label class="formLabel">Trip Type</label>
                    <ng-select #TriptypeNg placeholder="Select"  formControlName="trip_type">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Trip Type</h4>
                                    </div>
                                    <button matRipple (click)="TriptypeNg.close()" class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-option value="">Select</ng-option>
                        <ng-option value="ONEWAY">One Way</ng-option>
                        <ng-option *ngIf="_commonService.clientId != '2109111018200000021'" value="ROUNDTRIP">Round Trip</ng-option>
                    </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 #OriginNg formControlName="origin" class="is-invalid" placeholder="Please enter 3 or more characters"
                    (keyup)="_flightContractService.GetAirportList($event.target['value'],'origin')"
                    (close)="_flightContractService.AirportList = []" [loading]="_flightContractService.ddLoader.origin">
                    <ng-template ng-header-tmp>
                        <div class="temp_mobileBack">
                            <div class="temp_mobileHead">
                                <div class="temp_mobileTitle">
                                    <h4>Origin</h4>
                                </div>
                                <button matRipple (click)="OriginNg.close()" class="temp_mobileBackButton">
                                    <i class="material-icons"> close </i>
                                </button>
                            </div>
                        </div>
                    </ng-template>
                    <ng-option *ngFor="let item of _flightContractService.AirportList" [value]="item.ac">{{item.ct}}
                        ({{item.ac}})</ng-option>
                </ng-select>
            </div>
           </div>
            <div class="col-lg-3">
                <div class="formControlWrapper">
                    <label class="formLabel">Destination</label>
                    <ng-select #DestinationNg formControlName="destination" class="is-invalid" placeholder="Please enter 3 or more characters"
                        (close)="_flightContractService.AirportList = []"
                        (keyup)="_flightContractService.GetAirportList($event.target['value'],'destination')"
                        [loading]="_flightContractService.ddLoader.destination">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Destination</h4>
                                    </div>
                                    <button matRipple (click)="DestinationNg.close()" class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-option *ngFor="let item of _flightContractService.AirportList" [value]="item.ac">{{item.ct}}
                            ({{item.ac}})</ng-option>
                    </ng-select>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="formControlWrapper">
                    <label class="formLabel">From Date</label>
                    <p-calendar [readonlyInput]="true" [showButtonBar]="true" [showIcon]="true" dateFormat="dd M yy" (onSelect)="changeFormDate()" formControlName="from_date" inputId="basic"
                        [ngClass]="{'ErrorWrapper ': validationService.onBlur(Formdata.controls['from_date'],'required')}">
                    </p-calendar>
                    <span class="errorspan" *ngIf="validationService.onBlur(Formdata.controls['from_date'],'required')">Please
                        select from date </span>
                </div>
            </div>
           <div class="col-lg-3">
            <div class="formControlWrapper">
                <label class="formLabel">To Date</label>
                <p-calendar [defaultDate]="Formdata.get('from_date').value" [readonlyInput]="true" [showButtonBar]="true" [showIcon]="true" dateFormat="dd M yy" [minDate]="plusDate" formControlName="to_date" inputId="basic"
                    [ngClass]="{'ErrorWrapper ': validationService.onBlur(Formdata.controls['to_date'],'required')}"></p-calendar>
                <span class="errorspan" *ngIf="validationService.onBlur(Formdata.controls['to_date'],'required')">Please
                    select to date </span>
            </div>
           </div>
            <div class="col-lg-3">
                <div class="formControlWrapper">
                    <label class="formLabel">Cabin Class</label>
                    <ng-select #CabinNg [items]="_staticService.CabinsClassType" bindLabel="displayName" bindValue="value"
                        formControlName="cabin_class" #select placeholder="Select">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Cabin Class</h4>
                                    </div>
                                    <button matRipple (click)="CabinNg.close()" class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </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 #RBDNg [items]="_staticService.AtoZ" [multiple]="false" formControlName="rbd"
                        class="is-invalid" placeholder="">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>RBD</h4>
                                    </div>
                                    <button matRipple (click)="RBDNg.close()" class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </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 (click)="ResetForm()" class="btn btn-secondary mr-10 ResetBtn">Reset</button>
        <button (click)="GetAllFlightInventory()" class="btn btn-primary SearchBtn">Search</button>
    </div>
</div>
<div class="dataTable actionButtonSticky custom-shadow">
    <p-table #dt [value]="FlightAllReport" [columns]="cols" [rows]="10" [resizableColumns]="true" [rowsPerPageOptions]="[10, 25, 50, 100]"
    styleClass="p-datatable-gridlines" responsiveLayout="scroll" selectionMode="multiple" [paginator]="true"
    [rowHover]="true" dataKey="id" [globalFilterFields]="[
  'rate_id',
  'validating_airline',
  'flight_no',
  'trip_type',
  'origin',
  'destination',
  'departure_date',
  'return_date',
  'day',
  'rbd',
  'fare_family_name',
  'cabin_class',
  'seat_allocation',
  'seat_booked',
  'seat_cancelled',
  'seat_remains',
  'pnr',
  'is_stop_sale',
]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
    <ng-template pTemplate="caption">
        <p-toolbar *ngIf="FlightAllReport && FlightAllReport.length > 0">
            <ng-template pTemplate="left" *ngIf="_commonService.DownloadFilesAllowed">
                <button type="button" pButton class="btn btn-grey mr-10" pTooltip="CSV" tooltipPosition="bottom"
                    (click)="dt.exportCSV()">CSV</button>
                <button type="button" pButton class="btn btn-grey mr-10" pTooltip="XLS" tooltipPosition="bottom"
                    (click)="_commonService.exportExcel(FlightAllReport,cols,'Flight Inventory')">Excel</button>
                <button type="button" pButton class="btn btn-grey mr-10" pTooltip="PDF" tooltipPosition="bottom"
                    (click)="_commonService.exportPdf(FlightAllReport,cols,'Flight Inventory')">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="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="Trip_type">
                Trip Type
                <p-sortIcon field="Trip_type" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="origin">
                Origin
                <p-sortIcon field="origin" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="destination">
                Destination
                <p-sortIcon field="destination" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="day">
                Day
                <p-sortIcon field="day" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="departure_date">
                Departure Date
                <p-sortIcon field="departure_date" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="return_date">
                Return Date
                <p-sortIcon field="return_date" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="rbd">
                RBD
                <p-sortIcon field="rbd" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="fare_family_name">
                Fare Family Name
                <p-sortIcon field="fare_family_name" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="cabin_class">
                Cabin Class
                <p-sortIcon field="cabin_class" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="seat_allocation">
                Seats Allocation
                <p-sortIcon field="seat_allocation" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="seat_booked">
                Booked Seats
                <p-sortIcon field="seat_booked" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="seat_remains">
                Remaining Seats
                <p-sortIcon field="seat_remains" class="p-sort-icon"></p-sortIcon>
            </th>
            <th pSortableColumn="seat_cancelled">
                Cancelled Seats
                <p-sortIcon field="seat_cancelled" 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_stop_sale">
                Stop Sale
                <p-sortIcon field="is_stop_sale" class="p-sort-icon"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <tr>
            <td>{{data.validating_airline}}</td>
            <td>{{data.flight_no}}</td>
            <td>{{data.trip_type}}</td>
            <td>{{data.origin}}</td>
            <td>{{data.destination}}</td>
            <td>{{data.day}}</td>
            <td>{{data.departure_date}}</td>
            <td>{{data.return_date}}</td>
            <td>{{data.rbd}}</td>
            <td>{{data.fare_family_name}}</td>
            <td>{{data.cabin_class}}</td>
            <td>{{data.seat_allocation}}</td>
            <td>{{data.seat_booked}}</td>
            <td>{{data.seat_remains}}</td>
            <td>{{data.seat_cancelled}}</td>
            <td>{{data.pnr}}</td>
            <td>{{data.is_stop_sale}}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr *ngIf="FlightAllReport === null || FlightAllReport" class="resultNotFound">
            <td> No data found </td>
        </tr>
    </ng-template>
</p-table>
</div>

