

<style>


	.table thead tr >th{

		background-color:#4c0870;

		color:#fff;
	}
	.table thead tr th[class*='sorting_'] {
		color: #fff;
	}
	.bg-master-lighter {
		border:none;
		background-color:#fff;
		border-top:1px solid #ddd; 

	}


</style>
<script src="<?php echo THEME_PATH; ?>/plugins/moment/moment.min.js"></script>
<div class="container-fluid container-fixed-lg bg-white">
	<div class="panel panel-transparent">
            <div class="panel-heading">
                <div class="panel-title"><?php print CommonLanguage::getMessage('top_cust_list'); ?></div>
                <div  class="col-md-12">
                    <div class="col-md-2">
                        <h5><?php print CommonLanguage::getMessage('in_leb'); ?></h5>
                    </div>
                    <div class=" col-md-3 input-daterange " id="datepicker-range">
                        <h5><?php print CommonLanguage::getMessage('range_date'); ?></h5>
                    </div>
                    <div class="col-md-2">
                        <h5><?php print CommonLanguage::getMessage('limit');?></h5>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-2">
                       
                        <input type="checkbox" checked id="is_leb" name="is_leb"/>
                    </div>
                    <div class=" col-md-3 input-daterange " id="datepicker-range">
                        
                        <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" >

                    </div>
                    <div class="col-md-1">
                        <input type="number" id="limit" min="1" value="10" class="form-control" >
                  </div>
                    <div class="col-md-3">
                        <!--<h5>  </h5>-->
                        <button id="Generate_Report" type="button" class="btn btn-complete" data-toggle="dropdown" aria-expanded="false">
                            <?php print CommonLanguage::getMessage('generate_report'); ?></button>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
		<div class="panel-body">
			<table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
				<thead>
					<tr>
						

						<th class="v-align-middle text-center "><?php print CommonLanguage::getMessage('Name');?></th>
						<th class="v-align-middle text-center "><?php print CommonLanguage::getMessage('commercial_registry');?></th>
						<th class="v-align-middle text-center " > <?php print CommonLanguage::getMessage('balance');?> </th>
					</tr>
				</thead>
				<tbody>
					<?php
					for($x=0;$x<count($result);$x++){
                                            $CurItem = $result[$x];
					?>
					<tr>
						

						<td class='v-align-left text-left bold'><?php echo $CurItem["name"]; ?></td>
						<td class='v-align-left text-center bold'><?php echo $CurItem["CR"]; ?></td>
						<td class='v-align-middle text-center'><span class="DefaultCurrency"><?php echo $localCurrency; ?> </span> <span class=""><?php echo CommonFunctions::formatNumber($CurItem["balance"]); ?></span></td>
					</tr>
					<?php } 


					?>
					
				</tbody>

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

<script>
    title = <?php echo json_encode(CommonLanguage::getMessage('top_cust_list'));?>;
    var fromdate = <?php echo json_encode($date_from)?>, today = <?php echo json_encode($date_to)?>;
    var currSymbol = <?php echo json_encode($localCurrency); ?>;
    $(function(){
        new Switchery($("#is_leb").get(0),{color: $.Pages.getColor("complete")})
         RebuildTable()
          $("input[name=From_To_Date]").daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },

            startDate: fromdate

        },     function(start, end,label){
            window.startDate = start.format("YYYY-MM-DD"),
                window.endDate = end.format("YYYY-MM-DD")

        });
    })
    
     $("#Generate_Report").on("click",function(){
        changes()
    })
    
        function changes() {
        var CurrentDate =  {
        };  
        CurrentDate.From_Date = window.startDate ? window.startDate : fromdate;
        CurrentDate.To_Date = window.endDate ? window.endDate : today;
        CurrentDate.limit=$("#limit").val();
        CurrentDate.is_leb = $("#is_leb").is(":checked")? 1 : 0;
        
        $("#AjaxIsBusy").removeClass("HideMe")
        $.ajax({
            url:"ACCAjax/topCustomersAjax",
            data:CurrentDate,
            dataType: "json",
            complete:function(v,vv){
                if(vv == "success" ){
                    var Data  = v.responseJSON;
//                    console.log(Data)
                    $("#tableWithSearch").DataTable().destroy()
                    $("#tableWithSearch tbody").empty()
                    var tr = '';
                    for (var i=0; i<Data.length; i++) {
                        tr += '<tr><td class="v-align-left text-left bold">'+Data[i]["name"]+'</td>'+
                                '<td class="v-align-center text-left bold">'+Data[i]["CR"]+'</td>'+
                                '<td class="v-align-center text-left bold"><span class="DefaultCurrency">'+currSymbol+'&nbsp</span><span>'+AddCommas(public_round_number(parseFloat(Data[i]["balance"])))+'</span></td>'+
                            '</tr>'
                        
                    }
                    $("#tableWithSearch tbody").append(tr)
                   RebuildTable()
  
            } 
            }
        })
    }
        function RebuildTable(){
        $('#tableWithSearch').dataTable({
                "aaSorting":[],
            "bSort": false,
            dom: 'Bfrtip',
                "pagingType": "full_numbers",
            buttons: [
                {
                    extend:'excelHtml5',
                    title:title,
                     text:'<i class="fa fa-file-excel-o"></i> Excel'

                },
                {
                    extend:'pdfHtml5',
                    title:title,
                    text:'<i class="fa fa-file-pdf-o"></i> Pdf',
                    "sCharSet" :'utf-8',
                    
                },
                {
                    extend:'print',
                    text:'<i class="fa fa-print"></i> Print',
                    title:title
                }],
        });
     
    }
  
</script>



