@extends('layouts.header')
@section('content')

<br>
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
	<div class="statbox widget box box-shadow">
		<h4>User Teams Association</h4>
		<div class="table-responsive">
			<table class="table table-no-space table-bordered table-no-space ">
				<thead>
					<tr>
						<th>Slno</th>
						<th>Team</th>
						<th>Roles</th>
					</tr>
				</thead>

				<tbody>
					@php

					//echo "<pre>";
					//	print_r($TeamsAssociation);
					//echo "</pre>";

					//die();

					$x=0;
					@endphp
					@foreach ($AllTeams as $AllTeam) 
					@php
					$x++;
					@endphp
					<tr>
						<td>{{$x}}</td>
						<td>{{$AllTeam['TeamName']}} TmTeamID</td>
						<td>
							<select class="form-control customDropdown" name="role{{$AllTeam['TmTeamID']}}" id="role{{$AllTeam['TmTeamID']}}" multiple onchange="UpdateTeamsRolesAssociation(`{{$AllTeam['TmTeamID']}}`)">
								@foreach($RolesArray as $Role)

								@php
								$selected="";


								if( in_array($Role['RoleId'], $TeamsAssociation[$AllTeam['TmTeamID']]) )
								{
									$selected="selected";										
								}
								@endphp

								<option value="{{$Role['RoleId']}}" {{$selected}}>{{$Role['RoleName']}}</option>
								@endforeach
							</select>
						</td>

					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
</div>
@endsection

<script type="text/javascript">
	UpdateTeamsRolesAssociation=(teamId)=>
	{
		console.clear();

		var TeamTimeOut;
		clearTimeout(TeamTimeOut);
		TeamTimeOut=setTimeout(()=>
		{
			const select = document.getElementById(`role${teamId}`);
			const Roles = Array.from(select.selectedOptions, option => option.value);

			$.ajax({
				type:"post",
				url:"{{url('UpdateTeamsRolesAssociation')}}",
				data:{teamId,Roles},
				beforeSend:()=>{},
				success:response=>{
					console.log(response);
					res=JSON.parse(response);

					Snackbar.show({
						text: res.msg,
						pos: 'top-right',
					});
				}
			});

		},500);


	}
</script>