<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" type="button" data-toggle="collapse" data-target="#collapseZero"
          aria-expanded="true" aria-controls="collapseZero">
          Toll List
        </button>
        <button 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 Tolls</button>
        <button class="btn btn-primary btn-sm float-sm-right "  data-toggle="collapse" data-target="#collapseOne"
            aria-expanded="false" aria-controls="collapseOne" (click)="AddButton()">Add Toll</button>
      </h2>


    </div>

    <div id="collapseZero" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
    <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>{{'Toll Name' | translate}}</th>
            <th>{{'Toll Tax' | translate}}</th>
            <th>{{'Latitude' | translate}}</th>
            <th>{{'Longitude' | translate}}</th>
            <th>{{'Address' | translate}}</th>
            <th>{{'Status' | translate}}</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let failedDevices of tollList">
            <td style="cursor:pointer">{{failedDevices.tollName}}</td>
            <td style="cursor:pointer">{{failedDevices.tollTax}}</td>
            <td style="cursor:pointer">{{failedDevices.location.coordinates[0]}}</td>
            <td style="cursor:pointer">{{failedDevices.location.coordinates[1]}}</td>
            <td style="cursor:pointer">{{failedDevices.address}}</td>
            <td style="cursor:pointer">{{failedDevices.status}}</td>
            <td style="cursor:pointer">
              <button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#collapseOne"
            aria-expanded="true" aria-controls="collapseOne" (click)="edit(failedDevices)"><i class="fa fa-edit"></i></button>
              <button class="btn btn-danger btn-sm" (click)="deleteToll(failedDevices)"><i class="fa fa-trash"></i></button>
            </td>
          </tr>
        </tbody>
      </table>
    </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" type="button" data-toggle="collapse" data-target="#collapseOne"
            aria-expanded="true" aria-controls="collapseOne">
            Add Toll
          </button>
        </h2>
      </div> -->
  
      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="card-body">
        <form [formGroup]="tollForm" (ngSubmit)="submit()">
          <div class="row" style="padding: 10px;">
            <div class="col">
              <label>Toll Name</label>
              <input type="text" formControlName="tollName" class="form-control" placeholder="Toll Name">
              <span class="text-danger" *ngIf="isControlHasError('tollName','required')">
                <strong>Toll Name Require</strong>
              </span>
            </div>
            <div class="col">
              <label>Toll Tax</label>
              <input type="number" formControlName="tollTax" class="form-control" placeholder="Toll Tax">
              <span class="text-danger" *ngIf="isControlHasError('tollTax','required')">
                <strong>Toll Tax Require</strong>
              </span>
            </div>
          </div>
          <div class="row" style="padding: 10px;">
            <div class="col">
              <label>Latitude</label>
              <input type="number" formControlName="latitude" class="form-control" placeholder="Latitute">
              <span class="text-danger" *ngIf="isControlHasError('latitude','required')">
                <strong>Latitude Require</strong>
              </span>
            </div>
            <div class="col">
              <label>Longitude</label>
              <input type="number" formControlName="longitude" class="form-control" placeholder="Longitude">
              <span class="text-danger" *ngIf="isControlHasError('longitude','required')">
                <strong>Longitude Require</strong>
              </span>
            </div>
          </div>
          <div class="row" style="padding: 10px;">
            <div class="col">
              <label>Address</label>
              <input type="type" formControlName="address" class="form-control" placeholder="Address">
              <span class="text-danger" *ngIf="isControlHasError('address','required')">
                <strong>address Require</strong>
              </span>
            </div>
            <div class="col">
              <label>Status</label>
              <input type="type" formControlName="status" class="form-control" placeholder="Status">
              <span class="text-danger" *ngIf="isControlHasError('status','required')">
                <strong>Status Require</strong>
              </span>
            </div>
          </div>
          <div class="text-center mt-4">
            <button *ngIf="!buttonStatus" type="submit" class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero"
            aria-expanded="true" aria-controls="collapseZero">Submit</button>

            <button *ngIf="buttonStatus" type="submit" class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
              aria-controls="collapseZero">Update</button>

          </div>
        </form>
        </div>
      </div>
    </div>
    <div class="card">
      <!-- <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
            aria-expanded="false" aria-controls="collapseTwo">
           Add Multiple Tolls
          </button>
        </h2>
      </div> -->
      <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;">
              <!-- <label >Choose an Excel File:</label>
                    <input  style="margin-left: 30px;" type="file" id="excelFile"  multiple size="50"> -->
              <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
                <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;" 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>
            <!-- (click)="uploadExcel()" -->
                <!-- <a type="button" download href="https://www.oneqlik.in/BulkDeviceAdd.ods"
                  style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
                  class="btn btn-primary">Download Excel</a> -->
              </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>{{'Toll Name' | translate}}</th>
                    <th>{{'Toll Tax' | translate}}</th>
                    <th>{{'Latitude' | translate}}</th>
                    <th>{{'Longitude' | translate}}</th>
                    <th>{{'Address' | translate}}</th>
                    <th>{{'Status' | translate}}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let failedDevices of faileduploadDevices">
                    <td style="cursor:pointer">{{failedDevices.tollName}}</td>
                    <td style="cursor:pointer">{{failedDevices.tollTax}}</td>
                    <td style="cursor:pointer">{{failedDevices.lat}}</td>
                    <td style="cursor:pointer">{{failedDevices.long}}</td>
                    <td style="cursor:pointer">{{failedDevices.address}}</td>
                    <td style="cursor:pointer">{{failedDevices.status}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
         
        </div>
      </div>
    </div>
   
  </div>





</div>