
<div class="InvoiceBody">
<div class="container d-flex justify-content-center">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header bg-transparent header-elements-inline">
          <div class="header-elements">
            <kendo-chip *ngIf="model.Prepared.Id !== '' "
                        [removable]="model.Approved.Id === ''"
                        (remove)="onCancelPrepared()"  >
              <span class="k-avatar-image invoice-chip"
                    [ngStyle]="{'background-image': photoBackground(model.Prepared.Id)}"></span>
              <span> prepared </span> by <span> {{model.Prepared.Display}}</span>
            </kendo-chip>

            <kendo-chip  *ngIf="model.Approved.Id !== '' "    [removable]="model.Paid.Id === ''"  (remove)="onRevoke()" >
              <span class="k-avatar-image invoice-chip"
                    [ngStyle]="{'background-image': photoBackground(model.Approved.Id)}"></span>
              <span> approved </span> by <span> {{model.Approved.Display}}</span>
            </kendo-chip>

            <kendo-chip *ngIf="model.Paid.Id !== '' " [removable]="model.Paid.Id !== ''" (remove)="onUnPaid()"  >
              <span class="k-avatar-image invoice-chip"
                    [ngStyle]="{'background-image': photoBackground(model.Paid.Id)}"></span>
              <span> paid </span> by <span> {{model.Paid.Display}}</span>
            </kendo-chip>

            <button *ngIf="model.Prepared.Id !== '' && model.Approved.Id === ''"
                    type="button" class="btn btn-primary" (click)="onApprove()">
              <b><i class="fa fa-paper-plane-o mr-1"></i></b> Approve
            </button>


            <div class="select-beneficiary" *ngIf="model.Prepared.Id === ''">
              <app-people-select #selectPeople [placeholder]= "'choose pay to'"
                                 [(ngModel)]="model.To"
                                 (ngModelChange)="onToChange($event)">
              </app-people-select>
            </div>

            <button *ngIf="model.Prepared.Id === '' && model.Approved.Id === '' && model.Rewards.length > 1"
                    type="button" class="btn btn-primary" (click)="onPrepared()">
              <b><i class="fa fa-paper-plane-o mr-1"></i></b> Finish
            </button>

            <div class="make-payment" *ngIf="model.Prepared.Id !== '' && model.Approved.Id !== '' && model.Paid.Id === ''">
              <kendo-numerictextbox [(ngModel)]="model.PayAmount"> </kendo-numerictextbox>
              <kendo-datepicker [(ngModel)]="model.PayDate"> </kendo-datepicker>
              <button  type="button" class="btn btn-primary" (click)="onPaid()">
                <b><i class="fa fa-paper-plane-o mr-1"></i></b> Paid
              </button>

            </div>

          </div>
        </div>
        <kendo-pdf-export #pdf paperSize="A4"  [scale]="0.6" margin="0.2cm">
        <div class="card-body">
          <div class="row">
            <div class="col-sm-6">
              <div class="mb-4 pull-left">
                <h6 class="left"><img src="assets/img/logo.png"></h6>
                <ul class="list list-unstyled mb-0 text-left">
                  <li>Suite 2304, Level 23, </li>
                  <li>International Tower One, </li>
                  <li>100 Barangaroo Ave,</li>
                  <li>Barangaroo NSW 2000</li>
                  <li>Australia</li>
                  <li>+61 2 8197 0062</li>
                </ul>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="mb-4 ">
                <div class="text-sm-right">
                  <h4 class="invoice-color mb-2 mt-md-2">Invoice #
                    <span *ngIf="model.Id > 0"> {{ model.Id  }} </span>
                    <span *ngIf="model.Id <= 0"> new </span>
                  </h4>
                  <table class="invoice-to-details">
                    <tr (click)="onEditBeneficiary()">
                      <td class="left">To</td><td class="middle">:</td><td class="right"><h5 class="my-2">
                       {{ model.To.Display }}</h5></td>
                    </tr>
                    <tr>
                      <td class="left">email</td><td class="middle">:</td><td class="right">
                      {{ model.To.Login}} </td>
                    </tr>
                    <tr>
                      <td class="left">Date</td><td class="middle">:</td><td class="right">
                      <span *ngIf="model.Ts.getFullYear() > 1900"> {{ model.Ts | date: "yyyy-MM-dd" }} </span>
                    </td>
                    </tr>
                    <tr>
                      <td class="left">Pay Date</td><td class="middle">:</td><td class="right">
                      <span *ngIf="model.PayDate.getFullYear() > 1900"> {{model.PayDate | date: "yyyy-MM-dd" }}
                      </span></td>
                    </tr>
                    <tr>
                      <td class="left">Paid Amount</td><td class="middle">:</td>
                      <td class="right"> {{model.PayAmount | currency}}</td>
                    </tr>
                    <tr>
                      <td class="left">Status</td><td class="middle">:</td>
                      <td class="right"> <h5 class="status"> {{model.Status | uppercase}} </h5> </td>
                    </tr>

                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
          <div #anchorSelectReward class="anchor"></div>
          <app-reward-select *ngIf="model.Prepared.Id === ''"
                             [selectedRewards]="rewards"
                             [showNonPaidOnly]="true"
                             (valueChange)="onChangeRewardList($event)">
          </app-reward-select>
          <kendo-popup class="hint" [anchor]="anchorSelectReward" *ngIf="hintSelectRewardsButton"
                       [animate]="false"
                       [margin]="{ horizontal: -20, vertical: -10 }">
            <kendo-icon [name]="'cursor'" [size]="'large'" [themeColor]="'warning'"></kendo-icon>
          </kendo-popup>
        <div class="table-responsive">
          <app-single-payout-rewards-list [items]="rewards">

          </app-single-payout-rewards-list>
        </div>
        <div class="card-body">
          <div class="d-md-flex flex-md-wrap">
            <div class="pt-2 mb-3 wmin-md-400 ml-auto">
              <h6 class="mb-3 text-left">Total due</h6>
              <div class="table-responsive">
                <table class="table">
                  <tbody>
                  <tr>
                    <th class="text-left">Subtotal:</th>
                    <td class="text-right">{{subTotal | currency}}</td>
                  </tr>
                  <tr>
                    <th class="text-left">Tax: <span class="font-weight-normal">(10%)</span></th>
                    <td class="text-right">{{tax | currency}}</td>
                  </tr>
                  <tr>
                    <th class="text-left">Total:</th>
                    <td class="text-right text-primary">
                      <h5 class="font-weight-semibold">{{Total | currency}}</h5>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        </kendo-pdf-export>
        <div class="text-right mt-3">
          <button type="button" class="btn btn-primary" (click)="pdf.saveAs('invoice.pdf')">
            <b><i class="fa fa-paper-plane-o mr-1"></i></b> Download invoice</button>
          <button type="button" class="btn btn-primary" (click)="onGotoRewardList()">
            <b><i class="fa fa-paper-plane-o mr-1"></i></b>Back to reward list</button>

        </div>
        <div class="card-footer">
          <span class="text-muted">
            While some lender can only provide residential home loans, At SuperCredit we have the experience and knoweldge in Residential, Commerical, Business & Development Finance. We will not only provide a lending solution for our customer but guide you through every single steps of the process.
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

