<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
  <li><a href="javascript://">stepper</a></li>
</ol>

<div class="button-bar">

  <span class="spacer"></span>
  <button class="btn btn-sm btn-primary" (click)="reset()">Reset</button>

  <button class="btn btn-sm btn-primary" (click)="changeToHorizonTal()"
    *ngIf="layout.direction === 'vertical'">HorizonTal Layout</button>
  <button class="btn btn-sm btn-primary" (click)="changeToVertical()" *ngIf="layout.direction === 'horizontal'">Vertical
    Layout</button>

</div>

<div class="clr-row">
  <div [class]="layout.block1">
    <div class="card">
      <div class="card-header">
        <h3 style="text-align: center;"> Workflow</h3>
      </div>

      <div class=" card-block container">

        <clr-timeline [clrLayout]="layout.direction">
   <clr-timeline-step [clrState]="timelineStyle.step0.state">
            <clr-timeline-step-header>step 0</clr-timeline-step-header>
            <clr-timeline-step-title> <span *ngIf="!appToUpdate">Application</span><span *ngIf="appToUpdate"> Update
                Datagrid</span> </clr-timeline-step-title>
            <clr-timeline-step-description> <span>Create/demoregi<br> Information Of
                Customer</span></clr-timeline-step-description>
          </clr-timeline-step>  

   <clr-timeline-step [clrState]="timelineStyle.step1.state">
            <clr-timeline-step-header>step 1</clr-timeline-step-header>
            <clr-timeline-step-title> <span *ngIf="!appToUpdate">Application</span><span *ngIf="appToUpdate"> Update
                Datagrid</span> </clr-timeline-step-title>
            <clr-timeline-step-description> <span>Create/advtest<br> Information Of
                Customer</span></clr-timeline-step-description>
          </clr-timeline-step>  

 <clr-timeline-step [clrState]="timelineStyle.step2.state">
            <clr-timeline-step-header>Step 2</clr-timeline-step-header>
            <clr-timeline-step-title>Review And <br>Confirmation</clr-timeline-step-title>
            <clr-timeline-step-description>
              Finish .
            </clr-timeline-step-description>
          </clr-timeline-step></clr-timeline>
      </div>
    </div>
  </div>
  <div [class]="layout.block2">
    <!--STEP 0-->
    <div class="card" *ngIf="timelineStyle.step0.open">
      <div class="card-header">
        <h3 style="text-align: center;" *ngIf="!appToUpdate">demoregi</h3>
        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{FormaentryForm.name}}</h3>
        <div class="container">

          <br />

        
          <form [formGroup]="FormaentryForm">

            <div class="container">

              <div class="clr-row"><div class="clr-col-sm-12">
 <label>  Name</label>
 <input class="clr-input"  type="text"  formControlName="name" />       
 </div>

<div class="clr-col-sm-12">
 <label>  Number Field</label>
 <input class="clr-input"  type="number"  formControlName="number_field" />      
 <div *ngIf="submitted && FormaentryForm.controls.number_field.errors" class="error_mess">
  <div *ngIf="submitted && FormaentryForm.controls.number_field.errors.required" class="error_mess">*This field is Required</div>
</div>  
 </div>

<div class="clr-col-sm-12">        
<label>  Phone Number</label>        
<input class="clr-input" type="text" formControlName="phone_number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$" />
	        <div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="error_mess">
	          <div *ngIf="submitted && entryForm.controls['phone_number'].hasError('pattern')" class="error_mess">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.
	          </div>      </div>      </div>

<div class="clr-col-sm-12">        
 <label>Paragraph Field</label>      
   <input class="form-control" type="Text" formControlName="paragraph_field" style="border: none; outline: none; height:33px !important;" />
	      </div>

<div class="clr-col-sm-12">       
	<label>Password Field</label><br>
	<div><input class="clr-input" style="width: 93% !important;" [type]="newaddpHidepassword_field ? 'password': 'text'" formControlName="password_field" autocomplete >&nbsp;
		<clr-icon [attr.shape]="newaddIconpassword_field" (click)="newaddChangerpassword_field()"></clr-icon></div>
	</div>

          <div class="clr-col-sm-12">
<label>Confirm Password Field</label><br>
           <input type="password" class="clr-input" formControlName="confirmpassword_field" autocomplete >
           <div *ngIf="entryForm.controls.confirmpassword_field.errors" class="error_mess">
            <div *ngIf="entryForm.controls.confirmpassword_field.errors.confirmedpassword_fieldValidator" class="error_mess">* Password and Confirm Password must be match.</div>
        </div>
          </div>

<div class="clr-col-sm-12">             
 <label>  Textarea</label>             
 <textarea cols="10" rows="2" formControlName="textarea" placeholder="Textarea">  </textarea>
	            </div>

<div class="clr-col-sm-12">
 <label>  Date Field</label>
 <input class="clr-input"  type="date"  formControlName="date_field" />       
 </div>

<div class="clr-col-sm-12">
 <label>  Datetime Field</label>
 <input class="clr-input"  type="datetime-local"  formControlName="datetime_field" />       
 </div>

<div class="clr-col-sm-12">
						<label> Email Field</label>
<input class="clr-input" type="email" formControlName="email_field" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
<div *ngIf="entryForm.controls['email_field'].errors" class="error_mess">
						          <div *ngIf="entryForm.controls['email_field'].hasError('pattern')" class="error_mess">* Email must be a valid email address
						            </div>  </div>
</div>

<div class="clr-col-sm-12">            
 <label> Toggle Switch</label>            
  <input type="checkbox" formControlName="toggle_switch" clrToggle/>            </div>

<div class="clr-col-sm-12">           
<label> Decimal Field</label>          
 <input type="number" step ="0.01"  formControlName="decimal_field" /> 
 <div *ngIf="submitted && entryForm.controls.decimal_field.errors" class="error_mess">
  <div *ngIf="submitted && entryForm.controls.decimal_field.errors.required" class="error_mess">*This field is Required</div>
</div> 
        </div>


<div class="clr-col-sm-12">        
	 <label> Url Field </label>
		<input type="url" formControlName="url_field" class="clr-input" pattern="https?://.+">
		<div *ngIf="entryForm.controls['url_field'].errors" class="error_mess">          
			 <div *ngIf="entryForm.controls['url_field'].hasError('pattern')" class="error_mess">    * Please enter a valid URL.</div>
						      </div>     </div>

<div class="clr-col-sm-12">            
<label> recaptcha</label><div><b>{{ recaptchaCode }}</b> &nbsp; <button  class="btn btn-icon btn-primary btn-sm" (click)="generaterecaptcha()"><clr-icon shape="refresh"></clr-icon></button></div>
	            <input type="text" formControlName="recaptcha" class="clr-input">       
<div *ngIf="submitted && FormaentryForm.controls.recaptcha?.errors.required" class="error_mess">*This field is Required</div>          
<div *ngIf="submitted && FormaentryForm.get('recaptcha')?.errors && FormaentryForm.get('recaptcha')?.dirty" class="error_mess">
	              <div *ngIf="submitted && FormaentryForm.controls['recaptcha']?.hasError('recaptchaMismatch')" class="error_mess"> recaptcha  not valid.</div>
	            </div>        
</div>

<div class="clr-col-sm-12">
 <label>  Percentage Field</label>
 <input class="clr-input"  type="number"  formControlName="percentage_field" />      
 <div *ngIf="submitted && FormaentryForm.controls.percentage_field.errors" class="error_mess">
  <div *ngIf="submitted && FormaentryForm.controls.percentage_field.errors.required" class="error_mess">*This field is Required</div>
</div>  
 </div>


              </div>





























              <div class="clr-row">

              </div>
              <!-- end row -->
              <br>
<div class="button">
  <button type="submit" class="btn btn-primary" (click)="ondemoregiSave()">Submit</button>
  <button type="button" class="btn btn-primary"
    (click)="this.timelineStyle.step0 = { state: 'success', open: false };
             this.timelineStyle.step1 = { state: 'current', open: true }; this.current()">Complete</button>
  <button type="button" class="btn btn-primary"
    (click)="this.timelineStyle.step0 = { state: 'current', open: false };
             this.timelineStyle.step1 = { state: 'not-started', open: true }">Next</button>
</div>  </div>
          </form>

        </div>

      </div>
    </div> 
    <!--STEP 1-->
    <div class="card" *ngIf="timelineStyle.step1.open">
      <div class="card-header">
        <h3 style="text-align: center;" *ngIf="!appToUpdate">advtest</h3>
        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{Advtest1entryForm.name}}</h3>
        <div class="container">

          <br />

        
          <form [formGroup]="Advtest1entryForm">

            <div class="container">

              <div class="clr-row"><div class="clr-col-sm-12">
 <label>  Name</label>
 <input class="clr-input"  type="text"  formControlName="name" />       
 </div>

<div class="clr-col-sm-12">             
	 <label>country</label>
							 <select formControlName="country">
							    <option [value]="null">Select  country </option> 
								
 
								<option> bharat </option>
								 

 
								<option> srilanka </option>
								 

						</select></div>

<div class="clr-col-sm-12">
            <label>gender</label>
            <clr-radio-container clrInline style="margin-top: 0;"> 

 
   <clr-radio-wrapper>
                <input type="radio" clrRadio formControlName="gender" (change)="updategender('female')" [checked]="Advtest1entryForm.get('gender').value === 'female'" />
                <label> female </label>
              </clr-radio-wrapper>     
 

 
   <clr-radio-wrapper>
                <input type="radio" clrRadio formControlName="gender" (change)="updategender('male')" [checked]="Advtest1entryForm.get('gender').value === 'male'" />
                <label> male </label>
              </clr-radio-wrapper>     
 

    
 </clr-radio-container>
          </div> 




<!-- multiselect checkbox field start -->
     <div class="clr-col-sm-12">       
		<label> address</label>
	    <div class="clr-form-control" style="margin-top: 5px;margin-bottom: 10px;">
	      <div class="clr-control-container">

                       
 
			<div class="clr-checkbox-wrapper">           
				<input type="checkbox" id="villae" formControlName="villae"  class="clr-checkbox" />       
				    <label for="villae" class="clr-control-label">villae</label>  </div>
	                            

 
			<div class="clr-checkbox-wrapper">           
				<input type="checkbox" id="home" formControlName="home"  class="clr-checkbox" />       
				    <label for="home" class="clr-control-label">home</label>  </div>
	                            

 </div>       </div>     </div>
	              <!-- multiselect checkbox field end -->









<!-- currency field start -->
      <div class="clr-col-sm-12">        
 <label> Currency</label>         
<input type="number"  class="clr-input"   formControlName="currency"  [value]="Advtest1entryForm.value.currency | number:'1.2-2' | removeCommas">   
    </div> 
	      <!-- currency field end -->

<!-- qrCode field start -->   
<div class="clr-col-sm-12">
	    <label>QRCode Field</label>
	    <input class="clr-input" type="text" formControlName="qrcode_field" />
	    <qrcode [qrdata]="Advtest1entryForm.value.qrcode_field  ? Advtest1entryForm.value.qrcode_field : '' " [width]="135" [errorCorrectionLevel]="'M'"  ></qrcode>   </div>
	<!-- qrCode field end -->

<!-- bar code field start -->    
<div class="clr-col-sm-12">
	    <label> BarCode Field</label>
	    <input  type="text" class="clr-input" formControlName="barcode_field" (input)="generateBarcodebarcode_field($event.target.value)" />
	    <svg id="barcodebarcode_field"></svg>   </div>
	<!-- bar code field end -->


              </div>









<h6> List of fileupload_field</h6>

 <div  class="clr-row" style="margin-top: 10px;">
   <table class="table">
       <thead>
        <tr>
        <th>No</th>
         <th> File</th>
         <th>File Name</th>
          <th>Preview</th>
          <th>Cancel</th>
           </tr>
         </thead>
         <tbody >
           <tr *ngFor="let attach of FileDatafileupload_field; let i=index">
             <td style="width: 70px;"><input type="text" class="clr-input"  value={{i+1}} [readonly]="true">  </td>
             <td><input type="file" (change)="onFileChangedfileupload_field($event, i)"  accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /><!--accept=".pdf,.doc,.docx,.jpg,.msg"-->
              </td>
         <td>{{attach.uploadedfile_name}}</td>
             <td >  <img [src]="attach.filePreview" alt="File Preview"  [ngModelOptions]="{standalone: true}" name="filePreview" width="100px" height="100px"></td>
             <td>
               <a  (click)="deleteRowfileupload_field(i)">
                 <clr-icon shape="trash" class="is-error"></clr-icon>
               </a>
             </td>
           </tr>


       </tbody>
         <button type="button" class="btn btn-primary button1" style="margin-left: 20px;" (click)="onAddLinesfileupload_field()">
           <clr-icon shape="plus"></clr-icon>
         </button>

       </table> </div>

<h6> List of imageupload_field</h6>

 <div  class="clr-row" style="margin-top: 10px;">
   <table class="table">
       <thead>
        <tr>
        <th>No</th>
         <th> File</th>
         <th>File Name</th>
          <th>Preview</th>
          <th>Cancel</th>
           </tr>
         </thead>
         <tbody >
           <tr *ngFor="let attach of FileDataimageupload_field; let i=index">
             <td style="width: 70px;"><input type="text" class="clr-input"  value={{i+1}} [readonly]="true">  </td>
             <td><input type="file" (change)="onFileChangedimageupload_field($event, i)"  accept="image/*" /><!--accept=".pdf,.doc,.docx,.jpg,.msg"-->
              </td>
         <td>{{attach.uploadedfile_name}}</td>
             <td >  <img [src]="attach.filePreview" alt="File Preview"  [ngModelOptions]="{standalone: true}" name="filePreview" width="100px" height="100px"></td>
             <td>
               <a  (click)="deleteRowimageupload_field(i)">
                 <clr-icon shape="trash" class="is-error"></clr-icon>
               </a>
             </td>
           </tr>


       </tbody>
         <button type="button" class="btn btn-primary button1" style="margin-left: 20px;" (click)="onAddLinesimageupload_field()">
           <clr-icon shape="plus"></clr-icon>
         </button>

       </table> </div>

<h6> List of audio_field</h6>

 <div  class="clr-row" style="margin-top: 10px;">
   <table class="table">
       <thead>
        <tr>
        <th>No</th>
         <th> File</th>
         <th>File Name</th>
          <th>Preview</th>
          <th>Cancel</th>
           </tr>
         </thead>
         <tbody >
           <tr *ngFor="let attach of FileDataaudio_field; let i=index">
             <td style="width: 70px;"><input type="text" class="clr-input"  value={{i+1}} [readonly]="true">  </td>
             <td><input type="file" (change)="onFileChangedaudio_field($event, i)"  accept="audio/*" /><!--accept="audio file"-->
              </td>
         <td>{{attach.uploadedfile_name}}</td>
             <td >  <audio *ngIf="attach.filePreview" [src]="attach.filePreview" controls></audio></td>
             <td>
               <a  (click)="deleteRowaudio_field(i)">
                 <clr-icon shape="trash" class="is-error"></clr-icon>
               </a>
             </td>
           </tr>


       </tbody>
         <button type="button" class="btn btn-primary button1" style="margin-left: 20px;" (click)="onAddLinesaudio_field()">
           <clr-icon shape="plus"></clr-icon>
         </button>

       </table> </div>

<h6> List of video_field</h6>

 <div  class="clr-row" style="margin-top: 10px;">
   <table class="table">
       <thead>
        <tr>
        <th>No</th>
         <th> File</th>
         <th>File Name</th>
          <th>Preview</th>
          <th>Cancel</th>
           </tr>
         </thead>
         <tbody >
           <tr *ngFor="let attach of FileDatavideo_field; let i=index">
             <td style="width: 70px;"><input type="text" class="clr-input"  value={{i+1}} [readonly]="true">  </td>
             <td><input type="file" (change)="onFileChangedvideo_field($event, i)"  accept="video/*" /><!--accept=".mp4,.mpeg4"-->
              </td>
         <td>{{attach.uploadedfile_name}}</td>
             <td >            <video *ngIf="attach.filePreview" [src]="attach.filePreview" width="100px" height="100px" controls></video></td>
             <td>
               <a  (click)="deleteRowvideo_field(i)">
                 <clr-icon shape="trash" class="is-error"></clr-icon>
               </a>
             </td>
           </tr>


       </tbody>
         <button type="button" class="btn btn-primary button1" style="margin-left: 20px;" (click)="onAddLinesvideo_field()">
           <clr-icon shape="plus"></clr-icon>
         </button>

       </table> </div>







              <div class="clr-row">

              </div>
              <!-- end row -->
              <br>
<div class="button">
  <button type="submit" class="btn btn-success" (click)="onadvtestSave()">advtest</button>
  <button type="button" class="btn btn-primary"
    (click)="timelineStyle.step1 = { state: 'success', open: false };
             timelineStyle.step2 = { state: 'current', open: true }">Complete</button>
  <button class="btn btn-primary-outline"
    (click)="timelineStyle.step0 = { state: 'current', open: true };
             timelineStyle.step1 = { state: 'not-started', open: false }">Back</button>
</div>  </div>
          </form>

        </div>

      </div>
    </div> 
 <!--STEP 2-->  <div class="card" *ngIf="timelineStyle.step2.open">
      <div class="card-header">
        <h3 style="text-align: center;" *ngIf="!appToUpdate"> Review And Confirmation</h3>
        <div class="container">

          <!--  Info -->
   <div class="clr-row mb-3">
            <div class="clr-col-12">
              <h5>demoregi Summary:</h5><p><strong>Name : </strong> {{ FormaentryForm.get('name')?.value }}</p>

<p><strong>Number Field : </strong> {{ FormaentryForm.get('number_field')?.value }}</p>

<p><strong>Phone Number : </strong> {{ FormaentryForm.get('phone_number')?.value }}</p>

<p><strong>Paragraph Field : </strong> {{ FormaentryForm.get('paragraph_field')?.value }}</p>

<p><strong>Password Field : </strong> {{ FormaentryForm.get('password_field')?.value }}</p>

<p><strong>Textarea : </strong> {{ FormaentryForm.get('textarea')?.value }}</p>

<p><strong>Date Field : </strong> {{ FormaentryForm.get('date_field')?.value }}</p>

<p><strong>Datetime Field : </strong> {{ FormaentryForm.get('datetime_field')?.value }}</p>

<p><strong>Email Field : </strong> {{ FormaentryForm.get('email_field')?.value }}</p>

<p><strong>Toggle Switch : </strong> {{ FormaentryForm.get('toggle_switch')?.value }}</p>

<p><strong>Decimal Field : </strong> {{ FormaentryForm.get('decimal_field')?.value }}</p>

<p><strong>Url Field : </strong> {{ FormaentryForm.get('url_field')?.value }}</p>

<p><strong>recaptcha : </strong> {{ FormaentryForm.get('recaptcha')?.value }}</p>

<p><strong>Percentage Field : </strong> {{ FormaentryForm.get('percentage_field')?.value }}</p>


            </div>
          </div>   <div class="clr-row mb-3">
            <div class="clr-col-12">
              <h5>advtest Summary:</h5><p><strong>Name : </strong> {{ Advtest1entryForm.get('name')?.value }}</p>

<p><strong>country : </strong> {{ Advtest1entryForm.get('country')?.value }}</p>

<p><strong>gender : </strong> {{ Advtest1entryForm.get('gender')?.value }}</p>

<p><strong>address : </strong> {{ Advtest1entryForm.get('address')?.value }}</p>

<p><strong>Fileupload Field : </strong> {{ Advtest1entryForm.get('fileupload_field')?.value }}</p>

<p><strong>Imageupload Field : </strong> {{ Advtest1entryForm.get('imageupload_field')?.value }}</p>

<p><strong>audio Field : </strong> {{ Advtest1entryForm.get('audio_field')?.value }}</p>

<p><strong>video Field : </strong> {{ Advtest1entryForm.get('video_field')?.value }}</p>

<p><strong>Currency : </strong> {{ Advtest1entryForm.get('currency')?.value }}</p>

<p><strong>QRCode Field : </strong> {{ Advtest1entryForm.get('qrcode_field')?.value }}</p>

<p><strong>BarCode Field : </strong> {{ Advtest1entryForm.get('barcode_field')?.value }}</p>


            </div>
          </div><div class="button">
  <button class="btn btn-primary-outline"
    (click)="this.timelineStyle.step1 = { state: 'current', open: true };
             this.timelineStyle.step2 = { state: 'not-started', open: false }">Back</button>
  <button class="btn btn-primary"
    (click)="timelineStyle.step2 = { state: 'success', open: false }; current();
             alert('Process Finished Successfully!')">Finish</button>
</div></div>
      </div>
    </div>