<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex mb-5" *ngIf="viewMode === 'edit'">
                    <span class="m-auto"></span>
                    <button class="btn btn-outline-secondary mr-3" (click)="viewMode = 'print'">Cancel</button>
                    <btn-loading btnClass="btn-primary" [loading]="saving" (click)="saveInvoice()">Save</btn-loading>
                </div>
                <div class="d-sm-flex mb-5" *ngIf="viewMode !== 'edit'">
                    <span class="m-auto"></span>
                    <button class="btn btn-outline-secondary mr-3 mb-sm-0 mb-3" routerLink="/invoice">Back To Invoices</button>
                    <button class="btn btn-outline-secondary mr-3 mb-sm-0 mb-3" (click)="viewMode = 'edit'">Edit Invoice</button>
                    <button class="btn btn-primary mb-sm-0 mb-3" (click)="print()">Print Invoice</button>
                </div>
                <!---===== Print Area =======-->
                <div id="print-area" *ngIf="viewMode !== 'edit'">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="font-weight-bold">Order Info</h4>
                            <p>#{{invoice.orderNumber}}</p>
                        </div>
                        <div class="col-md-6 text-sm-right">
                            <p><strong>Order status: </strong> {{invoice?.orderStatus}}</p>
                            <p><strong>Order date: </strong> {{invoice?.orderDate | date}}</p>
                        </div>
                    </div>
                    <div class="mt-3 mb-4 border-top"></div>
                    <div class="row mb-5">
                        <div class="col-md-6 mb-3 mb-sm-0">
                            <h5 class="font-weight-bold">Bill From</h5>
                            <p>{{invoice?.billFrom?.name}}</p>
                            <span style="white-space: pre-line">
                                {{invoice?.billFrom?.address}}
                            </span>
                        </div>
                        <div class="col-md-6 text-sm-right">
                            <h5 class="font-weight-bold">Bill To</h5>
                            <p>{{invoice?.billTo?.name}}</p>
                            <span style="white-space: pre-line">
                                {{invoice?.billTo?.address}}
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-hover mb-4">
                                <thead class="bg-gray-300">
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Item Name</th>
                                        <th scope="col">Unit Price</th>
                                        <th scope="col">Unit</th>
                                        <th scope="col">Cost</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let item of invoice?.items; let i = index">
                                        <th scope="row">{{i + 1}}</th>
                                        <td>{{item.name}}</td>
                                        <td>{{item.unitPrice}}</td>
                                        <td>{{item.unit}}</td>
                                        <td>{{item.unit * item.unitPrice}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="col-md-12">
                            <div class="invoice-summary float-right">
                                <p>Sub total: <span>{{invoice.currency}}{{subTotal}}</span></p>
                                <p>Vat: <span>
                                    {{invoice.currency}}{{(invoice.vat/100 * subTotal).toFixed(2)}}
                                </span></p>
                                <h5 class="font-weight-bold">Grand Total: <span>
                                    {{invoice.currency}}{{(invoice.vat/100 * subTotal + subTotal)}}
                                </span></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <!--==== / Print Area =====-->

                <!--==== Edit Area =====-->
                <div *ngIf="viewMode === 'edit'">
                    <form [formGroup]="invoiceForm">
                        <div class="row justify-content-between">
                            <div class="col-md-6">
                                <h4 class="font-weight-bold">Order Info</h4>
                                <div class="col-sm-4 form-group mb-3 pl-0">
                                    <label for="orderNo">Order Number</label>
                                    <input formControlName="orderNumber" type="text" class="form-control" id="orderNo"
                                        placeholder="Enter order number">
                                </div>
                            </div>
                            <div class="col-md-3 text-right">
                                <label class="d-block text-12 text-muted">Order Status</label>
                                <div class="pr-0 mb-4">
                                    <label class="radio radio-reverse radio-danger">
                                        <input type="radio" name="orderStatus" value="Pending" formControlName="orderStatus">
                                        <span>Pending</span>
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="radio radio-reverse radio-warning">
                                        <input type="radio" name="orderStatus" value="Processing" formControlName="orderStatus">
                                        <span>Processing</span>
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="radio radio-reverse radio-success">
                                        <input type="radio" name="orderStatus" value="Delivered" formControlName="orderStatus">
                                        <span>Delivered</span>
                                        <span class="checkmark"></span>
                                    </label>

                                </div>
                                <div class="form-group mb-3">
                                    <label for="picker1">Order Date</label>
                                    <div class="input-group">
                                        <input formControlName="orderDate" id="picker1" class="form-control text-right"
                                            placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #orderDatePicker="ngbDatepicker">
                                        <div class="input-group-append">
                                            <button class="btn btn-secondary" (click)="orderDatePicker.toggle()" type="button">
                                                <i class="icon-regular i-Calendar-4"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3 mb-4 border-top"></div>
                        <div class="row mb-5">
                            <div class="col-md-6" [formGroup]="invoiceForm.controls['billFrom']">
                                <h5 class="font-weight-bold">Bill From</h5>
                                <div class="col-md-10 form-group mb-3 pl-0">
                                    <input formControlName="name" type="text" class="form-control" id="billFrom"
                                        placeholder="Bill From">
                                </div>
                                <div class="col-md-10 form-group mb-3 pl-0">
                                    <textarea formControlName="address" class="form-control" id="" placeholder="Bill From Address"></textarea>
                                </div>
                            </div>

                            <div class="col-md-6 text-right" [formGroup]="invoiceForm.controls['billTo']">
                                <h5 class="font-weight-bold">Bill To</h5>
                                <div class="col-md-10 offset-md-2 form-group mb-3 pr-0">
                                    <input formControlName="name" type="text" class="form-control text-right" id="billFrom"
                                        placeholder="Bill From">
                                </div>
                                <div class="col-md-10 offset-md-2 form-group mb-3 pr-0">
                                    <textarea formControlName="address" class="form-control text-right" id=""
                                        placeholder="Bill From Address"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 table-responsive">
                                <table class="table table-hover mb-3">
                                    <thead class="bg-gray-300">
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Item Name</th>
                                            <th scope="col">Unit Price</th>
                                            <th scope="col">Unit</th>
                                            <th scope="col">Cost</th>
                                            <th scope="col"></th>
                                        </tr>
                                    </thead>
                                    <tbody formArrayName="items">
                                        <tr *ngFor="let item of invoiceForm.controls['items'].controls; let i = index;"
                                            [formGroupName]="i">
                                            <th scope="row">{{i + 1}}</th>
                                            <td>
                                                <input formControlName="name" type="text" class="form-control"
                                                    placeholder="Item Name">
                                            </td>
                                            <td>
                                                <input formControlName="unitPrice" type="number" class="form-control"
                                                    placeholder="Unit Price">
                                            </td>
                                            <td>
                                                <input formControlName="unit" type="number" class="form-control"
                                                    placeholder="Unit">
                                            </td>
                                            <td>
                                                {{invoiceForm.controls['items'].controls[i].controls['unitPrice'].value
                                                * invoiceForm.controls['items'].controls[i].controls['unit'].value}}
                                            </td>
                                            <td>
                                                <button class="btn btn-outline-secondary float-right" (click)="removeItem(i)">Delete</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <button class="btn btn-primary float-right mb-4" (click)="addItem()">Add Item</button>
                            </div>

                            <div class="col-md-12">

                                <div class="invoice-summary invoice-summary-input float-right">
                                    <p>Sub total: <span>{{invoiceForm.controls['currency'].value}}{{subTotal}}</span></p>
                                    <p class="d-flex align-items-center">Vat(%):<span>
                                            <input type="text" class="form-control small-input" formControlName="vat">
                                            {{invoiceForm.controls['currency'].value}}
                                            {{(invoiceForm.controls['vat'].value/100 * subTotal).toFixed(2)}}
                                        </span></p>
                                    <h5 class="font-weight-bold d-flex align-items-center">Grand Total:
                                        <span>
                                            <input type="text" class="form-control small-input" formControlName="currency">
                                            {{invoiceForm.controls['currency'].value}}
                                            {{(invoiceForm.controls['vat'].value/100 * subTotal + subTotal)}}
                                        </span>
                                    </h5>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
                <!--==== / Edit Area =====-->
            </div>
        </div>
    </div>
</div>