<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 class="app-mainHeader">Modify Cancellation</div>
<div [formGroup]="FromData">
    <div class="app-mainCard">
        <div class="app-mainGrid2">
            <div>
                <label class="formLabel">Experience Name</label>
                <input class="formInput readonlyInput" formControlName="activity_name" type="text" readonly />
            </div>
            <div>
                <label class="formLabel">Option Name</label>
                <input class="formInput readonlyInput" formControlName="option_name" type="text" readonly />
            </div>
        </div>
        <div class="app-mainGrid4 mt-20">
            <div class="ng-hideHead">
                <label class="formLabel">No Show Type</label>
                <ng-select [items]="lovKeyDataObj.ActivityNoShowPolicyType" bindLabel="lov_value" (change)="No_Show_Type($event.lov_key)" formControlName="_no_show_policy_type" bindValue="lov_key" [ngClass]="{ errorInput: validationService.onBlur(FromData.controls['_no_show_policy_type'],'required')}">
                </ng-select>
                <span class="errorspan" *ngIf="
          validationService.onBlur(
            FromData.controls['_no_show_policy_type'],
            'required'
          )
        ">Please select No Show Type</span>
            </div>
            <div *ngIf="FromData.get('no_show_charge_value')">
                <label class="formLabel">Value</label>
                <input class="formInput" formControlName="no_show_charge_value" type="text" [ngClass]="{ errorInput: validationService.onBlur(FromData.controls['no_show_charge_value'],'required') || validationService.onBlur(FromData.controls['no_show_charge_value'],'pattern')}"
                />
                <span class="errorspan" *ngIf="
        validationService.onBlur(
          FromData.controls['no_show_charge_value'],
          'required'
        )
      ">Please enter value </span>
                <span class="errorspan" *ngIf="
        validationService.onBlur(
          FromData.controls['no_show_charge_value'],
          'pattern'
        )
      ">accept number only </span>
            </div>
        </div>
    </div>
    <div class="app-mainCard mt-20">
        <div class="app-mainGrid4 mt-20" *ngIf="slot_wise_cancellation_policy">
            <div class="ng-hideHead">
                <label class="formLabel">Slot</label>
                <ng-select #select formControlName="slot_id">
                    <ng-option *ngFor="let item of AllSlots" [value]="item.activity_slot_id">
                        {{ item.start_time | date : 'HH:mm'}} to {{item.end_time| date : 'HH:mm'}}
                    </ng-option>
                </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)="ClearSearchField()" formControlName="period_type" bindValue="lov_key">
                </ng-select>
            </div>
            <div class="dateRange" *ngIf="FromData.get('period_type').value == '1'">
                <label for="multiple1" class="formLabel">Date Range</label>
                <p-calendar [numberOfMonths]="2" (onSelect)="Checkdate()" formControlName="dates" selectionMode="range" [readonlyInput]="true" inputId="multiple">
                </p-calendar>
            </div>
            <div *ngIf="FromData.get('period_type').value == '2'">
                <label class="formLabel">Season</label>
                <ng-select formControlName="seasonId" #select [multiple]="true" (change)="checkMonthOfSeason()">
                    <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" label="Search" (click)="SearchCancellationPolicy()" 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 mt-20">
        <div class="listBox mt-20 d-flex" *ngIf="AllMonths.length > 0">
            <p-listbox [metaKeySelection]="false" [multiple]="true" (onClick)="MonthCheck($event)" [options]="AllMonths">
            </p-listbox>
        </div>
        <div class="app-copyUibtn">
            <button pButton type="button" (click)="CopyBlocksValue()" label="Copy first block data on UI based on Days" class="btn-primary w-20"></button>
        </div>
        <div class="tableWrapper w-100" formArrayName="cancellationDisplays">
            <table>
                <tr>
                    <th>
                        <div>Date</div>
                    </th>
                    <th>
                        <div>Days</div>
                    </th>
                    <th>
                        <div>Policy Type</div>
                    </th>
                    <th>
                        <div>Cancellation Type</div>
                    </th>
                    <th>
                        <div>Range</div>
                    </th>
                    <th>
                        <div>
                            Value
                            <button pButton label="Copy blocks on UI " (click)="CopyValue()" class="tb-btn btn-primary btn-copy"></button>
                        </div>
                    </th>
                </tr>
                <tr *ngFor="let data of cancelDisplay.controls; let i = index" [formGroupName]="i">
                    <td>{{data.get('_date').value| date: 'dd MMM YYYY'}}</td>
                    <td>{{data.get('_date').value| date : 'EEEE'}}</td>
                    <td>
                        <div class="ng-hideHead">
                            <ng-select #select appendTo="body" [ngClass]="{'errorInput': validationService.onBlur(data['controls']['_cancellation_policy_type'],'required')}" formControlName="_cancellation_policy_type" bindValue="lov_key" bindLabel="lov_value" [items]="lovKeyDataObj.ActivityCancellationPolicyType">
                            </ng-select>
                        </div>
                    </td>
                    <td>
                        <div class="ng-hideHead">
                            <ng-select #select appendTo="body" bindLabel="lov_value" [ngClass]="{'errorInput': validationService.onBlur(data['controls']['_charge_type'],'required')}" (change)="InputClear($event.lov_key,i , data)" formControlName="_charge_type" bindValue="lov_key"
                                [items]="lovKeyDataObj.ActivityCancellationChargeType">
                            </ng-select>
                        </div>
                    </td>

                    <td>{{data.get('_from').value}} to {{data.get('_to').value}}</td>
                    <td>
                        <input class="formInput" [ngClass]="{'errorInput': validationService.onBlur(data['controls']['charge_value'],'required') || validationService.onBlur(data['controls']['charge_value'],'pattern')}" [ngClass]="{'readonlyInput' : data.get('_charge_type').value  == '1'  }"
                            formControlName="charge_value" [readonly]="data.get('_charge_type').value  == '1'" type="text" />
                    </td>
                    <td>
                        <button (click)="remove(i)" class="btn-icon close-btn">
              <span class="material-icons">
                close
              </span>
            </button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="text-end mt-20">
            <button pButton type="button" (click)="UpdateCancellationDetails()" label="Save" class="btn-primary"></button>
        </div>
    </div>
</div>
<p-toast></p-toast>