@extends('layouts.app-admin')

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

					<div class="panel-body">
						<div class="row">
							<div id="membershipCards_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 Shops With Most Issue Cards</h5>
						<div class="heading-elements">
							<div class="form-group" >
								<select class="bootstrap-select" name="cards" 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="membershipCards" 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>Issue Cards</th></tr>
										</thead>
										<tbody>
											@if(count($membershipCardsTable))
												@foreach($membershipCardsTable as $Key => $Value)
													<tr>
														<td>{{$Key+1}}</td>
														<td>{{$Value->name}}</td>
														<td class="text-right" width="20%">{{$Value->counts}}</td>
													</tr>
												@endforeach
											@else
												<tr>
													<td colspan="3">{{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">Issue Cards By Shops</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>#</th>
												<th>Shop Name</th>
												<th width="20%"># Issue Cards</th>
											</tr>
										</thead>
										<tbody id="tables">
											@if(count($membershipCardsList))
											@foreach($membershipCardsList as $Key => $Value)
												<tr>
													<td>{{$Key+1}}</td>
													<td>{{$Value->name}}</td>
													<td class="text-right">{{$Value->counts}}</td>
												</tr>
											@endforeach
											@else
												<tr>
													<td colspan="3">{{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">

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

	  	var json_data_cards_today = {!! $membershipCardsToday !!};
	  	var json_data_CardThisWeek = {!! $membershipCardsThisWeek !!};
	  	
	  	$(document).ready(function(){
			$('select#select-period').change(function(){

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

				$.ajax({
	            	type:"get",
	            	url:url,
	            	data:{_token:_token},
	            	success:function(data){
	                  	drawChartCardPeriod(data[0]);
	                 	get_issue_cards(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('getMembershipCardsDateRange')}}" + "/" + format_begin + "/" + format_end,
					data:{},
					success:function(data){

	            		get_list_cards_by_range(data);
					}
				});

			});
		});


	  	function drawChartMembership() {
	      	var data = google.visualization.arrayToDataTable(json_data_cards_today);
	      	
	      	var options = {
	        				
		        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("membershipCards_today"));
		    chart.draw(data, options);
	  	}

	  	function drawChartCardPeriod(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%', 	    
				},
				// bar: {groupWidth: "7%"},
				vAxis: {viewWindow: {min:0} },
				legend: 'none',
				
			};
			var chart = new google.visualization.ColumnChart(document.getElementById("membershipCards"));
			chart.draw(data, options);
		}

		function drawChartThisWeek() {
		  	var data = google.visualization.arrayToDataTable(json_data_CardThisWeek);
		  	
		  	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("membershipCards"));
			chart.draw(data, options);
		}

		function get_issue_cards(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># Issue Cards</th></tr></thead><tbody>";
			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 width = "25%" class="text-right">'+list_shop[i].counts+'</td>';
				html +='</tr>';
	        }
	        html +='</tbody></table>';
	        $('#table').html(html);
		}

		function get_list_cards_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" width="20%">'+list_shop[i].counts+'</td>';
			     	html +='</tr>';
		        }
			}
	        // html +='</tr>';
	        $('#tables').html(html);
		}

</script>


@endsection