<app-all-menus></app-all-menus>

<div class="topDiv">
  <div class="accordion" id="accordionExample">
    <div class="card">

      <div class="row" style="margin:0px">
        <div class="col-12">
          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
        </div>
      </div>

      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link" (click)="change()" type="button" data-toggle="collapse" data-target="#collapseZero"
            aria-expanded="true" aria-controls="collapseZero">
            Device Inventory
          </button>
          
          <button (click)="addmultiple()" class="btn btn-primary btn-sm float-sm-right ml-2" type="button" data-toggle="collapse"
          data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Add Multiple Device</button>
          <!-- *ngIf="checkedList.length>0" -->
          <button   class="dropdown-toggle btn btn-primary btn-sm float-sm-right ml-2" data-toggle="dropdown" id="dropdownMenuButton" 
            type="button"><span class="mat-button-wrapper" >
              Transfer Stock To
            </span>
            <div class="mat-button-ripple mat-ripple" md-ripple=""></div>
            <div class="mat-button-focus-overlay"></div>
          </button>

          <button class="btn btn-primary btn-sm float-sm-right ml-2" type="button" (click)="change()" data-toggle="collapse"
            data-target="#collapseSix" aria-expanded="true" aria-controls="collapseSix" (click)="selectTab('sent')">Transaction History</button>

            <div  aria-labelledby="dropdownMenuButton" class="dropdown-menu" x-placement="bottom-start"
              style="position: absolute; transform: translate3d(92px, 35px, 0px); top: 0px; left: 0px; will-change: transform;">
              <a data-toggle="collapse" (click)="change()" data-target="#collapseThree"  aria-expanded="true" aria-controls="collapseThree" class="dropdown-item" style="cursor: pointer;"> Dealer</a>
              <a data-toggle="collapse" (click)="change()" data-target="#collapseFour"  aria-expanded="true" aria-controls="collapseFour" class="dropdown-item" style="cursor: pointer;">Installer</a>
              <a data-toggle="collapse" (click)="change()" data-target="#collapseFive" aria-expanded="true" aria-controls="collapseFour" class="dropdown-item" style="cursor: pointer;">Distributer</a>
            </div>
        </h2>
      </div>

      <div id="collapseZero" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class=col-sm-12>
        <div class="container mt-3 mb-3">
          <div class="row">
            <div  *ngFor="let item of inventoryCount" class="card shadow-sm col-sm rounded m-1 p-2 text-center"
            [ngStyle]="{'background-color': item._id === 'Sold'?'#00c0ef':item._id === 'In Stock'?'#f39c12':'#00a65a'}">
              <h6>{{item._id}} </h6>
              <span class="text-white">{{item.TotalDev}}</span>
            </div>
            
          </div>
        </div>
         
          <div class="table-responsive">
          <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
            <thead>
              <tr>
                <th><input type="checkbox"  id="customCheck1" [(ngModel)]="masterSelected" (change)="checkUncheckAll()"></th>
                <th>{{'IMEI' | translate}}</th>
                <th>{{'Owner' | translate}}</th>
                <th>{{'Uploaded By' | translate}}</th>
                <th>{{'Uploaded Date' | translate}}</th>
                <th>{{'Bill Date' | translate}}</th>
                <th>{{'Bill No.' | translate}}</th>
                <th>{{'State' | translate}}</th>
                <th>{{'E-SIM Validity' | translate}}</th>
                <th>{{'Device Model Number' | translate}}</th>
                <th>{{'Serial Number' | translate}}</th>
                <th>{{'Iccid No' | translate}}</th>
                <th>{{'Mob-1' | translate}}</th>
                <th>{{'Mob-2' | translate}}</th>
                <th>{{'Status' | translate}}</th>
                <th>{{'Vendor' | translate}}</th>
                <th>{{'Purchase Date' | translate}}</th>
                <th>{{'Sold Date' | translate}}</th>
                <th>{{'Activation Date' | translate}}</th>
              </tr>
            </thead>
            <tbody *ngIf="showErrorupload">
              <tr *ngFor="let failedDevices of inventory;index as i;">
                <input type="checkbox" [(ngModel)]="failedDevices.isSelected" class="ml-2 mt-1"  id="customCheck1" (change)="isAllSelected()">
                <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
                <td style="cursor:pointer">{{failedDevices.Owner?failedDevices.Owner.first_name?failedDevices.Owner.first_name:'':''}} {{failedDevices.Owner?failedDevices.Owner.last_name?failedDevices.Owner.last_name:'':''}}</td>
                <td style="cursor:pointer">{{failedDevices.uploaded_by.first_name}} {{failedDevices.uploaded_by.last_name}}</td>
                <td style="cursor:pointer">{{failedDevices.Uploaded_date | date:'medium'}}</td>
                <td style="cursor:pointer">
                  <span *ngIf="failedDevices['BillDate']">{{failedDevices['BillDate'] | date:'medium'}}</span>
                  <span *ngIf="!failedDevices['BillDate']">N/A</span>
                </td>
                <td style="cursor:pointer">
                  <span *ngIf="failedDevices['BillNo']">{{failedDevices['BillNo']}}</span>
                  <span *ngIf="!failedDevices['BillNo']">N/A</span>
                </td>
                <td style="cursor:pointer">
                  <span *ngIf="failedDevices['State']">{{failedDevices['State']}}</span>
                  <span *ngIf="!failedDevices['State']">N/A</span>
                </td>
                  <td style="cursor:pointer">
                    <span *ngIf="failedDevices['eSIMValidaity']">{{failedDevices['eSIMValidaity']}}</span>
                    <span *ngIf="!failedDevices['eSIMValidaity']">N/A</span>
                  </td>
                    <td style="cursor:pointer">
                      <span *ngIf="failedDevices['DeviceModelNo']">{{failedDevices['DeviceModelNo']}}</span>
                      <span *ngIf="!failedDevices['DeviceModelNo']">N/A</span>
                    </td>
                  <td style="cursor:pointer">
                    <span *ngIf="failedDevices['SerialNo']">{{failedDevices['SerialNo']}}</span>
                    <span *ngIf="!failedDevices['SerialNo']">N/A</span>
                  </td>
                  <td style="cursor:pointer">
                    <span *ngIf="failedDevices['IccidNo']">{{failedDevices['IccidNo']}}</span>
                    <span *ngIf="!failedDevices['IccidNo']">N/A</span>
                  </td>

                  <td style="cursor:pointer">
                    <span *ngIf="failedDevices['Mob1']">{{failedDevices['Mob1']}}</span>
                    <span *ngIf="!failedDevices['Mob1']">N/A</span>
                  </td>
                  <td style="cursor:pointer">
                    <span *ngIf="failedDevices['Mob2']">{{failedDevices['Mob2']}}</span>
                    <span *ngIf="!failedDevices['Mob2']">N/A</span>
                  </td>
                <td style="cursor:pointer">{{failedDevices.Status}}</td>
                <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
                <td style="cursor:pointer">{{failedDevices.Purchase_date}}</td>
                <td style="cursor:pointer">
                  <span *ngIf="failedDevices.Sold_date">{{failedDevices.Sold_date}}</span>
                  <span *ngIf="!failedDevices.Sold_date">N/A</span>
                  </td>
                  <td style="cursor:pointer">
                    <span *ngIf="failedDevices.Activation_date">{{failedDevices.Activation_date}}</span>
                    <span *ngIf="!failedDevices.Activation_date">N/A</span>
                  </td>
              
              </tr>
            </tbody>
          </table>
          </div>
        </div>

      </div>


      <div class="accordion" id="accordionExample">
      
        <div class="card">
         
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">

              <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
                <div class="col-sm-12" style="text-align: left;font-size: initial;">
                  
                  <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
                    <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;"
                      class="file-upload btn btn-primary">Browse
                      for Excel file ... <input type="file" id="excelFile" multiple size="50" />
                    </label>
                    <button type="button"
                      style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
                      class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
                      aria-controls="collapseZero" (click)="uploadExcel()">Upload</button>

                      <button type="button" class="btn btn-primary"  (click)="exportExcels()">Download Sample File</button>
                   
                  </div>
                </div>
              </div>
              <div class="row" *ngIf="showErrorupload_1">
                <div class=col-sm-12>
                  <table class="table table-striped table-hover "
                    style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
                    <thead>
                      <tr>
                        <th>{{'IMEI' | translate}}</th>
                        <th>{{'Vendor' | translate}}</th>
                        <th>{{'Bill date' | translate}}</th>
                        <th>{{'Bill no' | translate}}</th>
                        <th>{{'Device model no' | translate}}</th>
                        <th>{{'Iccid no' | translate}}</th>
                        <th>{{'Mob-1' | translate}}</th>
                        <th>{{'Mob-2' | translate}}</th>
                        <th>{{'State' | translate}}</th>
                        <th>{{'eSIM validaity' | translate}}</th>
                      </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let failedDevices of uploadJSON">
                          <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
                          <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
                          <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
                          <td style="cursor:pointer">{{failedDevices['State']}}</td>
                          <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
                         
                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>

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

      </div>


      <div class="accordion" id="accordionExample">
      
        <div class="card">
      
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body row">
              <div class="col-sm-6" style="text-align: right;">
                <span>{{'Dealer' | translate}} :</span>
                <md-input-container style="width: 60%;">
                  <input mdInput placeholder="{{'Select dealer' | translate}}" [mdAutocomplete]="tdAuto" name="state1"
                    #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
                  <md-autocomplete #tdAuto="mdAutocomplete">
                    <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
                      <span>{{ group.first_name }} {{ group.last_name }}</span>
                    </md-option>
                  
                  </md-autocomplete>
                </md-input-container>
               </div>
               <div class="col-sm-6" *ngIf="checkedList.length==0" style="margin-top: 3px;">
                <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;" class="file-upload btn btn-warning">Select
                Excel file<input style="width:10px;position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;" type="file"(change)="uploadedFile($event)" multiple size="50" accept=".xlsx" />
                </label>
                <button style="margin: top -7px;margin-left:5px" [disabled]="this.dealerObj==undefined && checkedList.length==0 && faileduploadDevices.length==0" type="button"
                  class="btn btn-success"  (click)="uploadExcelAndUpdate()">Upload <i class="fas fa-upload"></i></button>
               
                  <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && show1" class="btn btn-primary"
                     data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
                    aria-controls="collapseZero" (click)="transfer()">Transfer <i class="fas fa-exchange-alt"></i></button>
                </div>
               <div class="col-sm-3 mt-3"  *ngIf="checkedList.length>0">
                 <button style="margin: top -7px;margin-left:5px" [disabled]="this.dealerObj==undefined && checkedList.length==0" class="btn btn-primary"  data-toggle="collapse"
              data-target="#collapseZero" aria-expanded="true" aria-controls="collapseZero" (click)="transfer()">Transfer <i class="fas fa-exchange-alt"></i></button>
               </div>
      
                </div>
                <div class="row" *ngIf="showErrorupload_1">
                  <div class=col-sm-12>
                    <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
                      <thead>
                        <tr>
                          <th>{{'IMEI' | translate}}</th>
                          <th>{{'Vendor' | translate}}</th>
                          <th>{{'Bill date' | translate}}</th>
                          <th>{{'Bill no' | translate}}</th>
                          <th>{{'Device model no' | translate}}</th>
                          <th>{{'Iccid no' | translate}}</th>
                          <th>{{'Mob-1' | translate}}</th>
                          <th>{{'Mob-2' | translate}}</th>
                          <th>{{'State' | translate}}</th>
                          <th>{{'eSIM validaity' | translate}}</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let failedDevices of uploadJSON">
                          <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
                          <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
                          <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
                          <td style="cursor:pointer">{{failedDevices['State']}}</td>
                          <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
                
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

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


          <div class="accordion" id="accordionExample">
          
            <div class="card">
          
              <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                <div class="card-body row">
                  <div class="col-sm-6" style="text-align: right;">
                    <span>{{'Installer' | translate}} :</span>
                    <md-input-container style="width: 60%;">
                      <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                        #state="ngModel" [(ngModel)]="installerData" (ngModelChange)="filtergrpStatess1(installerData)">
                      <md-autocomplete #tdAuto0="mdAutocomplete">
                        <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
                          <span>{{ group.first_name }} {{ group.last_name }}</span>
                        </md-option>
                        
                      </md-autocomplete>
                    </md-input-container>
                  </div>
                  <div class="col-sm-6" *ngIf="checkedList.length==0" style="margin-top: 3px;">
                    <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;" class="file-upload btn btn-warning">Select
                     Excel file<input style="width:10px;position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;" type="file" (change)="uploadedFile($event)" multiple size="50" accept=".xlsx" />
                    </label>
                    <button style="margin: top -7px;margin-left:5px" [disabled]="this.installerObj==undefined && checkedList.length==0  && faileduploadDevices.length==0" type="button" 
                      class="btn btn-success"  (click)="uploadExcelAndUpdate()">Upload <i class="fas fa-upload"></i></button>
                    
                      <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && show1" class="btn btn-primary"  data-toggle="collapse" data-target="#collapseZero"
                      aria-expanded="true" aria-controls="collapseZero" (click)="transfer1()">Transfer <i class="fas fa-exchange-alt"></i></button>
                    </div>
                  <div class="col-sm-3 mt-3" *ngIf="checkedList.length>0">
                    <button style="margin: top -7px;margin-left:5px" [disabled]="this.installerObj==undefined && checkedList.length==0" class="btn btn-primary"  data-toggle="collapse" data-target="#collapseZero"
                      aria-expanded="true" aria-controls="collapseZero" (click)="transfer1()">Transfer <i class="fas fa-exchange-alt"></i></button>
                  </div>
          
                </div>
                <div class="row" *ngIf="showErrorupload_1">
                  <div class=col-sm-12>
                    <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
                      <thead>
                        <tr>
                          <th>{{'IMEI' | translate}}</th>
                          <th>{{'Vendor' | translate}}</th>
                          <th>{{'Bill date' | translate}}</th>
                          <th>{{'Bill no' | translate}}</th>
                          <th>{{'Device model no' | translate}}</th>
                          <th>{{'Iccid no' | translate}}</th>
                          <th>{{'Mob-1' | translate}}</th>
                          <th>{{'Mob-2' | translate}}</th>
                          <th>{{'State' | translate}}</th>
                          <th>{{'eSIM validaity' | translate}}</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let failedDevices of uploadJSON">
                          <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
                          <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
                          <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
                          <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
                          <td style="cursor:pointer">{{failedDevices['State']}}</td>
                          <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
                
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

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

      <div class="accordion" id="accordionExample">
      
        <div class="card">
      
          <div id="collapseFive" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
            <div class="card-body row">
              <div class="col-sm-6" style="text-align: right;">
                <span>{{'Distributer' | translate}} :</span>
                <md-input-container style="width: 60%;">
                  <input mdInput placeholder="{{'Select Distributer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
                    #state="ngModel" [(ngModel)]="distributerData" (ngModelChange)="filtergrpStatess2(distributerData)">
                  <md-autocomplete #tdAuto0="mdAutocomplete">
                    <md-option *ngFor="let group of distributerSelect" [value]="group.fullName">
                      <span>{{ group.first_name }} {{ group.last_name }}</span>
                    </md-option>
      
                  </md-autocomplete>
                </md-input-container>
              </div>
            <div class="col-sm-6" *ngIf="checkedList.length==0" style="margin-top: 3px;">
              <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;" class="file-upload btn btn-warning">
                Select Excel file <input style="width:10px;position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;" type="file" (change)="uploadedFile($event)" multiple size="50" accept=".xlsx"/>
              </label>
              <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && checkedList.length==0 && faileduploadDevices.length==0" type="button" 
                class="btn btn-success" (click)="uploadExcelAndUpdate()">Upload <i class="fas fa-upload"></i></button>
              <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && show1" class="btn btn-primary"
                 data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
                aria-controls="collapseZero" (click)="transfer2()">Transfer <i class="fas fa-exchange-alt"></i></button>
            </div>
            <div class="col-sm-3 mt-3" *ngIf="checkedList.length>0">
                <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && checkedList.length==0" class="btn btn-primary"  data-toggle="collapse" data-target="#collapseZero"
                  aria-expanded="true" aria-controls="collapseZero" (click)="transfer2()">Transfer <i class="fas fa-exchange-alt"></i></button>
              </div>
            </div>

            <div class="row" *ngIf="showErrorupload_1">
              <div class=col-sm-12>
                <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
                  <thead>
                    <tr>
                      <th>{{'IMEI' | translate}}</th>
                      <th>{{'Vendor' | translate}}</th>
                      <th>{{'Bill date' | translate}}</th>
                      <th>{{'Bill no' | translate}}</th>
                      <th>{{'Device model no' | translate}}</th>
                      <th>{{'Iccid no' | translate}}</th>
                      <th>{{'Mob-1' | translate}}</th>
                      <th>{{'Mob-2' | translate}}</th>
                      <th>{{'State' | translate}}</th>
                      <th>{{'eSIM validaity' | translate}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let failedDevices of uploadJSON">
                      <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
                      <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
                      <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
                      <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
                      <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
                      <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
                      <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
                      <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
                      <td style="cursor:pointer">{{failedDevices['State']}}</td>
                      <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
            
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

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


        <div class="accordion" id="accordionExample">
        
          <div class="card">
        
            <div id="collapseSix" class="collapse" aria-labelledby="headingix" data-parent="#accordionExample">
              
              <ul class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist" data-background-color="orange" style="margin-top: 10px;">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#Sent" role="tab" (click)="selectTab('sent')">Sent</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#Received" role="tab" (click)="selectTab('recieved')">Received</a>
                  </li>
                </ul>

                <div class="tab-content">
                  <div class="tab-pane active" id="Sent" role="tabpanel">
                      <table class="table table-striped table-hover">
                        <thead>
                          <tr>
                            <th>IMEI</th>
                            <th>Date</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Device Type</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let item of transaction">
                            <td>{{item.DeviceID}}</td>
                            <td>{{item.transferDate?(item.transferDate | date:'medium'):'' }}</td>
                            <td>{{item.from?item.from.first_name?item.from.first_name:'':''}} {{item.from?item.from.last_name?item.from.last_name:'':''}}</td>
                            <td>{{item.to?item.to.first_name?item.to.first_name:'':''}} {{item.to?item.to.last_name?item.to.last_name:'':''}}</td>
                            <td>{{item.DeviceType?item.DeviceType:''}}</td>
                      
                          </tr>
                        </tbody>
                      </table>
                  </div>
                  
                <div class="tab-pane" id="Received" role="tabpanel">
                      <table class="table table-striped table-hover">
                        <thead>
                          <tr>
                            <th>IMEI</th>
                            <th>Date</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Device Type</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let item of transaction">
                            <td>{{item.DeviceID}}</td>
                            <td>{{item.transferDate?(item.transferDate | date:'medium'):'' }}</td>
                            <td>{{item.from?item.from.first_name?item.from.first_name:'':''}} {{item.from?item.from.last_name?item.from.last_name:'':''}}</td>
                            <td>{{item.to?item.to.first_name?item.to.first_name:'':''}} {{item.to?item.to.last_name?item.to.last_name:'':''}}</td>
                            <td>{{item.DeviceType?item.DeviceType:''}}</td>
                      
                          </tr>
                        </tbody>
                      </table>
                </div>
                </div>

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


  <div *ngIf="show" style="width: 50%;height: 20px;position:absolute;top:-360px">
    <table id="sample" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
      <thead style="background-color:#e0e0e0;color: #444444;">
        <tr>
          <th>IMEI</th>
          <th>Device model no</th>
          <th>Purchase_date</th>
          <th>Serial no</th>
          <th>Iccid no</th>
          <th>Mob-1</th>
          <th>Mob-2</th>
          <th>Vendor_Name</th>
          <th>Bill date</th>
          <th>Bill no</th>
          <th>State</th>
          <th>eSIM validaity</th>
        </tr>
      </thead>
    </table>
  
  
  </div>