<template>
	<div>
	<a rel="button" class="btn btn-default pull-left" href="/super/export">Export Excel</a>
	<hr>
	<hr>
	<table class="table table-bordered">
	<thead>
		<th><input placeholder="Client" class="form-control input-sm" type="text" v-model="name"></th>
		<th><input placeholder="Email" class="form-control input-sm" type="text" v-model="email"></th>
		<th><input placeholder="Tel" class="form-control input-sm" type="number" v-model="tel"></th>
		<th><input placeholder="Ville" class="form-control input-sm" type="text" v-model="ville"></th>
		<th><input placeholder="Reward" class="form-control input-sm" type="text" v-model="reward"></th>
		<th><input placeholder="Admin" class="form-control input-sm" type="text" v-model="admin"></th>
		<th></th>
	</thead>
	<tbody>
			<tr v-for="win in wins" :class="{'success' : win.isGiven, 'danger' : !win.isGiven}">
				<td>{{win.user.name}}</td>
				<td>{{win.user.email}}</td>
				<td>{{win.user.tel}}</td>
				<td>{{win.user.ville ? win.user.ville.intitule : '' }}</td>
				<td>{{win.reward.resultText}}</td>
				<td>{{win.admin ? win.admin.name : ''}}</td>
				<td v-if="!win.isGiven"> 
					Cadeau non remis
				</td>
				<td v-else> 
					Date de remise : {{win.updated_at}}
				</td>
			</tr>
	</tbody>
</table>
</div>
</template>

<script>
	
	export default{

		data(){
			return {
				wins: [],
				codes: [], 
 				name : '',
 				email : '',
 				ville : '',
 				tel : '',
 				reward : '',
 				admin : '',
			}
		},
		mounted(){

			var vm = this
			$.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
			vm.getWins(vm)
		},
		methods:{
			validate(code){
				var vm = this

				$.post('/validateCode', {code: code}, function(data, textStatus, xhr) {
					vm.getWins(vm)
				});
			},
			getWins(vm){
				$.get('/winsData', function(data) {
  					vm.wins =  _.orderBy( data ,['isGiven','updated_at'],['desc','desc'])
			
					$.each(vm.wins, function(index, win) {
						 vm.codes[win.id] = null
					});

				});
			},
			searchWins(vm,by){
				$.get('/searchWinsData?'+by, function(data) {
  					vm.wins =  _.orderBy( data ,['isGiven','updated_at'],['desc','desc'])
					
					$.each(vm.wins, function(index, win) {
						 vm.codes[win.id] = null
					});

				});
			},
			throttleSearch: _.throttle((vm,query) => {
					console.log(query)
					vm.searchWins(vm,query)
		    }, 2000),
		},
		watch:{
			name(newVal){
				this.throttleSearch(this,'by=user&where=name&value='+newVal)
			},
			email(newVal){
				this.throttleSearch(this,'by=user&where=email&value='+newVal)
			},
			tel(newVal){
				this.throttleSearch(this,'by=user&where=tel&value='+newVal)
			},
			ville(newVal){
				this.throttleSearch(this,'by=user.ville&where=intitule&value='+newVal)
			},
			reward(newVal){
				this.throttleSearch(this,'by=reward&where=resultText&value='+newVal)
			},
			admin(newVal){
				this.throttleSearch(this,'by=admin&where=name&value='+newVal)
			},

		}
	}

</script>

<style >
	
	.input-sm{
		width: 60%;
		margin: none;
	}
	
</style>