@props(['demographyconfigId','moduleid','mandatory','results'])
@php


$TeamsDataArray = DB::table('TmTeams')->where('ActiveStatus', '=', '1')->get(['TmTeamID', 'TeamName']);

$Field=DB::table('DemographyConfig')->where('DemographyConfigId',$demographyconfigId)->get()->first();
$DisplayName=$Field->LabelValue;
$ColumnName=$Field->ColumnName;
$DependentField=$Field->DependentField;

use App\Models\Demography; 
$DependentFieldId=explode(",",$Field->DependentFieldId);
$DependentFieldColumnName="";
$DependentFieldColumnNameValue="";

try
{
	if($DependentFieldId[0])
	{
		$DependentFieldColumnName=Demography::GetDependentFieldColumnName($moduleid,$DependentFieldId[0]);
		$DependentFieldColumnNameValue=$results->$DependentFieldColumnName;
	}
}
catch(\Exception $e){}



$labelValue=$results->$ColumnName;

if($mandatory==1)
{
	$RequiredField="required";
	$DisplayredStar="*";
}
else
{
	$RequiredField="";
	$DisplayredStar="";
}

if($DependentField==1)
{

	if(in_array($DependentFieldColumnNameValue,$DependentFieldId))
	{
		$displayHide="";
	}
	else
	{
		$displayHide="displayHide";
		$RequiredField="";

		//echo "in here 2";
	}

	
}
else
{
	$displayHide="";
}

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

@endphp

<div class="col-md-4 form-group {{$displayHide}}" id="{{$ColumnName}}Wrapper{{$moduleid}}">
	<label id="label{{$ColumnName}}">@php echo $DisplayName; @endphp <font color='red'>{{$DisplayredStar}}</font></label>

	<select class="form-control customDropdown" name="{{$ColumnName}}" id="{{$ColumnName}}{{$moduleid}}"  {{$RequiredField}} onchange="GetTeamRoles(this.value)">
		<option value="">--Select Team--</option>
		@foreach($TeamsDataArray as $Team)

		@php
		$selected="";
		if($labelValue==$Team->TmTeamID)
		{
			$selected="selected";
		}
		@endphp
		<option value="{{$Team->TmTeamID}}" {{$selected}}>{{$Team->TeamName}}</option>
		@endforeach 
	</select>
	<div class="invalid-feedback">
		Please fill the {{$DisplayName}}
	</div>

	
</div>

<script>
	GetTeamRoles=(TmTeamID)=>
	{
		console.clear();
		console.log(`GetTeamRoles function called`);

		ModuleId='{{$moduleid}}';
		$.ajax({
			type:"post",
			url:"{{url('GetTeamRoles')}}",
			data:{TmTeamID,ModuleId},
			beforeSend:()=>{

			},
			success:response=>{
				console.log(response);
				res=JSON.parse(response);


				RolesList=JSON.parse(res.RolesList);
				RoleColumns=JSON.parse(res.RoleColumns);

				rolesOption=`<option value="">--Select Role--</option>`;

				RolesList.map((role)=>{
					rolesOption+=`<option value="${role.RoleId}">${role.RoleName}</option>`;
				});


				RoleColumns.map((Column)=>{

					console.log(Column);

					$(`#${Column}${ModuleId}`).empty();
					$(`#${Column}${ModuleId}`).append(rolesOption);
				});	

				$('.customDropdown').trigger('chosen:updated');
				$('.customDropdown').chosen();

			}
		});

	}
</script>