<div class="card">
  <div class="card-header">
    <div class="col-12">
      <span style="color:#855353;font-size:20px;font-weight: 500;">E Chalan</span>
      <button style="float: right !important;" class="btn btn-danger btn-sm float-left ml-2" 
      (click)="this.dialogRef.close()">Close <i class="fas fa-times-circle"></i></button>
      <button style="float: right !important;" class="btn btn-danger btn-sm float-left ml-2" (click)="fetchNewChalan()">Fetch new chalan </button>
    </div>
  </div>
<div id="toast">
  <div id="desc">{{data_descip}}</div>
</div>
  <div class="card-body">
      <div class="loading" *ngIf="Load">Loading&#8230;</div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th style="text-align: left;">{{'Chalan No.' | translate}}</th>
              <th style="text-align: left;">{{'Date' | translate}}</th>
              <th style="text-align: left;">{{'Owner' | translate}}</th>
              <th style="text-align: left;">{{'Vehicle Class' | translate}}</th>
              <th style="text-align: left;">{{'Status' | translate}}</th>
              <th style="text-align: left;">{{'Payment Date' | translate}}</th>
              <th style="text-align: left;">{{'Document No' | translate}}</th>
              <th style="text-align: left;">{{'Payment Source' | translate}}</th> 
               <th style="text-align: left;">{{'Amount' | translate}}</th>
              <th style="text-align: left;">{{'Offence' | translate}}</th>
              <th style="text-align: left;">{{'View' | translate}}</th>

            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of main">
              <td>{{item.challan_no}}</td>
              <td>{{item.date_time | date:'medium'}}</td>
              <td>{{item.owner_name}}</td>
              <td>{{item.vehicle_class}}</td>
              <td>{{item.challan_status}}</td>
              <td>{{item.payment_date | date:'medium'}}</td>
              <td >{{item.doc_no}}</td>
              <td>{{item.payment_source}}</td>
              <td>{{item.amount}}</td>
              <td>
                <span *ngIf="item.offences[0]">{{item.offences[0].offence_name}}</span>
                <span *ngIf="!item.offences[0]">N/A</span>
                </td>
                <td>
                  <a target="_blank" [href]="item.receipt_url" class="btn btn-primary white-text">
                     <i class="fas fa-info-circle"></i>
                  </a>
                </td>
              
            </tr>
            <tr *ngIf="main.length==0">
             <div  style="text-align: center;" class="text-center">
               <h5 style="position: absolute;left: 41%;top: 82%;">No Data Found</h5>

             </div>
            </tr>
          </tbody>
        </table>

      </div>
    </div>

  <!-- </div> -->

