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

<div class="topDiv">

  <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="accordion" id="accordionExample">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link" (click)="isEdit=!isEdit" type="button" data-toggle="collapse"
            data-target="#collapseZero" aria-expanded="true" aria-controls="collapseZero">
            Model Master
          </button>

          <button *ngIf="!isEdit" class="btn btn-primary btn-sm float-sm-right ml-2" type="button"
            (click)="RTOForm.reset()" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"
            aria-controls="collapseTwo">Add
          </button>


        </h2>
      </div>

      <div id="collapseZero" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class=col-sm-12>


          <div class="table-responsive">
            <table class="table table-striped table-hover "
              style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
              <thead>
                <tr>

                  <th>{{'Manufacturer' | translate}}</th>
                  <th>{{'Model' | translate}}</th>
                  <th>{{'Model Name' | translate}}</th>
                  <th>{{'Engine' | translate}}</th>
                  <th>{{'Capacity' | translate}}</th>
                  <th>{{'No Of Typers.' | translate}}</th>
                  <th>{{'Category' | translate}}</th>
                  <th>{{'Transmission' | translate}}</th>
                  <th>{{'Edit' | translate}}</th>
                  <th>{{'Delete'| translate}}</th>

                </tr>
              </thead>
              <!-- // Manufacturer:{type:String},
              // Model:{type:String},
              // ModelName:{type:String},
              // Engine:{type:String},
              // Capacity:{type:String},
              // NoOfTypers:{type:String} -->
              <tbody>
                <tr *ngFor="let item of RtoData">
                  <td>{{item.Manufacturer?item.Manufacturer:''}}</td>
                  <td>{{item.Model?item.Model:''}}</td>
                  <td>{{item.ModelName?item.ModelName:''}}</td>
                  <td>{{item.Engine?item.Engine:''}}</td>
                  <td>{{item.Capacity?item.Capacity:''}}</td>
                    <td>{{item.NoOfTypers?item.NoOfTypers:''}}</td>
                  <td>{{item.Category?item.Category:''}}</td>
                  <td>{{item.Transmission?item.Transmission:''}}</td>
                  <td><i class="fas fa-edit" (click)="edit(item)" data-toggle="collapse" data-target="#collapseTwo"
                      aria-expanded="true" aria-controls="collapseTwo"></i></td>
                  <td><i class="fas fa-trash" (click)="delete(item)"></i></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">
<!-- Manufacturer:[],
Model:[],
ModelName:[],
Engine:[],
Capacity:[],
NoOfTypers:[] -->
              <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
                <div class="col-sm-12" style="text-align: left;font-size: initial;">
                  <form [formGroup]="RTOForm" (ngSubmit)="submit()">

                    <div class="form-group row">
                      <label for="Manufacturer" class="col-sm-2 col-form-label">Manufacturer</label>
                      <div class="col-sm-10">
                        <input formControlName="Manufacturer" type="text" class="form-control" id="Manufacturer"
                          placeholder="Enter Manufacturer">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="Model" class="col-sm-2 col-form-label">Model</label>
                      <div class="col-sm-10">
                        <input formControlName="Model" type="text" class="form-control" id="Model"
                          placeholder="Enter Model">
                      </div>
                    </div>

                    <div class="form-group row">
                      <label for="ModelName" class="col-sm-2 col-form-label">Model Name</label>
                      <div class="col-sm-10">
                        <input formControlName="ModelName" type="text" class="form-control" id="ModelName"
                          placeholder="Enter Model Name">
                      </div>
                    </div>

                    <div class="form-group row">
                      <label for="Engine" class="col-sm-2 col-form-label">Engine</label>
                      <div class="col-sm-10">
                        <input formControlName="Engine" type="text" class="form-control" id="Engine"
                          placeholder="Enter Engine">
                      </div>
                    </div>

                    <div class="form-group row">
                      <label for="Capacity" class="col-sm-2 col-form-label">Capacity</label>
                      
                        <div class="col-sm-10">
                          <input formControlName="Capacity" type="text" class="form-control" id="Capacity" placeholder="Enter Capacity">
                        </div>
                     
                    </div>

                    <div class="form-group row">
                      <label for="NoOfTypers" class="col-sm-2 col-form-label">No Of Typers</label>
                      
                        <div class="col-sm-10">
                          <input formControlName="NoOfTypers" type="text" class="form-control" id="NoOfTypers" placeholder="Enter No Of Typers">
                        </div>
                      
                    </div>

                      <div class="form-group row">
                        <label for="Category" class="col-sm-2 col-form-label">Category</label>
                      
                        <div class="col-sm-10">
                          <input formControlName="Category" type="text" class="form-control" id="Category"
                            placeholder="Enter Category">
                        </div>
                      
                      </div>

                        <div class="form-group row">
                          <label for="Transmission" class="col-sm-2 col-form-label">Transmission</label>
                        
                          <div class="col-sm-10">
                            <select class="form-control" formControlName="Transmission">
                              <option value="auto">Auto</option>
                              <option value="auto">Manual</option>
                            </select>
                            
                          </div>
                        
                        </div>

                    <div class="text-center mt-4">
                      <button class="btn btn-primary btn-md" type="submit" data-toggle="collapse"
                        data-target="#collapseZero" aria-expanded="true" aria-controls="collapseZero">{{title}}</button>

                    </div>

                  </form>
                </div>
              </div>
              <div class="row">
                <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>
  </div>
</div>