<div class="custom_loader_wrapper" *ngIf="loader">
    <div class="custom_loader_ring"></div>
</div>
<header class="provider_header">
    <div class="row">
      <div class="col-md-6">
        <h4> {{'transaction.Forex Transaction List' | translate}}</h4>
      </div>
      <div class="col-md-6 textRight relative">
          <button class="logout" (click)="goToPage('delivery/driverlist')">
            <img src="assets/images/asset_driver.png">
           {{'transaction.Driver Management' | translate}}</button>
          <button class="logout" (click)="goToPage('delivery/editprovider')">
            <img src="assets/images/asset_settings.png">
           {{'transaction.Settings' | translate}}</button>
          <button class="logout" (click)="logout()">
              <img src="assets/images/asset_logout.png">
             {{'transaction.Logout' | translate}}</button>
          <img src="assets/images/asset_logo1.png">
          <span (click)="goToPage('delivery/changepin')"> {{'transaction.Change PIN' | translate}}</span>
      </div>
    </div>
  </header>
<section>
    <div class="provider_content">
      <h3> {{'transaction.Manage Transaction' | translate}}</h3>
      <div class="provider_inner_content">
          <div class="alert alert-danger alert-dismissible" *ngIf="error">
              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
              <strong> {{'transaction.Warning' | translate}}</strong> {{responseMsg}}
          </div>
          <div class="alert alert-success alert-dismissible" *ngIf="success">
              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
              <strong> {{'transaction.Success' | translate}}</strong>  {{'transaction.Forex provider removed successfully' | translate}}
            </div> 
          <div class="table-responsive">          
              <table class="table">
                <thead>
                  <tr>
                    <th> {{'transaction.Customer' | translate}}</th>
                    <th> {{'transaction.Provider' | translate}}</th>
                    <th> {{'transaction.Phone' | translate}}</th>
                    <th> {{'transaction.Location' | translate}}</th>
                    <th> {{'transaction.Pincode' | translate}}</th>
                    <th> {{'transaction.Currency' | translate}}</th>
                    <th> {{'transaction.Amount' | translate}}</th>
                    <th>{{'transaction.Forex Amount' | translate}}</th>
                    <th> {{'transaction.Date' | translate}}</th>
                    <th> {{'transaction.Driver' | translate}}</th>
                    <th> {{'transaction.Status' | translate}}</th>
                    <th class="textRight"> {{'forexprovider.Action' | translate}}</th>
                  </tr>
                </thead>
                <tbody *ngIf="transactionList">
                  <tr *ngFor="let tansaction of transactionList; let i = index">
                    <td>{{getCustomer(tansaction.user_info,'FirstName')}}</td>
                    <td>{{getCustomer(tansaction.provider,'name')}}</td>
                    <td>{{getCustomer(tansaction.user_info,'MobileNumber')}}</td>
                    <td>{{getCustomer(tansaction.user_info,'City')}}</td>
                    <td>{{getCustomer(tansaction.user_info,'Pincode')}}</td>
                    <td>{{tansaction.currency}}</td>
                    <td>SAR {{tansaction.amount}}</td>
                    <td>{{tansaction.symbol + tansaction.convert_price}}</td>
                    <td>{{tansaction.book_date}}</td>
                    <td *ngIf="tansaction.driver_info">{{getCustomer(tansaction.driver_info,'name')}}</td>
                    <td *ngIf="!tansaction.driver_info"><span style="color: blue" data-toggle="modal" data-target="#edit" (click)="assignClick(i)" *ngIf="tansaction.status == 1 || tansaction.status == 2">Assign</span></td>
                    <td>{{get_status(tansaction.status)}}</td>
                    <td><button class="edit_btn" data-toggle="modal" data-target="#edit" (click)="assignClick(i)" *ngIf="tansaction.status ==1 || tansaction.status == 2"></button></td>
                  </tr>
                </tbody>
              </table>
              <div class="forex_pagination" *ngIf="meta">
                <ul *ngIf="userDetails">
                    <li *ngFor="let i of getNumber(meta.total_pages); let j = index" [ngClass]="{'activeClass': meta.current_page == j+1}" (click)="getTransaction(userDetails.id, j+1)">{{j+1}}</li>
                </ul>
               
              </div>
          </div>
      </div>
    </div>
  </section>


  <div id="edit" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
  
          <div class="forex_modal_wrapper">
              <div class="alert alert-danger alert-dismissible" *ngIf="assignError">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                  <strong>{{'transaction.Warning!' | translate}}</strong> {{'transaction. Assign Driver failed' | translate}}
              </div>
            <div class="forex_modal_header">
                <h5 class="floatLeft"> {{'transaction.Assign Driver' | translate}}</h5>
                <button type="button" class="close floatRight" data-dismiss="modal">&times;</button>
                <div class="clear"></div>
            </div> 
            <div class="forex_inner_wrapper" *ngIf="selectedData">
              <div class="row">
                    <div class="col"><p> {{'transaction.User' | translate}}</p></div>
                    <div class="col"><p>{{getCustomer(selectedData.user_info,'FirstName')}} {{getCustomer(selectedData.user_info,'LastName')}}</p></div>
              </div>
              <div class="row">
                  <div class="col"><p> {{'transaction.Location' | translate}}</p></div>
                  <div class="col"><p>{{getCustomer(selectedData.user_info,'City')}}</p></div>
                </div>
                <div class="row">
                        <div class="col"><p> {{'transaction.Amount' | translate}}</p></div>
                        <div class="col"><p>{{selectedData.symbol + selectedData.convert_price}}</p></div>
                    </div>
                <div class="row" *ngIf="driverList">
                    <div class="col-md-12">
                      <p> {{'transaction.Driver' | translate}}</p>
                      <select class="provider_input" (change)="selectDriver($event.target.value)" #driver>
                          <option disabled hidden value="" *ngIf="driverList.length === 0" selected="selected"> {{'transaction.No Drivers available currently!' | translate}}</option>
                          <option disabled hidden value="" *ngIf="driverList.length > 0" selected="selected"> {{'transaction.Assign Driver' | translate}}</option>
                          <option *ngFor="let provider of driverList" [value]="provider.id">{{provider.name}}</option>
                         
                        </select>
                    </div>
                </div>
            </div>
            <div class="forex_modal_footer_btn_bay textRight">
              <button *ngIf="driverList && driverList.length > 0" class="okay_btn" (click)="driverAssign()" [disabled]="driverStatus" data-dismiss="modal"> {{'transaction.Assign' | translate}}</button>
              <button class="cancel_btn" data-dismiss="modal"> {{'transaction.Cancel' | translate}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>