<div class="app-mainHeader mt-20">
    <div>Rate Config</div>
    <button pButton type="button" label="Add Rate Config" class="btn-primary" [routerLink]="['/Services/ActivityServices/ExpServices/Manage/Add']"></button>
</div>
<div class="app-mainCard">
    <div class="app-mainGrid4">
        <div class="">
            <label class="formLabel">Option Name</label>
            <input class="formInput" [(ngModel)]="OptionName" type="text" />
        </div>
        <div>
            <mat-checkbox class="app-subHeader" [(ngModel)]="is_pickup_included">
                <div>Pickup Included</div>
            </mat-checkbox>
        </div>
        <div>
            <mat-checkbox class="app-subHeader" [(ngModel)]="is_drop_off_included">
                <div>Drop Off Included</div>
            </mat-checkbox>
        </div>
    </div>
    <div class="mt-20">
        <button pButton type="button" label="Reset" (click)="reset()" class="btn-secondary btn mr-10"></button>
        <button pButton type="button" label="Search" (click)="GetallrateDetails()" class="btn-primary btn"></button>
    </div>
</div>
<div class="app-mainCard">
    <div class="rate_config">
        <p-table #dt [value]="rateDetails" [rows]="10" responsiveLayout="scroll" electionMode="multiple" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="[
      'option_name',
      'nationality',
      'date',
      'currency_code',
      'contract_days',
      'is_pickup_included',
      'is_drop_off_included',
      'is_active'
    ]" [(selection)]="rateDetails" [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 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 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="option_name">
                        Option Name
                        <p-sortIcon field="option_name" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="nationality">
                        Nationality
                        <p-sortIcon field="nationality" class="p-sort-icon"></p-sortIcon>
                    </th>
                    <th pSortableColumn="date">
                        Date Range/Season
                        <p-sortIcon field="date" 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="slot">
                        Slot
                        <p-sortIcon field="slot" 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_off_included">
                        Drop Off Included
                        <p-sortIcon field="is_drop_off_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="rating">
                        Action
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rateDetails>
                <tr>
                    <td>{{rateDetails.option_name}}</td>
                    <td>{{rateDetails.nationality}}</td>
                    <td>
                        <span *ngIf="rateDetails.date">
              <span class="d-block" *ngFor="let item of rateDetails.date.split(','); let i = index">{{rateDetails.date
                == null ? '' :
                item | date: 'dd MMM YYYY' }} {{
                  
                  
                  i == 0 && rateDetails.date.split(',').length > 1? '-' : ''}} </span>
                        </span>
                    </td>
                    <td>{{rateDetails.currency_code}}</td>
                    <td>
                        <span *ngFor="let  item of SoltsDetailsConvParse(rateDetails.activity_slot)"> {{item.date}}</span>
                    </td>
                    <td>{{rateDetails.is_pickup_included ? "Yes" : "No"}}</td>
                    <td>{{rateDetails.is_drop_off_included? "Yes" : "No"}}</td>
                    <td>
                        <span class="product-badge" [ngClass]="{'status-active':rateDetails.is_active,'status-inactive' : rateDetails.is_active == false}">{{
              rateDetails.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)="EditRateConfig(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit Rate</span>
                  </span>
                </button>
                                <button mat-menu-item (click)="EditDetails(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit Details</span>
                  </span>
                </button>
                                <button mat-menu-item (click)="EditAllocation(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit Allocation </span>
                  </span>
                </button>
                                <button mat-menu-item (click)="EditCancelPoli(rateDetails.activity_contract_id)">
                  <span class="flex-center">
                    <span> Edit Cancellation Policy </span>
                  </span>
                </button>
                                <!-- <button mat-menu-item (click)="EditAllocation(rateDetails.activity_contract_id) ">
                  <span class="flex-center">
                    <span> Edit No Show Policy </span>
                  </span>
                </button> -->
                                <button mat-menu-item (click)="UpdateStatus(rateDetails.activity_contract_id ,rateDetails.is_active)">
                  <span class="flex-center">
                    <span>{{rateDetails.is_active
                      ? 'Deactivate' : 'Activate' }}
                    </span>
                  </span>
                </button>
                            </mat-menu>
                        </div>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr *ngIf="rateDetails === null || rateDetails" class="ResultNotFound">
                    <td>
                        No data found
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

</div>
<p-toast></p-toast>