@extends('layouts.app-admin')

@section('title', 'Shop 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">
						<input type="hidden" class="token" id='_token' name="_token" value="{{ csrf_token()}}">
					</div>

					<div class="panel-body">
						<h5 class="panel-title">Register Shop This Month</h5>
						<div class="heading-elements">
							<div class="form-group" >
								<select class="bootstrap-select" name="earning" id="select-period" >
									<option value="">Select an option</option>
									<option value="1">This Week</option>
									<option value="2">This Month</option>
									<option value="3">Last Month</option>
									<option value="2026-06-01">June - 2026</option><option value="2026-05-01">May - 2026</option><option value="2026-04-01">April - 2026</option><option value="2026-03-01">March - 2026</option><option value="2026-02-01">February - 2026</option><option value="2026-01-01">January - 2026</option><option value="2025-12-01">December - 2025</option><option value="2025-11-01">November - 2025</option><option value="2025-10-01">October - 2025</option><option value="2025-09-01">September - 2025</option><option value="2025-08-01">August - 2025</option>								</select>		
							</div>
						</div>
						<div class="row">
							<div id="chart" style="width: 100%; height: 450px;"></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">Registered Shops By Last 12 Months</h5>
					</div>
					<div class="panel-body">
						<div class="row">
							<div id="piechart" style="width: 100%; height: 450px; "></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">List All Shops</h5>
					</div>
					<div class="panel-body">
						<div class="row">
								<table class="table table-bordered">
									<thead class="bg">
										<tr class="bg-success">
											<th>#</th>
											<th>Shop Name</th>
											<th>Phone Number</th>
											<th>Email</th>
											<th>Location</th>
										</tr>
									</thead>
									<tbody id="data_table">
										@if($listShopPeriod)
											@foreach($listShopPeriod as $key => $value)
												<tr>
													<td>{{$key+1}}</td>
													<td>{{$value->name}}</td>
													<td>{{$value->phone}}</td>
													<td>{{$value->email}}</td>
													<td width="25%">{{$value->province_name}} , {{$value->country_name}}</td>
												</tr>
											@endforeach
										@else
											<tr>
												<td class="5">{{trans('admin_default.no_records')}}</td>
												<td class="5">{{trans('admin_default.no_records_found')}}</td>
												<td class="5">{{trans('admin_default.no_records_found')}}</td>
											</tr>
										@endif
									</tbody>
								</table>
							</div>
						</div>

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

<script type="text/javascript">
	
	// ############# Register shop by this month ############

	var json_data = {!! $json_chart !!};

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

    function drawStuff() {
        var data = new google.visualization.arrayToDataTable(json_data);

        var options = {
          	isStacked: true,

          	colors:['#00bfff','#00b33c'],
          	chartArea: {
			    left: 50,
			    top: 50,
			    bottom: 70,
			    width: '95%'
			},
			// bar: {groupWidth: "10%"},
			legend: 'top'
    };

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

    // ################## Register shop by year ###################

	var json_datas = {!! $year_report !!};
    function drawAnthonyChart() {
    	var data = new google.visualization.arrayToDataTable(json_datas);

        var options = {
        	isStacked: true,

          	colors:['#00bfff','#00b33c'],
          	chartArea: {
			    left: 50,
			    top: 50,
			    bottom: 80,
			    width: '95%'
			},
			// bar: {groupWidth: "35%"},
			legend: 'top'
        };
        
        var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
        chart.draw(data, options);
    }

	$(document).ready(function(){

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

	function drawChartThisMonth(data_table) {
		var arr = jQuery.parseJSON(data_table);
	  	var data = google.visualization.arrayToDataTable(arr);
	  	
	  	var options = {
          	isStacked: true,

          	colors:['#00bfff','#00b33c'],
          	chartArea: {
			    left: 50,
			    top: 50,
			    bottom: 70,
			    width: '95%'
			},
			// bar: {groupWidth: "10%"},
			legend: 'top'
		};
		var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
		chart.draw(data, options);
	}

	function drawChartEachMonth(data_table) {
		var arr = jQuery.parseJSON(data_table);
	  	var data = google.visualization.arrayToDataTable(arr);
	  	
	  	var options = {
          	isStacked: true,

          	colors:['#00bfff','#00b33c'],
          	chartArea: {
			    left: 50,
			    top: 50,
			    bottom: 70,
			    width: '95%'
			},
			// bar: {groupWidth: "10%"},
			legend: 'top'
		};
		var chart = new google.visualization.ColumnChart(document.getElementById("piechart"));
		chart.draw(data, options);
	}

	function get_list_shop(data){

		var list_shop = data;
        var html ="";
		var j=1;
        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>'+list_shop[i].phone+'</td>';
	     	html +='<td>'+list_shop[i].email+'</td>';
	     	html +='<td>'+list_shop[i].province_name+', '+list_shop[i].country_name+'</td>';
        }
        html +='</tbody></table>';
        $('#data_table').html(html);
	}
	      
	</script>
	
@endsection