<div class="content-area">
  <div class="row page-content-header">
    <div class="col-sm-12">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-sm-12">
            <button class="btn btn-outline-primary" (click)="golist()"> <i class="fa fa-arrow-left" aria-hidden="true"></i> Group
              list</button>
              <a type="button" class="btn btn-outline-secondary fa fa-refresh" (click)="refresh()"> Refresh</a>
            <button class="btn btn-outline-warning fa fa-angle-double-left  right" (click)="previous()" disabled> Previous</button>
            <button class="btn btn-outline-warning fa fa-angle-double-right  right" (click)="next()" disabled>Next </button>

            <a class="vertical-ellipsis fa fa-2x fa-bars" href="#" role="button" id="dropdownMenuLink"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

              <a class="dropdown-item fa fa-minus" (click)="goDets()"> Member History</a>
              <a class="dropdown-item fa fa-minus" (click)="goSavings()"> Savings / Loan Repayment</a>
              <a class="dropdown-item fa fa-minus" (click)="goLoan()"> Loan application</a>

            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>

    <div class="row page-content-header">
      <div class="col-sm-12">
        <h1>Dividend Allocation</h1>
      </div>
<mat-divider></mat-divider>
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="card-area-members shadow">
            <!--Header part-->
            <div class="row thead-dark">
              <!--Begin Member-->
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="col-sm-12 dashbord-tbl-description">
                  <div class="row">
                    <div class="col-sm-12">
                      <h1>Member's Information</h1>
                    </div>
                    <div class="col-sm-12 info-area">
                      <p>Group Name: <i> {{_group_name}}</i></p>
                    </div>
                    <div class="col-sm-12 info-area">
                      <p>Name: <i>{{_member_name}}</i></p>
                    </div>
                    <div class="col-sm-12 info-area">
                      <p>Id Number: <i> {{_member_id_no}}</i></p>
                    </div>
                    <div class="col-sm-12 info-area">
                      <p>Membership Number: <i>{{_group_code}}{{_membership_no
                                                  | number: "3.0"}}</i></p>
                    </div>
                  </div>
                </div>
              </div>
              <!--End member Information-->
              <!--Finance-->
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="col-sm-12 dashbord-tbl-description">
                  <div class="row">
                    <div class="col-sm-12">
                      <h1>Financial Information</h1>
                    </div>
                    <div class="col-sm-12 info-area fin">
                      <p>Savings/Shares B/F:KShs.<i>{{_total_savings}}</i></p>
                    </div>
                    <div class="col-sm-12 info-area fin">
                      <p>Loan B/F: KShs<i> {{_loan_bf}} </i> <span class="badge badge-danger" *ngIf="_default">
                          Defaulted</span>
                        <span class="badge badge-info" *ngIf="_new_loan"> Pending approval</span>
                        <span class="badge badge-success" *ngIf="new_active"> Loan approved</span>
                      </p>
                    </div>
                    <div class="col-sm-12 info-area fin" *ngIf="_default">
                      <p>Loan Default amount: KShs<i> {{_default_amount}}</i></p>
                    </div>
                    <div class="col-sm-12 info-area fin">
                      <p>Advance B/F: Kshs <i> {{adv_bf}} </i> <span *ngIf="adv_default"> <span
                            class="badge badge-danger"> Defaulted</span> *(inclusive
                          default amount {{_adv_default_amount}})</span></p>
                    </div>
                    <br>
                  </div>
                </div>
              </div>
              <!--End Finance Information-->
            </div>
            <!--Header part end-->
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <form class="form" [formGroup]="dividendForm" (submit)="save()">
            <div class="row">
              <div class="col-sm-12">
                <div class="col-sm-6 alert alert-danger" *ngIf="errorMsg"> {{errorMsg}}
                </div>
                <div class="col-sm-6 alert alert-success" *ngIf="successMsg">
                  {{successMsg}}
                </div>
              </div>
            </div>
            <hr>
            <div class="row">
              <!--Hidden content-->
              <input type="text" formControlName="group_id" id="group_id" name="group_id" hidden>
              <input type="text" formControlName="member_id" id="member_id" name="member_id" hidden>
              <input type="text" formControlName="member_savings" id="member_savings" name="member_savings" hidden>
              <input type="text" formControlName="loan_id_fk" id="loan_id_fk" hidden>
              <input type="text" formControlName="adv_id_fk" id="adv_id_fk" hidden>
              <input type="text" formControlName="_loans_bf" id="_loan_bf" hidden>
              <input type="text" formControlName="_adv_bf" id="_adv_bf" hidden>


              <!--Member Id end-->


              <div class="col-sm-12">
                <div class="row">
                  <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="form-group">
                      <label for="">Group's Total Shares<label class="red-text">*</label></label>
                      <input class="form-control" type="text" formControlName="group_total_shares_currency"
                        id="group_total_shares_currency" name="group_total_shares_currency"
                        placeholder="Group shares_currency">
                      <input class="form-control" type="text" formControlName="group_total_shares"
                        id="group_total_shares" name="group_total_shares" hidden>
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="form-group">
                      <label for="">Group's TRF<label class="red-text">*</label></label>
                      <input type="text" #trf formControlName="trf" id="trf" name="trf" placeholder="Enter group TRF"
                        (keyup)="onAmountChange()">
                        <div *ngIf="submitted && f.trf.errors">
                          <div *ngIf="f.trf.required" class="alert alert-danger">Group TRF is required</div>
                        </div>
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="form-group">
                      <label for="">Interest Shared<label class="red-text">*</label></label>
                      <input type="text" formControlName="shared_interest" id="shared_interest" name="shared_interest">
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="form-group">
                      <label for="">Rate<label class="red-text">*</label></label>
                      <input type="text" formControlName="d_rate" id="d_rate" name="d_rate">
                    </div>
                  </div>
                  <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="form-group">
                      <label for="">Member's Dividend<label class="red-text">*</label></label>
                      <input type="text" formControlName="dividend_amount" id="dividend_amount" name="dividend_amount">
                    </div>
                  </div>

                  <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="form-group">
                      <label for="">Date</label>
                      <input class="form-control" type="date" formControlName="allocate_date" id="allocate_date"
                        name="allocate_date">
                        <div *ngIf="submitted && f.allocate_date.errors">
                          <div *ngIf="f.allocate_date.required" class="alert alert-danger">Date is required</div>
                        </div>

                    </div>
                  </div>
                </div>
              </div>

              <!--If action is loan-->
              <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="row">
                  <div class="col-sm-12 col-md-12 col-lg-6 red-text">
                    <label for=""><i>Loan Section</i></label>
                  </div>
                  <hr>
                </div>
                <hr>
                <div class="row">
                  <div class="col-sm-12 col-md-12 col-lg-6">
                    <label for="">PRINCIPAL PAYMENT(REGULAR LOAN)*</label>
                    <input type="text" class="form-control" formControlName="_loan_principal" name="_loan_principal"
                      id="_loan_principal">
                  </div>

                  <div class="col-sm-12 col-md-12 col-lg-6">
                    <label for="">PRINCIPAL PAYMENT(ADVANCE LOAN)*</label>
                    <input type="text" class="form-control" formControlName="_adv_principal" name="_adv_principal"
                      id="_adv_principal">
                  </div>

                </div>
              </div>
              <!--End if action is loan-->

              <!--If action is savings-->
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="row">
                  <div class="col-sm-12 col-md-12 col-lg-6 red-text">
                    <label for=""><i>Savings Section</i></label>
                  </div>
                  <hr>
                </div>
                <hr>
                <div class="row">
                  <label for="">Savings amount</label>
                  <input type="text" class="form-control" formControlName="_loan_principal" name="_loan_principal"
                    id="_loan_principal">
                </div>

              </div>
              <!--End if action is savings-->

              <!--If action is Withdraw-->
              <div class="col-sm-12">
                <div class="row">
                  <div class="col-sm-12 col-md-12 col-lg-6 red-text">
                    <label for=""><i>Withdraw Section</i></label>
                  </div>
                  <hr>
                </div>
                <hr>
                <div class="row">
                  <label for="">Withdraw amount</label>
                  <input type="text" class="form-control" formControlName="_loan_principal" name="_loan_principal"
                    id="_loan_principal">
                </div>
              </div>
              <!--End if action is Withdraw-->

            </div>
            <!--Submit and reset button-->
            <div class="row">
              <button class="btn btn-outline-secondary fa fa-check left" type="submit" [disabled]="errorMsg"> Submit
                allocation</button>
              <!-- <button class=  "btn btn-custom left  " type=  "button  " (click)=  "getRate()  ">Get TRF</button>-->
            </div>
          </form>
        </div>
      </div>
    </div>

  </div>
</div>
