<!--<span *ngIf="show" class="backToList">
    <a (click)="show = !show;" tooltip="Go to listing">Back to List</a>
</span>-->
<div class="col-lg-12" *ngIf="!show">
    <tabset>
        <tab>
            <ng-template tabHeading>Student Enrolment</ng-template>
            <div class="form-group line-height">
                <div class="row">
                    <div class="form-group col-md-4">
                        <label for="name"> Select Study Center</label>
                        <select id="disabledSelect" class="form-control">
                                <option value="0">Please select Study Center</option>
                                <option value="1">SC 001</option>
                                <option value="2">SC 002</option>
                                <option value="3">SC 003</option>
                            </select>
                    </div>
                </div>
            </div>
            <tabset>
                <tab>
                    <ng-template tabHeading>Student List</ng-template>
                    <div class="card line-height">
                        <div class="card-header">
                            <i class="fa fa-align-justify"></i> Student Details List
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="input-prepend input-group">
                                        <select id="disabledSelect" class="form-control">
                                    <option value="0">Batch</option>
                                    <option value="1">Jan 2017</option>
                                    <option value="2">Jul 2017</option>
                                    <option value="3">Jan 2018</option>
                                </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-prepend input-group">
                                        <select id="disabledSelect" class="form-control">
                                    <option value="0">Please Select University</option>
                                    <option value="1">MMM univ</option>
                                    <option value="2">PPP univ</option>
                                    <option value="3">SSS univ</option>
                                </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-prepend input-group">
                                        <select id="disabledSelect" class="form-control">
                                    <option value="0">Please Select Course</option>
                                    <option value="1">B.com</option>
                                    <option value="2">MCA</option>
                                    <option value="3">M.Sc</option>
                                </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="input-prepend input-group">
                                        <select id="disabledSelect" class="form-control">
                                    <option value="0">Please Sem/Year</option>
                                    <option value="1">2</option>
                                    <option value="2">3</option>
                                    <option value="3">4</option>
                                </select>
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="input-prepend input-group">
                                        <button type="button" value="Submit" class="btn btn-primary"> <i class="fa fa-search"></i> Filter</button>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="input-prepend input-group">
                                        <span class="input-group-addon">
                                    <i class="fa fa-search"></i>
                                    </span>
                                        <input id="search" class="form-control" type="text" placeholder="search">
                                    </div>
                                </div>
                            </div>
                            <br>
                            <table class="table table-bordered table-responsive line-height-table">
                                <thead>
                                    <tr>
                                        <th>Batch</th>
                                        <th>Form Id</th>
                                        <th>Student Name</th>
                                        <th>Father Name</th>
                                          <!--<th>Mobile</th>-->
                                        <th>Course/University</th>
                                        <th>Sem/Year</th>
                                        <th>Status</th>
                                        <th>Comments</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let app of students">
                                        <td>{{app.batch}}</td>
                                        <td>{{app.formId}}</td>
                                        <td>{{app.studentName}}</td>
                                        <td>{{app.fatherName}}</td>
                                        <!--<td>{{app.mobile}}</td>-->
                                        <td>{{app.course}} / {{app.univ}}</td>
                                        <td>{{app.sem}}</td>
                                        <td>
                                            <span *ngIf="app.status == 1"  style="line-height: 0.1;">Active</span>
                                            <span *ngIf="app.status == 0"  style="line-height: 0.1;">In-Active</span>
                                        </td>
                                        <td>{{app.comments}}</td>
                                        <td>
                                            <i class="fa fa-edit line-height-table" tooltip="Edit" (click)="editDocuments()"></i>  | 
                                            <i class="fa fa-money line-height-table" tooltip="Fees" (click)="feesModal.show();getFeesModelWindowDetails(app)"></i>

                                            <!--<i class="fa fa-eye" tooltip="View More" data-toggle="modal" (click)="myModal.show(); getModelWindowDetails(app)"></i>-->
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <ul class="pagination">
                                <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                                <li class="page-item active">
                                    <a class="page-link" href="#">1</a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                <li class="page-item"><a class="page-link" href="#">Next</a></li>
                            </ul>
                        </div>
                    </div>
                </tab>
                <tab>
                    <ng-template tabHeading>Add Student</ng-template>
                    <div align="right">
                        <!--<button *ngIf="!oldReg" (click)="oldReg = !oldReg" type="button" class="btn btn-sm btn-primary">Re-registration</button>
                        <button *ngIf="oldReg" (click)="oldReg = !oldReg" type="button" class="btn btn-sm btn-primary">New Student</button>-->
                    </div>
                    <br>
                    <div *ngIf="!oldReg">
                        <div class="card line-height">
                            <div class="card-header">
                                Personal Details
                            </div>
                            <div class="card-body">
                                <div class="container">
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label for="fname">First Name <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="fname" placeholder="Enter First name">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="lname">Last Name <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="lname" placeholder="Enter Last name">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="gender">Gender <span class="danger">*</span></label>
                                            <!--<input type="text" class="form-control" id="gender" placeholder="Enter Gender">-->
                                            <div>
                                            <label class="radio" for="gender">
                                                        <input type="radio" id="gender-male" name="inline-radios" value="Male"> Male
                                                    </label>
                                            <label class="radio" for="inline-radio2">
                                                        <input type="radio" id="gender-female" name="inline-radios" value="Female"> Female
                                                    </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label for="pmobile">Primary Mobile Number <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="pmobile" placeholder="Enter Primary Mobile Number">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="smobile">Secondary Mobile Number</label>
                                            <input type="text" class="form-control" id="smobile" placeholder="Enter Secondary Mobile Number">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="email">Email <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="email" placeholder="Enter Email">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label for="fatherName">Father Name <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="fatherName" placeholder="Enter Father Name">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="motherName">Mother Name <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="motherName" placeholder="Enter Mother Name">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="dob">Date Of Birth <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="dob" placeholder="Enter DOB">
                                        </div>
                                    </div>
                                    <div class="row">
                                        
                                        <div class="form-group col-md-4">
                                            <label for="adhar">Aadhar Number <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="adhar" placeholder="Enter Aadhar Number">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="qualification">Qualification</label>
                                            <input type="text" class="form-control" id="qualification" placeholder="Enter Qualification">
                                        </div>
                                    </div>
                                    <!--/.row-->
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label for="premanentAddress">Permanent Address <span class="danger">*</span></label>
                                            <textarea class="form-control" id="premanentAddress" placeholder="Enter Permanent Address"></textarea>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="currentAddress">Current Address<span class="danger">*</span> </label>
                                            <textarea class="form-control" id="currentAddress" placeholder="Enter Current Address"></textarea>
                                            Same as Permanent Address <span><input type="checkbox"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--<div class="card-footer">
                        </div>-->
                        </div>
                        <div class="card line-height">
                            <div class="card-header">
                                Course Details
                            </div>
                            <div class="card-body">
                                <div class="container">
                                    <div class="row">
                                        <div class=" form-group  col-md-4">
                                            <label for="premanentAddress"> University <span class="danger">*</span></label>
                                            <div class="input-prepend input-group">
                                                <select id="disabledSelect" class="form-control">
                                                <option value="0">Select University</option>
                                                <option value="1">MMM univ</option>
                                                <option value="2">PPP univ</option>
                                                <option value="3">SSS univ</option>
                                            </select>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="premanentAddress"> Course <span class="danger">*</span></label>
                                            <div class="input-prepend input-group">
                                                <select id="disabledSelect" class="form-control">
                                                <option value="0">Select Course</option>
                                                <option value="1">B.com</option>
                                                <option value="2">MCA</option>
                                                <option value="3">M.Sc</option>
                                            </select>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="specialisation">Specialisation<span class="danger"></span></label>
                                            <input type="text" class="form-control" id="specialisation" placeholder="Enter Specialisation">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label for="premanentAddress"> Sem/Year <span class="danger">*</span></label>
                                            <div class="input-prepend input-group">
                                                <select id="disabledSelect" class="form-control">
                                                <option value="0">Select Sem/Year</option>
                                                <option value="1">2</option>
                                                <option value="2">3</option>
                                                <option value="3">4</option>
                                            </select>
                                            </div>
                                        </div>
                                        <div class=" form-group col-md-4">
                                            <label for="premanentAddress">Session <span class="danger">*</span></label>
                                            <div class="input-prepend input-group">
                                                <select id="disabledSelect" class="form-control">
                                                <option value="0">Select Session</option>
                                                <option value="1">Jan 2017</option>
                                                <option value="2">Jul 2017</option>
                                                <option value="3">Jan 2018</option>
                                            </select>
                                            </div>
                                        </div>
                                        <div class=" form-group col-md-4">
                                            <label for="premanentAddress">Batch <span class="danger">*</span></label>
                                            <div class="input-prepend input-group">
                                                <select id="disabledSelect" class="form-control">
                                                <option value="0">Select Batch</option>
                                                <option value="1">Jan 2017</option>
                                                <option value="2">Jul 2017</option>
                                                <option value="3">Jan 2018</option>
                                            </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-4">
                                            <label for="doj">Joining Date <span class="danger">*</span></label>
                                            <input type="text" class="form-control" id="doj" placeholder="Enter DOJ">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="entrlmentNo">Enrolment Number<span class="danger"></span></label>
                                            <input type="text" class="form-control" id="entrlmentNo" placeholder="Enter Enrolment Number">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label for="rollNo">Roll Number<span class="danger"></span></label>
                                            <input type="text" class="form-control" id="rollNo" placeholder="Enter Roll Number">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer" align="right">
                                <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
                                <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
                            </div>
                        </div>
                    </div>

                </tab>
                <tab>
                    <ng-template tabHeading>Re-registration</ng-template>
                    <div>
                        <div class="card line-height">
                            <div class="card-header">
                                Re-registration
                            </div>
                            <div class="card-body">
                                <div class="container">
                                    <div class="row">
                                        <div class=" form-group col-md-3">
                                            <label>Form ID</label>
                                            <div class="input-prepend input-group">
                                                <input id="search" class="form-control" type="text" placeholder="Form ID">
                                            </div>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Enrolment Number</label>
                                            <div class="input-prepend input-group">
                                                <input id="search" class="form-control" type="text" placeholder="Enrolment Number">
                                            </div>
                                        </div>
                                        <div class=" form-group col-md-3">
                                            <label>Student Name</label>
                                            <div class="input-prepend input-group">
                                                <input id="search" class="form-control" type="text" placeholder="Student Name">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label></label>
                                            <div class="input-prepend input-group">
                                                <button type="button" value="Submit" class="btn btn-primary"> <i class="fa fa-search"></i> Search</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container">
                                    <div align="right">
                                        <button type="submit" class="btn btn-sm btn-success"  (click)="myModal.show(); getModelWindowDetails(app)"> Add New Sem</button>
                                        <!--<button type="reset" class="btn btn-sm btn-danger"> Reset</button>-->
                                    </div>
                                    <table class="table table-bordered table-responsive">
                                        <thead>
                                            <tr>
                                                <th>Batch</th>
                                                <th>Form Id</th>
                                                <th>Course</th>
                                                <th>University</th>
                                                <th>Sem/Year</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Jan 2018</td>
                                                <td>KES08432</td>
                                                <td>B.Com</td>
                                                <td>KR Univ</td>
                                                <td>3</td>
                                            </tr>
                                            <tr>
                                                <td>Jul 2017</td>
                                                <td>KES04321</td>
                                                <td>B.Com</td>
                                                <td>KR Univ</td>
                                                <td>2</td>
                                            </tr>
                                            <tr>
                                                <td>Jan 2017</td>
                                                <td>KES00921</td>
                                                <td>B.Com</td>
                                                <td>KR Univ</td>
                                                <td>1</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </tab>
                <tab>
                        <ng-template tabHeading>Other Registration</ng-template>
                        <div>
                            <div class="card line-height">
                                <div class="card-header">
                                    Other Registration
                                </div>
                                <div class="card-body">
                                    <div class="container">
                                        <div class="row">
                                            <div class=" form-group col-md-3">
                                                <label>Form ID</label>
                                                <div class="input-prepend input-group">
                                                    <input id="otherSearch" class="form-control" type="text" placeholder="Form ID">
                                                </div>
                                            </div>
                                            <div class="form-group col-md-3">
                                                <label>Enrolment Number</label>
                                                <div class="input-prepend input-group">
                                                    <input id="otherEnrolment" class="form-control" type="text" placeholder="Enrolment Number">
                                                </div>
                                            </div>
                                            <div class=" form-group col-md-3">
                                                <label>Student Name</label>
                                                <div class="input-prepend input-group">
                                                    <input id="otherStudent" class="form-control" type="text" placeholder="Student Name">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <label></label>
                                                <div class="input-prepend input-group">
                                                    <button type="button" value="Submit" class="btn btn-primary"> <i class="fa fa-search"></i> Search</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container">
                                        <div align="right">
                                            <button type="submit" class="btn btn-sm btn-success"  (click)="otherRegModal.show();"> Add Other Registration</button>
                                            <!--<button type="reset" class="btn btn-sm btn-danger"> Reset</button>-->
                                        </div>
                                        <table class="table table-bordered table-responsive">
                                            <thead>
                                                <tr>
                                                    <th>Batch</th>
                                                    <th>Form Id</th>
                                                    <th>Course</th>
                                                    <th>University</th>
                                                    <th>Sem/Year</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jan 2018</td>
                                                    <td>KES08432</td>
                                                    <td>B.Com</td>
                                                    <td>KR Univ</td>
                                                    <td>3</td>
                                                </tr>
                                                <tr>
                                                    <td>Jul 2017</td>
                                                    <td>KES04321</td>
                                                    <td>B.Com</td>
                                                    <td>KR Univ</td>
                                                    <td>2</td>
                                                </tr>
                                                <tr>
                                                    <td>Jan 2017</td>
                                                    <td>KES00921</td>
                                                    <td>B.Com</td>
                                                    <td>KR Univ</td>
                                                    <td>1</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </tab>
            </tabset>
        </tab>
    </tabset>
</div>

<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Re-registertion</h4>
                <button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <label><b> Student Name : </b> </label> XYZ
                        </div>
                        <div class="col-md-6">
                            <label><b>Enrolment Number : </b> </label> UNIV120876
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label><b> Course : </b> </label> B.Com
                        </div>
                        <div class="col-md-6">
                            <label><b> University : </b> </label> KR Univ
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label for="name"> Sem/Year <span class="danger">*</span></label>
                            <select id="disabledSelect" class="form-control">
                                <option value="0">Select Sem/Year</option>
                                <option value="1">4</option>
                                <option value="2">5</option>
                                <option value="3">6</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="name">Session <span class="danger">*</span></label>
                            <select id="disabledSelect" class="form-control">
                                <option value="0">Select Session</option>
                                <option value="1">Jul 2018 - Dec 2018</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="name">Batch <span class="danger">*</span></label>
                            <select id="disabledSelect" class="form-control">
                                <option value="0">Select Batch</option>
                                <option value="1">Dec 2018</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- start student fees modal-->

<div bsModal #feesModal="bs-modal" class="modal fade" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Fees Details</h4>
                <button type="button" class="close" (click)="feesModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-sm-4">
                          <label for="feesName">Fees Name <span class="danger">*</span></label>
                          <select class="form-control" id="semyear">
                            <option>Late Fees</option>
                            <option>Other Fees</option>
                          </select>
                        </div>
                        <div class="form-group col-sm-4">
                              <label for="feesAmount">Fees Amount <span class="danger">*</span></label>
                              <input type="text" class="form-control" value="15000" id="feesAmount" placeholder="Enter fees amount">            
                            </div>
                           
                            <div class="form-group col-sm-4" style="margin-top: 28px;">
                                  <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-plus-circle "></i> Add</button>
                              </div>
                </div><!--/.row-->
                <div class="row">
                        <div class="col-md-10">
                                <table class="table table-bordered table-responive table-hover">
                                  <thead>
                                    <tr>
                                      <th>Fees Name</th>
                                      <th>Fees Amount</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr *ngFor="let list of feesModalData">
                                      <td><span>{{list.feesName}}</span></td>
                                      <td>
                                        <span>{{list.feesAmount}}</span>
                                      </td>
            
                                      
                                    </tr>
                               
                                  </tbody>
                                </table>
                              </div>
                              <!--/.col-->
                  </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="feesModal.hide()">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
        <!-- /.fees modal-content -->
    </div>
    <!-- /. fees modal-dialog -->
</div>
<!-- /.fees modal -->

<!-- start other registration modal -->
<div bsModal #otherRegModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Other Registration</h4>
                    <button type="button" class="close" (click)="otherRegModal.hide()" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3">
                                    <label><b> Student Name</b> </label>
                                    <p>XYZ</p>
                            </div>
                            <div class="col-md-3">
                                    <label><b> Enrolment Number</b> </label>
                                <p>UNIV120876</p>

                                </div>
                                <div class="col-md-3">
                                        <label><b> Course</b> </label>
                                        <p>B.Com</p>
                                    </div>
                                    <div class="col-md-3">
                                            <label><b> University</b> </label>
                                            <p>KR Univ</p>
                                        </div>
                                        <div class="col-md-4">
                                                <label for="name"><b> Registration Type <span class="danger">*</span></b> </label>
                                                <select id="disabledSelect" class="form-control">
                                                        <option value="0">Select</option>
                                                        <option value="1">PC</option>
                                                        <option value="2">TC</option>
                                                        <option value="3">DC</option>
                                                        <option value="3">Other</option>
                                                    </select>
                                            </div>
                        </div>
 
          
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" (click)="otherRegModal.hide()">Close</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->