<div class="limiter pageHeight">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="height: 65px">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
      aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <h6 class="navbar-brand">Finance</h6>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <i style="
              cursor: pointer;
              float: left;
              font-size: 24px;
              margin-left: 16px;
              touch-action: none;
              user-select: none;
            " class="fas fa-file-excel" (click)="downloadExcel(pg_data.tbl)"></i>
        </li>
        <!-- <li class="nav-item">
          <i style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;"
            class="fas fa-file-pdf" (click)="downloadExcel()"></i>
        
        </li> -->
      </ul>
      <ul style="position: absolute; left: 50%; transform: translatex(-50%)"
        class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist" data-background-color="orange">
        <!-- <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#CustomerKYC" (click)="changeTab('customerKYC')" role="tab">Customer KYC</a>
        </li> -->
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" (click)="show(pg_data)" role="tab">Finance Approval</a>
        </li>
        <!-- <li class="nav-item">
          <a class="nav-link active" data-toggle="tab"  (click)="changeTab('issues')" role="tab">Issues</a>
        </li> -->
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <div style="float: right">
          <div style="width: 80px; float: right; margin-top: -8px">
            <button md-icon-button mdTooltip="Logout" style="float: right; outline: none; padding-top: 6px"
              (click)="logout()">
              <i class="fas fa-sign-out-alt" style="color: white; font-size: 20px"></i>
            </button>
            <app-notification></app-notification>
          </div>
        </div>

        <!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
      </form>
    </div>
  </nav>
  <div class="container mt-3 mb-3">
    <div class="row">
      <!--
        CLOSED
: 
5
PENDING
: 
1
REJECTED
: 
3
      -->
      <div class="card shadow-sm col-sm rounded p-1 mr-1 text-center" style="background-color: rgb(0, 192, 239)">
        <h6>Pending</h6>
        <span class="text-white">{{ pg_data.status.PENDING }}</span>
      </div>
      <div class="card shadow-sm col-sm rounded p-1 mr-1 text-center" style="background-color: rgb(0, 166, 90)">
        <h6>Closed</h6>
        <span class="text-white">{{ pg_data.status.CLOSED }}</span>
      </div>
      <div class="card shadow-sm col-sm rounded p-1 mr-1 text-center" style="background-color: rgb(243, 156, 18)">
        <h6>Reject</h6>
        <span class="text-white">{{ pg_data.status.REJECTED }}</span>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row p-3" style="background-color: #426e86">
      <div class="col-12 col-md-3 text-left">
        <!-- [(ngModel)]="search.user_id" 
        class="form-control form-control-sm"
          (change)="db_user_change(search)"
        -->
        <select id="dbselect123" [(ngModel)]="search.user_id">
          <option [value]="''">Select</option>
          <option *ngFor="let i of pg_data.userList" [value]="i._id">
            {{ (i.first_name || "") + (i.last_name || "") }}
          </option>
        </select>
      </div>
      <div class="col-12 col-md-2">
        <!-- (change)="db_status_change(search)" -->
        <select class="form-control form-control-sm" [(ngModel)]="search.status" (change)="status_changed(search)">
          <option [value]="''">Select</option>
          <option [value]="'REJECTED'">Rejected</option>
          <option [value]="'PENDING'">Pending</option>
          <option [value]="'CLOSED'">Closed</option>
          <option [value]="'Dispatched'">Dispatched</option>
        </select>
      </div>
      <div class="col-12 col-md-3">
        <!-- (change)="db_status_change(search)" -->
        <input id="datefrom" bsDatepicker class="form-control form-control-sm" style="height: 25px"
          [bsConfig]="bsConfig" [(ngModel)]="search.from" type="text" />
      </div>
      <div class="col-12 col-md-3">
        <!-- (change)="db_status_change(search)" -->
        <input id="dateto" bsDatepicker class="form-control form-control-sm" style="height: 25px" [bsConfig]="bsConfig"
          [(ngModel)]="search.to" type="text" />
      </div>
      <div class="col-12 col-md-1">
        <button class="btn-primary" (click)="db_status_change(search)">
          <i class="fas fa-search text-white"></i>
        </button>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <tbody>
          <tr>
            <th>Order Id</th>

            <th>Name</th>
            <th>phone</th>
            <th>email</th>
            <th>Date</th>
            <th class="text-right">Amount</th>
            <th>Address</th>
            <th>
              Status
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </th>
            <th>Cart Info</th>
            <th class="text-center">Upload</th>
            <th class="text-center">Download</th>
            <th class="text-center">Payment Status</th>
            <th class="text-center">Payment Ref.</th>
            <th class="text-center">Courier Name</th>
            <th class="text-center">Tracking Id</th>
          </tr>
        </tbody>
        <tbody>
          <tr *ngFor="let t of pg_data.tbl">
            <td>{{ t.order_id || "" }}</td>

            <td class="text-wrap">
              {{
              (t.buyer_first_name || "") + " " + (t.buyer_last_name || "")
              }}
            </td>
            <td class="text-nowrap">{{ t.phone }}</td>
            <td class="text-nowrap">{{ t.email }}</td>
            <td class="text-nowrap">
              {{ dt_f(t.purchased_on, "DD-MM-YYYY hh:mm a") }}
            </td>
            <td class="text-right">{{ t.amount | number }}</td>
            <td class="text-nowrap">
              {{ showAdd(t) }}
            </td>
            <td class="text-nowrap">
              <select [disabled]="'CLOSED' == t.status" class="form-control form-control-sm" [(ngModel)]="t.status"
                (change)="db_row_status_edit(t)">
                <!-- <option [value]="''">Select</option> -->
                <option [value]="'REJECTED'">Rejected</option>
                <option [value]="'PENDING'">Pending</option>
                <option [value]="'CLOSED'">Closed</option>
                <option [value]="'Dispatched'">Dispatched</option>


              </select>
            </td>
            <td class="text-center text-nowrap">
              <i class="fas fa-info" style="cursor: pointer" (click)="db_open_popup('#show_exampleModal', t)"></i>
            </td>
            <td class="text-center text-nowrap">
              <i class="fas fa-upload" style="cursor: pointer" (click)="fileUpload(t)"></i>
            </td>
            <td class="text-center">
              <!-- <a
              *ngIf="t.filePath != undefined"
              href="https://www.oneqlik.in/images/oneqlikProfilePic/timecomplexityisO(1)foranyalgowithcappedinput1693379818056.PNG"
              target="_blank"
              download="foranyalgowithcappedinput1693379818056.PNG"
              >download invoice</a
            > -->
              <span>
                <u style="cursor: pointer" *ngIf="t.filePath != undefined" (click)="fileDownload_blob(t)">
                  Download invoice
                </u>
                <!-- <u *ngIf="t.filePath != undefined" (click)="fileDownload(t)">
                download invoice
              </u> -->
              </span>
            </td>
            <td class="text-center">{{ t.payment_status || "" }}</td>
            <td class="text-center">{{ t.payment_reference || "" }}</td>
            <td class="text-center">{{ t.CourierName || "" }}</td>
            <td class="text-center">{{ t.TrackingId || "" }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<input type="file" id="db_file" class="d-none" (change)="onFileChanged($event)" />
<!-- db_popup -->

<!-- popup -->
<button type="button" id="show_exampleModal" class="btn btn-primary d-none" data-toggle="modal"
  data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header text-right" style="background-color: #2d4262; color: #fff">
        <h5 class="modal-title" id="exampleModalLabel">Cart Details</h5>
        <button id="examplemodal_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">
            <i class="fas fa-times text-white"></i>
          </span>
        </button>
      </div>
      <div class="modal-body p-1">
        <!-- {{ pg_data.row | json }} -->
        <table class="table table-striped table-hover">
          <thead>
            <tr style="background-color: #4b658d; color: #fff">
              <th>Model</th>
              <th class="text-right">Quantity</th>
              <th class="text-right">Price</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let i of pg_data.row.CartData">
              <td>{{ i.deviceName }}</td>
              <td class="text-right">{{ i.quantity | number }}</td>
              <td class="text-right">{{ i.price | number }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
        <!-- <button type="button" class="btn btn-primary">Submit</button> -->
      </div>
    </div>
  </div>
</div>

<!-- popup -->
<button type="button" id="show_status_changed_popup" class="btn btn-primary d-none" data-toggle="modal"
  data-target="#status_changed_popup">
  Launch demo modal
</button>
<!-- Modal 
 status_popup_data: any = {
    CourierName: "",
    TrackingId: "",
  }
-->
<div class="modal fade" id="status_changed_popup" tabindex="-1" aria-labelledby="status_changed_popupl"
  aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header text-right" style="background-color: #2d4262; color: #fff">
        <h5 class="modal-title" id="status_changed_popupl">Courier Details</h5>
        <button id="status_changed_popupl_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">
            <i class="fas fa-times text-white"></i>
          </span>
        </button>
      </div>
      <div class="modal-body p-1">
        <div class="container-fluid">

          <div class="form-group">
            <label for="exampleInputEmail1">Courier Name
              <span style="color:red;">*</span>
            </label>
            <input type="text" class="form-control" id="exampleInputEmail1" [(ngModel)]="status_popup_data.CourierName"
              aria-describedby="emailHelp">
            <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">TrackingId
              <span style="color:red;">*</span>
            </label>
            <input type="text" [(ngModel)]="status_popup_data.TrackingId" class="form-control"
              id="exampleInputPassword1">
          </div>
        </div>



      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="status_save_change(status_popup_data)">Submit</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
        <!-- <button type="button" class="btn btn-primary">Submit</button> -->
      </div>
    </div>
  </div>
</div>