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

<!-- Create Customers -->
<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Create Customer' | translate}}</h4>
    </div>
    <form #CreateCustomer="ngForm" (ngSubmit)="createCustomer(CreateCustomer, 'createCustomer')">
      <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}} <span
              class="text-red">*</span></label>
              <input type="text" #firstname="ngModel"
                [class.is-invalid]="firstname.invalid && firstname.touched" required ngModel
                class="form-control" name="firstname" value="">
              @if ((firstname.invalid && firstname.touched) || firstname.dirty) {
                <div>
                  @if (firstname.errors?.['required']) {
                    <small class="text-danger">
                    {{'Firest Name is required' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Last Name' | translate}}<span class="text-red">*</span></label>
              <input type="text" #lastname="ngModel"
                [class.is-invalid]="lastname.invalid && lastname.touched" required ngModel
                class="form-control" name="lastname" value="">
              @if ((lastname.invalid && lastname.touched) || lastname.dirty) {
                <div>
                  @if (lastname.errors?.['required']) {
                    <small class="text-danger">{{'Last Name is required' |
                    translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Email' | translate}}<span class="text-red">*</span></label>
              <input #email="ngModel" [class.is-invalid]="email.invalid && email.touched"
                [class.is-valid]="email.valid" required
                pattern="[^@\s]+@[^@\s]+\.[a-zA-Z]{2,}"
                type="email" ngModel class="form-control " name="email" value="">
              @if ((email.invalid && email.touched) || email.dirty) {
                <div>
                  @if (email.errors?.['required']) {
                    <small class="text-danger">{{'Email address is required'
                    | translate}}</small>
                  }
                  @if (email.errors?.['pattern']) {
                  <small class="text-danger">{{'Please check Email Format' | translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="form-group">
              <label class="form-label">{{'Password' | translate}}<small class="text-muted"><i>
              {{'Please copy the Password' | translate}}</i></small></label>
              <input #pswd="ngModel" [class.is-invalid]="pswd.invalid && pswd.touched" required
                class="form-control" ngModel="{{Password+Password}}" type="text" name="password"
                readonly>
              @if ((pswd.invalid && pswd.touched) || pswd.dirty) {
                <div>
                  @if (pswd.errors?.['required']) {
                    <small class="text-danger">{{'Password is required' |
                    translate}}</small>
                  }
                </div>
              }
            </div>
          </div>
          <div class="col-sm-6 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
              class="form-control" name="phone" describedBy="phoneInput"></ngx-mat-intl-tel-input>
            </div>
          </div>
        </div>
        @if (data?.customfields.length) {
          <div class="row">
            <h2 class="card-title">Custom Fields</h2>
            @for (customfield of data?.customfields; track customfield) {
              <div class="col-sm-6 col-md-6">
                @if (customfield?.status == '1') {
                  <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>
                      @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 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></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>
                        @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="{{customfield.fieldtypes}}" class="custom-control-input"
                            name="custom_{{customfield.id}}" [value]="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="{{customfield.fieldtypes}}" class="custom-control-input"
                            name="custom_{{customfield.id}}" [value]="roption">
                          <span class="custom-control-label">{{roption}}</span>
                        </label>
                      }
                    }
                  </div>
                }
              </div>
            }
          </div>
        }
      </div>
      <div class="col-md-12 card-footer">
        <div class="form-group float-end">
          <button [disabled]="CreateCustomer.invalid || sendingResponse['createCustomer']" type="submit"
            class="btn btn-secondary">{{'Create Customer' | translate}}
            @if (sendingResponse['createCustomer']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
            }
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- Create Customers -->