<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">
           RTO 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>{{'State' | translate}}</th>
                  <th>{{'City' | translate}}</th>
                  <th>{{'RTO Name' | translate}}</th>
                  <th>{{'RTO Number' | translate}}</th>
                  <th>{{'Status' | translate}}</th>
                  <th>{{'Edit.' | translate}}</th>
                
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of RtoData">
                  <td>{{item.state}}</td> 
                  <td>{{item.city}}</td>
                  <td>{{item.RTO_Name}}</td>
                  <td>{{item.RTO_Code}}</td>
                  <td>{{item.status}}</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">

              <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="name" class="col-sm-2 col-form-label">Name</label>
                      <div class="col-sm-10">
                        <input formControlName="RTO_Name" type="text" class="form-control" id="name" placeholder="Enter RTO Name">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="code" class="col-sm-2 col-form-label">RTO Code</label>
                      <div class="col-sm-10">
                        <input formControlName="RTO_Code" type="text" class="form-control" id="code" placeholder="Enter RTO Code">
                      </div>
                    </div>

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

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

                    <div class="form-group row">
                      <label for="state" class="col-sm-2 col-form-label">State</label>
                      <div class="col-sm-10">
                        <select class="form-control" id="state" formControlName="state">
                        <option *ngFor="let ustate of Indianstate" [value]="ustate">
                          {{ustate}}
                        </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>

