<div class="btn-back mb-15" [routerLink]="['/Services/ActivityServices/ExpServices/Manage']">
    <svg height="20px" fill="#48465b" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
  </svg>
    <span>Back</span>
</div>
<div [formGroup]="FormData">
    <div class="app-mainHeader">Edit Rate Config</div>
    <div class="app-mainCard">
        <div class="app-mainGrid4 mb-20">
            <div class="app-grid1-3">
                <label class="formLabel">Experience Name</label>
                <input class="formInput readonlyInput" readonly formControlName="activity_name" type="text" />
            </div>
            <div>
                <label class="formLabel">Option Name</label>
                <input class="formInput readonlyInput" readonly type="text" formControlName="option_name" />
            </div>
            <div>
                <label class="formLabel">Select Currency</label>
                <ng-select #select [items]="currencyList" [readonly]="true" formControlName="currency_code" bindLabel="currency_name" bindValue="currency_code">
                </ng-select>
            </div>
        </div>

        <div *ngIf="FormData.get('privateTransfer')">
            <div formArrayName="privateTransfer">
                <label class="app-subHeader">Private Transfer (Add-On Rate)</label>
                <div class="d-flex align-center mt-10 mb-20" *ngFor="let group of privateTransfer.controls; let i = index" [formGroupName]="i">
                    <div class="app-mainGrid4 mtMobi-20 w-75">
                        <div class="app-grid1 ng-hideHead">
                            <label class="formLabel">Supplier</label>
                            <ng-select [items]="AllVehicleSupplier" (change)="GetAllVehicleBySupplierId($event , 'Shared' , i)" [ngClass]="{errorInput: validationService.onBlur(group['controls']['vehicle_supplier_id'],'required')}" formControlName="vehicle_supplier_id" bindLabel="name"
                                bindValue="id">
                            </ng-select>
                            <span class="errorspan" *ngIf="
                  validationService.onBlur(group['controls']['vehicle_supplier_id'],'required')">Please select
                supplier
              </span>
                        </div>
                        <div class="ng-hideHead">
                            <label class="formLabel">Vehicle Selection</label>
                            <ng-select [items]="AllVehicleBySupplierId.Shared[i]" bindLabel="vehicle_name" bindValue="vehicle_id" formControlName="vehicle_id" [ngClass]="{errorInput: validationService.onBlur(group['controls']['vehicle_id'],'required')}">

                            </ng-select>
                            <span class="errorspan" *ngIf="
                validationService.onBlur(group['controls']['vehicle_id'],'required')">Please select
                vehicle selection</span>
                        </div>
                        <div>
                            <label class="formLabel">Private Transfer Occupancy</label>
                            <input type="text" formControlName="vehicle_occupancy" class="formInput" [ngClass]="{errorInput: validationService.onBlur(group['controls']['vehicle_occupancy'],'required')}" />
                            <span class="errorspan" *ngIf=" validationService.onBlur(group['controls']['vehicle_occupancy'],'required')">Please select
                private transfer occupancy</span>
                        </div>
                        <div>
                            <label class="formLabel">Price</label>
                            <input type="text" formControlName="rate" [ngClass]="{errorInput: validationService.onBlur(group['controls']['rate'],'required') || validationService.onBlur(group['controls']['rate'],'pattern')}" class="formInput" />
                            <span class="errorspan" *ngIf="
          validationService.onBlur(group['controls']['rate'],'required')">Please select
                supplier</span>
                            <span class="errorspan" *ngIf="
          validationService.onBlur(group['controls']['rate'],'pattern')">Accept number only</span>
                        </div>
                    </div>
                    <div>
                        <div class="h-100 w-25" *ngIf="i == 0">
                            <button pButton icon="pi pi-plus" (click)="AddPrivateTransferGroup(false , i)" class="btn-icon ml-20"></button>
                        </div>
                        <div class="h-100 w-25" *ngIf="i != 0">
                            <button pButton icon="pi pi-minus" (click)="RemovePrivateformGroup(i)" class="btn-icon ml-20"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div *ngIf="FormData.get('sharedTransfer')" formGroupName="sharedTransfer">
            <div class="mt-10 mb-20">
                <label class="app-subHeader">Shared Transfer (Add-On Rate)</label>
                <div class="app-mainGrid4" *ngIf="FormData.get('sharedTransfer').get('vehicle_supplier_id')">
                    <div class="ng-hideHead mt-10">
                        <label class="formLabel">Supplier</label>
                        <ng-select [items]="AllVehicleSupplier" formControlName="vehicle_supplier_id" [ngClass]="{errorInput: validationService.onBlur(sharedTransfer.controls['vehicle_supplier_id'],'required')}">
                        </ng-select>
                        <span class="errorspan" *ngIf="
             validationService.onBlur(sharedTransfer.controls['vehicle_supplier_id'],'required')">Please select
              supplier</span>
                    </div>
                </div>
            </div>

            <!-- Per Person -->
            <div class="app-mainGrid5 mt-20 mb-20">
                <div *ngIf="FormData.get('sharedTransfer').get('adult_rate')">
                    <label class="formLabel">Adult ({{activityData.adult_age_from}} to
            {{activityData.adult_age_to}})</label>
                    <input class="formInput" formControlName="adult_rate" type="text" [ngClass]="{errorInput: validationService.onBlur(sharedTransfer.controls['adult_rate'],'required') ||  validationService.onBlur(sharedTransfer.controls['adult_rate'],'pattern')}" />
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['adult_rate'],'required')">Please enter
            adult</span>
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['adult_rate'],'pattern')"> accept number only
          </span>
                </div>
                <div *ngIf="FormData.get('sharedTransfer').get('senior_rate')">
                    <label class="formLabel">Senior ({{activityData.senior_age_from}} to
            {{activityData.senior_age_to}})</label>
                    <input class="formInput" formControlName="senior_rate" type="text" [ngClass]="{errorInput: validationService.onBlur(sharedTransfer.controls['senior_rate'],'required') ||  validationService.onBlur(sharedTransfer.controls['senior_rate'],'pattern')}" />
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['senior_rate'],'required')">Please enter
            senior</span>
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['senior_rate'],'pattern')"> accept number only
          </span>
                </div>
                <div *ngIf="FormData.get('sharedTransfer').get('youth_rate')">
                    <label class="formLabel">Youth ({{activityData.youth_age_from}} to
            {{activityData.youth_age_to}})</label>
                    <input class="formInput" formControlName="youth_rate" type="text" [ngClass]="{errorInput: validationService.onBlur(sharedTransfer.controls['youth_rate'],'required') ||  validationService.onBlur(sharedTransfer.controls['youth_rate'],'pattern')}" />
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['youth_rate'],'required')">Please enter
            youth</span>
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['youth_rate'],'pattern')"> accept number only
          </span>
                </div>
                <div *ngIf="FormData.get('sharedTransfer').get('child_rate')">
                    <label class="formLabel">Child ({{activityData.child_age_from}} to
            {{activityData.child_age_to}})</label>
                    <input class="formInput" formControlName="child_rate" type="text" [ngClass]="{errorInput: validationService.onBlur(sharedTransfer.controls['child_rate'],'required') ||  validationService.onBlur(sharedTransfer.controls['child_rate'],'pattern')}" />
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['child_rate'],'required')">Please enter
            child</span>
                    <span class="errorspan" *ngIf="
        validationService.onBlur(sharedTransfer.controls['child_rate'],'pattern')"> accept number only
          </span>
                </div>
            </div>
        </div>
    </div>
    <div formGroupName="searchgroup" class="app-seperator app-mainCard mt-20">
        <div class="app-mainGrid4">
            <div class="app-grid1">
                <label class="formLabel">Slots</label>
                <ng-select formControlName="slot_id">
                    <ng-option *ngFor="let item of AllSlots" [value]="item.activity_slot_id">{{ item.start_time | date: "h:mm" }} to {{ item.end_time | date: "h:mm" }}</ng-option>
                </ng-select>
            </div>
            <div class="">
                <label class="formLabel" for="">Rate Type</label>
                <ng-select [readonly]="true" [items]="lovKeyDataObj.RateConfigType" bindLabel="lov_value" bindValue="lov_key" formControlName="_rate_type">
                </ng-select>
            </div>
        </div>
        <div class="app-mainGrid4 mb-20 mt-20">
            <div class="dateRange">
                <label for="multiple1" class="formLabel">Period Type</label>
                <ng-select [items]="lovKeyDataObj.RatePeriodType" bindLabel="lov_value" (change)="ClearDateAndSeason()" formControlName="period_type" bindValue="lov_key">
                </ng-select>
            </div>
            <div class="dateRange" *ngIf="FormData.get('searchgroup').get('period_type').value == '1'">
                <label for="multiple1" class="formLabel">Date Range</label>
                <p-calendar [numberOfMonths]="2" formControlName="dates" selectionMode="range" [readonlyInput]="true" inputId="multiple">
                </p-calendar>
            </div>
            <div *ngIf="FormData.get('searchgroup').get('period_type').value == '2'">
                <label class="formLabel">Season</label>
                <ng-select formControlName="seasonId" #select [multiple]="true">
                    <ng-option *ngFor="let activity_obj of season_list" [value]="activity_obj.activitySeason.activity_season_id">
                        {{ activity_obj.activitySeason.season_name}}</ng-option>
                </ng-select>
            </div>
            <div>
                <label class="formLabel">Days</label>
                <ng-select #select [items]="lovKeyDataObj.DaySelect" bindLabel="lov_value" bindValue="lov_key" formControlName="days" appendTo="body" [multiple]="true">
                </ng-select>
            </div>
            <div class="mt-20">
                <button pButton type="button" (click)="Search()" label="Search" class="btn-primary btn mr-20"></button>
                <button pButton type="button" label="Reset" (click)="reset()" class="btn-primary  btn"></button>
            </div>
        </div>
    </div>

    <div class="app-mainCard">

        <!-- Per Person Pricing -->
        <div class="tableWrapper  mt-20" *ngIf="FormData.get('PaxDetails')" formArrayName="PaxDetails">
            <div class="app-subHeader">Per Person Pricing</div>
            <div class="d-flex">
                <table>
                    <tr class="tablehead" [formGroupName]="0">
                        <th></th>
                        <th></th>
                        <td *ngIf="paxformGroup.controls[0].get('adult_rate')">
                            <input class="formInput" formControlName="adult_rate" type="number" />
                        </td>
                        <td *ngIf="paxformGroup.controls[0].get('senior_rate')">
                            <input class="formInput" formControlName="senior_rate" type="number" />
                        </td>
                        <td *ngIf="paxformGroup.controls[0].get('youth_rate')">
                            <input class="formInput" formControlName="youth_rate" type="number" />
                        </td>
                        <td *ngIf="paxformGroup.controls[0].get('child_rate')">
                            <input class="formInput" formControlName="child_rate" type="number" />
                        </td>
                    </tr>
                    <tr>
                        <th class="w-15">
                            <div>Date</div>
                        </th>
                        <th class="w-15">
                            <div>Days</div>
                        </th>
                        <th *ngIf="activityData.is_adult">
                            <div>
                                Adult Rate
                                <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                            </div>
                        </th>
                        <th *ngIf="activityData.is_senior">
                            <div>
                                Senior Rate
                                <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                            </div>
                        </th>
                        <th *ngIf="activityData.is_youth">
                            <div>
                                Youth Rate
                                <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                            </div>
                        </th>
                        <th *ngIf="activityData.is_child">
                            <div>
                                Child Rate
                                <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                            </div>
                        </th>
                    </tr>
                    <tr *ngFor="let item of PaxDetails; let i = index" [formGroupName]="i +1">
                        <td>{{ item.date | date: "dd MMM YYYY" }}</td>
                        <td>{{ item.date | date: "EEEE" }}</td>
                        <td *ngIf="paxformGroup.controls[i].get('adult_rate')">
                            <input class="formInput" formControlName="adult_rate" type="number" />
                        </td>
                        <td *ngIf="paxformGroup.controls[i].get('senior_rate')">
                            <input class="formInput" formControlName="senior_rate" type="number" />
                        </td>
                        <td *ngIf="paxformGroup.controls[i].get('youth_rate')">
                            <input class="formInput" formControlName="youth_rate" type="number" />
                        </td>
                        <td *ngIf="paxformGroup.controls[i].get('child_rate')">
                            <input class="formInput" formControlName="child_rate" type="number" />
                        </td>
                    </tr>
                </table>
                <div class="app-tableBtn">
                    <button pButton type="button" label="Copy on UI" (click)="setallpaxdetails()" class="btn-primary"></button>
                </div>
            </div>
        </div>

        <!-- Per Vehicle Pricing  -->
        <div class="tableWrapper mt-20 w-60" *ngIf="FormData.get('vahicle_list')" formArrayName="vahicle_list">
            <div class="app-subHeader">Per Vehicle Pricing</div>
            <div class="d-flex">
                <table>
                    <tr class="tablehead" [formGroupName]="0">
                        <th></th>
                        <th></th>
                        <th class="d-flex" formArrayName="vehicle_rates">
                            <div class="mr-20" *ngFor="let item of VahicleformGroup.controls[0].get('vehicle_rates')['controls']; let i = index" [formGroupName]="i">
                                <input class="formInput" formControlName="rate" type="number" />
                            </div>
                        </th>
                    </tr>
                    <tr>
                        <th class="w-20">
                            <div>Date</div>
                        </th>
                        <th class="w-20">
                            <div>Days</div>
                        </th>
                        <th class="d-flex">
                            <div class="mr-20 formInput" *ngFor="let item of VahicleformGroup.controls[0].get('vehicle_rates')['controls']">
                                <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                            </div>
                        </th>
                    </tr>
                    <tr *ngFor="let item of vahicleDetails; let li = index" [formGroupName]="li +1">
                        <td>{{ item.date | date: "dd MMM YYYY" }}</td>
                        <td>{{ item.date | date: "EEEE" }}</td>
                        <td formArrayName="vehicle_rates" class="d-flex">
                            <div class="mr-20" *ngFor="let g of item.vehicle_rates; let i = index" [formGroupName]="i">
                                <input class="formInput" formControlName="rate" type="number" />
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="app-tableBtn w-40">
                    <button pButton type="button" label="Copy on UI" (click)="CopyOnUIvehicle()" class="btn-primary"></button>
                </div>
            </div>
        </div>


        <!-- Tiered Pricing -->
        <div *ngIf="FormData.get('tieredPricings')" class="app-subHeader">Tiered Pricing</div>
        <div *ngIf="FormData.get('tieredPricings')" class="tableWrapper d-flex mt-20">
            <table formArrayName="tieredPricings">
                <tr class="tablehead" [formGroupName]="0">
                    <th></th>
                    <th></th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.adult_range; let li = index">
                        <input class="formInput" formControlName="adult_rate_range_{{li + 1}}" type="number" />
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.senior_range; let li = index">
                        <input class="formInput" formControlName="senior_rate_range_{{li + 1}}" type="number" />
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.youth_range; let li = index">
                        <input class="formInput" formControlName="youth_rate_range_{{li + 1}}" type="number" />
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.child_range; let li = index">
                        <input class="formInput" formControlName="child_rate_range_{{li + 1}}" type="number" />
                    </th>
                </tr>
                <tr>
                    <th class="w-10">
                        <div>Date</div>
                    </th>
                    <th class="w-10">
                        <div>Days</div>
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.adult_range; let li = index">
                        <div>
                            Adult <span class="d-block">
                ({{controls.from_adult_count}} to
                {{controls.to_adult_count}})
              </span>
                            <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                        </div>
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.senior_range; let li = index">
                        <div>
                            Senior <span class="d-block">
                ({{controls.from_senior_count}} to
                {{controls.to_senior_count}})
              </span>
                            <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                        </div>
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.youth_range; let li = index">
                        <div>
                            Youth <span class="d-block">
                ({{controls.from_youth_count}} to
                {{controls.to_youth_count}})
              </span>
                            <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                        </div>
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.child_range; let li = index">
                        <div>
                            Child <span class="d-block">
                ({{controls.from_child_count}} to
                {{controls.to_child_count}})
              </span>
                            <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                        </div>
                    </th>
                </tr>
                <tr *ngFor="let group of AllContractTieredRate; let i = index" [formGroupName]="i + 1">
                    <td>{{ group.date | date: "dd MMM YYYY" }}</td>
                    <td>{{ group.date | date: "EEEE" }}</td>
                    <th *ngFor="let controls of HeaderTieredRateGroup.adult_range; let li = index">
                        <input class="formInput" formControlName="adult_rate_range_{{li + 1}}" type="number" />
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.senior_range; let li = index">
                        <input class="formInput" formControlName="senior_rate_range_{{li + 1}}" type="number" />
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.youth_range; let li = index">
                        <input class="formInput" formControlName="youth_rate_range_{{li + 1}}" type="number" />
                    </th>
                    <th *ngFor="let controls of HeaderTieredRateGroup.child_range; let li = index">
                        <input class="formInput" formControlName="child_rate_range_{{li + 1}}" type="number" />
                    </th>
                </tr>
            </table>
            <div class="app-tableBtn">
                <button pButton type="button" label="Copy on UI" (click)="SetTieredRateValCopyUi()" class="btn-primary"></button>
            </div>
        </div>
        <div class="text-end mt-20">
            <button pButton type="button" label="Save" (click)="UpdateRate()" class="btn-primary"></button>
        </div>
    </div>
</div>
<p-toast></p-toast>