
<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-disable-sorting="[0,12]" data-column-sorting="0" data-dir-sorting="desc" id="tbl_bill_owner" data-url="<?= base_url('bill/owner_ajax') ?>">
	<thead>
	<tr role="row" class="heading">
		<th width="2%">
			<input type="checkbox" class="group-checkable">
		</th>
		<th>
			Bill No.
		</th>
		<th>
			Unit Owner Name
		</th>
		<th>
			Unit Number
		</th>
		<th>
			Invoice Date
		</th>
		<th>
			Invoice Due Date
		</th>
		<th>
			Amount of Bill &nbsp;&nbsp;&nbsp;&nbsp;
		</th>
		<th>
			Late Charge Payment Last Month
		</th>
		<th>
			Over Payment Last Month
		</th>
		<th>
			Total Payment
		</th>
		<th>
			Bill Remain &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</th>
		<th>
			Status
		</th>
		<th>
			Actions &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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">Bill 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 Owner Name</label>
					<div class="col-md-6">
						<input type="text" class="form-control form-filter" name="occupant_name">
					</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">Invoice Date</label>
					<div class="col-md-4">
						<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
							<input type="text" class="form-control form-filter" name="bill_date_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="dd-mm-yyyy">
							<input type="text" class="form-control form-filter" name="bill_date_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 class="form-group">
					<label class="col-md-4 control-label">Invoice Due Date</label>
					<div class="col-md-4">
						<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
							<input type="text" class="form-control form-filter" name="bill_due_date_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="dd-mm-yyyy">
							<input type="text" class="form-control form-filter" name="bill_due_date_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 class="form-group">
					<label class="col-md-4 control-label">Status</label>
					<div class="col-md-6">
						<select type="text" class="form-control select2 form-filter" name="bill_status" data-allow-clear="true" data-placeholder="Pilih Status">
							<option value=""></option>
							<option value="0">OUTSTANDING</option>
							<option value="1">PAID</option>
						</select>
					</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_bill_owner')
		CustomForm.init()
	})
</script>

<!--
<tr role="row" class="filter">
		<td>
		</td>
		<td>
			<input type="text" class="form-control form-filter input-sm" name="order_id">
		</td>
		<td>
			<div class="input-group date date-picker margin-bottom-5" data-date-format="dd/mm/yyyy">
				<input type="text" class="form-control form-filter input-sm" readonly name="order_date_from" placeholder="From">
				<span class="input-group-btn">
				<button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
				</span>
			</div>
			<div class="input-group date date-picker" data-date-format="dd/mm/yyyy">
				<input type="text" class="form-control form-filter input-sm" readonly name="order_date_to" placeholder="To">
				<span class="input-group-btn">
				<button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
				</span>
			</div>
		</td>
		<td>
			<input type="text" class="form-control form-filter input-sm" name="order_customer_name">
		</td>
		<td>
			<input type="text" class="form-control form-filter input-sm" name="order_ship_to">
		</td>
		<td>
			<div class="margin-bottom-5">
				<input type="text" class="form-control form-filter input-sm" name="order_price_from" placeholder="From"/>
			</div>
			<input type="text" class="form-control form-filter input-sm" name="order_price_to" placeholder="To"/>
		</td>
		<td>
			<div class="margin-bottom-5">
				<input type="text" class="form-control form-filter input-sm margin-bottom-5 clearfix" name="order_quantity_from" placeholder="From"/>
			</div>
			<input type="text" class="form-control form-filter input-sm" name="order_quantity_to" placeholder="To"/>
		</td>
		<td>
			<select name="order_status" class="form-control form-filter input-sm">
				<option value="">Select...</option>
				<option value="pending">Pending</option>
				<option value="closed">Closed</option>
				<option value="hold">On Hold</option>
				<option value="fraud">Fraud</option>
			</select>
		</td>
		<td>
			<div class="margin-bottom-5">
				<button class="btn btn-sm yellow filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
			</div>
			<button class="btn btn-sm red filter-cancel"><i class="fa fa-times"></i> Reset</button>
		</td>
	</tr>
-->