<!-- <div class="container mt-5"> -->
  <!-- <div class="row"> -->
  
     <!-- <div class="col-md-10 ml-auto col-xl-10 mr-auto"> 
      <p class="category">Tabs with Background on Card</p> -->
      <!-- Customer Details,Device Details,Setting,Document,Activites -->
      <div class="card">
        <div class="card-header">
          

          <ul class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist"
            data-background-color="orange">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#CustomerDetails" role="tab">Customer Details</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#DeviceDetails" role="tab">Device Details</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#Settings" role="tab">Settings</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#Documents" role="tab">Documents</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#Activites" role="tab">Activites</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#Actions" role="tab">Actions</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#Transaction" role="tab">Payments</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
         
          <div class="tab-content">
            <div class="tab-pane active" id="CustomerDetails" role="tabpanel">
              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Name:</b> <span> {{data?data.first_name?data.first_name:'':''}} {{data?data.last_name?data.last_name:'':''}}</span>
                </div>
                <div class="col-md-6">
                  <b>User ID:</b><span> {{data?data.user_id?data.user_id:'':''}}</span>
                </div>
              
              </div>
              
              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Email:</b> <span> {{data?data.email?data.email:'':''}}</span>
                </div>
                <div class="col-md-6">
                  <b>Phone:</b> <span> {{data?data.phone?data.phone:'':''}}</span>
                  <i *ngIf="data?data.phone_verfi==false?true:false:false" class="fas fa-exclamation-circle"></i>
                  <i *ngIf="data?data.phone_verfi==true?true:false:false" class="fas fa-check-circle"></i>
                  <!-- <img *ngIf="data?data.phone_verfi==true?true:false:false" src="../../../assets/image/accept.png" width='20px'> -->

                  <button *ngIf="data?data.phone_verfi==false?true:false:false" type="button" style="float: right;font-size: small; border-radius: 20px;" 
                  class="btn btn-outline-primary btn-sm" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Verify</button>
                <div class="collapse" id="collapseExample">
                  <div class="card card-body">
                    
                    <div class="col-sm-12">
                      <div class="title mb-1">
                        Verify OTP
                      </div>
                    
                      <div>
                        <input class="form-control" [(ngModel)]="otp" type="number">
                      </div>
                      <div *ngIf="show" class="alert alert-warning" role="alert">
                        {{ data_descip }}
                      </div>
                      <hr class="mt-4">
                      <button class='btn btn-primary btn-block mt-4 mb-4 customBtn' (click)="verify1()">Verify</button>
                    </div>

                  </div>
                </div>
                
                </div>
              
              </div>

              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Password:</b> <span> {{data?data.pass?data.pass:'':''}}</span>
                </div>
                <div class="col-md-6">
                  <b>Created On:</b><span> {{data?data.created_on?data.created_on:'':''}}</span>
                </div>
              
              </div>
              
              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Expiry date:</b> <span> {{data?data.expire_date?data.expire_date:'':''}}</span>
                </div>
                <div class="col-md-6">
                  <b>Point Allocated:</b> <span> {{data?data.point_Allocated?data.point_Allocated:0:0}}</span>
                </div>
              
              </div>
              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Dealer:</b> <span> {{data?data.DealerDetails[0].first_name?data.DealerDetails[0].first_name:'':''}} {{data?data.DealerDetails[0].last_name?data.DealerDetails[0].last_name:'':''}}</span>
                </div>
                
              </div>
              </div>
          
            <div class="tab-pane" id="DeviceDetails" role="tabpanel">
              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Total Vehicles:</b> <span> {{data?data.total_vehicle?data.total_vehicle:0:0}}</span>
                </div>
                <div class="col-md-6">
                  <b>Deleted Vehicles:</b> <span> {{data?data.delDevices?data.delDevices:0:0}}</span>
                </div>
              
              </div>
            </div>

            <div class="tab-pane" id="Settings" role="tabpanel">
              <app-report-setting></app-report-setting>
            </div>

            <div class="tab-pane" id="Documents" role="tabpanel">
            
                <flash-messages></flash-messages>
                <div [hidden]="doclist">
                  <table id="test" class="table table-striped table-hover"
                    style="overflow-y: hidden;overflow-x: hidden;font-size:12px">
                    <thead>
                      <tr>
                        <th>Document Name</th>
                        <th>Document number</th>
                        <th>Image</th>
                        <th>Status</th>
                        <th>Action</th>
                    </thead>
                    <tbody>
                      <tr *ngFor="let doc of testDocuments; let i = index">
                        <td style="cursor:pointer">{{doc.doctype}}</td>
                        <td style="cursor:pointer">{{doc.phone}}</td>
                        <td>
                          <h4 *ngIf="doc.ext=='pdf'">
                            <a href={{doc.image}} target="_blank"><i class="fa fa-file-pdf"></i></a>
                          </h4>
                          <span *ngIf="doc.ext!='pdf'">
                            <img style="width: 100px;" [src]="'https://www.oneqlik.in'+doc.image" >
                            <!-- (click)="openModal(template,doc)"> -->
                          </span>
                        </td>
                        <td>
                          <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;"
                            *ngIf="data.kycStatus==undefined">Pending</button>
                          <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;"
                            *ngIf="data.kycStatus=='Pending'">{{data.kycStatus}}</button>
                          <button class="btn btn-success btn-sm" style="border-radius: 40px; font-size: x-small; background-color: green;"
                            *ngIf="data.kycStatus=='Approved'">{{data.kycStatus}}</button>
                          <button class="btn btn-danger btn-sm" style="border-radius: 40px; font-size: x-small; background-color: red;"
                            *ngIf="data.kycStatus=='Reject'">{{data.kycStatus}}</button>
                        </td>
                        <td style="cursor:pointer">
                        <button class="btn btn-primary btn-block/"> <i class="fas fa-download" (click)="downloadDoc(doc)"></i></button>
                        <button class="btn btn-danger btn-block/"><i class="fas fa-trash" (click)="SaveDocuments('deldoc',i)"></i></button>
                          
                          <!-- <button class="btn btn-primary btn-block/" (click)="downloadDoc(doc)"
                            style="background: green;cursor: pointer;float: right;border:none;">Download</button> -->
                          <!-- <button class="btn btn-primary btn-block/" [disabled]="disableDelete" (click)="SaveDocuments('deldoc',i)"
                            style="background: #f90808;cursor: pointer;float: right;border-color: transparent;margin-right: 16px;border:none;">Delete</button> -->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="row text-center mt-2" style="justify-content: center;">
                    <!-- <button class="btn btn-primary m-1" (click)="Adddocuments('')">Add <i class="fa fa-plus-circle"></i></button> -->
                    <button class="btn btn-success m-1" [disabled]="data.kycStatus=='Approved'"
                      (click)="changeKYC('Approved')">Approve <i class="fa fa-check-circle"></i></button>
                    <button class="btn btn-danger m-1" [disabled]="data.kycStatus=='Approved'"
                      (click)="changeKYC('Reject')">Reject <i class="fa fa-times-circle"></i></button>
              
                  
                  </div>
                </div>
                <!-- <div [hidden]="!doclist">
                  <button class="btn btn-primary btn-block/" (click)="Adddocuments('')"
                    style="background: green;cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;">Add</button>
                </div> -->
              
              
              
                <div>
                  <div class="row">
                    <div class="col-sm-6">
                      <p>Upload Documents * </p>
                    </div>
                    <div class="col-sm-6">
                      <button mdTooltip="upload Documents"
                        style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
                        (click)="AddDocumentsField('addedrow')">
                        <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
                      </button>
                    </div>
                  </div>
                  <div style="overflow: scroll;overflow-x: hidden;" [ngClass]="{'rowHeight':docRow}">
                    <div class="row" style="margin-bottom: 2%;" *ngFor="let data of imageuploadObject; let i = index">
                      <div class="col-sm-2">
                        <md-select (ngModelChange)="documentType($event)" [(ngModel)]="data.doctype" placeholder="Doc Type">
                          <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
                        </md-select>
                      </div>
                      <div class="col-sm-10" style="margin-top: 2%;">
                        <input type="text" style="margin-right: 2%;margin-left: 7px;" [(ngModel)]="data.phone"
                          placeholder="Doc number">
                        <span><input type="file" class="btn btn btn-success"
                            style="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:36%;"
                            (change)="onFileChanged($event)"></span>
                        <span><button class="btn btn btn-success" (click)="onUpload(i)">{{uploadStatus}}</button></span>
                        <span><button mdTooltip="Delete field"
                            style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
                            (click)="DeleteDocumentsField(i)">
                            <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon>
                          </button></span>
                      </div>
                    </div>
                    <button [disabled]="!ifuploadArr" class="btn btn-primary btn-block/" (click)="SaveDocuments(null,0)"
                      style="cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;margin-bottom: 10px;">Save</button>
                  </div>
                </div>
              </div>

            <div class="tab-pane" id="Activites" role="tabpanel">
            <div class="row mt-3">
              <div class="col-md-6">
                <b>Last Activity:</b> <span> {{data?data.last_activity_on?data.last_activity_on:0:0}}</span>
              </div>
              <div class="col-md-6">
                <b>Last Login:</b> <span> {{data?data.last_login?data.last_login:0:0}}</span>
              </div>
            
            </div>
            <div class="row mt-3">
              <div class="col-md-6">
                <b>Login Type:</b> <span> {{data?data.login_type?data.login_type:0:0}}</span>
              </div>

              <div class="col-md-6">
                <b>Number of Mobile Login:</b> <span> {{data?data.notificationTokenCount? data.notificationTokenCount: 0:0}}</span>
              </div>
            </div>

            </div>

            <div class="tab-pane" id="Actions" role="tabpanel">

              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Customer Status:</b> <md-slide-toggle [(ngModel)]="data.status" style="height: 0px !important" ngDefaultControl ngDefaultControl
                    (change)="onChange(data, $event)"></md-slide-toggle>
                </div>
                <div class="col-md-6">
                  <b>Suspend Account:</b> <md-slide-toggle [(ngModel)]="data.accountSuspended" style="height: 0px !important" ngDefaultControl
                    (change)="accountStatusOnChange(data, $event)"></md-slide-toggle>
                </div>
              
              </div>

              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Admin Alert:</b>
                  <md-slide-toggle [(ngModel)]="data.adminAlert" style="height: 0px !important" ngDefaultControl
                    (change)="alertStatus($event, data)"></md-slide-toggle>
                </div>
                <div class="col-md-6">
                  <b>Pull Data:</b>
                  <md-slide-toggle [checked]="data.pullData?data.pullData:false" style="height: 0px !important" ngDefaultControl
                      (change)="generatePullData($event, data)"></md-slide-toggle>
                </div>
              
              </div>

              <div class="row mt-3">
                <div class="col-md-6">
                  <b>Share Customer Info:</b>
                  <i class="fas fa-sign-in-alt" title="Send Login Credentials" (click)="shareUserCredential()"></i>

                </div>

                <div class="col-md-6">
                  <b>Reset Password:</b>
                  <i class="fas fa-unlock-alt" title="Reset Password" (click)="resetPassword()"></i>

                </div>

              </div>

              <div class="row mt-3">
                <div *ngIf="custtype" class="col-md-6">
                  <b>Dealer Alert:</b>
                  <md-slide-toggle [(ngModel)]="data.dealerAlert" style="height: 0px !important" ngDefaultControl
                    (change)="dealerAlert($event, data)"></md-slide-toggle>
                </div>

              </div>

           



              </div>

            <div class="tab-pane" id="Transaction" role="tabpanel">
              <button *ngIf="!add" class="btn btn-outline-primary"  style="border-radius: 20px;margin-left: 6px;float: right;font-size: small;margin-bottom: 13px;" type="button" data-toggle="collapse" 
              data-target="#collapseOne" aria-expanded="true"aria-controls="collapseOne" (click)="add=!add">back</button>

            <button *ngIf="add" class="btn btn-outline-primary"  style="border-radius: 20px;float: right;font-size: small;margin-bottom: 13px;" type="button" data-toggle="collapse" 
              data-target="#collapseTwo" aria-expanded="true"aria-controls="collapseTwo" (click)="addButton()">Add Transaction <i class="fas fa-plus"></i></button>

            <div class="accordion" id="table">
              <div class="card">
               
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#table">
                  <div class="card-body">
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <!-- <th scope="col">Customer _ID</th> -->
                          <th scope="col">Amount</th>
                          <th scope="col">Payment Mode</th>
                          <th scope="col">Transaction ID</th>
                          <th scope="col">Remarks</th>
                          <th scope="col">Items</th>
                          <th scope="col">Payment Date</th>
                          <th scope="col">Status</th>
                          <th scope="col">Edit</th>
                          <th scope="col">Delete</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let item of payementsArray">
                          <!-- <td>{{item.Customer_ID}}</td> -->
                          <td>{{item.Amount}}</td>
                          <td>{{item.PaymentMode}}</td>
                          <td>{{item.TransactionID}}</td>
                          <td>{{item.Remarks}}</td>
                          <td>{{item.Items}}</td>
                          <td>
                            <span *ngIf="item.date">{{item.date | date:'medium'}}</span>
                            <span *ngIf="!item.date">N/A</span>
                          </td>
                          <td>{{item.Status}}</td>
                          <td><i class="fas fa-pencil-alt" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"aria-controls="collapseTwo" (click)="editPayment(item)"></i></td>
                          <td><i class="fas fa-trash" (click)="deletePayment(item)"></i></td>
                          
                    
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <div class="card">
            
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#table">
                  <div class="card-body" style="height: 45vh;">
                  <form [formGroup]="transactionForm" class="form">
                    <div class="row" style="margin-bottom: 12px;">
                      <div class="col">
                        <input type="text" class="form-control" formControlName="Amount" placeholder="Enter Amount">
                      </div>
                      <div class="col">
                        <input type="text" class="form-control" formControlName="TransactionID" placeholder="Enter Transaction Id">
                      </div>

                    </div>

                    <div class="row" style="margin-bottom: 12px;">
                      <div class="col">
                        <select id="dbselect" style="width:336px;margin-left: -14px;" multiple="multiple">
                          <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
                        </select>
                      
                      </div>
                     
                    <div class="col">
                      <input type="text" class="form-control" formControlName="Remarks" placeholder="Enter Remark">
                    </div>
                    </div>

                    <div class="row" style="margin-bottom: 12px;">
                      <div class="col">
                        <select formControlName="Items" id="inputState" class="form-control">
                          <option value="" disabled selected>Select Items</option>
                          <option *ngFor="let item of items" [value]="item">{{item}}</option>
                        </select>
                      </div>

                      <div class="col">
                        <select formControlName="PaymentMode" id="inputState" class="form-control">
                          <option value="" disabled selected>Select Payment Mode</option>
                          <option *ngFor="let item of PaymentMode" [value]="item">{{item}}</option>
                        </select>
                      </div>
                      </div>

                      <div class="row">
                        <div class="col">
                        <select formControlName="Status" id="inputState" class="form-control">
                          <option value="" disabled selected>Select Status</option>
                          <option value="Pending">Pending</option>
                          <option value="Paid">Paid</option>
                        </select>
                        </div>

                        <div class="col">
                          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
                            formControlName="date" type="text">

                        </div>
                      </div>
                      <div class="card-footer mt-4 text-center">
                        <button class="btn btn-primary"  data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"aria-controls="collapseOne" (click)="addPayment()">{{buttonText}}</button>

                      </div>
                  </form>
                  </div>
                </div>
              </div>

              </div>
            
           

            </div>


            </div>
          </div>
        </div>
        <div class="card-footer text-center" >
          <button  class='btn btn-danger' (click)="dialogRef.close()"> Close <i
              class="fas fa-times-circle"></i></button>
        </div>
      <!-- </div> -->
      
    <!-- </div>  -->
  <!-- </div> -->
<!-- </div> -->