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

@section('header')
Dashboard
@endsection

<style type="text/css">
	th, td {
		font-size: 13px;
	}
    table.dataTable.table-condensed thead > tr > th {
        padding-right: 0px !important;
    }
    table.dataTable thead > tr > th {
        padding-right: 0px;
    }
    .btn-group>.btn+.dropdown-toggle {
        padding-bottom: 9px;
        padding-top: 7px;
    }
</style>

@section('body')
<div class="row" style="padding-left:5px; padding-right:5px">
	<div class="box-header with-border">
	  	<h3 class="box-title">Guarantee Deposits</h3>
	  	<div class="box-tools">
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-sm btn-flat" id="filter-acct-status" data-filter="active">Filter Accounts</button>
                <button type="button" class="btn btn-default btn-sm btn-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="fa fa-fw fa-filter"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="toggle-filter-acct-status" data-filter="all"><a href="#">All</a></li>
                    <li class="toggle-filter-acct-status" data-filter="active"><a href="#">Refunded</a></li>
                    <li class="toggle-filter-acct-status" data-filter="disconnected"><a href="#">Unrefunded</a></li>
                </ul>
            </div>
	  	</div>
	</div>
</div>
<div class="box box-info">
	<div class="box-body">
  		<div class="row">
    		<div class="col-xs-12">
      			<table class="table table-condensed table-hover" id="gd-table" style="width:100%">
                    <thead class="table-header-bg">
                        <tr class="info">
                        	<th width="2%">ID</th>
                            <th width="10%">CUSTOMER NAME</th>
                            <th width="8%">ACCOUNT NO.</th>
                            <th width="15%">ADDRESS</th>
                            <th width="4%" style="text-align: center;">BOOK</th>
                            <th width="4%" style="text-align: center;">METER NO.</th>
                            <th width="2%" style="text-align: center;">CLASSIFICATION</th>
                            <th width="4%" style="text-align: center;">GD</th>
                            <th width="4%" style="text-align: center;">GD REFUNDED</th>
                        </tr>
                    </thead>
                    <tbody>
                	
            		</tbody>
                </table>
    		</div>
	  	</div>
	</div>
</div>

{{-- @include('administrator.other-settings._datatable') --}}
@endsection

@section('scripts')
<script type="text/javascript">
	$(document).ready(function(){
        $.ajax({
            url   		: $app_url + '/reports/guarantee-deposits/load-cust',
            type  		: 'GET',
            contentType : 'json',
            processData : true,
            success : function(response){
                $('#gd-table').DataTable().destroy();
                var $table = $('#gd-table > tbody');
                $table.empty();		

                $('#gd-table').DataTable( {
                    "processing": true,
                    "dom"       : 'tfp',
                    "deferRender": true,
                    "deferLoading": 10,
                    "data"      : response,
                    "columns": [
                        { "data": "id",             orderable:false, },
                        { "data": "customer_name",  orderable:false, className:"text-uppercase" },
                        { "data": "acct_no",        orderable:false, },
                        { "data": "address",        orderable:false, className:"text-uppercase" },
                        { "data": "book",           orderable:false, className:"text-center" },
                        { "data": "meter_no",       orderable:false, className:"text-center" },
                        { "data": "class",          orderable:false, className:"text-center" },
                        { "data": "gdeposit",       orderable:false, className:"text-center" },
                        { 
                            "data": "gd_refunded",    
                            orderable:false, 
                            render : function(data, type, row){
                                        if(data == 0){
                                            return "<label class='label label-warning'>No</label>";
                                        }else{
                                            return "<label class='label label-success'>Yes</label>";
                                        }
                                    },
                            className:"text-center" 
                        }
                    ],
                } );	
                
                $('div.dataTables_filter input').prop('placeholder', 'Search');
                $('#gd-table_filter').css('float', 'left');
            },
            error : function(xhr){  					
            },
            beforeSend : function(){
                showBoxLoadingState();
            },
            complete : function(){
                removeBoxLoadingState();
            }								
        });	

        
    });	
</script>
@endsection