Untitled

<ngx-spinner bdColor="rgba(0, 0, 0, 0.8)" size="medium" color="#15e7f6" type="square-loader" [fullScreen]="true"><p
        style="color: white"> Loading... </p></ngx-spinner>

<div class="modal-content">
    <div class="modal-header"><h4 class="modal-title">Invoice</h4>
        <button type="button" aria-label="Close" class="close" (click)="closeModal()"><span aria-hidden="true">×</span>
        </button>
    </div>
    <form name="form" (ngSubmit)="save()">
        <div class="modal-body">
            <div class="bd-example">
                <dl class="row">
                    <dt class="col-sm-6">
                        <p>{{projectName}} ({{invoice.startDate | date:'dd/MM/yyyy'}} - {{invoice.endDate | date:'dd/MM/yyyy'}})</p>
                    </dt>
                    <dt class="col-sm-6">
                        <div class="row justify-content-end">
                            <ng-select [disabled]="action === 'View'" [items]="statusList" [multiple]="false" name="status"
                                       [(ngModel)]="invoice.status" [clearable]="false" style="right: 8px;"></ng-select>
                            <button type="button" class="btn btn-primary mb-3 mr-3" (click)="downloadInvoicePdf()">
                                <span class="cil-cloud-download"></span> Download PDF
                            </button>
                        </div>
                    </dt>
                </dl>
                <dl class="row">
                    <dt class="col-sm-12">
                        <p>Payer Information</p>
                    </dt>
                    <dt class="col-sm-6">
                        <div class="d-flex align-items-center new-user-field">
                            <label class="form-label">
                                <h6>Name/Company:</h6>
                            </label>
                        </div>
                        <input [disabled]="action === 'View'" type="text" class="form-control" name="fullName"
                               [(ngModel)]="fullName">
                    </dt>
                    <dt class="col-sm-3">
                        <div class="d-flex align-items-center new-user-field">
                            <label class="form-label">
                                <h6 class="new-user-field__title">Email:</h6>
                            </label>
                        </div>
                        <input [disabled]="action === 'View'" type="text" class="form-control" name="email"
                               [(ngModel)]="email">
                    </dt>
                    <dt class="col-sm-3">
                        <div class="d-flex align-items-center new-user-field">
                            <label class="form-label">
                                <h6 class="new-user-field__title">Tel:</h6>
                            </label>
                        </div>
                        <input [disabled]="action === 'View'" type="text" class="form-control" name="tel"
                               [(ngModel)]="tel">
                    </dt>
                </dl>
                <br>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-5">
                            Total Price
                        </dt>
                        <dt class="col-sm-3"></dt>
                        <dt class="col-sm-3 text-right">{{invoice.totalPrice | number: '1.5-5'}} {{invoice.priceUnit}}</dt>
                    </dl>
                    <hr>
                    <dl *ngFor="let item of items; let i=index; trackBy:trackByFn">
                        <dl class="row">
                            <dt class="col-sm-5" (click)="setIsCollapsed(i, item.serviceId, true)">
                    <span *ngIf="item[item.serviceId]" (click)="item[item.serviceId] = !item[item.serviceId]"
                          [attr.aria-expanded]="!item[item.serviceId]"
                          aria-controls="collapseBasic"
                          class="cil-caret-right"></span>
                                <span *ngIf="!item[item.serviceId]"
                                      (click)="item[item.serviceId] = !item[item.serviceId]"
                                      [attr.aria-expanded]="!item[item.serviceId]"
                                      aria-controls="collapseBasic"
                                      class="cil-caret-bottom"></span>
                                {{item.serviceId}}
                            </dt>
                            <dt class="col-sm-3"></dt>
                            <dt class="col-sm-3 text-right">{{item.sumPrice | number: '1.5-5'}} {{invoice.priceUnit}}</dt>
                        </dl>
                        <div [collapse]="item[item.serviceId]" [isAnimated]="true" *ngFor="let data of item.data">
                            <dl class="row">
                                <dt class="col-sm-5" style="font-weight: 500; padding-left: 27px; font-size: 13px;">
                                <span *ngIf="data[data.sku]" (click)="data[data.sku] = !data[data.sku]"
                                      [attr.aria-expanded]="!data[data.sku]"
                                      aria-controls="collapseBasic"
                                      class="cil-caret-right"></span>
                                    <span *ngIf="!data[data.sku]" (click)="data[data.sku] = !data[data.sku]"
                                          [attr.aria-expanded]="!data[data.sku]"
                                          aria-controls="collapseBasic"
                                          class="cil-caret-bottom"></span>
                                    {{data.sku}}
                                </dt>
                                <dt class="col-sm-2"></dt>
                                <dt class="col-sm-3"></dt>
                            </dl>
                            <div [collapse]="data[data.sku]" [isAnimated]="true"
                                 style="font-weight: 500; font-size: 12px;">
                                <dl class="row" *ngFor="let price of data.prices">
                                    <dt class="col-sm-5"
                                        style="padding-left: 43px; font-weight: 500;">{{price.description}}</dt>
                                    <dt class="col-sm-3 text-right"
                                        style="font-weight: 500; font-size: 11px;">{{price.amount | number: '1.5-5'}} {{price.amountUnit}}</dt>
                                    <dt class="col-sm-3 text-right"
                                        style="font-weight: 500; font-size: 11px;">{{price.price | number: '1.5-5'}} {{invoice.priceUnit}}</dt>
                                </dl>
                            </div>
                        </div>
                    </dl>
                    <hr>
                    <dl class="row">
                        <dt class="col-sm-5">
                            Total Price
                        </dt>
                        <dt class="col-sm-3"></dt>
                        <dt class="col-sm-3 text-right">{{invoice.totalPrice | number: '1.5-5'}} {{invoice.priceUnit}}</dt>
                    </dl>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="closeModal()">Close</button>
                <button *ngIf="action !== 'View'" class="btn btn-primary">Save</button>
            </div>
        </div>
    </form>
</div>