<!-- <admin-page-header ></admin-page-header> -->

<!--Page header-->
<div class="page-header d-lg-flex d-block">
  <div class="page-leftheader">
    <h4 class="page-title">
      <span class="font-weight-normal text-muted ms-2">{{'Compose Employees' | translate}}</span>
    </h4>
  </div>
  <div class="page-rightheader ms-md-auto">
    <div class="d-flex align-items-end flex-wrap my-auto end-content breadcrumb-end">
      <div class="d-flex">
        <div class="btn-list">
          @if (permission?.includes('Custom Notifications Customer')) {
            <a routerLink="/admin/notifications/compose-customers" class="btn btn-info ">{{'Compose for Customers'| translate}}</a>
          }
        </div>
      </div>
    </div>
  </div>
</div>
<!--End Page header-->

<!-- Row -->
<div class="row">
  <div class="col-lg-12 col-xl-12 col-md-12 col-sm-12">
    <div class="card">
      <div class="card-header border-bottom-0 justify-content-between">
        <h3 class="card-title mb-sm-0 mb-2">{{'Compose Notification For Employees' | translate}}</h3>
      </div>
      <form #empCompose="ngForm" (ngSubmit)="composeEmployee(empCompose, 'composeNotifyEmp')" >
        <div class="card-body">
          <div class="row">
            <div class="col-xl-6">
              <div class="form-group">
                <label class="form-label">{{'To' | translate}} <span class="text-red">*</span></label>
                <div class="custom-controls-stacked d-md-flex" id="projectdisable">
                  <ng-select class="form-control" #toField="ngModel" [class.is-invalid]="toField.invalid && toField.touched" required
                    [items]="userslist" #select [placeholder]="'Select Employee' | translate"
                    [virtualScroll]="true" bindLabel="name" [multiple]="true" [searchable]="true"
                    dropdownPosition="auto" bindValue="id" name="users" [loading]="!userslist"
                    [ngModel]="employee">
                    <ng-template ng-header-tmp>

                      <div>
                        <button type="button" class="btn btn-primary"
                        (click)="onSelectAll()">{{'Select All' | translate}}</button>
                        <button type="button" class="btn btn-danger mx-1"
                        (click)="onClearAll()">{{'Clear All' | translate}}</button>
                      </div>
                    </ng-template>
                    <ng-template ng-option-tmp let-item="item"  let-search="searchTerm">
                      <div><span>{{item?.name}}({{item?.roles?.[0]?.name}})</span></div>
                  </ng-template>
                </ng-select>
              </div>
              @if ((toField.invalid && toField.touched) || toField.dirty) {
                <div>
                  @if (toField.errors?.['required']) {
                    <small class="text-danger">{{'To is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-xl-6">
            <div class="form-group">
              <label class="form-label">{{'Subject'| translate}} <span class="text-red">*</span></label>
              <div class="">
                <input type="text" class="form-control" name="subject" ngModel required #subject="ngModel" [class.is-invalid]="subject.invalid && subject.touched">
              </div>
              @if ((subject.invalid && subject.touched) || subject.dirty) {
                <div>
                  @if (subject.errors?.['required']) {
                    <small class="text-danger">{{'Subject is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xl-6">
            <div class="form-group">
              <div class=" align-items-center">
                <label class="form-label">{{'Tag' | translate}} <span class="text-red">*</span></label>
                <ng-select ngModel name="tag" class="form-control nodropdown" [items]="[]" required [placeholder]="'Tags' | translate" [addTag]="addTagFn" [hideSelected]="true" [multiple]="true" #tag="ngModel" bindLabel="name" ngModel [isOpen]="false" [maxSelectedItems]="10">
                  @if ((tag.invalid && tag.touched) || tag.dirty) {
                    <div>
                      @if (tag.errors?.['required']) {
                        <small class="text-danger">{{'Tag is required' | translate}}</small>
                      }
                    </div>
                  }
                </ng-select>
              </div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="form-group">
              <label class="form-label">{{'Select Tag Color' | translate}} <span class="text-red">*</span></label>
              <div  class="form-control d-flex align-items-center gap-1">
                <input type="text" required #colorField="ngModel" [class.is-invalid]="colorField.invalid && colorField.touched" [ngModel]="color" [style.background]="color|| '#333333'" name="selecttagcolor" class="color-picker-tag" [cpAlphaChannel]="'disabled'" [cpOutputFormat]="'hex'"  [(colorPicker)]="color" (cpSliderDragEnd)="dynamicLightPrimary($event)" >
                {{color}}
              </div>
              @if ((colorField.invalid && colorField.touched) || colorField.dirty) {
                <div>
                  @if (colorField.errors?.['required']) {
                    <small class="text-danger">{{'Color is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xl-12">
            <div class="form-group">
              <label class="form-label">{{'Message' | translate}} <span class="text-red">*</span></label>
              <angular-editor [config]="toolbar" #messageModel="ngModel" ngModel [class.is-invalid]="messageModel.invalid && messageModel.touched" required class="form-control" [placeholder]="'Message' | translate" name="message"></angular-editor>
              @if (messageModel.errors?.['maxLength']) {
                <div class="limit-error">
                  {{ messageModel.errors?.['maxLength'].actualLength }}/{{ messageModel.errors?.['maxLength'].maxLength }} {{' exceeded the limit' | translate}}
                </div>
              }
              @if ((messageModel.invalid && messageModel.touched) || messageModel.dirty) {
                <div>
                  @if (messageModel.errors?.['required']) {
                    <small class="text-danger">{{'Message is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer d-sm-flex">
        <div class="btn-list ms-auto">
          <button id="employee-submit" type="submit" [disabled]="empCompose.invalid || sendingResponse['composeNotifyEmp']" class="btn btn-primary btn-space">{{'Send Message' | translate}}@if (sendingResponse['composeNotifyEmp']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        </div>
      </div>
    </form>
  </div>
</div>
</div>