<div class="purchase_wrapper">
  <div class="container-fluid">
    <div class="loader_overlay" *ngIf="loader"></div>
    <div class="purchase_content_wrapper">
      <div class="row">
        <div class="col-md-4">
          <div class="product_gallery">
            <div class="product_gallery_inner" *ngIf="galleryImages;else nogalleryimage">
              <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
            </div>
            <ng-template #nogalleryimage>
              No Image Found
            </ng-template>
          </div>
        </div>
        <div class="col-md-8">
          <div class="product_details" *ngIf="orderDetails">
            <h1>{{orderDetails.product_name}}</h1>
            <!-- <div class="review" (click)="reviewBtn()">Write review</div> -->
            <div class="review" data-toggle="modal" data-target="#review" *ngIf="!userReviewed">Write review</div>
            <div class="clear"></div>
            <h2>{{orderDetails.short_description}}</h2>
            <div class="others">
              <!-- <h4><div>Color</div><span>Black</span></h4> -->
              <h4><div>Quantity</div><span>{{orderDetails.quantity}}</span></h4>
            </div>
            <div class="row">
              <div class="col-md-5">
                <div class="order_range prevent-click">
                  <ng5-slider [(value)]="verticalSlider2.minValue" [(highValue)]="verticalSlider2.maxValue" [options]="verticalSlider2.options"></ng5-slider>
                </div>
                <div class="order_range_details">
                  <span>
                    <h5>Order Confirmed</h5>
                    <p>{{orderDetails.datetime | date: "EEE, MMMM dd, yyyy"}}</p>
                  </span>
                  <span>
                    <h5>Packed</h5>
                    <p *ngIf="orderDetails.expected_delivery">{{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}}</p>
                  </span>
                  <span>
                    <h5>Shipped</h5>
                    <p *ngIf="orderDetails.expected_delivery">{{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}}</p>
                  </span>
                  <span>
                    <h5>Delivered</h5>
                    <p *ngIf="orderDetails.delivered">{{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}}</p>
                  </span>  
                </div>
                <div class="clear"></div>
              </div>
              <div class="col-md-7">
                <div class="order_delivery_details">
                  <div class="order_id">
                    {{orderDetails.format_order_id}}
                  </div>
                  <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '2' || orderDetails.odr_status === '3' || orderDetails.odr_status === '4' ) && orderDetails.expected_delivery != null)">
                    <h4> Expected Delivery On {{orderDetails.expected_delivery | date: "EEE, MMMM dd, yyyy"}} </h4>
                    <p> Item will be delivered </p>
                  </div>
                  <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '5' || orderDetails.odr_status === '6' || orderDetails.odr_status === '7' ) && orderDetails.delivered != null)">
                    <h4> Delivered On {{orderDetails.delivered | date: "EEE, MMMM dd, yyyy"}} </h4>
                    <p> Item has been delivered </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <h4>Total Amount</h4> 
                <h3>NGN {{orderDetails.amount}}</h3>
              </div>
              <div class="col-md-6">
                <h4>
                  <!-- <div class="need_invoice"> -->
                    <a class="need_invoice" target="_blank" href="{{serverUrl+'downloadOrdrDtls/'+orderDetails.format_order_id}}">Need invoice</a>
                  <!-- </div> -->
                </h4>
                
              </div>
            </div>
            
            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>








<!-- START-RATTING-DIV -->

<div class="modal" id="review">
  <div class="modal-dialog modal-md">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button"  #ratingModal class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="ratting_inner">
        <div class="loader_overlay" *ngIf="loader_review"></div>
        <form [formGroup]="rateForm" (ngSubmit)="rateFormSubmit(rateForm.value)">
          <div class="">
            <p>Rate this Product</p>
            <div class="ratting_star">
              <fieldset class="rating">
                <input type="radio" id="star5" name="rating" value="5" formControlName="rating"/>
                <label class = "full" for="star5" title="Awesome - 5 stars"></label>
                <input type="radio" id="star4half" name="rating" value="4.5" formControlName="rating"/>
                <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
                <input type="radio" id="star4" name="rating" value="4" formControlName="rating"/>
                <label class = "full" for="star4" title="Pretty good - 4 stars"></label>
                <input type="radio" id="star3half" name="rating" value="3.5" formControlName="rating"/>
                <label class="half" for="star3half" title="Meh - 3.5 stars"></label>
                <input type="radio" id="star3" name="rating" value="3" formControlName="rating"/>
                <label class = "full" for="star3" title="Meh - 3 stars"></label>
                <input type="radio" id="star2half" name="rating" value="2.5" formControlName="rating"/>
                <label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
                <input type="radio" id="star2" name="rating" value="2" formControlName="rating"/>
                <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
                <input type="radio" id="star1half" name="rating" value="1.5" formControlName="rating" />
                <label class="half" for="star1half" title="Meh - 1.5 stars"></label>
                <input type="radio" id="star1" name="rating" value="1" formControlName="rating"/>
                <label class = "full" for="star1" title="Sucks big time - 1 star"></label>
                <input type="radio" id="starhalf" name="rating" value="0.5" formControlName="rating" />
                <label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
              </fieldset>
              <div class="clear"></div>
            </div>
          </div>
          <hr>
          <div class="">
            <p>Give a Title</p>
            <input class="title_input" placeholder="Type Here" formControlName="title"
              [ngClass]="{'input_error': !rateForm.controls['title'].valid && (rateForm.controls['title'].dirty || rateForm.controls['title'].touched || rateFormClick),
                        'input_success': rateForm.controls['title'].valid}" (click)="rateFormClick = false">
            <div class="s_error" *ngIf="(!rateForm.controls['title'].valid && rateForm.controls['title'].touched) || (!rateForm.controls['title'].valid && rateFormClick)">
                <div class="s_validation" *ngIf="rateForm.controls['title'].hasError('required')">{{errorMsg.errorList.required}} </div>
            </div>
            
          </div>
          <hr>
          <div class="">
            <p>Write a Review</p>
            <input class="title_input" placeholder="Type Here" formControlName="description"
              [ngClass]="{'input_error': !rateForm.controls['description'].valid && (rateForm.controls['description'].dirty || rateForm.controls['description'].touched || rateFormClick),
                        'input_success': rateForm.controls['description'].valid}" (click)="rateFormClick = false">
            <div class="s_error" *ngIf="(!rateForm.controls['description'].valid && rateForm.controls['description'].touched) || (!rateForm.controls['description'].valid && rateFormClick)">
                <div class="s_validation" *ngIf="rateForm.controls['description'].hasError('required')">{{errorMsg.errorList.required}} </div>
            </div>
          </div>
          <div *ngIf="rateFormResponse" class="s_alert" [ngClass]="(rateFormResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
              <strong>{{rateFormResponse.message}}<br></strong>
          </div>
          <hr>
          <button class="submit_btn" (click)="rateFormClick = true">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- END-RATTING-DIV -->