<app-main-header></app-main-header>
<app-bulletin-details></app-bulletin-details>
<div class="mytraining"   >
  <div class="training_in">
    <div class="training_left"> 
        <div class="his_topic">
            PRODUCT DESCRIPTION LIST
          </div>
      <div class="left_card">
        <div class="inner_load" *ngIf="loader">
          <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"
              />
            </path>
          </svg>
          <p>Just a moment...</p>
        </div>
        <div>
        </div>
        <div class="tab-content" id="myTabContent" *ngIf="!loader">
          <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab"  >  
            <div class=" "  >
              <div   class="list_div" >
                <div class="card_img">
                  <img src="{{prod_desc.images}}" />
                </div>
                <div class="card_cont">
                  <h3> {{prod_desc.name}}</h3>
                  <!-- <h3> {{prod_desc.short_description}}</h3> -->
                  <p> {{prod_desc.description}}</p>
                 
                  <h4 class="note"  >Price: <span>Rs {{prod_desc.min_custom_price}} to {{prod_desc.max_custom_price}}</span></h4>
                </div> 
               
              </div>
            </div>
            <div *ngIf="prod_desc.price_type=='Range'">
              <h4 style="font-weight: bold;float:left;">Enter Price : </h4>
              <input type="tel" id="amount" class="form-control password pin_input" [(ngModel)]="amount"   onkeypress="return String.fromCharCode(event.charCode).match(/[0-9 ]/g) != null"   autocomplete="off" required>
            </div>
            <div class="color_error shake" *ngIf="mpin_error" style="padding-top: 16px;">
                <a class="text-left shake">
                    <img src="assets/img/error.png" />Please enter amount </a>
            </div>
            <button class="btn primary fixed float-right" (click)="onSubmitRedeem()" *ngIf="prod_desc.price_type=='Range'">Submit</button>
            <div *ngIf="prod_desc.price_type=='Slab'">
                <p style="font-weight: bold;">Select Price : </p>
                <p *ngFor="let list of slab_arr;let i=index;" class="slab_css nav-item" [ngClass]="(is_selected[i]=='selected') ? 'active':''"  ><span (click)="selectedItem(list,i)">{{list}}</span></p>
              </div>
              <button class="btn primary fixed float-right" (click)="onSubmitRedeem()" *ngIf="prod_desc.price_type=='Slab'">Submit</button>
          </div> 
           
          </div> 
        </div>
      </div>
      <!-- <div class="training_right">
          <div class="bottom_content">
              <div class="row align-items-center">
                <div class="col amt_box" >
                    <h3>₹ {{current_amount}}</h3>
                    <p>Available Balance</p>
                </div>
              </div>
          </div>
          <button class="btn primary clear" type="submit" (click)="onClickPurchase()" *ngIf="current_amount>0">PURCHASE NOW</button>
          <button class="btn primary clear" type="submit"  style="cursor:not-allowed" *ngIf="current_amount==0">PURCHASE NOW</button>
      </div> -->
    </div>
   
  </div>
  <div class="modal" id="pinSuceessModalCenter" tabindex="-1" role="dialog" aria-labelledby="pinModalCenter" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row align-items-center">
                    <div class="col col-sm-12 logo modalcenter"  >
                        <img src="assets/img/circle-yes.png" style="width:70px"/>
                    </div>
                    <div class="main_content modalcenter" >
                      <div class="col col-sm-12 content section1 modalcenter">
                          <h5> Your order has been placed successfully</h5>
                          <button class="btn primary fixed" (click)="onSubmit()">OK</button>
                        </div>
                  </div>
                    </div>
                 
            </div>
        </div>
    </div>
</div>
<div class="modal" id="progressModalCenter" tabindex="-1" role="dialog" aria-labelledby="pinModalCenter" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
          <div class="modal-body">
              <div class="row align-items-center">
                  <div class="col col-sm-12 logo modalcenter"  >
                      <img src="assets/img/success_orange.png" style="width:70px"/>
                  </div>
                  <div class="main_content modalcenter" >
                    <div class="col col-sm-12 content section1 modalcenter">
                        <h5> Your order is under progress</h5>
                        <button class="btn primary fixed" (click)="onSubmitProgress()">OK</button>
                      </div>
                </div>
                  </div>
               
          </div>
      </div>
  </div>
</div>
 
  