<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
                  <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">

          <div class="card-header">
              <i class="fa fa-calculator"></i> Calculate Fees Details
            </div>
        <div class="card-body">
            <div class="row">
              <div class="form-group col-sm-4">
                <label for="university">University <span class="symbol required"></span></label>
                <select class="form-control" id="university">
                  <!-- <option>Select University</option> -->
                  <option>Anna University</option>
                  <option>SRM University</option>
                  <option>Karpagam University</option>
                  <option>Hindustan University</option>
                </select>
              </div>
              <div class="form-group col-sm-4">
                  <label for="course">Course <span class="symbol required"></span></label>
                  <select class="form-control" id="course">
                    <!-- <option>Select Course</option> -->
                    <option>CB001-Information Technology</option>
                    <option>CHE002-Computer Science And Engg</option>
                    <option>L0022-Fashion Technology</option>
                    <option>MP0200-Mechanical Engg</option>
                  </select>
                </div>
                <div class="form-group col-sm-4">
                  <label for="semyear">Sem/Year <span class="symbol required"></span></label>
                  <select class="form-control" id="semyear">
                    <!-- <option>Select Sem/Year</option> -->
                    <option>SEM1</option>
                    <option>SEM2</option>
                    <option>SEM3</option>
                    <option>SEM4</option>
                    <option>SEM5</option>
                    <option>SEM6</option>
                    <option>SEM7</option>
                    <option>SEM8</option>
                  </select>
                </div>
                <div class="form-group col-sm-4">
                    <label for="new">No of New Applicants <span class="symbol required"></span></label>
                    <input type="text" class="form-control" value="10" id="new" placeholder="Enter new applicants">            
                  </div>
                  <div class="form-group col-sm-4">
                      <label for="old">No of Re-registered Applicants <span class="symbol required"></span></label>
                      <input type="text" value="20" class="form-control" id="old" placeholder="Enter registerd applicants">            
                    </div>
                    <div class="form-group col-sm-3 serachBtn">
                        <button type="button" class="btn btn-sm btn-primary" (click)="viewCalScreen()"><i class="fa fa-search"></i> Search</button>
                      </div>
                
            </div><!--/.row-->

            <div class="row" *ngIf="showSecondCard">
                <div class="col-lg-9 col-xs-9">
                  <table class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th>Fees Type</th>
                        <th>Fees Amount * No of New Applicant</th>
                        <th>Fees Amount * No of Re-registered Applicant</th>
                        <th>Total</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>Tuition Fees</td>
                        <td>
                          <span>15000 * 10 = 150000</span>
                        </td>
                        <td>
                            <span>15000 * 20 = 300000</span>
                          </td>
                          <td>
                              <span>450000</span>
                            </td>
                      </tr>
                        <tr>
                            <td>Exam Fees</td>
                            <td>
                                <span>2000 * 10 = 20000</span>
                              </td>
                              <td>
                                  <span>2000 * 20 = 400000</span>
                                </td>
                                <td>
                                    <span>420000</span>
                                  </td>
                          </tr>
                          <tr>
                              <td>Late Fees</td>
                              <td>
                                <span>1000 * 10 = 10000</span>
                              </td>
                              <td>
                                  <span>1000 * 20 = 20000</span>
                                </td>
                                <td>
                                    <span>30000</span>
                                  </td>
                            </tr>
                            <tr>
                                <td>Other Fees</td>
                                <td>
                                    <span>500 * 10 = 5000</span>
                                  </td>
                                  <td>
                                      <span>0 * 20 = 0</span>
                                    </td>
                                    <td>
                                        <span>5000</span>
                                      </td>
                              </tr>
                              <tr>
                                  <td>Total</td>
                                  <td>
                                    <span>185000</span>
                                  </td>
                                  <td>
                                      <span>720000</span>
                                    </td>
                                    <td>
                                        <span>905000</span>
                                      </td>
                                </tr>
                    </tbody>
                  </table>
                </div>
                <!--/.col-->
                
              </div>
              <!--/.row-->
  
        </div>
        <!-- <div class="card-footer">
           
              <div class="col-lg-12 col-xs-12 endBtn" align="right">
                  <button type="button" class="btn btn-sm btn-danger" (click)="closeCalScreen()"><i class="fa fa-close"></i> Close</button>
                    </div>
        </div> -->
      </form>
    </div>
    </div>
  </div><!--/.row-->
</div>
