<admin-page-header [title]="'Customer Edit'" ></admin-page-header>


<!-- Customer Edit -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Edit Customer' | translate}}</h4>
    </div>
    <form #editCust="ngForm" (ngSubmit)="editCustomer(editCust, 'editCust')">
      <div class="card-body" >
        <div class="row">
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'First Name' | translate}}</label>
              <input type="text" class="form-control" name="firstname"  [value]="customerData?.firstname" [ngModel]="customerData?.firstname" >
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Last Name' | translate}}</label>
              <input type="text" class="form-control " name="lastname"  [value]="customerData?.lastname" [ngModel]="customerData?.lastname" >
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Username' | translate}}</label>
              <input type="text" class="form-control" name="name"  [value]="customerData?.username" [ngModel]="customerData?.username" readonly>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Email' | translate}}</label>
              <input   type="email" class="form-control" name="email" [value]="customerData?.email" [ngModel]="customerData?.email" #c_email="ngModel"
              [class.is-invalid]="c_email.invalid && c_email.touched" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}" >@if ((c_email.invalid && c_email.touched) || c_email.dirty) {
                <div
                  >
                  @if (c_email.errors?.['required']) {
                    <small class="text-danger"
                      >
                    {{'Email address is required' | translate}}</small>
                  }
@if (c_email.errors?.['pattern']) {
<small class="text-danger">{{'Please check Email Format' | translate}}</small>
}
                </div>
              }
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Country' | translate}}</label>
              <ng-select #selectcountry class="form-control" [items]="countries" [multiple]="false" [searchable]="true" [ngModel]="customerData?.['country']" clearable="false"
              [placeholder]="'Select Country' | translate" bindLabel="name" bindValue="name" name="country" [virtualScroll]="true" [loading]="!countries" (open)="dropdownSearch()">
              <ng-template ng-header-tmp>
                <div style="display:flex;">
                  <input #filterInput class="form-control" type="text" (input)="selectcountry.filter($any($event.target).value)" />
                  <i [hidden]="filterInput.value.length === 0" class="material-icons" (click)="selectcountry.filter(''); filterInput.value = ''">close</i>
                </div>
              </ng-template>
            </ng-select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Timezones' | translate}}</label>
              <ng-select class="form-control timezoneWrapp" [items]="timezones" #select  clearable="false"
                  [placeholder]="'Select Timezone' | translate" [virtualScroll]="true"
                  bindLabel="name" [multiple]="false" [searchable]="true" 
                  dropdownPosition="auto" bindValue="name" name="timezone" [(ngModel)]="timezone"  (ngModelChange)="timeZoneChanged($event)">
                    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                        <div><span>{{item}}</span></div>
                    </ng-template>
                </ng-select>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Mobile Number' | translate}}</label>
              <ngx-mat-intl-tel-input [enablePlaceholder]="true" [enableSearch]="true" [ngModel]="customerData?.phone" class="form-control" name="phone" describedBy="phoneInput"></ngx-mat-intl-tel-input>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Status' | translate}}</label>
              <ng-select class="form-control  select2" name="status" [ngModel]="customerData?.status"  >
                <ng-option value="1">{{'Active' | translate}}</ng-option>
                <ng-option value="0">{{'Inactive' | translate}}</ng-option>
              </ng-select>
            </div>
          </div>

          @if (customfields?.length) {
            <div class="row">
              <h2 class="card-title">Custom Fields</h2>
              @for (customfield of customfields; track customfield) {
                <div class="col-sm-6 col-md-6">
                  <div class="form-group ">
                    <label class="form-label">{{customfield.fieldnames}}
                      @if (customfield.fieldrequired == '1') {
                        <span class="text-red">*</span>
                      }
                    </label>
                    @if (customfield.fieldtypes == 'text') {
                      <input type="{{customfield.fieldtypes}}" [maxlength]="255" class="form-control"
                        name="custom_{{customfield.id}}" #c_text="ngModel"
                        [class.is-invalid]="c_text.invalid && c_text.touched"
                        [required]="customfield.fieldrequired == '1' ? true : false"
                        [ngModel]="customfield.privacymode == '1' ? (customfield.value) :customfield.values">
                      @if ((c_text.invalid && c_text.touched) || c_text.dirty) {
                        <div>
                          @if (c_text.errors?.['required']) {
                            <small class="text-danger">
                            {{'Field is required' | translate}}</small>
                          }
                        </div>
                      }
                    }
                    @if (customfield.fieldtypes == 'email') {
                      <input type="email"
                        class="form-control" name="custom_{{customfield.id}}" #c_email="ngModel"
                        [class.is-invalid]="c_email.invalid && c_email.touched"
                        [required]="customfield.fieldrequired == '1' ? true : false" [ngModel]="customfield.privacymode == '1' ? (customfield.value) :customfield.values" pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}">
                      @if ((c_email.invalid && c_email.touched) || c_email.dirty) {
                        <div>
                          @if (c_email.errors?.['required']) {
                            <small class="text-danger">
                            {{'Email address is required' | translate}}</small>
                          }
                          @if (c_email.errors?.['pattern']) {
                          <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                          }
                        </div>
                      }
                    }
                    @if (customfield.fieldtypes == 'textarea') {
                      <textarea name="custom_{{customfield.id}}" maxlength="255" class="form-control"
                        cols="30" rows="4" #c_textarea="ngModel"
                        [class.is-invalid]="c_textarea.invalid && c_textarea.touched"
                      [required]="customfield.fieldrequired == '1' ? true : false" [ngModel]="customfield.privacymode == '1' ? (customfield.value) :customfield.values"></textarea>
                      @if ((c_textarea.invalid && c_textarea.touched) || c_textarea.dirty) {
                        <div>
                          @if (c_textarea.errors?.['required']) {
                            <small class="text-danger">
                            {{'Field is required' | translate}}</small>
                          }
                        </div>
                      }
                    }
                    @if (customfield.fieldtypes == 'select') {
                      <ng-select name="custom_{{customfield.id}}" class="form-control select2-show-search"
                        #c_select="ngModel" [class.is-invalid]="c_select.invalid && c_select.touched"
                        [required]="customfield.fieldrequired == '1' ? true : false" [ngModel]="customfield.privacymode == '1' ? (customfield.value) :customfield.values">
                        @for (seoption of customfield.fieldoptions?.split(','); track seoption) {
                          <ng-option value="{{seoption}}">{{seoption}}</ng-option>
                        }
                      </ng-select>
                      @if ((c_select.invalid && c_select.touched) || c_select.dirty) {
                        <div>
                          @if (c_select.errors?.['required']) {
                            <small class="text-danger">
                            {{'Field is required' | translate}}</small>
                          }
                        </div>
                      }
                    }
                    @if (customfield.fieldtypes == 'checkbox') {
                      @for (coption of customfield.fieldoptions?.split(','); track coption) {
                        <label class="custom-control custom-checkbox d-inline-block me-3">
                          <input #custo
                            (click)="customfieldSection(coption, 'custom_'+customfield.id, customfield.fieldtypes)"
                            type="checkbox" class="custom-control-input"
                            name="custom_{{customfield.id}}" [checked]="checkcheckboxOtions(customfield.values,coption)">
                          <span class="custom-control-label">{{coption}}</span>
                        </label>
                      }
                    }
                    @if (customfield.fieldtypes == 'radio') {
                      @for (roption of customfield.fieldoptions?.split(','); track roption) {
                        <label class="custom-control form-radio d-inline-block me-3">
                          <input #custo
                            (click)="customfieldSection(roption, 'custom_'+customfield.id, customfield.fieldtypes)"
                            type="radio" class="custom-control-input"
                            name="custom_{{customfield.id}}" [checked]="customfield.values == roption">
                          <span class="custom-control-label">{{roption}}</span>
                        </label>
                      }
                    }
                  </div>
                </div>
              }
            </div>
          }
          <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
              <span class="onoffswitch2">
                <input type="checkbox" name="voilated" id="myonoffswitch181" class=" toggle-class onoffswitch2-checkbox sprukoswitch" [checked]="customerData?.voilated == 'on'" [ngModel]="customerData?.voilated">
                <label for="myonoffswitch181" class="toggle-class onoffswitch2-label"></label>
              </span>
              <label class="form-label ps-3"> {{'Voilated Customer' | translate}} </label>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="form-group float-end">
          <button [disabled]="sendingResponse['editCust'] || editCust.invalid" type="submit" class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['editCust']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- End Customer Edit -->
