<div class="card">
  <div class="card-header border-0">
    <h4 class="card-title">{{'Profile Details' | translate}}</h4>
  </div>
  <div class="card-body">
    <form #FormData="ngForm" (ngSubmit)="ChangeTheValues(FormData, 'profileedit')">
      <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" class="form-control " value="{{user?.firstname}}" readonly name="firstname"
              [placeholder]="'First Name' | translate">
          </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" class="form-control " value="{{user?.lastname}}" readonly name="lastname"
              [placeholder]="'Last Name' | translate">
          </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 " value="{{user?.username}}" [placeholder]="'Username' | translate"
              name="username" readonly>
          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Email' | translate}}
              @if (setting?.cust_email_update == 'on') {
              <a (click)="updateModel(content)" class="action-btns1 ms-2 border-0" id="emailchange"
                data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i
                  class="feather feather-edit text-primary"></i></a>
              }
            </label>
            <input [placeholder]="'Email' | translate" type="email" value="{{user?.email}}" class="form-control"
              readonly>

          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Mobile Number' | translate}}  @if (setting?.cust_mobile_update == 'on') {
              <a (click)="updateModel(mobilecontent)" class="action-btns1 ms-2 border-0" id="emailchange"
                data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><i
                  class="feather feather-edit text-primary"></i></a>
              }</label>
              <input type="text" class="form-control " [placeholder]="'Mobile Number' | translate" readonly [value]="user?.phone">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Country' | translate}}</label>
            <ng-select class="form-control" [placeholder]="'Country' | translate" #selectcountry [items]="countries" clearable="false"
              [searchable]="false" [ngModel]="user?.country != 'null' ? user?.country : null" 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">{{'Timezone' | 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>
        @if (customfield?.length) {
          @for (customfield of customfield; track customfield) {
            @if (customfield.fieldtypes != 'textarea' && customfield.values?.length) {
              <div class="col-sm-6 col-md-6">
                <div class="form-group">
                  <label class="form-label">{{customfield.fieldnames}}</label>
                  @if (customfield.privacymode == '1') {
                  <input type="email" class="form-control" [placeholder]="'Email' | translate"
                    value="{{customfield.value }}" readonly>
                  } @else {
                  <input type="email" class="form-control" [placeholder]="'Email' | translate" value="{{customfield.values }}"
                    readonly>
                  }
                </div>
              </div>
            }
          }
        }
        @if (setting?.PROFILE_USER_ENABLE == 'yes') {
        <div class="col-md-6">
          <div class="form-group">
            <label class="form-label">{{'Upload Image' | translate}}</label>
            <div #imageHolder class="input-group file-browser">
              <input class="form-control" #profileImg name="image" type="file" ngModel (change)="image($event)"
                accept="image/png, image/jpeg,image/jpg">
            </div>
            <small class="text-muted"><i>{{'The file size should not be more than 5MB' | translate}}</i></small>
          </div>
          @if (user?.image != null) {
          <div class="file-image-1 removesprukoi4" #removesprukoi4>
            <div class="product-image custom-ul">
              <a href="javascript:;">
                <img [src]="user?.profileimage || './assets/images/user-profile.png'" class="br-5" alt="profile" loading="lazy" decoding="async">
              </a>
              <ul class="icons">
                <li><a href="javascript:(0);" class="bg-danger delete-image"
                    (click)="imageremove(user?.id, removesprukoi4, imageHolder)"><i class="fe fe-trash"></i></a></li>
              </ul>
            </div>
          </div>
          }
        </div>
        }

        <div class="col-md-12 card-footer ">
          <div class="form-group">
            <button type="submit" [disabled]="FormData.invalid || sendingResponse['profileedit']"
              class="btn btn-secondary float-end ">{{'Save Changes' | translate}}
              @if (sendingResponse['profileedit']) {
              <i class="fa fa-spinner fa-spin mx-1"></i>
              }
            </button>
          </div>
        </div>
      </div>
    </form>
    <!-- </form> -->
  </div>
</div>
@if (setting?.SPRUKOADMIN_C == 'on') {
<div class="card">
  <div class="card-header">
    <div class="card-title">{{'Personal setting' | translate}}</div>
  </div>
  <div class="card-body">
    <div class="switch_section">
      <div class="switch-toggle d-flex mt-4">
        <span class="onoffswitch2">
          <input type="checkbox" name="darkmode" id="darkmode" class=" toggle-class onoffswitch2-checkbox sprukolayouts"
            [checked]="user?.custsetting?.darkmode == '1' ? true : false" (click)="SwitchToDarkMode($event)">
          <label for="darkmode" class="toggle-class onoffswitch2-label"></label>
        </span>
        <label class="form-label ps-3">{{'Switch to Dark-Mode' | translate}}</label>
      </div>
    </div>
  </div>
</div>
}

@if (setting?.twilioenable == 'on'){

<div class="card">
    <div class="card-header">
        <div class="card-title">{{ 'Ticket Updates via Mobile SMS' | translate }}</div>
    </div>
    <div class="card-body">
        <div class="switch_section">
            <div class="switch-toggle d-flex mt-4">
                <a class="onoffswitch2">
                    <input type="checkbox" [attr.data-id]="user.id" #twilioSetting
                        [attr.data-mobileverified]="user?.phoneVerified"
                        name="custsmsenable" id="custsmsenable"
                        class=" toggle-class onoffswitch2-checkbox custsmsenable"
                        value="off"
                        [checked]="user?.phonesmsenable == '1' ? true: false" (change)="updateReceiveStatus($event)">
                    <label for="custsmsenable" class="toggle-class onoffswitch2-label"></label>
                </a>
                <label class="form-label ps-3">{{ 'Recieve Ticket alerts' | translate }}</label>
            </div>
        </div>
    </div>
</div>
}
@if (setting?.Customer_google_two_fact == 'on' || setting?.Customer_email_two_fact == 'on') {
<div class="card">
  <div class="card-header border-bottom-0 pb-0">
    <div class="card-title">{{ 'Two Factor Authentication' | translate }}</div>
  </div>
  <div class="card-body">
    <div class="row justify-content-center">
      <div class="col-xl-12">
        <div class="row">
          <div class="col-xl-6">
            <div class="d-sm-flex d-block gap-3 align-items-center">
              @if (setting?.Customer_google_two_fact == 'on') {
              <div class="switch_section px-0">
                <div class="switch-toggle d-flex align-items-center">
                  <span class="onoffswitch2">
                    <input #twofactorEle type="checkbox" name="twofactor" id="twofactor" (change)="configureAuth(googleverifycontent)"
                      [checked]="user?.custsetting?.twofactorauth == 'googletwofact' ? true : false"
                      [ngModel]="user?.custsetting?.twofactorauth == 'googletwofact' ? true : false"
                      [value]="user?.custsetting?.twofactorauth == 'googletwofact' ? true : false"
                      class=" toggle-class onoffswitch2-checkbox">
                    <label for="twofactor" class="toggle-class onoffswitch2-label"></label>
                  </span>
                  <label class="form-label ps-3 mb-0">{{ 'Use Google Authenticator' | translate }}</label>
                </div>
              </div>
              }
              @if (setting?.Customer_email_two_fact == 'on') {
              <div class="switch_section px-0">
                <div class="switch-toggle d-flex align-items-center">
                  <span class="onoffswitch2">
                    <input type="checkbox" #emailtwofactorEle name="emailtwofactor" id="emailtwofactor"
                      [checked]="user?.custsetting?.twofactorauth == 'emailtwofact' ? true : false"
                      (change)="sprukoemailtwofactor($event, mailverifycontent)"
                      [ngModel]="user?.custsetting?.twofactorauth == 'emailtwofact' ? true : false"
                      [value]="user?.custsetting?.twofactorauth == 'emailtwofact' ? true : false"
                      class=" toggle-class onoffswitch2-checkbox">
                    <label for="emailtwofactor" class="toggle-class onoffswitch2-label"></label>
                  </span>
                  <label class="form-label ps-3 mb-0">{{ 'Use Email OTP' | translate }}</label>
                </div>
              </div>
              }
            </div>
          </div>
        </div>
        @if (autgoogleAuth.workprogress == 'workingmode' && workingmodeStatus) {
        <div id="emptwofactorapp">
          <div class="d-flex align-items-start gap-4 mt-6 flex-wrap">
            <div class="qr-code" [innerHTML]="sanitizeHtml(autgoogleAuth.QR_Image)"></div>
            <div>
              <h5 class="fw-semibold">{{'Set up Google Authenticator' | translate}}</h5>
              <p class="mb-0">Set up your two factor authentication by scanning the QR code.
                Alternatively, you can use the code </p>
              <div class="mb-4 mt-2">
                <span class="badge fs-12 bg-light text-default p-2">{{autgoogleAuth.secret}}</span>
              </div>
              <div class="fs-13">{{'You must set up your Google Authenticator app before continuing. You will be unable to login otherwise' | translate}}</div>
              <div class="mb-3 fs-13">{{'Please enter the' | translate}} <span class="font-weight-bold">{{'OTP' |
                  translate}}</span> {{'generated on your Authenticator App. Ensure you submit the current one because it refreshes every' | translate}} <span class="text-danger">30 {{'seconds' |
                  translate}}<sup>*</sup></span>
              </div>
              <label for="one_time_password" class="control-label text-success font-weight-semibold mb-1">{{'One Time Password' | translate}}</label>
              <div class="d-flex align-item-end gap-3">
                <div class="w-50">
                  <input id="secret_key_value" type="hidden" name="secret_key_value" #securityKey
                    value="{{autgoogleAuth.secret}}">
                  <input id="one_time_password" type="number" class="form-control" #oneTimePswd name="one_time_password"
                    required required autofocus autocomplete="off">
                </div>
                <div>
                  <button type="button" class="btn btn-primary" id="otpverify" [disabled]="!oneTimePswd.value"
                    (click)="verifyGoogleAuth(oneTimePswd)">{{'Submit' | translate}}</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        }
        @if (setting?.Customer_google_two_fact == 'on' && user?.custsetting?.twofactorauth == 'googletwofact' &&
        reconfigureStatus) {
        <div class="mt-5" id="configured" #configured>
          <div class="alert bg-success-transparent text-dark " role="alert">
            <h5 class="mb-4">{{ 'Google two factor authentication is already configured.' | translate }}</h5>
            <button type="button" (click)="configureAuth(googleverifycontent, 'configStatus')" class="btn btn-primary reconfig me-2">{{
              'Reconfigure'| translate}}</button>
            <button (click)="removeAuth(googleverifycontent)" class="btn btn-danger removetf">{{ 'Remove'| translate}}</button>
          </div>
        </div>
        }
        @if (setting?.Customer_email_two_fact == 'on' && user?.custsetting?.twofactorauth == 'emailtwofact' &&
        emailtwofactStatus) {
        <div class="mt-5 " #emailtwofac id="emailtwofac">
          <div class="alert bg-warning-transparent text-dark p-5" role="alert">
            <h4 class="mb-2">{{ 'How does email otp authenticator work?' | translate }}</h4>
            <p class="mb-0">{{ 'Two-Factor Authentication (2FA) is an option that provides an extra layer of security to your account in addition to your email and password. When Two-Factor Authentication is , your account cannot be accessed by anyone unauthorized, even if they have your password.' | translate }}</p>
          </div>
        </div>
        }
      </div>
    </div>
  </div>
</div>
}
<div class="card">
  <div class="card-header border-0">
    <h4 class="card-title">{{'Change Password' | translate}}</h4>
  </div>
  <form #changepsw="ngForm" (ngSubmit)="changePassword(changepsw, 'changePswd')">

    <div class="card-body">
      @if (userhasPswd) {
      <div class="form-group">
        <div class="row">
          <div class="col-md-3">
            <label class="form-label mb-0 mt-2">{{'Old Password' | translate}}<span class="text-red"> *</span></label>
          </div>
          <div class="col-md-9">
            <input type="password" class="form-control" [placeholder]="'Old Password' | translate" value=""
              #oldpswd="ngModel" [class.is-invalid]="oldpswd.invalid && oldpswd.touched" required
              name="current_password" autocomplete="current_password" ngModel>
            @if ((oldpswd.invalid && oldpswd.touched) || oldpswd.dirty) {
            <div>
              @if (oldpswd.errors?.['required']) {
              <small class="text-danger">{{'Old Password is required' | translate}}</small>
              }
            </div>
            }
          </div>
        </div>
      </div>
      }
      <div class="form-group">
        <div class="row">
          <div class="col-md-3">
            <label class="form-label mb-0 mt-2">{{'New Password' | translate}}<span class="text-red"> *</span></label>
          </div>
          <div class="col-md-9">
            <div class="input-group flex-nowrap">
              <input [type]="pswd ? 'password' : 'text'" class="form-control sprukopsdauto w-sm-auto w-100" changepsw
                [placeholder]="'New Password' | translate" value="" name="password" autocomplete="password"
                [ngModel]="newPassword">

              <div class="input-group-text p-0 ">
                <button aria-label="show" (click)="this.pswd = !this.pswd;" type="button"
                  class="btn btn-light-2  sprukovisipsd">
                  <i class="fe" [ngClass]="{'fe-eye': pswd, 'fe-eye-off' : !pswd}"></i></button>
                <button type="button" class="btn btn-light-2   br-br-5 br-tr-5 sprukogenratepsd"
                  (click)="generatePswd()">{{'Generate Password' |
                  translate}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-3">
            <label class="form-label mb-0 mt-2">{{'Confirm Password' | translate}}<span
                class="text-red"> *</span></label>
          </div>
          <div class="col-md-9">
            <input type="password" class="form-control" placeholder="{{'Confirm Password' | translate}}" changepsw
              value="" name="password_confirmation" autocomplete="password_confirmation" ngModel>
          </div>
        </div>
      </div>
    </div>
    <div class="card-footer text-end">
      <button type="submit" [disabled]="changepsw.invalid || sendingResponse['changePswd']"
        class="btn btn-secondary">{{'Save Changes' | translate}}@if (sendingResponse['changePswd']) {
        <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
    </div>
  </form>
</div>

@if (setting?.cust_profile_delete_enable == 'on') {
<div class="card">
  <div class="card-header">
    <div class="card-title">{{'Delete Account' | translate}}</div>
  </div>
  <form #deleteForm="ngForm" (ngSubmit)="deleteaccount(deleteForm)">
    <div class="card-body">
      <p>{{'Once you delete your account, you can not access your account with the same credentials. You need to re-register your account.' | translate}}</p>
      <label class="custom-control form-checkbox">
        <input type="checkbox" class="custom-control-input " value="agreed" name="agree_terms" id="sprukocheck"
          #terms="ngModel" [class.is-invalid]="terms.invalid && terms.touched" required ngModel>
        <span class="custom-control-label">{{'I agree with' | translate}}<a href="{{setting.terms_url}}" target="_blank"
            class="text-primary"> {{'Terms of services' |
            translate}}</a>
        </span>
      </label>
      @if ((terms.invalid && terms.touched) || terms.dirty) {
      <div>
        @if (terms.errors?.['required']) {
        <small class="text-danger">{{'Terms is required' | translate}}</small>
        }
      </div>
      }
    </div>
    <div class="card-footer text-end">
      <button [disabled]="deleteForm.invalid" class="btn btn-danger my-1" type="submit">{{'Delete Account' |
        translate}}</button>
    </div>
  </form>
</div>
}



<!-- // Update email model start -->
<ng-template #content let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Email Update'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData="ngForm" (ngSubmit)="customeremailchange(FormData, 'updateEmail')">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label fs-16">{{'Enter Password' | translate | titlecase}}</label>
          <small>{{'To ensure additional security measures, kindly verify your password as we`re being extra safe.' |
            translate | titlecase}}</small>
          <input type="password" name="password" id="password" ngModel class="form-control" placeholder="Password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="sendingResponse['updateEmail']" class="btn btn-secondary"
          id="btnsave">{{'Submit' | translate | titlecase}}@if (sendingResponse['updateEmail']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Update email model end -->
<!-- // Mobile email model start -->
<ng-template #mobilecontent let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Mobile Update'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormDataMobile="ngForm" >
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label fs-16">{{ 'Enter Mobile Number' | translate | titlecase }}</label>
    
          <div class="d-flex gap-3">
            <ngx-mat-intl-tel-input 
              [enablePlaceholder]="true" 
              [enableSearch]="true" 
              [(ngModel)]="custMobileNumber" 
              class="form-control" 
              name="phone" 
              describedBy="phoneInput">
            </ngx-mat-intl-tel-input>
            <a [disabled]="!custMobileNumber"
              href="javascript:void(0);" 
              id="sendOTP" 
              (click)="sendOTP('sendOtp');" 
              class="btn btn-primary">
              {{ 'Send Otp' | translate }}
            </a>
          </div>
          <span class="text-danger d-none" id="resendTimeout">
            {{ 'Resend OTP in ' | translate }} <span id="timer"></span>
          </span>
    
          @if(isvalidNumber){
            <div class="mt-3">
              <label class="form-label fs-16">{{ 'Enter OTP' | translate }}</label>
              <input 
                type="text" 
                [(ngModel)]="OTPMobile" 
                name="OTPMobile" 
                id="OTPMobile" 
                placeholder="Enter OTP" 
                maxlength="6" 
                (ngModelChange)="verifyOtp($event)"
                class="form-control">
              <span class="text-danger" id="invalidotp"></span>
            </div>
          }
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:;" class="btn btn-outline-danger" (click)="modal.dismiss('Close click')">{{'Close' | translate}}</a>
      </div>
    </form>
    
  </div>
</ng-template>
<!-- // Update email model end -->

<!-- //  email two factor model start -->
<ng-template #mailverifycontent let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Email Two Factor Verification'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData="ngForm" (ngSubmit)="twofactoremail(FormData, 'disablemeailtowfactor')" >
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label fs-16">{{'Enter Password' | translate | titlecase}}</label>
          <small>{{'To ensure additional security measures, kindly verify your password as we`re being extra safe.' | translate | titlecase}}</small>
          <input type="password" name="password" id="password" ngModel class="form-control" placeholder="Password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="sendingResponse['disablemeailtowfactor']" class="btn btn-secondary" id="btnsave">{{'Submit' | translate | titlecase}}@if (sendingResponse['disablemeailtowfactor']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- //  email two factor model end -->
<!-- // Google two factor model start -->
<ng-template #googleverifycontent let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Google Two Factor Verification'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #FormData="ngForm" (ngSubmit)="googleTwofactorDisable(FormData, 'disablemeailtowfactor')" >
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label fs-16">{{'Enter Password' | translate | titlecase}}</label>
          <small>{{'To ensure additional security measures, kindly verify your password as we`re being extra safe.' | translate | titlecase}}</small>
          <input type="password" name="password" id="password" ngModel class="form-control" placeholder="Password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" [disabled]="sendingResponse['disablemeailtowfactor']" class="btn btn-secondary" id="btnsave">{{'Submit' | translate | titlecase}}@if (sendingResponse['disablemeailtowfactor']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
        }</button>
      </div>
    </form>
  </div>
</ng-template>
<!-- // Google two factor model end -->