<div class="topDiv">   
  <div *ngIf="!showNav" class="row" style="margin: 0;box-shadow: 0px 2px 6px 1px #868686;margin-bottom: 3px;position: absolute;height: 65px; z-index: 1111; width: 100%; background: white;">
          <div class="col-sm-2 col-md-2 col-lg-2" style="text-align: center; padding: 10px;">
                  <img style="width:150px" src={{this.logo_1}} alt="AVATAR">
          </div>
          <div class="col-sm-6 col-md-6 col-lg-6" >         
                <div style="text-align: right;padding-top: 20px;">         
                        <span style="font-size: 18px; font-weight: 400; color: #2a2828; padding-right: 30px;cursor:pointer;font-weight:500">Become a Reseller</span>
                        <span style="font-size: 18px; font-weight: 400; color: #767474;">Support Contact</span>
                        <span style="font-size: 18px; font-weight: 500; padding-left: 20px;"><a>{{supportContact}}</a></span>
                   
                </div>
          </div>
          <div class="col-sm-4 col-md-4 col-lg-4">      
                  <div style="text-align: center;">
                          <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: -4px; width: 125px; color:blue" (click)="goBack()">< Go Back</button>
                          <a type="button" class="btn btn-primary-outline" class="txt1" href={{mainSiteurl}} style="padding-top: 4px;border: 1px solid black; margin-top: 18px; margin-left: 20px; width: 125px; height: 34px; text-align: center; border-radius: 4px;">Go to Site</a>    
                  </div>
          </div>            
  </div>
                
     
  <div clas="row" class="row" style="max-height: 100vh; padding-top: 4%;height: 100vh; background: #fdfdfd;">
      <div class="col-sm-12 col-md-7 col-lg-7" style="padding: 0px 100px 0px 100px;max-height: 92vh;height: 92vh;overflow: auto;">
        <div class="row" style="margin-top: 40px;border-bottom: 4px solid whitesmoke;padding: 0;margin-left: 0;margin-right: 0;" *ngFor="let buyPro of message">
          <div class="col-5">
                <img class="d-block w-100" style="float: right; height: 210px;width: 75%!important;padding: 30px;" src="{{buyPro.imageUrl[0]}}" alt="Product Image">
          </div>
          <div class="col-7" style="padding-top: 30px;">
                <div style="display: flex">
                        <label  for="name" style="font-weight: 600;">Device Name</label>
                        <p style="margin-bottom: 0;margin-left: 50px;">{{buyPro.device_name}}</p>
                </div>
                <div style="display: flex">
                        <label  for="model" style="font-weight: 600;">Model</label>
                        <p style="margin-bottom: 0;margin-left: 94px;">{{buyPro.raw.product_specification.model_number}}</p>
                    
                </div>
                <div style="display: flex">
                        <label  for="price" style="font-weight: 600;">Price</label>
                        <p style="margin-bottom: 0;margin-left: 108px;">INR {{buyPro.discountPrice}}</p>
                </div>
              
            
            
                  <div style="display: flex">
                        <label for="quantity" style="font-weight: 600;">Quantity</label>
                        <input type="number" [(ngModel)] = "productQuantity" class="form-control" id="quantity" name="quantity" min="1" max="5000" style="width: 15%;margin-left: 80px;">
                  </div>
          </div>
        </div>
             
      </div>
      <div class="col-sm-12 col-md-5 col-lg-5" style="padding: 40px 80px 40px 80px;">
        <div class="row"> 
                <div class="col-12">
                        <p style="margin-bottom: 0;background: #ca1717;padding: 10px;text-align: center;color: white;font-weight: 700;font-size: 20px;">Order Summary</p>
                        <div class="tbl" style="">
                                <table style="width: 100%;border: 1px solid;">
                                        <tr style="background: #bac7b2;color: white;">
                                                <th style="padding-left: 10px;">Model</th>
                                                <th style="padding-left: 10px;">Quantity</th>
                                                <th style="padding-left: 10px;">Amount</th>
                                        </tr>
                                        <tr *ngFor="let order of message" style="border-bottom: 1px solid #d6d6d6;">
                                                <td style="padding-left: 10px;">
                                                        <p style="margin: 5px 0px 0px 0px;">{{order.device_name}}</p>
                                                        <p style="margin: 0px 0px 5px 0px;">{{order.raw.product_specification.model_number}}</p>
                                                </td>
                                                <td style="padding-left: 10px;">{{order.quantity?order.quantity:1}}</td>
                                                <td style="padding-left: 10px;">{{order.discountPrice}}</td>
                                        </tr>
                                        <tr style="border-bottom: 1px solid #d6d6d6;">
                                                <td colspan="2" style="padding-left: 10px;">TOTAL</td>
                                                <td colspan="1" style="padding-left: 10px;"><p>{{totalAmount}}</p></td>
                                        </tr>
                                        <tr style="border-bottom: 1px solid #d6d6d6;">
                                                <td colspan="2" style="padding-left: 10px;">GST</td>
                                                <td colspan="1" style="padding-left: 10px;">18%</td>
                                        </tr >
                                        <tr style="border-bottom: 1px solid #d6d6d6;">
                                                <td colspan="2" style="padding-left: 10px;">Payable Amount</td>
                                                <td colspan="1" style="padding-left: 10px;">{{payableAmt}}</td>
                                        </tr>
                                </table>  
                        </div>
                </div>
        </div>
        <div class="row" style="text-align: center;margin-top: 40px;">
                <div class="col-12">
                        <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="buyNow()">{{'Proceed' | translate}}</button>
                </div>
        </div>
      </div>
  </div>
  </div>
  




