<template>
<div>
	<div class="row ">
		<div class="col-md-8 col-md-offset-2">
			<ul class="nav nav-pills">
				<li :class="isActive('total')" @click="setWins('total')" >
					<a class="nav-link"> Total</a>
				</li>
				<li :class="isActive(ville.intitule)" v-for="ville in villes" @click="setWins(ville.intitule)" >
					<a class="nav-link" v-text="ville.intitule"></a>
				</li>
			</ul>
			
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<section class="row text-center placeholders">
	            <div class="col-6 col-sm-3 placeholder">
	              	<h4>Total Wins</h4>
	              	<div class="text-muted">{{countWins}}</div>
	            </div>
	            <div class="col-6 col-sm-3 placeholder">
	              	<h4>Non remis</h4>
	              	<span class="text-muted">{{countNonRemis}}</span>
	            </div>
	            <div class="col-6 col-sm-3 placeholder">
	              	<h4>Remis</h4>
	              	<span class="text-muted">{{countRemis}}</span>
	            </div>
	            
          </section>
		</div>
	</div>
</div>
</template>

<script>
	
	export default{

		data(){
			return {
				wins : [],
				remis : [],
				nonRemis : [],
				countWins : 0,
				countRemis : 0,
				countNonRemis : 0,
				villes : [],
				ville:'total',
			}
		},
		mounted(){
			$.ajaxSetup({
	            headers: {
	                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	            }
	        });
			var vm = this
			$.post('/super/winsStats',{}, function(data) {
				vm.wins = data.byVille.wins
				vm.remis = data.byVille.remis 
				vm.nonRemis = data.byVille.nonRemis 
				vm.villes = data.villes 
				vm.setWins('total')

			});

		},
		methods:{
			countWinsBy(ville){

			},
			setWins(ville){
				var vm = this
				this.ville = ville
				vm.countWins = 0
				vm.countRemis = 0
				vm.countNonRemis = 0

				if (ville == "total") {
					_.each(this.wins, function(o) { 
						vm.countWins += o.countWins
					});
					_.each(this.remis, function(o) { 
						vm.countRemis += o.countWins
					});
					_.each(this.nonRemis, function(o) { 
						vm.countNonRemis += o.countWins
					});

				}else{
					_.each(this.wins, function(o) { 
						if (ville == o.ville) {vm.countWins += o.countWins}
					});
					_.each(this.remis, function(o) { 
						if (ville == o.ville) {vm.countRemis += o.countWins}
					});
					_.each(this.nonRemis, function(o) { 
						if (ville == o.ville) {vm.countNonRemis += o.countWins}
					});

				}

			},
			isActive(ville){
				if (ville == this.ville) {
					return 'nav-item active'
				}else{
					return 'nav-item'
				}
			}
		}
	}
</script>
<style >
	ul.nav{
		display: flex;
	}

	ul.nav a{
		font-weight: bold;
	}
	a {
		color: #0f1d40;
	}
	.row{
		margin: auto;
	}
</style>