<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/order_estimation<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">order_estimation</h3>
        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{Customer_informationentryForm.name}}</h3>
        <div class="container">

          <br />

        
          <form [formGroup]="Customer_informationentryForm">

            <div class="container">

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

<div class="clr-col-sm-12">
 <label>  Contact Person</label>
 <input class="clr-input"  type="text"  formControlName="contact_person" />       
 </div>

<div class="clr-col-sm-12">
						<label> Email Address</label>
<input class="clr-input" type="email" formControlName="email_address" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
<div *ngIf="Customer_informationentryForm.controls['email_address'].errors" class="error_mess">
						          <div *ngIf="Customer_informationentryForm.controls['email_address'].hasError('pattern')" class="error_mess">* Email must be a valid email address
						            </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 && Customer_informationentryForm.controls['phone_number'].errors" class="error_mess">
	          <div *ngIf="submitted && Customer_informationentryForm.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>  Customer Address</label>             
 <textarea cols="10" rows="2" formControlName="customer_address" placeholder="Textarea">  </textarea>
	            </div>

<div class="clr-col-sm-12">             
	 <label>Deployment Type</label>
							 <select formControlName="deployment_type">
							    <option [value]="null">Select  Deployment Type </option> 
								
 
								<option> demo_cloud </option>
								 

 
								<option> on_premise </option>
								 

						</select></div>

<!-- multiselect checkbox field start -->
     <div class="clr-col-sm-12">       
		<label> Select Objective</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="busbar_monitoring" formControlName="busbar_monitoring"  class="clr-checkbox" />       
				    <label for="busbar_monitoring" class="clr-control-label">busbar_monitoring</label>  </div>
	                            

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

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

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

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

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

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

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

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

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

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

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

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

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




              </div>















<!-- one to many code start here -->
<div style="margin-top: 30px;"><h4 style="display: inline;">Product Selection </h4>
</div>
<hr>
<div class="clr-row">
  <div class="clr-col-lg-12">
    <table class="table" style="width:100%;" formArrayName="product_selection">
      <thead>
        <tr>

          
 
          <th class="left" style="width:125px;">type</th>
           

 
          <th class="left" style="width:125px;">price</th>
           

 
          <th class="left" style="width:125px;">total</th>
           

 
          <th class="left" style="width:125px;">manufacturer</th>
           

 
          <th class="left" style="width:125px;">product</th>
           

 
          <th class="left" style="width:125px;">quantity</th>
           

 
          <th class="left" style="width:125px;">name</th>
           


          <th class="right" style="width:125px;">{{ controls.length > 1 ? 'Actions' : '' }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of controls; let i=index" [formGroupName]="i">
          
 
          <td class="left"> <input type="text" formControlName="type" placeholder="Enter type" style="width:180px"
                            class="clr-input"> </td> 
           

 
          <td class="left"> <input type="text" formControlName="price" placeholder="Enter price" style="width:180px"
                            class="clr-input"> </td> 
           

 
          <td class="left"> <input type="text" formControlName="total" placeholder="Enter total" style="width:180px"
                            class="clr-input"> </td> 
           

 
          <td class="left"> <input type="text" formControlName="manufacturer" placeholder="Enter manufacturer" style="width:180px"
                            class="clr-input"> </td> 
           

 
          <td class="left"> <input type="text" formControlName="product" placeholder="Enter product" style="width:180px"
                            class="clr-input"> </td> 
           

 
          <td class="left"> <input type="text" formControlName="quantity" placeholder="Enter quantity" style="width:180px"
                            class="clr-input"> </td> 
           

 
          <td class="left"> <input type="text" formControlName="name" placeholder="Enter name" style="width:180px"
                            class="clr-input"> </td> 
           


          <td style="width:40px;">
            <a *ngIf="controls.length > 1" (click)="onRemoveLines(i)"><clr-icon shape="trash" class="is-error"></clr-icon>
            </a>
          </td>
        </tr>
      </tbody>
      <button type="button" class="btn btn-primary button1" (click)="onAddLines()" >
        <clr-icon shape="plus"></clr-icon> </button>
    </table>
  </div>
</div>
<!-- one to many code end here -->

              <div class="clr-row">

              </div>
              <!-- end row -->
              <br>
<div class="button">
  <button type="submit" class="btn btn-primary" (click)="onorder_estimationSave()">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>Order estimation Summary:</h5><p><strong>Customer Name : </strong> {{ Customer_informationentryForm.get('customer_name')?.value | json}}</p>

<p><strong>Contact Person : </strong> {{ Customer_informationentryForm.get('contact_person')?.value | json}}</p>

<p><strong>Email Address : </strong> {{ Customer_informationentryForm.get('email_address')?.value | json}}</p>

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

<p><strong>Customer Address : </strong> {{ Customer_informationentryForm.get('customer_address')?.value | json}}</p>

<p><strong>Deployment Type : </strong> {{ Customer_informationentryForm.get('deployment_type')?.value | json}}</p>

 
 
<p><strong>active energy : </strong> {{ Customer_informationentryForm.get('active_energy')?.value | json}}</p>

  

 
<p><strong>dg monitoring - with fuel : </strong> {{ Customer_informationentryForm.get('dg_monitoring___with_fuel')?.value | json}}</p>

  

 
<p><strong>dg monitoring - without fuel : </strong> {{ Customer_informationentryForm.get('dg_monitoring___without_fuel')?.value | json}}</p>

  

 
<p><strong>ups monitoring : </strong> {{ Customer_informationentryForm.get('ups_monitoring')?.value | json}}</p>

  

 
<p><strong>apfc panel monitoring : </strong> {{ Customer_informationentryForm.get('apfc_panel_monitoring')?.value | json}}</p>

  

 
<p><strong>busbar monitoring : </strong> {{ Customer_informationentryForm.get('busbar_monitoring')?.value | json}}</p>

  

 
<p><strong>lt panel monitoring : </strong> {{ Customer_informationentryForm.get('lt_panel_monitoring')?.value | json}}</p>

  

 
<p><strong>ht panel monitoring : </strong> {{ Customer_informationentryForm.get('ht_panel_monitoring')?.value | json}}</p>

  

 
<p><strong>compressed air -gas monotoring : </strong> {{ Customer_informationentryForm.get('compressed_air__gas_monotoring')?.value | json}}</p>

  

 
<p><strong>compress air - lpg/o2/n2/co2 : </strong> {{ Customer_informationentryForm.get('compress_air___lpg_o2_n2_co2')?.value | json}}</p>

  

 
<p><strong>water management -stp/etp : </strong> {{ Customer_informationentryForm.get('water_management__stp_etp')?.value | json}}</p>

  

 
<p><strong>water management - water monitoring : </strong> {{ Customer_informationentryForm.get('water_management___water_monitoring')?.value | json}}</p>

  

 
<p><strong>water management- water quality : </strong> {{ Customer_informationentryForm.get('water_management__water_quality')?.value | json}}</p>

  





<p><strong>Product Selection : </strong> {{ Customer_informationentryForm.get('product_selection')?.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>