apollodec/Apollo/assets/views/student/UnivFormPaymentDetails.html

<style>
    .universityPaid {
        background: #f4f4f7 !important;
    }
    .spanCursor{
        cursor: pointer;

    }
</style>
<section id="page-title">
    <div class="row">
        <div class="col-sm-8">

            <h1 class="mainTitle" translate="University Payment Details">{{ mainTitle }}</h1>

            <span class="mainDescription">Form List. </span>

        </div>
        <!--<div ncy-breadcrumb></div>-->
    </div>
</section>
<div class="container-fluid container-fullw bg-white" ng-controller="univFormPaymentCtrl" data-ng-init="init()">
    <div class="row">
        <div style="margin-top: -21px">
            <div class="col-md-3 col-sm-8">
                <label for="form-field-select-2">
                    University <span class="symbol required"></span>
                </label>

                <select class="form-control" tabindex="1" class="cs-select cs-skin-elastic" name="universitySearch" id="universitySearch" ng-model="paymentVerficationModel.universitySearch">
                    <option value="" disabled selected>Select University</option>
                    <option  ng-repeat="item in universityPaymentSearchData" value="{{item}}">{{item.univName}}</option>
                </select>
            </div>
            <div class="col-md-2 col-sm-4" style="padding-top: 23px;">

                    <button type="button" class="btn btn-success btn-o" tabindex="2" ng-disabled="paymentVerficationModel.universitySearch == ''" ng-click="getPaymentVerificationDetails(paymentVerficationModel)">
                        Search
                    </button>

            </div>
        </div>
    </div>
    <div class="row" ng-if="emptyList==false" style="float: left;display: flex;" data-ng-controller="DatepickerDemoCtrl">
        <div class="container" style="padding-top: 10%;
    padding-bottom: 10%;">
            <input type="text"
                   class="form-control "
                   ng-click="startOpen = !startOpen"
                   datepicker-popup="dd-MM-yyyy"
                   ng-model="paymentVerficationModel.fromDate"
                   is-open="startOpen"
                   ng-init="startOpen = false"
                   name="date1"
                   datepicker-options="dateOptions"
                   placeholder="Select From Date"
                   max-date="paymentVerficationModel.toDate" ng-readonly="true"
                   close-text="Close">

        </div>
    </div>
    <div class="row" ng-if="emptyList==false" style="float: left;display: flex;" data-ng-controller="DatepickerDemoCtrl">
        <div class="container" style="padding-top: 10%;
    padding-bottom: 10%; margin-left: 2%">
            <input type="text"
                   class="form-control "
                   ng-click="startOpen = !startOpen"
                   datepicker-popup="dd-MM-yyyy"
                   ng-model="paymentVerficationModel.toDate"
                   is-open="startOpen"
                   ng-init="startOpen = false"
                   name="date2"
                   datepicker-options="dateOptions"
                   placeholder="Select To Date"
                   min-date="paymentVerficationModel.fromDate"
                   max-date="minStartDate" ng-readonly="true"
                   close-text="Close" ng-change="filterDate(paymentDataForFilter);">

        </div>
    </div>
    <div class="row" style="float: right;display: flex;">
        <div class="container"  style="padding-top: 10%;
    padding-bottom: 10%;">
            <button type="button" ng-if="emptyList==false" class="btn btn-info btn-o" tooltip="Click to add payment" tabindex="3" ng-click="addUniversityPaymentModal(paymentVerficationModel)">
                Add Payment
            </button>
            <button class="btn btn-success btn-o" ng-if="emptyList==false" ng-click="exportData()">Export to Excel</button>

        </div>
    </div>
        <div class="row" style="position: relative;margin-top:4%;">
            <div class="container">
            <div ng-if="searchLoader">
                <div style="color: blue; align: center;" align="center"> Loading...</div>
            </div>
            <div ng-if="emptyList">
                <div style="color: red; align: center;" align="center"> {{paymentVerificationData}}</div>
            </div>

            <div class="table-responsive" ng-if="emptyList==false" ng-controller="studentModalDemoCtrl">
                <span class="text-bold" style="float: right">University Balance&nbsp;:&nbsp;{{paymentVerificationData[paymentVerificationData.length-1].RunningBalance }}</span>
                <table class="table table-hover table-condensed table-bordered" >
                    <thead>
                    <tr>
                        <th> Form ID</th>
                        <th> Enrollment ID</th>
                        <th> Bill No</th>
                        <th> Date</th>
                        <th> Payable</th>
                        <th> Paid </th>
                        <th> Balance</th>
                        <!--<th> University Name </th>-->
                    </tr>
                    </thead>
                    <tbody dir-paginate="p in paymentVerificationData|orderBy:sortKey:reverse|filter:search:strict|itemsPerPage:10| filter:query as results">
                    <tr ng-class="{universityPaid:p.TypeID==0}">
                        <td><a tooltip="View Student" class="text-dark" ng-click="open(p);">{{p.FormID}}</a></td>
                        <td>{{p.EnrolmentNo}}</td>
                        <td><span class="spanCursor" tooltip="Click to edit/view bill" ng-click="viewPayment(p)">{{p.BillNo}}</span></td>
                        <td>{{p.FormatDate}}</td>

                        <td ng-if="p.CreditAmount==0"></td>
                        <td ng-if="p.CreditAmount>0"><span style="float:right;">{{p.CreditAmount}}</span></td>
                        <td ng-if="p.DebitAmount==0"></td>
                        <td ng-if="p.DebitAmount>0"><span  style="float:right;">{{p.DebitAmount}}</span></td>
                        <td><span style="float:right;">{{p.RunningBalance}}</span></td>
                        <!--<td>{{p.UniversityName}}</td>-->

                    </tr>
                    </tbody>
                </table>
                <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
                </dir-pagination-controls>

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

</div>