<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/cal<br> Information Of
                Customer</span></clr-timeline-step-description>
          </clr-timeline-step>  

 <clr-timeline-step [clrState]="timelineStyle.step1.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">cal</h3>
        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{SteperjjentryForm.name}}</h3>
        <div class="container">

          <br />

        
          <form [formGroup]="SteperjjentryForm">

            <div class="container">

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

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

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


						  <!-- calculated field start -->
			
			             <div class="clr-col-12 fieldWrapper">
						<table class="table table-noborder">
							 <thead>               
							<tr> 
								
 
								 <th> numbers0 </th> 
								  

 
								 <th> numbers02 </th> 
								  

				 <th>Total</th>                  
				 </tr>              
				</thead>
			 	<tbody> 
					<tr> 

						
 
						<td>                 
					 <input type="text"  [(ngModel)]="calculateaddnumbers0"  [ngModelOptions]="{standalone: true}" name="numbers0" (input)="onInputChangecalculateadd()" class="clr-input" />
				 </td> 
				   

 
						<td>                 
					 <input type="text"  [(ngModel)]="calculateaddnumbers02"  [ngModelOptions]="{standalone: true}" name="numbers02" (input)="onInputChangecalculateadd()" class="clr-input" />
				 </td> 
				   


				 <td>
			 <input type="text" [(ngModel)]="calculateadd"  [ngModelOptions]="{standalone: true}" name="total" class="clr-input" />"
			 </td>   
			</tr>
		  </tbody> 
		 </table>     
		</div>
		 <!-- calculated field end -->  




              </div>









<!--Data grid field start-->
<div class="clr-row">
  <div class="clr-col-6">
    <h3> datagrid Field</h3>
    <div style="max-width:fit-content; overflow-x:auto; max-height: 500px; overflow-y: auto;">
      <table class="table">
        <thead>
          <tr>
            <th *ngFor="let co of getHeadersdatagrid_field() let i=index">{{co}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of rowsdatagrid_field?.slice()?.reverse()">
            <td *ngFor="let key of getHeadersdatagrid_field()">{{item[key]}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<!--Data grid field end-->

              <div class="clr-row">

              </div>
              <!-- end row -->
              <br>
<div class="button">
  <button type="submit" class="btn btn-primary" (click)="oncalSave()">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"> Review And Confirmation</h3>
        <div class="container">

          <!--  Info -->
   <div class="clr-row mb-3">
            <div class="clr-col-12">
              <h5>Cal Summary:</h5><p><strong>Names : </strong> {{ SteperjjentryForm.get('names')?.value | json}}</p>

<p><strong>Numbers0 : </strong> {{ SteperjjentryForm.get('numbers0')?.value | json}}</p>

<p><strong>Numbers02 : </strong> {{ SteperjjentryForm.get('numbers02')?.value | json}}</p>

<p><strong>calculateadd : </strong> {{ SteperjjentryForm.get('calculateadd')?.value | json}}</p>




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