<div align="center">სტატისტიკური მონაცემები</div>
	<div class="Question">
		
		<div class="QHeader">აირჩიეთ სტატისტიკა</div> 
		<select name="PrType" onchange="PrTypeChange(this.value)" required>
			<option value="-1"></option>
			<option value="0">მიმდინარე</option>
			<option value="1">არქივი</option>
		</select>
	</div>		
		
		
	<div class="Question ProgramTypes">
	</div>	
		<?php
		/*$ptk=mysqli_query($baza,'select * from cf_ProgramClasses where Active=1 order by Pos');
		if(mysqli_num_rows($ptk)==0) 
			echo '<div class="QHeader">აქტიური პროგრამის კლასი არ მოიძებნა</div>';
		else{
			echo '<div class="QHeader">აირჩიეთ პროგრამის კლასი ან საჭიროების იდენტიფიცირება</div>';
			echo '<select name="PrClass" class="cfSelect" onchange="PrClassChange(this.value)" required><option></option>';
			while($row=mysqli_fetch_array($ptk)){
				echo '<option value="'.$row['ID'].'" '.($row['ShowInProgramList']==1?'isProgram=1':'').'>'.$row['Name'].'</option>';
				}
			echo '</select>';
			}*/
		?>
	

	<div class="Question Programs">
	</div>

	<div class="Charts">
	</div>


<script>
  window.Promise ||
	document.write(
	  '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
	)
  window.Promise ||
	document.write(
	  '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
	)
  window.Promise ||
	document.write(
	  '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
	)
</script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
						
<script>
function PrTypeChange(archive){
	$('.Question.ProgramTypes').html('');
	$('.Question.Programs').html('');
	$('.Charts').html('');
	if(archive>=0)
	$.ajax({
		url:'interactive.php',
		dataType:'text',
		type:'post',
		data:{f:'getProgramsClasses',archive:archive}
	}).done(function(data){
		$('.Question.ProgramTypes').html(data);
	}).fail(function(data){
		$('.Question.ProgramTypes').html('');
		console.log('fail = ',data);
	})
}
function PrClassChange(PrClass){
	$('.Question.Programs').html('');
	$('.Charts').html('');
	var isProgram=$('#PrClass option[value='+PrClass+']').attr('isProgram');
	if(typeof(isProgram)=='undefined') isProgram=0;
	$.ajax({
		url:'interactive.php',
		dataType:'text',
		type:'post',
		data:{f:'getPrograms',PrClass:PrClass,isProgram:isProgram}
	}).done(function(data){
		$('.Question.Programs').html(data);
	}).fail(function(data){
		$('.Question.Programs').html('');
		
		console.log('fail = ',data);
	})
	
}
function ProgramChange(ProgramID){
	$('.Charts').html('');
	var QuestID=$('select[name="Program"] option[value='+ProgramID+']').attr('QID');
	$.ajax({
		url:'interactive.php',
		dataType:'json',
		type:'post',
		data:{f:'getStatistics', QuestID:QuestID, ProgramID:ProgramID}
	}).done(function(data){
		var TypesAvail=['თარიღი','თარიღების დიაპაზონი','არჩევა ერთის','არჩევა რამოდენიმეს','შეფასება ქულით'];
		$.each(data,function(i,e){
			var ID=e.ID;
			var Name=e.QuestName;
			var Type=e.Type;
			var Options=e.Options;
			var Data=e.Data;
			if(TypesAvail.includes(Type)){
				var html='<div class="Chart"><div class="chartHeader">'+Name+'</div><div class="chartArea" id="Ch'+ID+'"></div></div>';
				$('.Charts').append(html);
				// 'თარიღი','თარიღების დიაპაზონი','არჩევა ერთის','არჩევა რამოდენიმეს','შეფასება ქულით'
				//if(false)
				if(Type=='თარიღების დიაპაზონი'){
					var datas={}; 
					var Min0=0, Max0=0;
					var Day=60*60*24;
					$.each(Data,function(i,e){
						var Min=parseInt(e.Min);
						var Max=parseInt(e.Max);
						if(Min0==0) Min0=Min;
						if(Max0==0) Max0=Max;
						if(Min0>Min) Min0=Min;
						if(Max0<Max) Max0=Max
						for (i=Min; i <= Max; i += Day ){ 
							if(typeof(datas[i])=='undefined') datas[i]=1; else datas[i]++;
							}
						})
					var data0=[];
					$.each(datas,function(i,e){
						data0.push([i*1000,e]);
						})
					var el= '#Ch'+ID;
					$(el).html('<div id="chart"><div class="toolbar"><button id="one_month" @click="updateData(\'one_month\')" :class="{active: selection===\'one_month\'}">1M</button><button id="six_months" @click="updateData(\'six_months\')" :class="{active: selection===\'six_months\'}" >6M</button><button id="one_year" @click="updateData(\'one_year\')" :class="{active: selection===\'one_year\'}">1Y</button><button id="ytd" @click="updateData(\'ytd\')" :class="{active: selection===\'ytd\'}">YTD</button><button id="all" @click="updateData(\'all\')" :class="{active: selection===\'all\'}">ALL</button></div><div id="chart-timeline"><apexchart type="area" height="350" ref="chart" :options="chartOptions" :series="series"></apexchart></div></div>');

					new Vue({
						el: el,
						components: {
						  apexchart: VueApexCharts,
						},
						data: {
						  series: [{
							data: data0
						  }],
						  chartOptions: {
							chart: {
							  id: 'area-datetime',
							  type: 'area',
							  height: 350,
							  zoom: {
								autoScaleYaxis: true
							  }
							},
							annotations: {
							  yaxis: [{
								y: 30,
								borderColor: '#999',
								label: {
								  show: true,
								  text: 'Support',
								  style: {
									color: "#fff",
									background: '#00E396'
								  }
								}
							  }],
							  xaxis: [{
								x: Max0*1000,
								borderColor: '#999',
								yAxisIndex: 0,
								label0: {
								  show: true,
								  text: 'Rally',
								  style: {
									color: "#fff",
									background: '#775DD0'
								  }
								}
							  }]
							},
							dataLabels: {
							  enabled: false
							},
							markers: {
							  size: 0,
							  style: 'hollow',
							},
							xaxis: {
							  type: 'datetime',
							  min: Min0*1000,
							  tickAmount: 6,
							},
							tooltip: {
							  x: {
								format: 'dd MMM yyyy'
							  }
							},
							fill: {
							  type: 'gradient',
							  gradient: {
								shadeIntensity: 1,
								opacityFrom: 0.7,
								opacityTo: 0.9,
								stops: [0, 100]
							  }
							},
						  },

						  selection: 'all', 
						},
						methods: {
						  updateData: function(timeline) {
							this.selection = timeline

							switch (timeline) {
							  case 'one_month':
								this.$refs.chart.zoomX(
								  (Max0-30*Day)*1000,
								  Max0*1000
								)
								break
							  case 'six_months':
								this.$refs.chart.zoomX(
								  (Max0-6*30.5*Day)*1000,
								  Max0*1000
								)
								break
							  case 'one_year':
								this.$refs.chart.zoomX(
								  (Max0-365*Day)*1000,
								  Max0*1000
								)
								break
							  case 'ytd':
								this.$refs.chart.zoomX(
								  new Date('01 Jan <?=date('Y')?>').getTime(), 
								  Max0*1000
								)
								break
							  case 'all':
								this.$refs.chart.zoomX(
								  Min0*1000,
								  Max0*1000
								)
								break
							  default:
							}
						  }
						}
						})
					}

				//if(false)
				if(Type=='არჩევა ერთის'){
					//console.log('Data=',Data);
					Answers=Options.Answers.split('\\r\\n');
					var datas={};
					$.each(Answers,function(i,e){
						datas[i]=0;
						})
					$.each(Data,function(i,e){
						datas[e.Val]++;
						})

					//console.log('datas=',datas);

					var data0=[];
					$.each(datas,function(i,e){
						data0.push(e);
						})

					//console.log('data0=',data0);

					var el= '#Ch'+ID;
					$(el).html('<div id="chart"><apexchart type="pie" height="350" :options="chartOptions" :series="series"></apexchart></div>');
					if($(data0).length>0)
					  new Vue({
						el: '#Ch'+ID,
						components: {
						  apexchart: VueApexCharts,
						},
						data: {
						  series: data0,
						  chartOptions: {
							chart: {
							  width: '100%',
							  type: 'pie',
							},
							legend: {
								position: 'bottom'
								},
							labels: Answers,
						  },
						},
					  })
					}

				//if(false)
				if(Type=='არჩევა რამოდენიმეს'){ 
					//console.log('Data=',Data);
					Answers=Options.Answers.split('\\r\\n');
					var datas={};
					$.each(Answers,function(i,e){
						datas[i]=0;
						})
					$.each(Data,function(i,e){
						datas[e.Val]++;
						})

					//console.log('datas=',datas);

					var data0=[];
					$.each(datas,function(i,e){
						data0.push(e);
						})

					//console.log('data0=',data0);
					//console.log('Answers=',Answers);

					var el= '#Ch'+ID;
					$(el).html('<div id="chart"><apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart></div>');
					if($(data0).length>0)
					new Vue({
						el: el,
						components: {
						  apexchart: VueApexCharts,
						},
						data: {

						  series: [{
							// name: 'Servings',
							data: data0
						  }],
						  chartOptions: {
							chart: {
							  height: 350,
							  type: 'bar',
							},
							plotOptions: {
							  bar: {
								borderRadius: 10,
								columnWidth: '50%',
							  }
							},
							dataLabels: {
							  enabled: false
							},
							stroke: {
							  width: 2
							},

							grid: {
							  row: {
								colors: ['#fff', '#f2f2f2']
							  }
							},
							xaxis: {
							  labels: {
								rotate: -75,
								wrap: true,
							  },
							  categories: Answers,
							  tickPlacement: 'on'
							},
							yaxis: {
							  title: {
								// text: 'Servings',
							  },
							},
							fill: {
							  type: 'gradient',
							  gradient: {
								shade: 'light',
								type: "horizontal",
								shadeIntensity: 0.25,
								gradientToColors: undefined,
								inverseColors: true,
								opacityFrom: 0.85,
								opacityTo: 0.85,
								stops: [50, 0, 100]
							  },
							}
						  },
						},
					  })
					}

				//if(false)
				if(Type=='შეფასება ქულით'){
					//console.log('Data = ',Data);
					//console.log('Options = ',Options);
					var min,max;
					min=parseInt(Options.minimum);
					max=parseInt(Options.maximum);

					var datas={}, labels={};
					for(i=min; i<=max; i++){
						datas[i]=0;
						labels[i]=i;
						}
					//console.log('datas = ',datas);
					$.each(Data,function(i,e){
						datas[parseInt(e.Val)]++;
						})
					//console.log('datas = ',datas);
					
					var data0=[];
					$.each(datas,function(i,e){
						data0.push(e);
						})
					var lab=[];
					$.each(labels,function(i,e){
						lab.push(e);
						})
					//console.log('data0=',data0);

					var el= '#Ch'+ID;
					$(el).html('<div id="chart"><apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart></div>');
					//console.log('labels = ',labels);
					//console.log('data0 = ',data0);
					new Vue({
						el: '#Ch'+ID,
						components: {
						  apexchart: VueApexCharts,
						},
						data: {
						  series: [{
								data: data0
							  }],
						  chartOptions: {
							chart: {
							  type: 'bar',
							  height: 350
							},
							plotOptions: {
							  bar: {
								borderRadius: 4,
								horizontal: false,
							  }
							},
							dataLabels: {
							  enabled: false
							},
							xaxis: {
							  categories: lab,
								tickAmount: 10,
							}
						  },


						},

					  })
					}

				}
			})
		
	}).fail(function(data){
		
		console.log('fail = ',data);
	})
}	
</script>


<style>
      
#chart {
	max-width: 650px;
	margin: 35px auto;
	}
#chart .toolbar {
	margin-left: 45px;
	}
#chart button {
	background: #fff;
	color: #222;
	border: 1px solid #e7e7e7;
	border-bottom: 2px solid #ddd;
	border-radius: 2px;
	padding: 4px 17px;
	}
#chart button.active {
	color: #fff;
	background: #008FFB;
	border: 1px solid blue;
	border-bottom: 2px solid blue;
	}
#chart button:focus {
	outline: 0;
	}	
	
.Charts {
    margin-top: 40px;
}
.Chart {
    border: 1px solid #0003;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #0001;
}
.chartArea {
    min-height: 300px;
    background-color: white;
    margin-top: 10px;
    border: 1px solid #0003;
}
</style>