<div class="checkout-wrapper">
<div class="header-title" style="background: url(assets/images/background/header.jpg);">
  <div class="container" id="mainDIV" >
  <div class="title">
      <h2>Checkout</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Aenean commodo ligula eget dolor</p>
    </div>
</div>
</div>
<div class="checkout sec-padding" style="background: url(assets/images/background/download.svg);">
<div class="container">

      <div fxLayout="row wrap" class="">
          <div class="billing-details  pr-15" fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50">
            <div class="billing-details-title">
                <h2>Billing Details</h2>
            </div>

              <form fxLayout="row wrap">
                  <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="mt-20 pr-5" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="First name (required)" #name="ngModel" ngModel name="name" required>
                          <mat-error *ngIf="name.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="pl-5 mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="Last name (required)" #email="ngModel" ngModel name="email" required>
                          <mat-error *ngIf="email.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-sm="100" class="mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="Company name (optional)" #subject="ngModel" ngModel name="subject">
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-sm="100" class="mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="Address" #address="ngModel" ngModel name="address">
                          <mat-error *ngIf="address.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-sm="100" class="mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="Town/city" #town="ngModel" ngModel name="town/city">
                          <mat-error *ngIf="town.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="mt-20 pr-5" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="State / Country (required)" #state="ngModel" ngModel name="state" required>
                          <mat-error *ngIf="state.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="pl-5 mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="Postcode / zip (required)" #postcode="ngModel" ngModel name="postcode" required>
                          <mat-error *ngIf="postcode.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="mt-20 pr-5" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="Email Address (required)" #email="ngModel" ngModel name="email" required>
                          <mat-error *ngIf="email.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div  fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50" class="pl-5 mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <input matInput placeholder="Phone (required)" #phone="ngModel" ngModel name="phone" required>
                          <mat-error *ngIf="phone.invalid">Please enter a valid message</mat-error>
                        </mat-form-field>
                  </div>
                  <div class="add-info">
                    <h3>Additional information</h3>
                    <p class="text-muted">Order notes (optional)</p>

                  </div>
                  <div  fxFlex="100" fxFlex.gt-sm="100" class="mt-20" ngClass.sm="mt-10" ngClass.xs="mt-10">
                      <mat-form-field class="w-100">
                          <textarea placeholder="Post content" matInput rows="4" ngModel name="content"></textarea>
                        </mat-form-field>
                  </div>
                  <div class="button-wrap" fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1">
                      <button class="btn-project" mat-raised-button color="accent" type="submit">Submit Review</button>
                    </div>
                  </form>
          </div>
          <div class="mainOrder-wrapper pl-15" fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50">
            <div class="main-order " >
              <div class="order-box">
                  <div class="title-box">
                      <div>Product <span class="tl-amount"> Total</span></div>
                  </div>
                  <ul class="price-list" *ngIf='buyProducts.length'>
                    <li *ngFor="let item of buyProducts">
                       {{ item.product.name }} × {{ item.quantity }}
                      <span>
                       {{ item.product.price * item.quantity | currency:productService?.currency:'symbol' }}
                        </span>
                    </li>
                </ul>
                <ul class="quantity" *ngIf='buyProducts.length <= 0'>
                  <li class="empty-checkout"> There are no products in cart </li>
                 </ul>
                <ul class="total-amount">
                  <li>
                    Subtotal <span class="amount">{{ getTotal() | async | currency:productService?.currency:'symbol'}}</span>
                  </li>
                  <li *ngIf='buyProducts.length'>
                    Shipping
                   <div class="shipping">
                      <div class="shopping-option">
                        <mat-radio-group>
                          <mat-radio-button *ngFor="let payment of payments" [value]="payment">{{payment}}</mat-radio-button>
                        </mat-radio-group>
                      </div>

                   </div>
                  </li>
              </ul>
              <ul class="total">
                <li>Total <span class="count">{{ getTotal() | async | currency:productService?.currency:'symbol'}}</span></li>
            </ul>
            <div class="paymentFinal">
              <mat-radio-group>
                <mat-radio-button fxLayout="column" *ngFor="let payment of paymantWay" [value]="payment">{{payment}}</mat-radio-button>
              </mat-radio-group>
            </div>
            <div class="order">
              <button class="btn-project" mat-raised-button color="accent" type="submit">PLACE ORDER</button>
            </div>
               </div>
          </div>
          </div>

       </div>
    </div>
</div>
</div>
