
<div class="limiter" style="height: 100vh;">
  <div class="row rowStyle">
    <div class="col-12">
      <div class="row" style="background: grey;color: white;padding: 5px;">
        <div class="col-12">
          <label>{{'Virtual Device' | translate}}</label>
          <div id="toast">
            
          </div>
        </div>
      </div>
      <div class="row" style="background: #efecec;;height: 87vh;padding: 1vh;" >
        <div class="col-lg-6 col-md-12 col-sm-12" style="background: white;padding: 5px;">
          

          

          
          
          <!-- <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4" >
              <p> CUSTOMER :</p>
            </div>
            <div class="form-group col-8">
            </div>
          </div> -->
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-lg-4 col-md-12 col-sm-12" >
              <p> {{'IMEI'| translate}}<span style="color:red">*</span> :</p>
            </div>
            <div class="col-lg-8 col-md-12 col-sm-12">
              <input type="text" class="form-control" id="imei" [(ngModel)]="virtualDevice.imei" aria-describedby="point" placeholder="{{'IMEI' | translate}}" >
            </div>
          </div>
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-lg-4 col-md-12 col-sm-12" >
              <p> {{'Host'| translate}}<span style="color:red">*</span> :</p>
            </div>
            <div class="col-lg-8 col-md-12 col-sm-12">
              <input type="text" class="form-control" id="host" [(ngModel)]="virtualDevice.host" aria-describedby="point" placeholder="{{'Host' | translate}}" >
            </div>
          </div>
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-lg-4 col-md-12 col-sm-12" >
              <p> {{'Port'| translate}}<span style="color:red">*</span> :</p>
            </div>
            <div class="col-lg-8 col-md-12 col-sm-12">
              <input type="text" class="form-control" id="port" [(ngModel)]="virtualDevice.port" aria-describedby="point" placeholder="{{'Port' | translate}}" >
            </div>
          </div>
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-lg-4 col-md-12 col-sm-12" >
              <p> {{'Model'| translate}}<span style="color:red">*</span> :</p>
            </div>
            <div class="col-lg-8 col-md-12 col-sm-12">
              <div class="form-group">
                <div class="input-group input-file" name="Fichier1">
                  <!-- <span class="input-group-btn">
                            <button class="btn btn-default btn-choose" type="button">Choose</button>
                        </span> -->
                  
                  <select Placeholder="{{'Model' | translate}}" class="form-control" [(ngModel)]="virtualDevice.model"> 
                    <option value="">Select</option>
                    <option value="NVT-1920">NVT-1920</option>
                    <option value="NVT-1820-U">NVT-1820-U</option>
                  </select>
                  <!-- <span class="input-group-btn">
                              <button class="btn btn-warning btn-reset" type="button">Reset</button>
                        </span> -->
                </div>
              </div>
            </div>
          </div>
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-lg-4 col-md-12 col-sm-12" >
              <p> {{'Upload Lat/long'| translate}}<span style="color:red">*</span> :</p>
            </div>
            <div class="col-lg-8 col-md-12 col-sm-12">
              <div class="form-group">
                <div class="input-group input-file" name="Fichier1">
                  <!-- <span class="input-group-btn">
                            <button class="btn btn-default btn-choose" type="button">Choose</button>
                        </span> -->
                  <input
                    type="file"
                    #fileInput
                    id="excelFile"
                    class="form-control"
                    (change)="onChange($event)"
                    placeholder="Choose a file..."
                  />
                  
                  <!-- <span class="input-group-btn">
                              <button class="btn btn-warning btn-reset" type="button">Reset</button>
                        </span> -->
                </div>
              </div>
            </div>
          </div>

          

          <div class="row">
            <div  class="col-4"></div>
            <div *ngIf="errorMsg" class="col-8">
              <p style="text-align: left; color: red">{{ errorMsg }}</p>
              <!-- <button type="submit" class="btn btn-primary"  style="margin-left: 154px; margin-bottom: 10px; width: 120px; margin-top: 10px; background: #d22020; border: none;" (click)="downloadFailedData()">Download</button> -->
            </div>
            <div *ngIf="successMesssage" class="col-8">
              <p style="text-align: left; color: green">{{ successMesssage }}</p>
              <!-- <button type="submit" class="btn btn-primary"  style="margin-left: 154px; margin-bottom: 10px; width: 120px; margin-top: 10px; background: #d22020; border: none;" (click)="downloadFailedData()">Download</button> -->
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="onUpload()" > {{'Submit' | translate}} </button>
              <button md-raised-button (click)="resetData()" style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" > {{'RESET' | translate}} </button>          
             
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12" style="background: white;border-right: 1px solid #2d4262;padding: 5px;">
          <div class="table-responsive-sm">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Host </th>
                  <th scope="col">IMEI </th>
                  <th scope="col">Port </th>
                  <th scope="col">Model </th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let vdevice of submittedList; index as i">
                  <td>{{vdevice.host}}</td>
                  <td>{{vdevice.imei}}</td>
                  <td>{{vdevice.port}}</td>
                  <td>{{vdevice.model}}</td>
                  <td><button class="btn btn-primary btn-sm" (click)="submit(vdevice,false)">Submit</button></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>  
    </div>
  </div>
</div>