<template>
	
	<table class="table table-bordered">
	<thead>
		<td><input placeholder="Client" class="form-control input-sm" type="text" v-model="name"></td>
		<td><input placeholder="Email" class="form-control input-sm" type="text" v-model="email"></td>
		<td><input placeholder="Tel" class="form-control input-sm" type="number" v-model="tel"></td>
		<td><input placeholder="Ville" class="form-control input-sm" type="text" v-model="ville"></td>
		<td><input placeholder="Reward" class="form-control input-sm" type="text" v-model="reward"></td>
		<td></td>
	</thead>
	<tbody>
			<tr v-for="win in wins" :id="'win'+win.id" class="">
				<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 v-if="!win.isGiven"> 
					<button class="btn btn-success pull-right" @click="validate(codes[win.id],win.id)"><i class="fa fa-check-square" aria-hidden="true"></i></button>
					<input type="number" name="code" v-model="codes[win.id]" class="form-control input-sm">
				</td>
				<td v-else> 
					Date de remise : {{win.updated_at}}
				</td>
			</tr>
	</tbody>
</table>
</template>

<script>
	
	export default{

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

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

				$.post('validateCode', {code: code}, function(data, textStatus, xhr) {
					vm.getWins(vm)
				}).done(function(){

					$('#win'+id).addClass('success')
					setTimeout(function(){
						$('#win'+id).removeClass('success')

					},1000)
				}).fail(function(){

					$('#win'+id).addClass('danger')
					setTimeout(function(){
						$('#win'+id).removeClass('danger')

					},1000)
				});
			},
			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 = data
					
					$.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)
			},

		}
	}

</script>

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

</style>