@php
$loopcount = 1;
@endphp
<input type="hidden" id="UserID" name="UserID" value="{{$userid}}" />
<table class="table style-2 table-hover no-footer">
	<thead>
		<tr>
			<td>TeamName</td>
			<td>Association</td>
		</tr>
	</thead>
@foreach($UserTeamList as $TeamList)
	<input type="hidden" name="TeamID{{$loopcount}}" id="TeamID{{$loopcount}}" value="{{$TeamList['TeamID']}}" />
	<tr>
		<td>
		{{$TeamList['TeamName']}}
		</td>
		<td>
			<label class="new-control new-checkbox checkbox-outline-primary  m-auto">
				<input type="checkbox" class="new-control-input child-chk select-customers-info" id="association{{$loopcount}}" onchange="AssociationChange({{$loopcount}})"
				@if($TeamList['Associated'] == 1) 
					@php 
					echo "checked='checked'";
					@endphp
				@endif
				>
				<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
			</label>
		</td>
	</tr>
	@php
	$loopcount++;
	@endphp
@endforeach
</table>
<script type="text/javascript">
function AssociationChange(loopcount){
	var AssociationFieldName = "association"+loopcount;
	if(document.getElementById(AssociationFieldName).checked == true){
		var Associated = 1;
	}else{
		var Associated = 0;
	}
	
	var TeamFieldName = "TeamID"+loopcount;
	var TeamIDValue = document.getElementById(TeamFieldName).value;
	var userid = document.getElementById('UserID').value;
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
		}
	});
	var formData = {
		UserId: userid,
		TeamId: TeamIDValue,
		AssociationFieldValue: Associated,
	};
	var type = "POST";
	var ajaxurl = 'updateUserTeamAssociation';
	$.ajax({
		type: type,
		url: ajaxurl,
		data: formData,
		success: function (result) {
			Snackbar.show({
						text: 'Assoication Added Successfully',
						pos: 'top-right',
					});
		},
		complete: function () {
			
		},
		error: function (data) {
			alert(data);
		}
	});
}
</script>