<template>
	
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10 form-group">
			<center>
	    		<table class="table table-bordered">
					<thead class="text-center">
						<td>Nom</td>
						<td>email</td>
						<td>tel</td>
						<td>magasin</td>
						<td></td>
						<td></td>
					</thead>
					<tbody>
							<tr v-for="admin in admins" :class="inputClasses[admin.id]">
								<td><input class="form-control" type="text" v-model="admin.name" ></td>
								<td><input class="form-control" type="text" v-model="admin.email" ></td>
								<td><input class="form-control" type="number" v-model="admin.tel" ></td>
								<td>
									<select class="form-control" v-model="admin.magasin_id" >
										<option v-for="magasin in magasins" :value="magasin.id">{{magasin.intitule}}</option>
									</select>
								</td>
								
								<td > 
									<button class="btn btn-info pull-right" @click="updateAdmin(admin)">
										<i class="fa fa-wrench" aria-hidden="true"></i>
									</button>
								</td>
								<td > 
									<button class="btn btn-danger pull-right" @click="deleteAdmin(admin)">
										<i class="fa fa-minus-circle" aria-hidden="true"></i>

									</button>
								</td>
							</tr>
					</tbody>
				</table>
			</center>
		</div>
	</div>
</template>

<script>
	
	export default{

		data(){
			return {
				magasins:[],
				admins:[],
				inputClasses:[],
			}
		},
		mounted(){
			this.getAdmins(this)

		},
		methods:{
			getAdmins(vm){
				$.get('/super/getAdmins', function(data) {
					vm.admins = data.admins
					vm.magasins = data.magasins
					$.each(vm.admins, function(index, admin) {

						vm.$set(vm.inputClasses, admin.id, "")
						
					});

				});
			},
			updateAdmin(admin){
				var vm = this;
				$.post('/super/update/admin', {admin}, function(data, textStatus, xhr) {
					console.log("okk")

					vm.blink(admin.id,"alert-success")
				}).fail(function(errors){
					vm.blink(admin.id,"alert-warning")
					
				});
			},
			deleteAdmin(admin){
				var vm = this
				$.post('/super/delete/admin', {admin}, function(data, textStatus, xhr) {
					vm.admins = data.admins
					vm.magasins = data.magasins
					$.each(vm.admins, function(index, admin) {

						vm.$set(vm.inputClasses, admin.id, "")
						
					});
				}).fail(function(errors){
					vm.blink(admin.id,"alert-warning")
					
				});
			},
			blink(id,alert){
				var vm = this
					vm.$set(vm.inputClasses, id, alert)
				setTimeout(function(){
					vm.$set(vm.inputClasses, id, "")

				},1000)
				
			}

		},
		watch:{
			// admins:{
			// 	handler: function (val, oldVal) {

			// 	}, deep: true
			// }
		}

	}
</script>
<style >
	
	
</style>