<div class="ng-card custom-shadow mb-0">
    <div class="ng-cardHead">
        <div class="ng-cardLabel">
            <h3 class="ng-cardTitle">Vehicle Search</h3>
        </div>
        <button class="btn btn-primary" [routerLink]="['/ActivityConfiguration/VehicleMaster/Add']">Add Vehicle</button>
    </div>
    <div class="ng-searchBody" [formGroup]="vehicleSearchForm">
        <div class="row">
            <div class="col-lg-4">
                <div class="formControlWrapper">
                    <label class="formLabel">Vehicle Type</label>
                    <ng-select class="is-invalid" placeholder="Select" formControlName="vehicleType">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Vehicle Type</h4>
                                    </div>
                                    <button class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                         <ng-option value="">Select</ng-option>
                        <ng-option *ngFor="let vehicleType of vehicleTypeList" [value]="vehicleType.value">{{vehicleType.key}}</ng-option>
                    </ng-select>
                </div>
            </div>
              <div class="col-lg-4">
                <div class="formControlWrapper">
                    <label class="formLabel">Vehicle Transfer Type</label>
                    <ng-select class="is-invalid" placeholder="Select" formControlName="vehicleTransferType">
                        <ng-template ng-header-tmp>
                            <div class="temp_mobileBack">
                                <div class="temp_mobileHead">
                                    <div class="temp_mobileTitle">
                                        <h4>Vehicle Transfer Type</h4>
                                    </div>
                                    <button class="temp_mobileBackButton">
                                        <i class="material-icons"> close </i>
                                    </button>
                                </div>
                            </div>
                        </ng-template>
                        <ng-option value="">Select</ng-option>
                        <ng-option value="PRIVATE">Private</ng-option>
                        <ng-option value="SHARED">Shared</ng-option>                    
                    </ng-select>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="formControlWrapper">
                    <label class="formLabel">Max Passenger Capacity</label>
                    <input class="formInput" type="text" formControlName="maxPassengerCapacity">
                </div>
            </div>
           <div class="col-lg-4">
                <div class="formControlWrapper">
                    <label class="formLabel">Max Luggage Capacity</label>
                    <input class="formInput" type="text" formControlName="maxLuggageCapacity">
                </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 [resizableColumns]="true" [columns]="cols" [value]="Result" [rowsPerPageOptions]="[10, 25, 50, 100]"
        styleClass="p-datatable-gridlines" [rows]="10" 
        responsiveLayout="scroll" [paginator]="true" [rowHover]="true" dataKey="id" [globalFilterFields]="[
    'activityVehicle_id',
    'vehicleType',
    'maxPassengerCapacity',
    'maxLuggageCapacity',
    'vehicleTransferType',
    'vehicleName',
    'vehicleNumberPlate',
    'fuelType',
    'hotels',
    'status',
    'Custom_created_on',
    'updatedBy',
    'Custom_updated_on',
    'createdBy',
]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
        <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,'Vehicle Master')">Excel</button>
                    <button type="button" pButton class="btn-secondary mr-10" pTooltip="PDF" tooltipPosition="bottom"
                        (click)="commonMasterSer.exportPdf(Result,cols,'Vehicle Master')">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="activityVehicle_id">
                    Vehicle Id
                    <p-sortIcon field="activityVehicle_id" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="vehicleType">
                    Vehicle Type
                    <p-sortIcon field="vehicleType" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="maxPassengerCapacity">
                    Max Passenger Capacity
                    <p-sortIcon field="maxPassengerCapacity" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="maxLuggageCapacity">
                    Max Luggage Capacity
                    <p-sortIcon field="maxLuggageCapacity" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="star_rating">
                    Vehicle Supplier
                    <p-sortIcon field="star_rating" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="vehicleTransferType">
                    Vehicle Transfer Type
                    <p-sortIcon field="vehicleTransferType" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="vehicleName">
                    Vehicle Name
                    <p-sortIcon field="vehicleName" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="vehicleNumberPlate">
                    Vehicle Number Plate
                    <p-sortIcon field="vehicleNumberPlate" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="fuelType">
                    Fuel Type
                    <p-sortIcon field="fuelType" class="p-sort-icon"></p-sortIcon>
                </th>
               <th pSortableColumn="status">
                    Status
                    <p-sortIcon field="status" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="createdBy">
                    Created By
                    <p-sortIcon field="createdBy" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="createdOn">
                    Created On
                    <p-sortIcon field="createdOn" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="updatedBy">
                    Updated By
                    <p-sortIcon field="updatedBy" class="p-sort-icon"></p-sortIcon>
                </th>
                <th pSortableColumn="updatedOn">
                    Updated On
                    <p-sortIcon field="updatedOn" class="p-sort-icon"></p-sortIcon>
                </th>
                <th>Action</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-data>
            <tr>
                <td>
                    {{data.activityVehicle_id}}
                </td>
                <td>{{data.vehicleType}}</td>
                <td>{{data.maxPassengerCapacity}}</td>
                <td>{{data.maxLuggageCapacity}}</td>
                <td></td>
                <td>{{data.vehicleTransferType}}</td>
                <td>{{data.vehicleName}}</td>
                <td>{{data.vehicleNumberPlate}}</td>
                <td>{{data.fuelType}}</td>
                <td>
                    <span class="status"
                    [ngClass]="{'status-success':data.isActive,'status-failed':data.isActive == false}">
                    {{data.status}}
                </span>
                </td>
                <td>{{data.createdBy}}</td>
                <td>{{data.Custom_created_on}}</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.activityVehicle_id)">
                            <span class="flex-center">
                                <span> Edit </span>
                            </span>
                        </button>
                        <button mat-menu-item (click)="ManageLang(data.activityVehicle_id)">
                            <span class="flex-center">
                                <span> Manage Language </span>
                            </span>
                        </button>
                        <!-- <button mat-menu-item >
                            <a class="mr-10" [href]="Cdn_url + 'Extranet/Hotel/Contract/HotelContractExcelUploadFormat.xlsx'">Download Sample File</a>
                        </button>
                        <button mat-menu-item >
                            <p-fileUpload class="bulkUpload" #file [showUploadButton]="false" [showCancelButton]="false" chooseLabel="Upload Contract File"
                            (onSelect)="SelectImage($event, file, data.extranet_hotel_id)" accept=".xlsx"></p-fileUpload>
                        </button> -->
                        <button mat-menu-item 
                        (click)="updateStatus(data.activityVehicle_id,data.isActive)">
                            <span class="flex-center">
                                <span> {{ !data.isActive ? 'Active' : 'Deactive'}}</span>
                            </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>