<div class="purchase_wrapper">
    <div class="container-fluid">
      <div class="loader_overlay" *ngIf="loader"></div>
      <div class="summary_wrapper">
        <h3>Order Summary</h3>
        <div class="summary_wrapper_inner">
          <h4>Product Details</h4>
          <div class="row">
            <div class="col-md-6" *ngIf="productDetails">
              <div class="image_div">
                  <img src="{{(productDetails.images[0] && productDetails.images[0].image)?imageServer + productDetails.images[0].image:''}}" onerror="this.src='assets/images/user_avatar.jpg'">
              </div>
              <div class="image_detail">
                <h5>{{productDetails.product_name}}</h5>
                <p>{{productDetails.short_description}}</p>
              </div>
              <div class="clear"></div>
            </div>
            <div class="col-md-6">
              <!-- <h6>
                <span class="head">Color</span>
                <span>Black</span>
              </h6> -->
            </div>
          </div>
          <hr>
          <h4>Delivery Address</h4>
          <div class="row">
            <div class="col-md-6" *ngIf="userAddress">
                <h2>{{userAddress.name}}<span class="address">({{userAddress.address_type === '1'?'Home':'Office'}})</span><span class="number">{{userAddress.phone_no}}</span></h2>
                <p>{{userAddress.house_no+', '+userAddress.area+', '+userAddress.state+', '+userAddress.city}} 
                  <!-- <strong>Pin 682030</strong>  -->
                </p>
            </div>
            <div class="col-md-6">
                <!-- <p>Delivery Expected by Thursday 29 April, 2019</p> -->
              </div>
          </div>
          <hr>
          <h4>Payment Details</h4>
          <div class="row" *ngIf="prdtData">
            <div class="col-md-6">
                <p class="p0">Quantity </p>
            </div>
            <div class="col-md-6">
                <p><strong>{{prdtData.quantity}}</strong></p>
              </div>
          </div>
          <div class="row" *ngIf="prdtData">
              <div class="col-md-6">
                  <p>Total Amount</p>
              </div>
              <div class="col-md-6">
                  <p><strong style="font-size: 18px;">NGN {{prdtData.total_amount}}</strong></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <p>Order Confirmation mail will be sent to your mail ID <a>{{loginDetails.email}}</a> </p>
                </div>
                <div class="col-md-6">
                    <button class="continue_btn" (click)="paymentButton()">Continue</button>
                    <!-- <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span> -->
                    <div class="clear"></div>
                  </div>
              </div>
            <hr>
        </div>
      </div>
    </div>
</div>

<button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>

<div class="modal" id="failure">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper">
                <div class="modal_close" data-dismiss="modal"> × </div>
           <div class="modal-body quote_modal">
               <div class="login_modal_content">
                   <div class="login_modal_inner">
                    <div class="login_success">
                        <img src="assets/images/asset_error.png">
                        <h4>Something Went Wrong.. Try Again</h4>
                    </div>

                       <div class="row">
                           <div class="col-md-12 textCenter" style="padding-top:40px;">
                                <button class="log_btn" data-dismiss="modal">Close</button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>