<template>
  <!-- content wrapper for page  -->
			<div id="content-wrapper"
			v-bind:class="{ 'content-open': openContent }">
				<!-- content header  -->
				<div class='content-header'>
					<h4 class="margin-left-20">Dashboard</h4>
				</div>
        <!-- page content -->
				<div class="content">
					<div class="row">
						<div class="col-md-2">
							<div class="dashboard-box">
								<div class="dashboard-items-header">
									Monthly Quotations
								</div>
								<div class="dashboard-button-content">
									1520
								</div>
							</div>
						</div>
						<div class="col-md-2">
							<div class="dashboard-box">
								<div class="dashboard-items-header">
									Monthly Users
								</div>
								<div class="dashboard-button-content">
									1520
								</div>
							</div>
						</div>
						<div class="col-md-2">
							<div class="dashboard-box">
								<div class="dashboard-items-header">
									Invoice
								</div>
								<div class="dashboard-button-content">
									1520
								</div>
							</div>
						</div>
						<div class="col-md-2">
							<div class="dashboard-box">
								<div class="dashboard-items-header">
									?
								</div>
								<div class="dashboard-button-content">
									1520
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="dashboard-box">
								<div class="dashboard-items-header">
									Newsfeed
								</div>
								<div class="newsfeed-content">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="dashboard-diagram-box">
								<div class="dashboard-items-header">
									Orders
								</div>
								<div class="dashboard-diagram-content">
									<div>
										<ul class="nav nav-tabs inline-block" @click="setOrderBarChartFilter($event.target.name)">
										  <li class="active"><a data-toggle="tab" name="ACCOUNTMANAGER" class="dashboard-tab">Account Manager</a></li>
										  <li><a data-toggle="tab" name="MONTH" class="dashboard-tab">Month</a></li>
										  <li><a data-toggle="tab" name="TYPE" class="dashboard-tab">Type</a></li>
										  <li><a data-toggle="tab" name="TIMEPERTA" class="dashboard-tab">Time per TA</a></li>
										</ul>
											<select v-model="orderBarChartYear" @change="generateOrderBarChart()" class="dashboard-year-select">

												<option v-for="years in yearOptions" >{{years}}</option>

											</select>

									</div>
									<div id="ordergraph"></div>
									<!-- <v-barchart :labels="orderBarchartLabels" :data="orderBarchartData" name="graph"></v-barchart> -->
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="dashboard-diagram-box">
								<div class="dashboard-items-header">
									Prospects
								</div>
								<div class="dashboard-piechart-content">
									<div>
										<!-- V-MODEL + CHANGE -->
										<select  class="dashboard-year-select" v-model="prospectPieChartYear" @change="generateProspectPieChart()">
											<option v-for="years in yearOptions" >{{years}}</option>
										</select>
										<select  class="dashboard-year-select" v-model="prospectPieChartMonth" @change="generateProspectPieChart()">
											<option v-for="month in months" >{{month}}</option>
										</select>
									</div>
									<div id="prospectspiechart">
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="dashboard-diagram-box">
								<div class="dashboard-items-header">
									City
								</div>
								<div class="dashboard-piechart-content">
									<div>
										<!-- V-MODEL + CHANGE -->
										<ul class="nav nav-tabs inline-block" @click="setCityPieChartFilter($event.target.name)">
										  <li class="active"><a data-toggle="tab" name="PROSPECTS" class="dashboard-tab">Prospects</a></li>
										  <li><a data-toggle="tab" name="ORDERS" class="dashboard-tab">Orders</a></li>
										</ul>
										<select  class="dashboard-year-select" @change="generateProspectPieChart()">
											<option v-for="years in yearOptions" >{{years}}</option>
										</select>
										<select  class="dashboard-year-select" @change="generateProspectPieChart()">
											<option v-for="month in months" >{{month}}</option>
										</select>
									</div>
									<div id="citypiechart">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="dashboard-diagram-box">
								<div class="dashboard-items-header">
									Rejected Orders
								</div>
								<div class="dashboard-diagram-content">
									<ul class="nav nav-tabs inline-block" @click="setRejectedProspectBarChartFilter($event.target.name)">
									  <li class="active"><a data-toggle="tab" name="REASON" class="dashboard-tab">Reason</a></li>
									  <li><a data-toggle="tab" name="QUOTATIONMAKER" class="dashboard-tab">Quotation maker</a></li>
									  <li><a data-toggle="tab" name="TYPE" class="dashboard-tab">Type</a></li>
									  <li><a data-toggle="tab" name="CUSTOMER" class="dashboard-tab">Customer</a></li>
									</ul>
									<select v-model="rejectedProspectBarChartYear" @change="generateRejectedProspectBarChart()" class="dashboard-year-select">
										<option v-for="years in yearOptions" >{{years}}</option>
									</select>
									<div id="rejectedprospectgraph"></div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="dashboard-diagram-box">
								<div class="dashboard-items-header">
									?
								</div>
								<div class="dashboard-diagram-content">
									<ul class="nav nav-tabs">
									  <li class="active"><a class="dashboard-tab">Reason</a></li>
									  <li class="active"><a class="dashboard-tab">Quotation maker</a></li>
									  <li class="active"><a class="dashboard-tab">Type</a></li>
									  <li class="active"><a class="dashboard-tab">Customer</a></li>
										<select class="dashboard-year-select">
											<option value="">2017</option>
											<option value="">2016</option>
											<option value="">2015</option>
											<option value="">2014</option>
										</select>
									</ul>
									<!-- <v-barchart :data="orderBarchartLabels" name="graph" title="asd" :xAxis="orderBarchartLabels" yAxis="" CONDITION=""></v-barchart> -->
								</div>
							</div>
						</div>
					</div>
        </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import echarts from 'echarts'
import barchart from '@/components/utils/barchart.vue'
export default {
  name: 'Dashboard',
	data(){
		return {
			cityPieChart:"",
			cityPieChartData:[],
			cityPieChartFilter:"",
			cityPieChartYear:"",
			cityPieChartMonth:"",
			prospectPieChart:"",
			prospectPieChartData:[],
			prospectPieChartYear:"",
			prospectPieChartMonth:"",
			orderChart:"",
			orderBarChartYear:"",
			orderBarChartFilter:"",
			orderBarChartLabels:[],
			orderBarChartData:[],
			rejectedProspectChart:"",
			rejectedProspectBarChartYear:"",
			rejectedProspectBarChartFilter:"",
			rejectedProspectBarChartLabels:[],
			rejectedProspectBarChartData:[],
			months:["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"],
		}
	},
	components: {
		'v-barchart': barchart
	},
  computed: {
    ...mapGetters({
   openContent: "getSidebar"
 		}),
		getPieChartLabels(){

			var Data = [];
			return Data;
		},
		getRejectedPieChartLabels(){
			var Data = [
				{value: this.prospectPieChartData[0], name: "Approved"},
				{value: this.prospectPieChartData[1], name: "Rejected"}
			]
			return Data
		},
		getCurrentYear(){
        var year = new Date().getFullYear();
        return year;
    },
    getCurrentMonth(){
        var month = new Date().getMonth();
        return month;
    },
		yearOptions(){
			var optionsArray = [];
			for(var i = 2013; i <= new Date().getFullYear(); i++)
			{
				optionsArray.push(i);
			}
			return optionsArray;
		}
  },
	watch:{
		openContent: function(){
			this.resizeGraph();
		}
	},
	methods:{

		findMonth(Month){
			var monthNumber = this.months.indexOf(Month)
			return monthNumber;
		},

		getProspectsPerTime(year, month){
			$.ajax({
				url: this.$apiurl + "api/piechart/get/prospectpercentage/" + year + "/" + month,
				method: 'GET',
				success: function(response){
					this.prospectPieChartData = response;
					this.createRejectedProspectPieChart();
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},
		getOrdersPerCity(year, month){
			$.ajax({
				url: this.$apiurl + "api/piechart/get/orderspercity/" + year + "/" + month,
				method: 'GET',
				success: function(response){
					this.createCityPieChart(response, "ORDERS");
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},
		getProspectsPerCity(year, month){
			$.ajax({
				url: this.$apiurl + "api/piechart/get/prospectspercity/" + year + "/" + month,
				method:'Get',
				success: function(response){
					this.createCityPieChart(response, "PROSPECTS");
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},

		getTotalAmountByRepresentatives(year){
			$.ajax({
				url: this.$apiurl + "api/order/representative/get/group/" + year,
				method: 'GET',
				success: function(response){
	        this.createOrdersBarChartLabels(response, "ACCOUNTMANAGER")
	      }.bind(this),
	      error: function(error, xhr){
	        console.log(error, xhr);
	      }
			})
		},

		getTotalAmountByType(year){
			$.ajax({
				url: this.$apiurl + "api/order/type/get/group/" + year,
				method: 'GET',
				success: function(response){
	        this.createOrdersBarChartLabels(response, "TYPE")
	      }.bind(this),
	      error: function(error, xhr){
	        console.log(error, xhr);
	      }
			})
		},

		getTotalAmountByMonth(year){
			$.ajax({
				url: this.$apiurl + "api/order/amount/get/group/" + year,
				method: 'GET',
				success: function(response){
	        this.createOrdersBarChartLabels(response, "MONTH")
	      }.bind(this),
	      error: function(error, xhr){
	        console.log(error, xhr);
	      }
			})
		},

		getPareto(year){
			$.ajax({
				url: this.$apiurl + "api/order/pareto/" + year,
				method: 'GET',
				success: function(response){
	        this.createOrdersBarChartLabels(response, "PARETO")
	      },
	      error: function(error, xhr){
	        console.log(error, xhr);
	      }
			})
		},

		getAllRejectedOrders(year){
			$.ajax({
				url: this.$apiurl + "api/prospect/dashboard/get/" + year,
				method: 'GET',
				success: function(response){
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},

		getRejectedProspectsWithReason(year){
			$.ajax({
				url: this.$apiurl + "api/prospect/reason/get/" + year,
				method: 'GET',
				success: function(response){
					this.createRejectedProspectChartLabels(response, "REASON")
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},

		getRejectedProspectsWithQM(year){
			$.ajax({
				url: this.$apiurl + "api/prospect/initials/get/" + year,
				method: "GET",
				success: function(response){
					this.createRejectedProspectChartLabels(response, "QM")
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},

		getRejectedProspectsWithType(year){
			$.ajax({
				url: this.$apiurl + "api/prospect/type/get/" + year,
				method:'GET',
				success: function(response){
					this.createRejectedProspectChartLabels(response, "TYPE")
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},

		getRejectedProspectsWithCustomer(year){
			$.ajax({
				url: this.$apiurl + "api/prospect/customer/get/" + year,
				method:'GET',
				success: function(response){
					this.createRejectedProspectChartLabels(response, "CUSTOMER")
				}.bind(this),
				error: function(error, xhr){
					console.log(error, xhr)
				}
			})
		},

		createOrdersBarChartLabels(response, filter){
			var $self = this;
			this.orderBarChartData.length = 0;
			this.orderBarChartLabels.length = 0;

			if(filter == "ACCOUNTMANAGER"){
				for(var data in response) {
					$self.orderBarChartLabels.push(response[data].representative);
					$self.orderBarChartData.push(response[data].amount);
				}
			} else if (filter == "TYPE"){
				for(var data in response) {
					$self.orderBarChartLabels.push(response[data].type);
					$self.orderBarChartData.push(response[data].amount);
				}
			} else if (filter == "MONTH"){
				for(var data in response) {
					$self.orderBarChartLabels.push($self.months[(response[data].month) - 1]);
					$self.orderBarChartData.push(response[data].amount);
				}
			} else {
				swal("No Graph");
			}
			this.createOrderChart();
		},

		createCityPieChartLabels(response, filter){
			var $self = this;
			this.cityPieChartData.length = 0;
			this.cityPieChartLabels.length = 0;
			if(filter == "ORDERS"){
				for(var data in response) {
					$self.cityPieChartLabels.push(response[data].city);
					$self.cityPieChartData.push({
						value: response[data].numberOfOrders,
						name: response[data].city
					});
				}
			} else if (filter == "PROSPECTS"){
				for(var data in response) {
					$self.cityPieChartLabels.push(response[data].city);
					$self.cityPieChartData.push({
						value: response[data].numberOfProspects,
						name: response[data].city
					})
				}
			}

			this.createCityPieChart();
		},

		createRejectedProspectChartLabels(response, filter){
			var $self = this;
			this.rejectedProspectBarChartData.length = 0;
			this.rejectedProspectBarChartLabels.length = 0;

			if(filter == "REASON"){
				for(var data in response) {
					$self.rejectedProspectBarChartLabels.push(response[data].reasonText);
					$self.rejectedProspectBarChartData.push(response[data].amount);
				}
			} else if (filter == "QM"){
				for(var data in response) {
					$self.rejectedProspectBarChartLabels.push(response[data].initials);
					$self.rejectedProspectBarChartData.push(response[data].amount);
				}
			} else if (filter == "TYPE"){
				for(var data in response) {
					$self.rejectedProspectBarChartLabels.push(response[data].type);
					$self.rejectedProspectBarChartData.push(response[data].amount);
				}
			} else if (filter == "CUSTOMER"){
				for(var data in response) {
					$self.rejectedProspectBarChartLabels.push(response[data].orgCode);
					$self.rejectedProspectBarChartData.push(response[data].amount);
				}
			} else {
					swal("No Graph")
			}

			this.createRejectedProspectChart();

		},

		generateOrderBarChart(){
			switch(this.orderBarChartFilter){
				case "ACCOUNTMANAGER":
					this.getTotalAmountByRepresentatives(this.orderBarChartYear)
					break;
				case "TYPE":
					this.getTotalAmountByType(this.orderBarChartYear)
					break;
				case "MONTH":
					this.getTotalAmountByMonth(this.orderBarChartYear)
					break;
				case "TIMEPERTA":
					//CODE HERE
					break;
				}
		},

		generateRejectedProspectBarChart(){
			switch(this.rejectedProspectBarChartFilter){
				case "REASON":
					this.getRejectedProspectsWithReason(this.rejectedProspectBarChartYear)
					break;
				case "QUOTATIONMAKER":
					this.getRejectedProspectsWithQM(this.rejectedProspectBarChartYear)
					break;
				case "TYPE":
					this.getRejectedProspectsWithType(this.rejectedProspectBarChartYear)
					break;
				case "CUSTOMER":
					this.getRejectedProspectsWithCustomer(this.rejectedProspectBarChartYear)
					break;
				}
		},

		generateCityPieChart(){
			switch(this.cityPieChartFilter){
				case "PROSPECTS":
					this.getProspectsPerCity(this.cityPieChartYear, this.findMonth(this.cityPieChartMonth)+1)
					break;
				case "ORDERS":
					this.getOrdersPerCity(this.cityPieChartYear, this.findMonth(this.cityPieChartMonth)+1)
					break;
			}
		},

		generateProspectPieChart(){
			this.getProspectsPerTime(this.prospectPieChartYear, this.findMonth(this.prospectPieChartMonth)+1)
		},

		setRejectedProspectBarChartFilter(obj){
			this.rejectedProspectBarChartFilter = obj
			this.generateRejectedProspectBarChart()
		},

		setCityPieChartFilter(obj){
			this.setCityPieChartFilter = obj
			this.generateCityPieChart()
		},

		setOrderBarChartFilter(obj){
			this.orderBarChartFilter = obj;
			this.generateOrderBarChart()
		},

		createOrderChart(){
			this.orderChart = echarts.init(document.getElementById("ordergraph"));
			this.orderChart.setOption({
				tooltip: {},
	      legend: {
			    data: ['Sales']
			  },
				xAxis: {
						axisLabel:{
							interval:0
						},
						data: this.orderBarChartLabels
				},
				yAxis: {},
				series: [{
						name: 'sales',
						type: 'bar',
						data: this.orderBarChartData
				}]
			});
		},

		createRejectedProspectChart(){
            this.rejectedProspectChart = echarts.init(document.getElementById("rejectedprospectgraph"));
            this.rejectedProspectChart.setOption({
                tooltip: {},
          legend: {
                data: ['Sales']
              },
                xAxis: {
                        data: this.rejectedProspectBarChartLabels
                },
                yAxis: {},
                series: [{
                        name: 'sales',
                        type: 'bar',
                        data: this.rejectedProspectBarChartData
                }]
            });
        },

		createRejectedProspectPieChart(){
			this.prospectPieChart = echarts.init(document.getElementById('prospectspiechart'));
			this.prospectPieChart.setOption({
					legend: {
			 			orient: 'vertical',
			 			x: 'left',
						data:['Approved', 'Rejected']
					},
					series : [
							{
								name:'Prospects',
								type: 'pie',
								radius:['35%', '55%'],
								data: this.getRejectedPieChartLabels,
								label: {
										normal: {
												show: true,
												position: 'top',
												formatter: "{c} ({d}%)"
										},
										emphasis: {
												show: true,
												textStyle: {
														fontSize: '15',
												}
										}
									}
							}
					]
			})
		},

		createCityPieChart(){
			this.cityPieChart = echarts.init(document.getElementById('citypiechart'));
			this.cityPieChart.setOption({
				legend: {
					orient: 'vertical',
					x: 'left',
					data:['Approved', 'Rejected']
				},
				series : [
						{
							name:'Prospects',
							type: 'pie',
							radius:['35%', '55%'],
							data: this.getRejectedPieChartLabels,
							label: {
									normal: {
											show: true,
											position: 'top',
											formatter: "{c} ({d}%)"
									},
									emphasis: {
											show: true,
											textStyle: {
													fontSize: '15',
											}
									}
								}
						}
				]
			})
		},

		resizeGraph(){
			var $self = this;
			setTimeout(function(){
				$self.rejectedProspectChart.resize();
				$self.orderChart.resize();
				$self.prospectPieChart.resize();
				$self.cityPieChart.resize();
			}, 200)
		},

	},
	mounted(){

	},
	created(){
		this.orderBarChartFilter = "ACCOUNTMANAGER"
		this.orderBarChartYear = "2017"
		this.generateOrderBarChart();

		this.rejectedProspectBarChartFilter = "REASON"
		this.rejectedProspectBarChartYear = "2017"
		this.generateRejectedProspectBarChart();

		this.prospectPieChartYear = "2017"
		this.prospectPieChartMonth = "Nov"
		this.generateProspectPieChart();

		this.cityPieChartFilter = "PROSPECTS"
		this.cityPieChartYear = "2017"
		this.cityPieChartMonth = "Okt"
		this.generateCityPieChart();

	}

}
</script>

<style>
#prospectspiechart{
	min-height: 250px;
	width:100%;
}

#citypiechart{
	min-height: 250px;
	width:100%;
}

#ordergraph{
	min-height: 275px;
	width:100%;
}

#rejectedprospectgraph{
	min-height: 275px;
	width:100%;
}

option:focus{
    background-color:#FFF;
    outline:none;
    border:none;
    box-shadow:none;
}

.dashboard-tab{
	color:#0085ad;
	font-size:1em;
	font-family: XylemFont;
	padding:5px !important;
	margin:0 !important;
}

.dashboard-tab:hover{
	cursor:pointer;
}


.dashboard-box{
	background-color:white;
	margin-top:10px;
	height:150px;
	box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
  height: 150px;
}

.dashboard-newsfeed{

}

.newsfeed-content{
	color:#0085ad;
	font-size:1.3em;
	font-family: XylemFont;
	padding-top:5px;
	margin-left:10px;
}

.dashboard-items-header{
	color:white;
	background-color:#0085ad;
	font-family: XylemFont;
	text-align:center;
	font-size:1.5em;
	padding-top:5px;
	padding-bottom: 5px;
}

.dashboard-button-content{
	color:#0085ad;
	font-size:2.0em;
	font-family: XylemFont;
	text-align:center;
	margin-top:25px;
	padding-top:5px;
	padding-bottom: 5px;
}

.dashboard-diagram-box{
	background-color:white;
	margin-top:25px;
	height:150px;
	box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
  height: 350px;
}

.dashboard-year-select {
	float:right;
	font-family: XylemFont;
	padding:5px;
	border-style:none;
}

.asdasdasd{
	display:inline-block;
}

</style>