
<div class="table-actions-wrapper">
	<span>
	</span>
	<a class="btn btn-sm green table-group-action-filter" data-toggle="modal" href="#modal_filter"><i class="fa fa-filter"></i> Filter</a>
	<button class="btn btn-sm red table-group-action-filter filter-cancel"><i class="fa fa-remove"></i> Reset Filter</button>
</div>
<table class="table table-striped table-bordered table-hover" data-column-sorting="0" data-dir-sorting="desc" id="tbl_over_payment" data-url="<?= base_url('payment/over_payment_ajax') ?>">
	<thead>
	<tr role="row" class="heading">
		<th>
			Billing No.
		</th>
		<th>
			Unit Number
		</th>
		<th>
			Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</th>
		<th>
			Month
		</th>
		<th>
			Year
		</th>
		<th>
			Total Amount &nbsp;&nbsp;&nbsp;&nbsp;
		</th>
	</tr>
	
	</thead>
	<tbody>
	</tbody>
</table>

<div id="modal_filter" class="modal fade" tabindex="-1">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h4 class="modal-title">Form Filter</h4>
	</div>
	<div class="modal-body form">

		<form class="form-horizontal">
			<div class="form-body">

				<div class="form-group">
					<label class="col-md-4 control-label">Billing No.</label>
					<div class="col-md-6">
						<input type="text" class="form-control form-filter" name="bill_code">
					</div>
				</div>

				<div class="form-group">
					<label class="col-md-4 control-label">Unit Number</label>
					<div class="col-md-6">
						<input type="text" class="form-control form-filter" name="unit_name">
					</div>
				</div>

				<div class="form-group">
					<label class="col-md-4 control-label">Period</label>
					<div class="col-md-4">
						<div class="input-group date date-picker" data-date-format="mm-yyyy">
							<input type="text" class="form-control form-filter" name="period_start" readonly>
							<span class="input-group-btn">
								<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
							</span>
						</div>
					</div>
					<div class="col-md-4">
						<div class="input-group date date-picker" data-date-format="mm-yyyy">
							<input type="text" class="form-control form-filter" name="perion_end" readonly>
							<span class="input-group-btn">
								<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
							</span>
						</div>
					</div>
				</div>

			</div>
		</form>

		
	</div>
	<div class="modal-footer">
		<button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
		<button type="button" class="btn blue filter-submit">Filter</button>
	</div>
</div>

<script type="text/javascript">
	jQuery(document).ready(function() {   
		TableAjax.init('#tbl_over_payment')
		CustomForm.init()
	})
</script>
