@extends('layouts.app-admin')

@section('title', 'Financial Report')

@section('content')


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- Page content -->
<div class="page-content">
	<!-- Main content -->
	<div class="content-wrapper">
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-flat">
					<div class="panel-heading">
						<h5 class="panel-title">Top Earning Shops (Today)</h5>
						<input type="hidden" class="token" id='_token' name="_token" value="{{ csrf_token()}}">
					</div>

					<div class="panel-body">
						<div class="row">
							<div id="earning_shop_today" style="width: 100%; height: 400px; "></div>	
						</div>
					</div>
				</div>
				
			</div>
			
		</div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-flat">
					<div class="panel-heading">
						<h5 class="panel-title">Top Earning Shops</h5>
						<div class="heading-elements">
							<div class="form-group" >
								<select class="bootstrap-select" name="earning" id="select-period" >
									<option value="1">This Week</option>
									<option value="2">This Month</option>
									<option value="3">Last Month</option>
								</select>		
							</div>
						</div>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-12">
								<div class=" col-md-8" id="topShop" style="height: 400px; "></div>
								<div class="col-md-4" id="table" style="margin-top: 50px;">
									<table class='table table-bordered'>
										<thead class='bg'>
											<tr class='bg-success'>
												<th width="20%">#</th>
												<th>Shop</th>
												<th>Revenue</th></tr>
										</thead>
										<tbody>
											@if(count($table_this_week))
												@foreach($table_this_week as $tKey => $tValue)
													<tr>
														<td>{{$tKey+1}}</td>
														<td>{{$tValue->name}}</td>
														<td class="text-right">{{" $ " . number_format($tValue->total, 2)}}</td>
													</tr>
												@endforeach
											@else
												<tr>
													<td colspan="5">{{trans('admin_default.no_records')}}</td>		
												</tr>
											@endif
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>

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

		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-flat">
					<div class="panel-heading">
						<h5 class="panel-title">Revenue list</h5>
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-3">
								<div class="input-group">
									<span class="input-group-addon"><i class="icon-calendar22"></i></span>
									<input type="text" class="form-control daterange-basic" id="date_range" value="">
								</div>
							</div>
							<div class="col-md-6">
								<a href="#" id="search-date-rang" class="btn bg-teal-400">
									<i class="icon-search4 position-left"></i> Search
								</a>
							</div>
						</div>
						<br>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<table class="table table-bordered">
										<thead class="bg">
											<tr class="bg-success">
												<th width="10%">#</th>
												<th>Shop Name</th>
												<th width="25%">Revenue</th>
											</tr>
										</thead>
										<tbody id="tables">
											@if(count($revenueList))
												@foreach($revenueList as $rKey => $rValue)
													<tr>
														<td>{{$rKey+1}}</td>
														<td>{{$rValue->name}}</td>
														<td class="text-right">{{" $ " . number_format($rValue->total, 2)}}</td>
													</tr>
												@endforeach
											@else
												<tr>
													<td colspan="5">{{trans('admin_default.no_records')}}</td>
												</tr>
											@endif
										</tbody>
									</table>
								</div>
							<!-- /table header styling -->
							</div>
						</div>
					</div>

				</div>
			</div>	
		</div>
		
	<!-- Main content -->
	</div>
<!-- Page content -->
</div>

<script type="text/javascript">

	// ############### Top earning shop today #####################

  	var json_data_earningTopYear = {!! $topEarningToday !!};
  	var json_data_earningThisWeek = {!! $json_this_week !!};
 
	 
  	google.charts.load("current", {packages:['corechart']});
  	google.charts.setOnLoadCallback(drawChart);
  	google.charts.setOnLoadCallback(drawChartThisWeek);

	$(document).ready(function(){

		$('select#select-period').change(function(){
			var me = $(this),
				value = me.val(),_token=$('#_token').val();
			var url    = "{!! url('getPeroid') !!}" + "/" + value;
			$.ajax({
            	type:"get",
            	url:url,
            	data:{_token:_token},
            	success:function(data){
                  	drawChartWeek(data[0]);
                 	get_list_shop(data[1]);
            	}
            });
		});

		$('#table').load(function(){
			var input_date_range = $('#date_range'),
				date_range = input_date_range.val(),
				arr_date = date_range.split('-'),
				begin = arr_date[0],
				end = arr_date[1];
			var b_date = new Date(begin),
				b_day = ("0" + b_date.getDate()).slice(-2),
				b_month = ("0" + (b_date.getMonth() + 1)).slice(-2),
				b_year = b_date.getFullYear(),
				format_begin = b_year + "-" + b_month + "-" + b_day;
			// end
			var e_date = new Date(end),
				e_day = ("0" + e_date.getDate()).slice(-2),
				e_month = ("0" + (e_date.getMonth() + 1)).slice(-2),
				e_year = e_date.getFullYear(),
				format_end = e_year + "-" + e_month + "-" + e_day;

        	var  token = $('.token').val();

			$.ajax({
				type:"get",
				url:"{{URL::to('getRangeDate')}}" + "/" + format_begin + "/" + format_end,
				data:{},
				success:function(data){
            		// console.log(data);
            		get_list_shop_by_range(data);
				}
			});
		});

		$('a#search-date-rang').click(function(e){
			e.preventDefault();
			var input_date_range = $('#date_range'),
				date_range = input_date_range.val(),
				arr_date = date_range.split('-'),
				begin = arr_date[0],
				end = arr_date[1];
			// begin
			var b_date = new Date(begin),
				b_day = ("0" + b_date.getDate()).slice(-2),
				b_month = ("0" + (b_date.getMonth() + 1)).slice(-2),
				b_year = b_date.getFullYear(),
				format_begin = b_year + "-" + b_month + "-" + b_day;
			// end
			var e_date = new Date(end),
				e_day = ("0" + e_date.getDate()).slice(-2),
				e_month = ("0" + (e_date.getMonth() + 1)).slice(-2),
				e_year = e_date.getFullYear(),
				format_end = e_year + "-" + e_month + "-" + e_day;

        	var  token = $('.token').val();

			$.ajax({
				type:"get",
				url:"{{URL::to('getRangeDate')}}" + "/" + format_begin + "/" + format_end,
				data:{},
				success:function(data){
            		// console.log(data);
            		get_list_shop_by_range(data);
				}
			});

		});
	});

  	function drawChart() {

      	var data = google.visualization.arrayToDataTable(json_data_earningTopYear);
      	var options = {
        	title: "",				
	        chartArea: {
			    left: 100,
			    top: 50,
			    bottom: 80,
			    width: '100%', 	    
			},
			// bar: {groupWidth: "5%"},
			legend: 'none',
			vAxis: {format:'$###,###,###.00', viewWindow: {min:0} },

	    };
	    var chart = new google.visualization.ColumnChart(document.getElementById("earning_shop_today"));
	    chart.draw(data, options);
  	}

	function drawChartWeek(data_table) {
		var arr = jQuery.parseJSON(data_table);
	  	var data = google.visualization.arrayToDataTable(arr);
	  	
	  	var options = {			
	        chartArea: {
			    left: 75,
			    top: 50,
			    bottom: 80,
			    width: '100%', 	    
			},
			// bar: {groupWidth: "7%"},
			legend: 'none',
			vAxis: {format:'$###,###,###.00', viewWindow: {min:0} },
		};
		var chart = new google.visualization.ColumnChart(document.getElementById("topShop"));
		chart.draw(data, options);
	}

	function get_list_shop(data){
		var list_shop = data;
        var html ="<table class='table table-bordered'><thead class='bg'><tr class='bg-success'><th>#</th><th>Shop</th><th>Revenue</th></tr></thead><tbody>";
		var j=1;
		if(list_shop.length == 0)
		{
			html +='<tr><td colspan="3">No records.</td>';
			html +='</tr>';
		}else
		{
	        for(var i=0;i<list_shop.length;i++){
		     	html +='<tr><td>'+ j++ +'</td>';
		     	html +='<td>'+list_shop[i].name+'</td>';
		     	html +='<td class="text-right">$ '+list_shop[i].total+'</td>';
				html +='</tr>';
	        }
		}
        html +='</tbody></table>';
        $('#table').html(html);
	}

	function get_list_shop_by_range(data){

		var list_shop = data;
		var html = "";
		var j=1;
		if(list_shop.length == 0)
		{
	     	html +='<tr><td colspan="3">No Records.</td>';
	     	html +='</tr>';
		}else
		{
	        for(var i=0;i<list_shop.length;i++){
		     	html +='<tr><td>'+ j++ +'</td>';
		     	html +='<td>'+list_shop[i].name+'</td>';
		     	html +='<td class="text-right">$ '+list_shop[i].total+'</td>';
		     	html +='</tr>';
	        }
		}
        // html +='</tr>';
        $('#tables').html(html);
	}

	function drawChartThisWeek() {
	  	var data = google.visualization.arrayToDataTable(json_data_earningThisWeek);
	  	
	  	var options = {			
	        chartArea: {
			    left: 75,
			    top: 50,
			    bottom: 80,
			    width: '100%', 	    
			},
			// bar: {groupWidth: "7%"},
			legend: 'none',
			vAxis: {format:'$###,###,###.00', viewWindow: {min:0} },
		};
		var chart = new google.visualization.ColumnChart(document.getElementById("topShop"));
		chart.draw(data, options);
	}
</script>


@endsection