@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('header')
    Dashboard
@endsection

@section('body')
<div class="box box-default">
	<div class="box-body">
		<div class="row">
			<div class="col-xs-12">
				<label class="text-primary" style="font-size:16px; margin-top:6px">Illegal Connections</label>

				<div class="pull-right" style="width:140px; margin-right:3px">
                    <select id="filter-by-status" class="form-control select2 select2-hidden-accessible" data-placeholder="PAYMENT STATUS" style="width: 100%;" aria-hidden="true">
                        <option value="p">PAID</option>
                        <option value="up" selected="true">UNPAID</option>
                    </select>
                </div>
			</div>
		</div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-xs-12">
      			<table class="table table-condensed table-hover" id="table-illegals">
                    <thead class="table-header-bg">
				      	<tr>
				            <th width="10%">JO NO.</th>
				            <th width="10%">ACCOUNT NO.</th>
				            <th width="20%">CUSTOMER / OCCUPANT NAME</th>
				            <th width="29%">ADDRESS</th>
				            <th width="8%">TOTAL AMT</th>
				            <th width="8%">AMT PAID</th>
				            <th width="8%">BALANCE</th>
				            <th width="5%">STATUS</th>
				            <th width="2%"></th>
				      	</tr>
					</thead>
                </table>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
	$(document).ready(function() {
		$dt = $('#table-illegals').DataTable({
	        deferred: true,
	        processing: true,
	        serverSide: true,
	        bSort: false,
	        ajax: {
	            url: $app_url + '/csr/illegal-connection/dt',
	            data: function(d){
                    d.status = $('#filter-by-status').val();
                }
	        },
	        columns: [
	            { data:'jo_number',       	name:'j.jo_number',   		orderable:false,   className:"text-uppercase" },
	            { data:'acct_number',   	name:'ca.acct_number', 		orderable:false,   className:"text-uppercase" },
	            { data:'cust_name',    	    name:'cust_name',  			orderable:false,   className:"text-uppercase" },
	            { data:'complete_address', 	name:'complete_address', 	orderable:false,   className:"text-uppercase" },
	            { data:'amt_total', 		name:'ic.amt_total', 		orderable:false,   className:"text-uppercase",		searchable:false },
	            { data:'amt_paid', 			name:'cap.amt_paid', 		orderable:false,   className:"text-uppercase",		searchable:false },
	            { data:'amt_remaining', 	name:'cap.amt_remaining', 	orderable:false,   className:"text-uppercase",		searchable:false },
	            { data:'status', 			name:'cap.status', 			orderable:false,   className:"text-uppercase",		searchable:false },
	            { data:'action', 			name:'action', 				orderable:false,	searchable:false }
	        ],
	        columnDefs: [
                {   
                    targets: 5, 
                    render: function(data, type, row) {
                        return '(' +  data + ')';
                    }
                },
            ],
	        createdRow: function(row, data, dataIndex) {
	            $(row).attr('data-promo-id', data.promo_id);
	        }
	    });

	    $('#table-illegals_filter input').unbind();
	    $('#table-illegals_filter input').bind('keyup', function(e) {
	        if(e.keyCode == 13) {
	            $dt.search($(this).val()).draw();
	        }
	    });

	    $('#filter-by-status').change(function() {
            $dt.search($('#table-illegals_filter input').val()).draw();
        });
	});
</script>
@endsection