<admin-page-header [title]="'Announcement'"></admin-page-header>
<!--Announcement Settings -->
<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card">
        <div class="card-header border-0">
            <h4 class="card-title">{{'Announcement Settings' | translate}}</h4>
        </div>
        <form #settingAnnounce="ngForm" (ngSubmit)="announcementsetting(settingAnnounce, 'announcementSetting')">
            <div class="card-body py-0">
                <div class="row">
                    <div class="switch_section mt-3 mb-1">
                        <div class="switch-toggle d-flex ">
                            <span class="onoffswitch2">
                                <input [ngModel]="setting?.ANNOUNCEMENT_USER" type="radio" name="ANNOUNCEMENT_USER"
                                    id="allusers" class=" toggle-class onoffswitch2-checkbox" value="all_users"
                                    [checked]="setting?.ANNOUNCEMENT_USER == 'all_users' ? true : false">
                                <label for="allusers" class="toggle-class onoffswitch2-label"></label>
                            </span>
                            <div class="ps-3">
                                <label class="form-label">{{'All Users' | translate}}</label>
                                <small class="text-muted"><i>({{'If you enable this "All Users" setting feature, the "Announcement" will appear to both the users, i.e., for login users as well as non login users on the "Application.' | translate}})</i></small>
                            </div>
                        </div>
                    </div>
                    <div class="switch_section mt-2 mb-1">
                        <div class="switch-toggle d-flex ">
                            <span class="onoffswitch2">
                                <input [ngModel]="setting?.ANNOUNCEMENT_USER" type="radio" name="ANNOUNCEMENT_USER"
                                    id="onlyloginuser" class=" toggle-class onoffswitch2-checkbox"
                                    value="only_login_user"
                                    [checked]="setting?.ANNOUNCEMENT_USER == 'only_login_user'? true : false">
                                <label for="onlyloginuser" class="toggle-class onoffswitch2-label"></label>
                            </span>
                            <div class="ps-3">
                                <label class="form-label">{{'Only Login Users' | translate}}</label>
                                <small class="text-muted"><i>({{'If you enable this "Only Login Users" setting feature,
                                        the "Announcement" will appear only for the Login users on the "Application."' |
                                        translate}})</i></small>
                            </div>
                        </div>
                    </div>
                    <div class="switch_section mt-2 mb-2">
                        <div class="switch-toggle d-flex ">
                            <span class="onoffswitch2">
                                <input [ngModel]="setting?.ANNOUNCEMENT_USER" type="radio" name="ANNOUNCEMENT_USER"
                                    id="nonloginusers" class=" toggle-class onoffswitch2-checkbox"
                                    value="non_login_users"
                                    [checked]="setting?.ANNOUNCEMENT_USER == 'non_login_users' ?  true : false">
                                <label for="nonloginusers" class="toggle-class onoffswitch2-label"></label>
                            </span>
                            <div class="ps-3">
                                <label class="form-label">{{'Non Login Users' | translate}}</label>
                                <small class="text-muted"><i>({{'If you enable this "Non Login Users" setting feature,
                                        the "Announcement" will appear for the non login users on the "Application."' |
                                        translate}})</i></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="form-group float-end">
                    <button type="submit" aria-label="announcement"
                        [disabled]="settingAnnounce.invalid || sendingResponse['announcementSetting']"
                        class="btn btn-secondary">{{'Save Changes' | translate}}
                        @if(sendingResponse['announcementSetting']){
                        <i class="fa fa-spinner fa-spin mx-1"></i>
                        }
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- End Announcement Settings -->

<!--Announcement List -->
<div class="col-xl-12 col-lg-12 col-md-12">
    <div class="card ">
        <div class="card-header border-0">

            <h4 class="card-title mb-md-max-2">{{'Announcements' | translate}}</h4>
            <div class="card-options">
                @if(permission?.includes('Announcements Create')){
                <a (click)="createAnnouncementModel(createAnn)" href="javascript:void(0)"
                    class="btn btn-secondary me-3">{{'Add New Announcement' | translate}}</a>
                }
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <div class="table-options">
                    <div class="custom-buttons">
                        @if(permission?.includes('Announcements Delete')){
                        <button type="button" [disabled]="sendingResponse['announcementmassDelete']"
                            (click)="massDeleteAnnouncements('announcementmassDelete')" id="massdeletenotify"
                            class="btn btn-outline-light btn-sm mb-4 "><i class="fe fe-trash"></i>
                            {{'Delete' | translate}}
                            @if(sendingResponse['announcementmassDelete']){
                            <i class="fa fa-spinner fa-spin mx-1"></i>
                            }
                        </button>
                        }
                    </div>
                    <mat-form-field class="pull-right">
                        <input type="text" matInput (keyup)="applyFilter($event)" [placeholder]="'search' | translate"
                            #input>
                    </mat-form-field>
                </div>

                <div>
                    @if(isloader){
                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    }
                    <table class="table table-bordered ticketdeleterow border-bottom text-nowrap w-100 dataTable "
                        mat-table [dataSource]="dataSource" matSort>

                        <!-- Sno Column -->
                        <ng-container matColumnDef="sno">
                            <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef
                                mat-sort-header> {{'Sl.No' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row; let i = index" class="wpx-40 text-center"> {{i + 1 +
                                (paginator.pageIndex * paginator.pageSize)}}
                            </td>
                        </ng-container>
                        <!-- Checkbox Column -->
                        <ng-container matColumnDef="select">
                            <th scope="col" class="wpx-40 text-center" mat-header-cell *matHeaderCellDef>
                                <mat-checkbox (change)="$event ? toggleAllRows() : null"
                                    [checked]="selection.hasValue() && isAllSelected()"
                                    [indeterminate]="selection.hasValue() && !isAllSelected()"
                                    [aria-label]="checkboxLabel()">
                                </mat-checkbox>
                            </th>
                            <td mat-cell class="wpx-40 text-center" *matCellDef="let row">
                                <mat-checkbox (click)="$event.stopPropagation()"
                                    (change)="$event ? selection.toggle(row) : null"
                                    [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
                                </mat-checkbox>
                            </td>
                        </ng-container>

                        <!-- Title Column -->
                        <ng-container matColumnDef="title">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="title"> {{'Title' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                {{row?.title.slice(0, 40)}}
                            </td>

                        </ng-container>

                        <!-- Start Date Column -->
                        <ng-container matColumnDef="startdate">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="startdate"> {{'Start Date' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                @if(row?.startdate){
                                {{row?.startdate | date : setting?.date_format}}
                                }
                                @else{~}
                            </td>

                        </ng-container>
                        <!-- End Date Column -->
                        <ng-container matColumnDef="enddate">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="enddate"> {{'End Date' |
                                translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                @if(row?.enddate){
                                {{row?.enddate | date : setting?.date_format}}
                                }@else{~}
                            </td>

                        </ng-container>
                        <!-- End Date Column -->
                        <ng-container matColumnDef="selectedday">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="announcementday">
                                {{'Selected Day' | translate}}
                            </th>
                            <td mat-cell *matCellDef="let row">
                                @if(row?.announcementday){
                                {{row?.announcementday}}
                                }@else{~}
                            </td>

                        </ng-container>

                        <!-- Status Column -->
                        <ng-container matColumnDef="status">
                            <th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header="status"> {{'Status' |
                                translate}} </th>
                            <td mat-cell *matCellDef="let row ; let i = index">
                                @if(permission?.includes('Announcements Edit')){
                                <label class="custom-switch form-switch mb-0">
                                    <input [disabled]="sendingResponse['announcementEditStatus'+i]" type="checkbox"
                                        name="groupstatus"
                                        (click)="announcementStatusChange($event.target, row, 'announcementEditStatus'+i)"
                                        id="myonoffswitch{{row?.id}}" [value]="row?.groupstatus"
                                        class="custom-switch-input tswitch" [checked]="row?.status == 1 ? true: false">
                                    <span class="custom-switch-indicator"></span>
                                </label>
                                @if(sendingResponse['announcementEditStatus'+i]){
                                <i class="fa fa-spinner fa-spin mx-1"></i>
                                }
                                }
                            </td>
                        </ng-container>

                        <!-- Actions Column -->
                        <ng-container matColumnDef="actions">
                            <th scope="col" mat-header-cell *matHeaderCellDef> {{'Actions' | translate}} </th>
                            <td mat-cell *matCellDef="let row; let i = index">
                                <div>
                                    @if(permission?.includes('Announcements Edit')){
                                    <button type="button" aria-label="view" class="action-btns1 m-1"
                                        (click)="editAnnouncementDetails(editAnn, row)"><i
                                            class="feather feather-edit text-primary"
                                            [ngbTooltip]="'View' | translate"></i></button>
                                    }
                                    @if(permission?.includes('Announcements Delete')){
                                    <button type="button" aria-label="delete"
                                        [disabled]="sendingResponse['announcementEdit'+i]"
                                        (click)="deleteAnnouncement(row, 'announcementEdit'+i)"
                                        class="action-btns1 delete-category m-1" id="show-delete"><i
                                            class="feather feather-trash-2 text-danger "
                                            [ngbTooltip]="'Delete' | translate"></i>
                                        @if(sendingResponse['announcementEdit'+i]){
                                        <i class="fa fa-spinner fa-spin mx-1"></i>
                                        }
                                    </button>
                                    }

                                </div>
                            </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                        <!-- Row shown when there is no matching data. -->
                        <tr class="mat-row" *matNoDataRow>
                            @if(!input.value.length){
                            <td class="mat-cell text-center" colspan="12">
                                {{'No data Found'| translate}}
                            </td>
                            }
                            @else{
                            <td class="mat-cell text-center" colspan="12"> {{'No data matching the filter'| translate}}
                                " {{input.value}} " </td>
                            }
                        </tr>
                    </table>
                    <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[10, 25, 50, 100]"
                        (page)="onPaginateTable()" aria-label="Select page of users" [length]="paginator?.length"
                        [pageIndex]="paginator?.pageIndex" [pageSize]="paginator?.pageSize">
                    </mat-paginator>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Announcement List -->

<!-- // Category model start -->
<ng-template #createAnn let-modal>
    <div class="modal-header">
        <h4 class="card-title">{{'Create Announcement' | translate}}</h4>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        <form #groupcreate="ngForm" (ngSubmit)="createannouncement(groupcreate, 'createAnnouncement')">

            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
                    <input required [class.is-invalid]="title.invalid && title.touched" type="text" class="form-control"
                        name="title" id="name" ngModel #title="ngModel">
                    @if((title.invalid && title.touched) || title.dirty){
                    <div>
                        @if(title.errors?.['required']){
                        <small class="text-danger"> {{'Title is required' | translate}}</small>
                        }
                    </div>
                    }
                </div>
                <div class="form-group">
                    <label class="form-label">{{'Notice Text' | translate}} <span class="text-red">*</span></label>
                    <angular-editor [config]="toolbar" #description="ngModel" ngModel
                        [class.is-invalid]="description.invalid && description.touched" required class="form-control"
                        [placeholder]="'Description' | translate" name="notice"></angular-editor>
                    @if(description.errors?.['maxLength']){
                    <div class="limit-error">
                        {{ description.errors?.['maxLength'].actualLength | translate}}/{{
                        description.errors?.['maxLength'].maxLength | translate}} {{' exceeded the limit' | translate}}
                    </div>
                    }
                    @if((description.invalid && description.touched) || description.dirty){
                    <div>
                        @if(description.errors?.['required']){
                        <small class="text-danger">{{'Description is required' | translate}}</small>
                        }
                    </div>
                    }
                </div>

                <div class="row">
                    <h5>{{'Reference Button' | translate}} : </h5>
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="" class="form-label">{{'Button Lable' | translate}} <span>({{ 'optional' |
                                    translate }})</span></label>
                            <input class="form-control" name="buttonlable" type="text" value="" id="buttonlable"
                                [ngModel]="announcementObj['buttonlable']">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="" class="form-label">{{'Button Url' | translate}} <span>({{ 'optional' |
                                    translate }})</span></label>
                            <input class="form-control" name="buttonurl" type="text" value="" id="buttonurl"
                                [ngModel]="announcementObj['buttonurl']">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <h4>{{'Announcement Days' | translate}} : </h4>

                    <div class="row">
                        <div class="col-6">
                            <label for="startdate" class="form-label">{{'Start Date' | translate}} <span class="text-red">*</span></label>
                            <div class="input-group">
                                <input type="text" readonly class="form-control" name="startdate"
                                    placeholder="yyyy-mm-dd" (click)="startDate.toggle()" [(ngModel)]="fromDate"
                                    (dateSelect)="onDateSelection(daycontainer)"
                                    [minDate]="{year: currrentDate.year, month: currrentDate.month, day: currrentDate.day}"
                                    [required]="!groupcreate.value.announcementday" ngbDatepicker #dateFormate="ngModel"
                                    [class.is-invalid]="dateFormate.invalid && dateFormate.touched"
                                    (dateSelect)="updateFromDatepickerMinDate()" #startDate="ngbDatepicker"
                                    [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                                <button aria-label="start"
                                    class="btn btn-outline-secondary feather feather-calendar h-38"
                                    (click)="startDate.toggle()" type="button"></button>
                            </div>
                        </div>
                        <div class="col-6">
                            <label for="enddate" class="form-label">{{'End Date' | translate}} <span class="text-red">*</span></label>
                            <div class="input-group">
                                <input type="text" readonly class="form-control" name="enddate" placeholder="yyyy-mm-dd"
                                    [(ngModel)]="toDate" (dateSelect)="onDateSelection(daycontainer)"
                                    [minDate]="minFromDate" [required]="!groupcreate.value.announcementday"
                                    ngbDatepicker #dateFormate="ngModel" (click)="endDate.toggle()"
                                    [class.is-invalid]="dateFormate.invalid && dateFormate.touched"
                                    #endDate="ngbDatepicker" [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                                <button aria-label="end" class="btn btn-outline-secondary feather feather-calendar h-38"
                                    (click)="endDate.toggle()" type="button"></button>
                            </div>
                        </div>
                        @if((dateFormate.invalid && dateFormate.touched) ){
                        <div>
                            @if(dateFormate.errors?.['required']){
                            <small class="text-danger">{{'Announcement Days is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                    <span class="text-center fs-18 fw-bold border-bottom">{{'Or' | translate}}</span>
                    <div class="form-group">
                        <label class="form-label">{{'Repeated Announcement Day' | translate}} : <span
                                class="text-red">*</span></label>

                        <ng-select class="form-control custom-select form-select ancdataclear" [items]="normalDay"
                            #daycontainer [placeholder]="'Select Days' | translate" (click)="changedAnnouncementDay()"
                            bindLabel="value" [multiple]="true" [searchable]="true" dropdownPosition="auto"
                            bindValue="value" name="announcementday" [ngModel]="null"
                            [class.is-invalid]="announcementday.invalid && announcementday.touched"
                            [required]="!this.groupcreate.value.startdate || !this.groupcreate.value.enddate"
                            #announcementday="ngModel" [virtualScroll]="true" [loading]="!normalDay"
                            (open)="dropdownSearch()">
                            <ng-template ng-header-tmp>
                                <div style="display:flex;">
                                    <input #filterInput class="form-control" type="text"
                                        (input)="daycontainer.filter($any($event.target).value)" />
                                    <i [hidden]="filterInput.value.length === 0" class="material-icons"
                                        (click)="daycontainer.filter(''); filterInput.value = ''">close</i>
                                </div>
                            </ng-template>
                        </ng-select>
                        @if((announcementday.invalid && announcementday.touched)){
                        <div>
                            @if(announcementday.errors?.['required']){
                            <small class="text-danger">{{'Announcement Days is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="primary_color" class="form-label">{{'Background Color' | translate}} <span
                                    class="text-red">*</span></label>
                            <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                                (click)="primaryColorToggle=!primaryColorToggle">
                                <input type="text" [ngModel]="announcementObj['primary_color']" required
                                    [style.background]="announcementObj['primary_color']" name="primary_color"
                                    class="color-picker-tag" [cpAlphaChannel]="'disabled'"
                                    [(cpToggle)]="primaryColorToggle"
                                    [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]"
                                    [cpOutputFormat]="'hex'" [(colorPicker)]="announcementObj['primary_color']"
                                    (cpSliderDragEnd)="primaryColor($event)" #ignoredPrimaryInput
                                    #primaryColorModel="ngModel"
                                    [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                                {{announcementObj['primary_color']}}
                            </div>
                            @if((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty){
                            <div>
                                @if(primaryColorModel.errors?.['required']){
                                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                                }
                            </div>
                            }
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="secondary_color" class="form-label">{{'Text Color' | translate}} <span
                                    class="text-red">*</span></label>
                            <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                                (click)="secondaryColorToggle=!secondaryColorToggle">
                                <input type="text" [ngModel]="announcementObj['secondary_color']" required
                                    [style.background]="announcementObj['secondary_color']" name="secondary_color"
                                    class="color-picker-tag" [cpAlphaChannel]="'disabled'"
                                    [(cpToggle)]="secondaryColorToggle"
                                    [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]"
                                    [cpOutputFormat]="'hex'" [(colorPicker)]="announcementObj['secondary_color']"
                                    (cpSliderDragEnd)="secondaryColor($event)" #ignoredPrimaryInput
                                    #primaryColorModel="ngModel"
                                    [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                                {{announcementObj['secondary_color']}}
                            </div>
                            @if((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty){
                            <div>
                                @if(primaryColorModel.errors?.['required']){
                                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                                }
                            </div>
                            }
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="switch_section">
                        <div class="switch-toggle d-flex mt-4">
                            <label class="form-label pe-2">{{'Status' | translate}}</label>
                            <span class="onoffswitch2">
                                <input type="checkbox" name="status" id="myonoffswitchcreateTicket"
                                    class=" toggle-class onoffswitch2-checkbox" ngModel>
                                <label for="myonoffswitchcreateTicket" class="toggle-class onoffswitch2-label"></label>
                            </span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
                    translate}}</a>
                <button type="submit" [disabled]="groupcreate.invalid || sendingResponse['createAnnouncement']"
                    class="btn btn-secondary">{{'Save' | translate}}
                    @if(sendingResponse['createAnnouncement']){
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                </button>
            </div>
        </form>
    </div>
</ng-template>
<!-- // Category model end -->
<ng-template #editAnn let-modal>
    <div class="modal-header">
        <h4 class="card-title">{{'Edit Announcement' | translate}}</h4>
        <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
        </button>
    </div>
    <div class="modal-body">
        <form #groupedit="ngForm" (ngSubmit)="editannouncement(groupedit, 'editAnnouncement')">
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
                    <input required type="text" class="form-control" name="title"
                        [class.is-invalid]="title.invalid && title.touched" [ngModel]="announcementObj['title']"
                        #title="ngModel">
                    @if((title.invalid && title.touched) || title.dirty){
                    <div>
                        @if(title.errors?.['required']){
                        <small class="text-danger"> {{'Title is required' | translate}}</small>
                        }
                    </div>
                    }
                </div>
                <div class="form-group">
                    <label class="form-label">{{'Notice Text' | translate}}<span class="text-red">*</span></label>
                    <angular-editor [config]="toolbar" #description="ngModel"
                        [class.is-invalid]="description.invalid && description.touched" required class="form-control"
                        [placeholder]="'Description' | translate" name="notice"
                        [ngModel]="announcementObj['notice']"></angular-editor>
                    @if(description.errors?.['maxLength']){
                    <div class="limit-error">
                        {{ description.errors?.['maxLength'].actualLength | translate}}/{{
                        description.errors?.['maxLength'].maxLength | translate}} {{' exceeded the limit' | translate}}
                    </div>
                    }
                    @if((description.invalid && description.touched) || description.dirty){
                    <div>
                        @if(description.errors?.['required']){
                        <small class="text-danger">{{'Description is required' | translate}}</small>
                        }
                    </div>
                    }
                </div>

                <div class="row">
                    <h5>{{'Reference Button' | translate}} : </h5>
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="" class="form-label">{{'Button Lable' | translate}} <span>({{ 'optional' |
                                    translate }})</span></label>
                            <input class="form-control" name="buttonlable" type="text" value="" id="buttonlable"
                                [ngModel]="announcementObj['buttonlable']">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="" class="form-label">{{'Button Url' | translate}} <span>({{ 'optional' |
                                    translate }})</span></label>
                            <input class="form-control" name="buttonurl" type="text" value="" id="buttonurl"
                                [ngModel]="announcementObj['buttonurl']">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <h4>{{'Announcement Days' | translate}} : </h4>

                    <div class="row">

                        <div class="col-6">
                            <label for="startdate" class="form-label">{{'Start Date' | translate}} <span class="text-red">*</span></label>
                            <div class="input-group">
                                <input type="text" readonly class="form-control" name="startdate"
                                    placeholder="yyyy-mm-dd" (click)="startDate.toggle()"
                                    [class.is-invalid]="dateFormate.invalid && dateFormate.touched"
                                    [minDate]="{year: currrentDate.year, month: currrentDate.month, day: currrentDate.day}"
                                    (dateSelect)="onDateSelection(daycontainer)"
                                    [required]="!groupedit.value.announcementday" ngbDatepicker [(ngModel)]="fromDate"
                                    #startDate="ngbDatepicker" (dateSelect)="updateFromDatepickerMinDate()"
                                    #dateFormate="ngModel" [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                                <button aria-label="start"
                                    class="btn btn-outline-secondary feather feather-calendar h-38"
                                    (click)="startDate.toggle()" type="button"></button>
                            </div>
                        </div>
                        <div class="col-6">
                            <label for="enddate" class="form-label">{{'End Date' | translate}} <span class="text-red">*</span></label>
                            <div class="input-group">
                                <input type="text" readonly class="form-control" name="enddate" placeholder="yyyy-mm-dd"
                                    (click)="endDate.toggle()" (dateSelect)="onDateSelection(daycontainer)"
                                    [required]="!groupedit.value.announcementday" ngbDatepicker [(ngModel)]="toDate"
                                    [class.is-invalid]="dateFormate.invalid && dateFormate.touched"
                                    [minDate]="minFromDate" #endDate="ngbDatepicker" #dateFormate="ngModel"
                                    [firstDayOfWeek]="setting?.['start_week'] ?? 1">
                                <button aria-label="end" class="btn btn-outline-secondary feather feather-calendar h-38"
                                    (click)="endDate.toggle()" type="button"></button>
                            </div>
                        </div>
                        @if((dateFormate.invalid && dateFormate.touched)){
                        <div>
                            @if(dateFormate.errors?.['required']){
                            <small class="text-danger">{{'Announcement Days is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                    <span class="text-center fs-18 fw-bold border-bottom">Or</span>
                    <div class="form-group">
                        <label class="form-label">{{'Repeated Announcement Day' | translate}} : <span
                                class="text-red">*</span></label>

                        <ng-select class="form-control custom-select form-select ancdataclear" [items]="normalDay"
                            #daycontainer [placeholder]="'Startselect Days' | translate"
                            (click)="changedAnnouncementDay()" [virtualScroll]="true" bindLabel="value"
                            [multiple]="true" [searchable]="true" dropdownPosition="auto" bindValue="value"
                            name="announcementday" [ngModel]="announcementObj['announcementday']"
                            [class.is-invalid]="announcementday.invalid && announcementday.touched"
                            [required]="!this.groupedit.value.startdate || !this.groupedit.value.enddate"
                            #announcementday="ngModel" [loading]="!normalDay" (open)="dropdownSearch()">
                            <ng-template ng-header-tmp>
                                <div style="display:flex;">
                                    <input #filterInput class="form-control" type="text"
                                        (input)="daycontainer.filter($any($event.target).value)" />
                                    <i [hidden]="filterInput.value.length === 0" class="material-icons"
                                        (click)="daycontainer.filter(''); filterInput.value = ''">close</i>
                                </div>
                            </ng-template>
                        </ng-select>
                        @if((announcementday.invalid && announcementday.touched)){
                        <div>
                            @if(announcementday.errors?.['required']){
                            <small class="text-danger">{{'Announcement Days is required' | translate}}</small>
                            }
                        </div>
                        }
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="primary_color" class="form-label">{{'Background Color' | translate}} <span
                                    class="text-red">*</span></label>
                            <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                                (click)="primaryColorToggle=!primaryColorToggle">
                                <input type="text" [ngModel]="announcementObj['primary_color']" required
                                    [style.background]="announcementObj['primary_color']" name="primary_color"
                                    class="color-picker-tag" [cpAlphaChannel]="'disabled'"
                                    [(cpToggle)]="primaryColorToggle"
                                    [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]"
                                    [cpOutputFormat]="'hex'" [(colorPicker)]="announcementObj['primary_color']"
                                    (cpSliderDragEnd)="primaryColor($event)" #ignoredPrimaryInput
                                    #primaryColorModel="ngModel"
                                    [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                                {{announcementObj['primary_color']}}
                            </div>
                            @if((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty){
                            <div>
                                @if(primaryColorModel.errors?.['required']){
                                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                                }
                            </div>
                            }
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="secondary_color" class="form-label">{{'Text Color' | translate}} <span
                                    class="text-red">*</span></label>
                            <div class="form-control d-flex align-items-center gap-1" #ignoredPrimaryButton
                                (click)="secondaryColorToggle=!secondaryColorToggle">
                                <input type="text" [ngModel]="announcementObj['secondary_color']" required
                                    [style.background]="announcementObj['secondary_color']" name="secondary_color"
                                    class="color-picker-tag" [cpAlphaChannel]="'disabled'"
                                    [(cpToggle)]="secondaryColorToggle"
                                    [cpIgnoredElements]="[ignoredPrimaryButton, ignoredPrimaryInput]"
                                    [cpOutputFormat]="'hex'" [(colorPicker)]="announcementObj['secondary_color']"
                                    (cpSliderDragEnd)="secondaryColor($event)" #ignoredPrimaryInput
                                    #primaryColorModel="ngModel"
                                    [class.is-invalid]="primaryColorModel.invalid && primaryColorModel.touched">
                                {{announcementObj['secondary_color']}}
                            </div>
                            @if((primaryColorModel.invalid && primaryColorModel.touched) || primaryColorModel.dirty){
                            <div>
                                @if(primaryColorModel.errors?.['required']){
                                <small class="text-danger">{{'Primary Color is required' | translate}}</small>
                                }
                            </div>
                            }
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="switch_section">
                        <div class="switch-toggle d-flex mt-4">
                            <label class="form-label pe-2">{{'Status' | translate}}</label>
                            <span class="onoffswitch2">
                                <input type="checkbox" name="status" id="myonoffswitcheditann"
                                    class=" toggle-class onoffswitch2-checkbox" [ngModel]="announcementObj['status']"
                                    [checked]="announcementObj['status']">
                                <label for="myonoffswitcheditann" class="toggle-class onoffswitch2-label"></label>
                            </span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' |
                    translate}}</a>
                <button type="submit" [disabled]="groupedit.invalid || sendingResponse['editAnnouncement']"
                    class="btn btn-secondary">{{'Update' | translate}}
                    @if(sendingResponse['editAnnouncement']){
                    <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                </button>
            </div>
        </form>
    </div>
</ng-template>


<ng-template #noper>
    ~
</ng-template>