<!-- <div class="container">
  <div class="row">
    <div class="col-12">
      <p>Share Points</p>
    </div>
  </div>
  <div class="row">
    <div class="col-12">

    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>Total Available Points</p>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="SharePoint()">{{'SUBMIT' | translate}}</button>
                <button style="background-color: red;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
    </div>
  </div>

</div>-->


<div class="mainDiv">
  <div class="row" style="text-align: center;padding-top: 6px;margin-bottom: 6px;font-size: 18px;">
    <div class="col-sm-12 col-md-12 col-lg-12">
    <label for="exampleInputEmail1" style="font-weight: 500;">Add Points</label>
    </div>
  </div>
  <div class="row"> 
    <div class="col-sm-12 col-md-12 col-lg-12">
    <label for="exampleInputEmail1" style="font-weight: 500;">Points</label>
    <input type="number" class="form-control" id="pointshare" [(ngModel)]="pointShareCount" aria-describedby="point" placeholder="Enter Points">
    <small id="pointssharee" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type No. of points to be shared</small>
    </div>
  </div>
  <div class="row"> 
    <div class="col-sm-12 col-md-12 col-lg-12">
    <label for="exampleInputEmail1" style="font-weight: 500;">Price/Unit</label>
    <input type="number" class="form-control" id="perunitprice" [(ngModel)]="perunitprice" aria-describedby="point" placeholder="Enter Per unit price" (change)="calculateTotal()">
    <small id="pointssharee" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type per unit price of points</small>
    </div>
  </div>
  <div class="row" style="padding-bottom: 20px;">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <md-select [(ngModel)]="payment_stauts" style="width: 100%;" placeholder="--{{'Payment Status' | translate}}--" (change)="optionShow(payment_stauts)" ngDefaultControl>
          <md-option *ngFor="let payment of paymentStauts" [value]="payment">{{payment}}</md-option>
        </md-select>
    </div>
  </div>
  <div class="row" *ngIf="paidF" style="padding-bottom: 20px;"> 
    <div class="col-sm-12 col-md-12 col-lg-12">
    <label for="exampleInputEmail1" style="font-weight: 500;">Remarks</label>
    <textarea type="textarea" class="form-control" id="remarks" [(ngModel)]="remarks" aria-describedby="point" placeholder="Remarks"></textarea>
    </div>
  </div>
  <div class="row" *ngIf="creditF" style="padding-bottom: 20px;"> 
    <div class="col-sm-12 col-md-12 col-lg-12">
      <input id="credit_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"  [(ngModel)]="credit_date" type="text" >  
    <!-- <input type="number" class="form-control" id="perunitprice" [(ngModel)]="perunitprice" aria-describedby="point" placeholder="Enter Per unit price"> -->
    <small id="pointssharee" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please Select Credit Date</small>
    </div>
  </div>
  <div class="row" *ngIf="splF" style="padding-bottom: 20px;"> 
    <div class="col-sm-12 col-md-12 col-lg-12">
      <button md-raised-button style="float: right;background: #8c8b8b; color: white;font-size: 14px;border-radius: 0px;" (click)="linkShare('email')"><i class="fa fa-envelope" aria-hidden="true"></i> Email </button>
      <button md-raised-button style="float: right;background: #8c8b8b;color: white;font-size: 14px;border-radius: 0px;margin-right: 10px;" (click)="linkShare('sms')"><i class="fa fa-comment" aria-hidden="true"></i> SMS </button> 
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-sm-8 col-md-8 col-lg-8">
          <label for="exampleInputEmail1" style="font-weight: 500;">Total Allocated Points</label>   
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4" style="text-align: right;">
          <p style="margin-bottom: 0;">{{allocatedPoint}}</p>
        </div>  
      </div> 
      <div class="row">
        <div class="col-sm-8 col-md-8 col-lg-8">
          <label for="exampleInputEmail1" style="font-weight: 500;">Total Available Points</label>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4" style="text-align: right;">
          <p style="margin-bottom: 20;">{{availablePoint}}</p>
        </div>    
      </div> 
      <div class="row">
        <div class="col-sm-8 col-md-8 col-lg-8">
          <label for="exampleInputEmail1" style="font-weight: 500;">Total Amount</label>
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4" style="text-align: right;">
          <!-- <img src="../../assets/ruppee.png" alt="ruppee" height="42" width="42" > -->
          <p style="margin-bottom: 20;">{{totalAmount}}</p>
        </div>        
      </div> 
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <p *ngIf="errFlag" style="text-align: center; color: red; font-size: 12px;">{{errmsg}}</p>
        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="SharePoint()"> Proceed </button>
        <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" (click)="closebox()"> Cancel </button> 
    </div>
  </div>
</div>