<ion-header>
       
    <ion-navbar color="dark">
      <ion-title>{{Coursestatus.CourseName}}</ion-title>
      
           
         
      </ion-navbar>
  </ion-header>
  
  <ion-content>
    
      <div padding>
          
          <ion-segment [(ngModel)]="CourseDetails" color="secondry">
            <ion-segment-button value="Fees">
              <ion-icon name="cash"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="Document">
                <ion-icon name="document"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="Mark">
                <ion-icon name="list-box"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="Study">
                <ion-icon name="book"></ion-icon>
            </ion-segment-button>
          </ion-segment>
        </div>
        
        <div [ngSwitch]="CourseDetails">
          <ion-list *ngSwitchCase="'Fees'">
                <ion-col><h3 text-center>Fees Details</h3></ion-col>
            <ion-item *ngFor="let feesDetails of Coursestatus.feesDetails">
                
              <ion-row>
                <ion-col col-6 text-left>
                       
                       <span *ngIf="feesDetails.FeesName!=''" (click)="installmentselection(feesDetails.FeesID)" style="color:mediumblue;">{{feesDetails.FeesName}}</span>
                        <span *ngIf="feesDetails.FeesName==''" (click)="installmentselection(feesDetails.FeesID)" style="color:mediumblue;">--</span>
                        <br/>
                        <span *ngIf="feesDetails.RollNo!=''"> {{feesDetails.RollNo}}</span> <span *ngIf="feesDetails.RollNo==''">--</span>
                </ion-col>
                <ion-col col-6 text-right>
                       <span *ngIf="feesDetails.BalanceAmount!=''"(click)="paidselection(feesDetails.FeesID)" style="color:mediumblue;"><i class="fa fa-inr"></i><b >{{feesDetails.BalanceAmount}}</b></span>
                       <span *ngIf="feesDetails.BalanceAmount==''"(click)="paidselection(feesDetails.FeesID)" style="color:mediumblue;"><i class="fa fa-inr"></i>0</span>
                       <br/><span *ngIf="feesDetails.BalanceAmount!=''"><div style="font-size:12px;"><i class="fa fa-inr"></i>{{feesDetails.PayableAmount}}</div></span>
                        <span *ngIf="feesDetails.BalanceAmount==''"><div style="font-size:12px;"><i class="fa fa-inr"></i>0</div></span>
                </ion-col> 
                      
              </ion-row>
                 
              </ion-item>
              <ion-list>
                   
                </ion-list>
          </ion-list>
        
          <ion-list *ngSwitchCase="'Document'">
                <ion-col><h3 text-center>Document Details</h3></ion-col>
              <ion-item *ngFor="let documentDetails of Coursestatus.applicationDetails">
                   
                  <ion-row>
                    <ion-col col-6 text-left>
                            <span *ngIf ="documentDetails.CertificateName !=''">{{documentDetails.CertificateName}}</span>
                            <span *ngIf ="documentDetails.CertificateName ==''">--</span>
                            <br/>
                            <span *ngIf ="documentDetails.CertificationNo !='null'">{{documentDetails.CertificationNo}}</span>
                            <span *ngIf ="documentDetails.CertificationNo=='null'">--</span>
                    </ion-col>
                    
                    <ion-col col-6 text-right>
                            <span *ngIf ="documentDetails.ListName !=''"> {{documentDetails.ListName}}</span>
                        <span *ngIf ="documentDetails.ListName ==''">--</span>
                    </ion-col>
                  </ion-row>
                     
                  </ion-item>
          </ion-list>
          <ion-list *ngSwitchCase="'Mark'">
                <ion-col><h3 text-center>Marks List Details</h3></ion-col>
              <ion-item *ngFor="let marks of Coursestatus.markCardDetails">
                    
                  <ion-row>
                    <ion-col col-6 text-left>
                             <span *ngIf="marks.Sem !=''">{{marks.Sem}}</span>
                            <span *ngIf="marks.Sem ==''">--</span><br/>
                             <!-- <span *ngIf="marks.Sem_Year!=''">{{marks.Sem_Year}}</span>
                             <span *ngIf="marks.Sem_Year==''">--</span> -->
                             
                    </ion-col>
                    <ion-col col-6 text-right>
                      <span *ngIf="marks.ListName!=''">{{marks.ListName}}</span>
                      <span *ngIf="marks.ListName==''">--</span>
                    </ion-col>
                   
                  </ion-row>
                     
                  </ion-item>
            </ion-list>
            <ion-list *ngSwitchCase="'Study'">
                    <ion-col><h3 text-center>Study Material Details</h3></ion-col>
                <ion-item *ngFor="let study of Coursestatus.studyMaterialDetails">
                        
                    <ion-row>
                      <ion-col col-6 text-left>
                               <span *ngIf="study.Sem!=''">{{study.Sem}}</span><span *ngIf="study.Sem==''">--</span>

                                <!-- <br/>
                               <span *ngIf="study.Sem_Year!=''">{{study.Sem_Year}}</span><span *ngIf="study.Sem_Year==''">--</span>
                                -->  </ion-col >
                      <ion-col col-6 text-right>
                         <span *ngIf="study.SDate!=''">{{study.SDate}}</span><span *ngIf="study.SDate==''">--</span><br/>
                         <span *ngIf="study.ListName!=''">{{study.ListName}}</span><span *ngIf="study.ListName==''">--</span>
                      </ion-col>
                     
                    </ion-row>
                       
                    </ion-item>
              </ion-list>
        </div>
  </ion-content>
  