From 84668c77e5b7483449358db354e4dfb60b0f8ca4 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Wed, 7 Nov 2018 15:02:42 +0530
Subject: [PATCH 1/2] UI in PD and QC forms

---
 .../supplier-info.component.html              | 141 +++++++++---------
 .../list-pd/start-pd/start-pd.component.html  |  21 ++-
 .../list-pd/view-pd/view-pd.component.html    |   6 +-
 .../qc-list/qc-view/qc-view.component.html    |   6 +-
 ng6-seed/src/index.html                       |   2 +-
 5 files changed, 95 insertions(+), 81 deletions(-)

diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
index 152e6d3a5..b244be4e3 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
@@ -1,5 +1,6 @@
 <!--<pre> {{ m_group | json}}</pre>-->
 <mat-card style="padding: 12px;">
+  <p>Supplier Details</p>
   <form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
     <div fxLayout="row" fxLayoutAlign="start none">
       <div class="example-full-width">
@@ -11,73 +12,79 @@
     </div>
     <div fxLayout="row" fxLayoutAlign="start none">
       <div formArrayName="supplier_details" fxFill>
-        <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index">
-          <div [formGroupName]="i">
-            <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-              <div>
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Supplier Name" formControlName="supplier_name">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                </mat-form-field>
-              </div>
-              <div>
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Contact Person Name" formControlName="contact_person">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                </mat-form-field>
-              </div>
-              <div>
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                </mat-form-field>
-              </div>
-            </div>
-            <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
-              <div>
-                <mat-form-field>
-                  <mat-select (selectionChange)="selectedPM($event)" placeholder="Select Payment Mode" formControlName="payment_mode">
-                    <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </div>
-              <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3">
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                </mat-form-field>
-              </div>
-              <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3">
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Credit Period" formControlName="credit_period">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                </mat-form-field>
-              </div>
-            </div>
-            <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
-              <div>
-                <mat-form-field>
-                  <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Select Frequency of Purchase" formControlName="frequency_of_purchase">
-                    <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.id">{{ feq.name }}</mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </div>
-              <div *ngIf="sup.get('frequency_of_purchase').value == 8">
-                <mat-form-field class="ml-xs example-full-width">
-                  <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
-                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
-                </mat-form-field>
-              </div>
-
-              <div fxFlex="20">
-                <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
-                     <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
-                   </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
+        
+              <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index">
+                  <mat-card>
+                      <mat-card-content> 
+                <div [formGroupName]="i">
+                    <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                      <div fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Supplier Name" formControlName="supplier_name">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                      <div fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Contact Person Name" formControlName="contact_person">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                      <div fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                    </div>
+                    <div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none">
+                      <div fxFlex="30">
+                        <mat-form-field style="width:260px !important;">
+                          <mat-select (selectionChange)="selectedPM($event)" placeholder="Select Payment Mode" formControlName="payment_mode">
+                            <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                      </div>
+                      <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3" fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width" >
+                          <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                      <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3" fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Credit Period" formControlName="credit_period">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                    </div>
+                    <div fxLayout="row" fxLayoutGap="14px" fxLayoutAlign="start none">
+                      <div fxFlex="30">
+                        <mat-form-field style="width:260px !important;">
+                          <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Select Frequency of Purchase" formControlName="frequency_of_purchase">
+                            <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.id">{{ feq.name }}</mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                      </div>
+                      <div *ngIf="sup.get('frequency_of_purchase').value == 8" fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+        
+                      <div fxFlex="30" style="text-align:center;">
+                        <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
+                             <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                           </span>
+                      </div>
+                    </div>
+                  </div>
+               
+          </mat-card-content>
+        </mat-card>
+      </div>
+        <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
           class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
       </div>
     </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
index 8653773ec..7788df8b8 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
@@ -23,8 +23,8 @@
                             </mat-expansion-panel>
 
                             <mat-list *ngFor="let formButton of categoryFormButtons">
-                                <mat-list-item class="custm-list-item" (click)="OnSelectDirectForms(formButton)">
-                                        <span class="mt-0">{{ (formButton.form_name.length>15)? (formButton.form_name | slice:0:15)+'..':(formButton.form_name) }}</span>
+                                <mat-list-item class="custm-list-item" (click)="OnSelectDirectForms(formButton)" style="background-color:#e0e0e0">
+                                        <span class="mt-0">{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</span>
                                 </mat-list-item>
                                
                                
@@ -58,9 +58,8 @@
                      </mat-card-content>
                      <hr>
                      <div *ngIf="!formsCategoryEnable">
-                     <mat-card-content style="min-height: 240px;" *ngIf="selectedCategory.length==0">
-                        <!-- <h6 class="mt-0">About</h6> -->
-                        <p>No Records Found..</p>
+                     <mat-card-content style="min-height: 500px;" *ngIf="selectedCategory.length==0">
+                         <p>No Records Found..</p>
                      </mat-card-content>
                               
                      <!-- check type of questions -->
@@ -69,8 +68,8 @@
                           <!-- start options type questions section -->
                               <ng-container  *ngSwitchCase="1">
                   
-                                  
-                                  <form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;"> 
+                                  <mat-card-content>
+                                  <form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;" style="min-height: 450px;"> 
                                   <mat-card-content>
                                        
                                           <span class="mt-0">{{optionsForm.controls.pd_question.value}}</span>
@@ -134,7 +133,7 @@
                                                     </mat-form-field>
                                                 </div>
                                                 <!-- this section for questions type options button actions -->
-                                                <div fxFlex="40" class="pb-0 text-sm-right">
+                                                <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
                                                         <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
                                                                 <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
                                                                 <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
@@ -148,7 +147,7 @@
                                           
                                        </mat-card-actions> 
                                   </form>  
-                                  
+                                </mat-card-content>
                                   <ng-template #noanswers>
                                           <mat-card-content>
                                                   <span class="mt-0">{{selectedCategory.question}}</span>
@@ -237,7 +236,7 @@
                                                     </mat-form-field>
                                                 </div>
                                                 <!-- this section for questions type options button actions -->
-                                                <div fxFlex="40" class="pb-0 text-sm-right">
+                                                <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
                                                         <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
                                                               <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
                                                               <mat-button-toggle value="bold" matTooltip="Skip&Previous" matTooltipPosition="below" (click)="skipNextPrevious(previous)"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
@@ -333,7 +332,7 @@
                                                     </mat-form-field>
                                                 </div>
                                                 <!-- this section for questions type options button actions -->
-                                                <div fxFlex="40" class="pb-0 text-sm-right">
+                                                <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
                                                         <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
                                                               <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
                                                               <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
index 00b3d4d69..a0dfcc36d 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
@@ -45,9 +45,13 @@
                  
                </mat-card-header>
              <mat-card-content>
+               
+               <p *ngIf="master.pd_contact_person || master.pd_contact_mobileno "><span *ngIf="master.pd_contact_person"> <i class="fa-1x fa fa-user-o"></i> {{master.pd_contact_person}}</span>&nbsp;&nbsp; <span *ngIf="master.pd_contact_mobileno"> <i class="fa-1x fa fa-phone"></i> {{master.pd_contact_mobileno}}</span><span style="font-size:13px;"> (Lender Contact Details) </span> </p>
+              
                <p *ngIf="master.product_name">{{master.product_name}}<span *ngIf="master.subproduct_name"> / </span> {{master.subproduct_name}}</p>
                <p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span>  <span *ngIf="master.loan_amount" class="hover-icon"> / <i class="fa-1x fa fa-rupee">&nbsp;</i>{{master.loan_amount}}</span></p>
-               <p><span>{{master.addressline1}}<span *ngIf="master.addressline2"> , </span>{{master.addressline2}} <span *ngIf="master.addressline3"> , </span>{{master.addressline3}}</span></p>            
+               <p><span>{{master.addressline1}}<span *ngIf="master.addressline2"> , </span>{{master.addressline2}} <span *ngIf="master.addressline3"> , </span>{{master.addressline3}}</span></p>    
+               <p *ngIf="master.remarks"><span style="font-size:13px;"> Remarks : </span> <span style="color:red">{{master.remarks}}</span></p>        
              </mat-card-content>
            </mat-card>
                    
diff --git a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
index 943abcf9c..350c34216 100644
--- a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
+++ b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
@@ -40,10 +40,14 @@
                    
                  </mat-card-header>
                <mat-card-content>
+                  <p *ngIf="master.pd_contact_person || master.pd_contact_mobileno "><span *ngIf="master.pd_contact_person"> <i class="fa-1x fa fa-user-o"></i> {{master.pd_contact_person}}</span>&nbsp;&nbsp; <span *ngIf="master.pd_contact_mobileno"> <i class="fa-1x fa fa-phone"></i> {{master.pd_contact_mobileno}}</span><span style="font-size:13px;"> (Lender Contact Details) </span> </p>
+              
                  <p *ngIf="master.product_name">{{master.product_name}} / {{master.subproduct_name}}</p>
                  <p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span> / <span *ngIf="master.loan_amount" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{master.loan_amount}}</span></p>
                  <p><span>{{master.addressline1}},{{master.addressline2}} ,{{master.addressline3}}</span></p>            
-                  </mat-card-content>
+                 <p *ngIf="master.remarks"><span style="font-size:13px;"> Remarks : </span> <span style="color:red">{{master.remarks}}</span></p>        
+              
+                </mat-card-content>
              </mat-card>
                      
            
diff --git a/ng6-seed/src/index.html b/ng6-seed/src/index.html
index 84a9194ad..1703d3bd1 100644
--- a/ng6-seed/src/index.html
+++ b/ng6-seed/src/index.html
@@ -135,7 +135,7 @@
         .swal2-title, .swal2-header {
         text-align:left !important;   
         }     
-        .mat-card-subtitle{
+        .mat-card, .mat-card-content, .mat-card-subtitle{
             color:#000 !important;
         }  
     </style>

From 723a7f6a410c22850a189e8164dec31c51e60a83 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Wed, 7 Nov 2018 15:55:52 +0530
Subject: [PATCH 2/2] Personal Info UI

---
 .../personal-info.component.html              | 222 +++++++++---------
 1 file changed, 113 insertions(+), 109 deletions(-)

diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
index f8a09f739..36b5e52f7 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
@@ -1,120 +1,124 @@
     <form *ngIf="loadDataStatus" [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)">
 
-      <!-- start main applicant details -->
-
+        <mat-card-content> 
+             <!-- start main applicant details -->
+        
       <div fxLayout="row wrap">
 		
-          <div fxFlex="50" class="text-xs-left">
-               
-                <mat-card>
-                    <mat-card-title>Main Applicant</mat-card-title>
-                  <mat-card-content>
-                   <div [formArrayName]="'mainItem'" *ngFor="let mainDetails of pdMainapplicant.controls; let i = index;">
-                      <div [formGroup]="mainDetails">
-
-                            <mat-form-field style="width: 100%">
-                                    <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
-                                </mat-form-field>
-                                <mat-form-field style="width: 100%">
-          
-                                        <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
-                                    </mat-form-field>
-                                    <mat-form-field style="width: 100%">
-          
-                                        <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
-                                    </mat-form-field>
-                                    <mat-form-field style="width: 100%">
-          
-                                        <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
-                                            <mat-option *ngFor="let education of qualifications" [value]="education" >
-                                            {{education}}
-                                            </mat-option>
-                                    </mat-select>
-                                    
-                                      </mat-form-field>
-                                    <mat-form-field style="width: 100%">
-                                        <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
-                                            <mat-option *ngFor="let earning of earningStatus" [value]="earning" >
-                                            {{earning}}
-                                            </mat-option>
-                                    </mat-select>
-                                      </mat-form-field>
-                        </div>   
-                  </div>
-                   
-                    </mat-card-content>
-                </mat-card>
-                
-
-             </div>
-          
-        
-      <!-- end main applicant details -->
-
-      <!-- start co applicant form details -->
-      <div fxFlex="50" class="text-xs-left" [formArrayName]="'coItem'" *ngFor="let coDetails of pdCoapplicant.controls; let i = index;">
-               
-            <mat-card>
-                <mat-card-title>Co Applicant</mat-card-title>
-              <mat-card-content>
-               <div >
-                  <div [formGroup]="coDetails">
-                        <mat-form-field style="width: 100%">
-                                <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-                                <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
-                            </mat-form-field>
-                            <mat-form-field style="width: 100%">
-                                    <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-      
-                                    <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
-                                </mat-form-field>
-                                <mat-form-field style="width: 100%">
-                                    <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-      
-                                    <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
-                                </mat-form-field>
-                                <mat-form-field style="width: 100%">
-                                    <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-      
-                                    <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
-                                        <mat-option *ngFor="let education of qualifications" [value]="education" >
-                                        {{education}}
-                                        </mat-option>
-                                </mat-select>
-                                
-                                  </mat-form-field>
-                                <mat-form-field style="width: 100%">
-                                    <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-                                    <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
-                                        <mat-option *ngFor="let earning of earningStatus" [value]="earning" >
-                                        {{earning}}
-                                        </mat-option>
-                                </mat-select>
+            <div fxFlex="50" class="text-xs-left">
+                 
+                  <mat-card>
+                      <mat-card-title>Main Applicant</mat-card-title>
+                    <mat-card-content>
+                     <div [formArrayName]="'mainItem'" *ngFor="let mainDetails of pdMainapplicant.controls; let i = index;">
+                        <div [formGroup]="mainDetails">
+  
+                              <mat-form-field style="width: 100%">
+                                      <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
                                   </mat-form-field>
                                   <mat-form-field style="width: 100%">
-                                        <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
-                                        <mat-select placeholder="Relationship" formControlName="relation_ans" required>
-                                                <mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
-                                                        {{rel.name}}
-                                                        </mat-option>
-                                    </mat-select>
-                                      </mat-form-field>
-                    </div>   
-              </div>
-              
-               
-                </mat-card-content>
-                
-            </mat-card>
             
-
-         </div>
-
-         </div>
-      <!-- end co applicant form details -->
-      <mat-card-actions align="end">
+                                          <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
+                                      </mat-form-field>
+                                      <mat-form-field style="width: 100%">
+            
+                                          <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
+                                      </mat-form-field>
+                                      <mat-form-field style="width: 100%">
+            
+                                          <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
+                                              <mat-option *ngFor="let education of qualifications" [value]="education" >
+                                              {{education}}
+                                              </mat-option>
+                                      </mat-select>
+                                      
+                                        </mat-form-field>
+                                      <mat-form-field style="width: 100%">
+                                          <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
+                                              <mat-option *ngFor="let earning of earningStatus" [value]="earning" >
+                                              {{earning}}
+                                              </mat-option>
+                                      </mat-select>
+                                        </mat-form-field>
+                          </div>   
+                    </div>
+                     
+                      </mat-card-content>
+                  </mat-card>
+                  
+  
+               </div>
+            
+          
+        <!-- end main applicant details -->
+  
+        <!-- start co applicant form details -->
+        <div fxFlex="50" class="text-xs-left" [formArrayName]="'coItem'" *ngFor="let coDetails of pdCoapplicant.controls; let i = index;">
+                 
+              <mat-card>
+                  <mat-card-title>Co Applicant</mat-card-title>
+                <mat-card-content>
+                 <div >
+                    <div [formGroup]="coDetails">
+                          <mat-form-field style="width: 100%">
+                                  <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                  <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
+                              </mat-form-field>
+                              <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+        
+                                      <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
+                                  </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+        
+                                      <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
+                                  </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+        
+                                      <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
+                                          <mat-option *ngFor="let education of qualifications" [value]="education" >
+                                          {{education}}
+                                          </mat-option>
+                                  </mat-select>
+                                  
+                                    </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                      <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
+                                          <mat-option *ngFor="let earning of earningStatus" [value]="earning" >
+                                          {{earning}}
+                                          </mat-option>
+                                  </mat-select>
+                                    </mat-form-field>
+                                    <mat-form-field style="width: 100%">
+                                          <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                          <mat-select placeholder="Relationship" formControlName="relation_ans" required>
+                                                  <mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
+                                                          {{rel.name}}
+                                                          </mat-option>
+                                      </mat-select>
+                                        </mat-form-field>
+                      </div>   
+                </div>
+                
+                 
+                  </mat-card-content>
+                  
+              </mat-card>
+              
+  
+           </div>
+  
+           </div>
+        <!-- end co applicant form details -->
+        </mat-card-content>
+     
+      <mat-card-actions>
+          <div  fxFlexOffset="90" fxFlex="10" style="text-align:left;">
             <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above" [disabled]="!_personalForm.valid "><mat-icon>save</mat-icon></button>
-
+        </div>
     </mat-card-actions>
 
       </form>