@extends('layouts.app-admin')

@section('title', 'Transaction 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 Transaction Processing 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="transaction_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 Transaction Processing 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-7" id="topTransactionShop" style="height: 400px;"></div>
								<div class="col-md-5" 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># Transaction</th></tr>
										</thead>
										<tbody>
											@if(count($tableTransaction))
												@foreach($tableTransaction as $tKey => $tValue)
													<tr>
														<td>{{$tKey+1}}</td>
														<td>{{$tValue->name}}</td>
														<td class="text-right" width="25%">{{$tValue->counts}}</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">Transaction 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">
								<table class="table table-bordered">
									<thead>
										<tr class="bg-success">
											<th width="10%">#</th>
											<th>Shop Name</th>
											<th width="25%"># Transaction</th>
										</tr>
									</thead>
									<tbody id="tables">
										@if(count($transactionList))
											@foreach($transactionList as $tKey => $tValue)
												<tr>
													<td>{{$tKey+1}}</td>
													<td>{{$tValue->name}}</td>
													<td class="text-right">{{$tValue->counts}}</td>
												</tr>
											@endforeach
										@else
											<tr>
												<td colspan="5">{{trans('admin_default.no_records')}}</td>
											</tr>
										@endif
									</tbody>
								</table>
							<!-- /table header styling -->
							</div>
						</div>
					</div>

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

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

<script type="text/javascript">

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

	google.charts.load("current", {packages:['corechart']});
  	google.charts.setOnLoadCallback(drawChartTransaction);
  	google.charts.setOnLoadCallback(drawChartThisWeek);

  	var json_data_tran_today = {!! $transactionToday !!};
  	var json_data_transactionThisWeek = {!! $dataTransaction !!};

	$(document).ready(function(){
		$('select#select-period').change(function(){

			var me = $(this),
				value = me.val(),_token=$('#_token').val();
			var url    = "{!! url('getPeroidTransaction') !!}" + "/" + value;

			$.ajax({
            	type:"get",
            	url:url,
            	data:{_token:_token},
            	success:function(data){
                  	drawChartTransactionPeriod(data[0]);
                 	get_list_transaction(data[1]);
            	}
            });
		});

		$('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('getTransactionDateRange')}}" + "/" + format_begin + "/" + format_end,
				data:{},
				success:function(data){
            		// console.log(data);
            		get_list_transaction_by_range(data);
				}
			});

		});
	});

	function drawChartTransaction() {
      	var data = google.visualization.arrayToDataTable(json_data_tran_today);
      	
      	var options = {
        	// title: "Top Earning Shop (Today )",				
	        chartArea: {
			    left: 70,
			    right: 30,
			    top: 50,
			    bottom: 80,
			    width: '100%', 	    
			},
			// bar: {groupWidth: "5%"},
			vAxis: {viewWindow: {min:0} },
			legend: 'none',

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

	function drawChartTransactionPeriod(data_table) {

		var arr = jQuery.parseJSON(data_table);
	  	var data = google.visualization.arrayToDataTable(arr);
	  	
	  	var options = {
	    				
	        chartArea: {
			    left: 30,
			    top: 50,
			    bottom: 80,
			    width: '100%',
			},
			// gridlines: { count: -1},
			// bar: {groupWidth: "7%"},
			vAxis: {viewWindow: {min:0} },
			legend: 'none',
			
		};
		var chart = new google.visualization.ColumnChart(document.getElementById("topTransactionShop"));
		chart.draw(data, options);
	}

	function get_list_transaction(data){

		var list_shop = data;
        var html ="<table class='table table-bordered'><thead class='bg'><tr class='bg-success'><th>#</th><th>Shop Name</th><th># Transaction</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 width = "10%">'+ j +'</td>';
		     	html +='<td>'+list_shop[i].name+'</td>';
		     	html +='<td width = "25%" class="text-right">'+list_shop[i].counts+'</td>';
				html +='</tr>';
	        	j++;
	        }
		}
        html +='</tbody></table>';
        $('#table').html(html);
    }
  	
	function drawChartThisWeek() {
	  	var data = google.visualization.arrayToDataTable(json_data_transactionThisWeek);
	  	
	  	var options = {			
	        chartArea: {
			    left: 75,
			    top: 50,
			    bottom: 80,
			    width: '100%', 	    
			},
			// bar: {groupWidth: "7%"},
			vAxis: {viewWindow: {min:0} },
			legend: 'none',
		};
		var chart = new google.visualization.ColumnChart(document.getElementById("topTransactionShop"));
		chart.draw(data, options);
	}

	function get_list_transaction_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].counts+'</td>';
		     	html +='</tr>';
		     	j++;
	        }
		}
        // html +='</tr>';
        $('#tables').html(html);
	}
	
</script>
@endsection