<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 Allocation</div>
<div class="app-mainCard" [formGroup]="FormData">
    <div class="app-mainGrid2">
        <div class="">
            <label class="formLabel">Experience Name</label>
            <input class="formInput readonlyInput" formControlName="activity_name" type="text" readonly />
        </div>
        <div class="">
            <label class="formLabel">Option Name</label>
            <input class="formInput readonlyInput" formControlName="option_name" type="text" readonly />
        </div>
    </div>
    <div class="app-mainCard mt-20">
        <div class="app-mainGrid4 mt-20" *ngIf="FormData.get('slot_id')">
            <div class="ng-hideHead">
                <label class="formLabel">Slot</label>
                <ng-select #select formControlName="slot_id" [ngClass]="{ errorInput: validationService.onBlur(FormData.controls['slot_id'],'required')}">
                    <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>
                <span class="errorspan" *ngIf="
          validationService.onBlur(
            FormData.controls['slot_id'],
            'required'
          )
        ">Please select Slot</span>
            </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="FormData.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('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)="getAllocationDetails()" label="Search" class="btn-primary btn mr-20"></button>
                <button pButton type="button" (click)="reset()" label="Reset" class="btn-primary btn"></button>
            </div>
        </div>
    </div>
    <div class="app-mainCard" [formGroup]="FormData">
        <div class="listBox mt-20 d-flex">
            <p-listbox [metaKeySelection]="false" [multiple]="true" [options]="Months" optionLabel="name">
            </p-listbox>
        </div>
        <div class="tableWrapper d-flex" formArrayName="Allocation_list">
            <table>
                <tr class="tablehead" [formGroupName]="0">
                    <th></th>
                    <th>
                        <input class="formInput" formControlName="allocation_count" type="number" />
                    </th>
                    <th>
                        <input class="formInput" formControlName="release_days" type="number" />
                    </th>
                    <th>
                        <mat-checkbox formControlName="FreeSale" (change)="freesalecheck($event.checked ,0)"></mat-checkbox>
                    </th>
                    <th>
                        <mat-checkbox formControlName="StopSale" (change)="StopSalecheck($event.checked ,0)"></mat-checkbox>
                    </th>
                </tr>
                <tr>
                    <th>
                        <div>Date</div>
                    </th>
                    <th>
                        <div>
                            Allocation
                            <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                        </div>
                    </th>
                    <th>
                        <div>
                            Release Days
                            <span class="pi pi-copy btn-copy ng-asideToggle" pTooltip="Copy"></span>
                        </div>
                    </th>
                    <th>
                        <div>Free Sale</div>
                    </th>
                    <th>
                        <div>Stop Sale</div>
                    </th>

                </tr>
                <tr *ngFor="let data of AllocationDetails; let i = index" [formGroupName]="i +1">
                    <td>{{data._date | date : "dd MMM YYYY"}}</td>
                    <td>
                        <input class="formInput" formControlName="allocation_count" type="number" />
                    </td>
                    <td>
                        <input class="formInput" formControlName="release_days" type="number" />
                    </td>
                    <td>
                        <mat-checkbox formControlName="FreeSale" (change)="freesalecheck($event.checked ,i +1)">
                        </mat-checkbox>
                    </td>
                    <td>
                        <mat-checkbox formControlName="StopSale" (change)="StopSalecheck($event.checked ,i + 1)">
                        </mat-checkbox>
                    </td>
                </tr>
            </table>
            <div class="app-tableBtn">
                <button pButton type="button" label="Copy on UI" (click)="CopyOnUi()" class="btn-primary"></button>
            </div>
        </div>
        <div class="text-end mt-20">
            <button pButton type="button" label="Save" (click)="updateAllocation()" class="btn-primary"></button>
        </div>
    </div>
    <p-toast></p-toast>