@props(['demographyconfigId','moduleid','mandatory'])
@php
$Field=DB::table('DemographyConfig')->where('DemographyConfigId',$demographyconfigId)->get()->first();
$DisplayName=$Field->LabelValue;
$ColumnName=$Field->ColumnName;
$DropDownNameId=$Field->DropDownNameId;
$DependentField=$Field->DependentField;
$Helptext=$Field->Helptext;


$parentDropDownListValues=[];
$LabelValue="";

$DropDownNameData=DB::table('DropDownNames')->where('DropDownNameId',$DropDownNameId)->get()->First();
$ParentDropDownNameId=$DropDownNameData->ReferenceID;
$ParentColumnValue="";

if($ParentDropDownNameId)
{
    $ParentColumn=DB::table('DemographyConfig')->where('ModuleId',$moduleid)->where('DropDownNameId',$ParentDropDownNameId)->get(['ColumnName'])->first();
    $ParentColumnName=$ParentColumn->ColumnName;
}


$DropdownsList=DB::table('DropDownLists')->where('DropDownNameId',$DropDownNameId)->where('DropDownListStatus',1)->orderBy('SortOrder','ASC')->get(['DropDownListId','DropDownListName','ReferenceID']);

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


//print_r($parentDropDownListValues);

$checkApi=explode("/",$_SERVER['REQUEST_URI']);
$apiUrl="";
if(strtolower($checkApi[1])=="api")
{
    $apiUrl="api/";
}

if($DependentField==1)
{
    $RequiredField="";
    $displayHide="displayHide";
}
else
{
    $displayHide="";
}

@endphp

<div class="col-md-4 form-group {{$displayHide}}" id="{{$ColumnName}}Wrapper{{$moduleid}}">
	<label>@php echo $DisplayName;@endphp <font color='red'>{{$DisplayredStar}}</font>
	@if($Helptext)
	<a href="javascript:void(0);" class=" rounded bs-tooltip" title="{{$Helptext}}" data-original-title="{{$Helptext}}">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
	</a>
	@endif
	</label>
	
	<select class="form-control customDropdown" id="{{$ColumnName}}{{$moduleid}}" name="{{$ColumnName}}" {{$ReruiredField}} onchange="GetRelatedFields('{{$ColumnName}}',this.value,'{{$DropDownNameId}}')">
		<option value="">--Select--</option>
        @if( ($ParentDropDownNameId && $LabelValue) || (!$ParentDropDownNameId) )
        @foreach($DropdownsList as $DropdownList)
        @php
        $displayValue=0;
        if($ParentColumnValue)
        {

            $thisValueParentValues=explode(",",$DropdownList->ReferenceID);

            foreach($thisValueParentValues as $thisValueParentValue)
            {
                if($ParentColumnValue==$thisValueParentValue)
                {
                 $displayValue=1;
                 break;
             }
         }

         if($displayValue==0)
         {
            continue;
        }

    }

    $selected="";
    if($DropdownList->DropDownListId==$LabelValue)
    {
     $selected="selected";
 }
 @endphp
 <option value="{{$DropdownList->DropDownListId}}" {{$selected}}>{{$DropdownList->DropDownListName}}</option>
 @endforeach


 @endif

</select>

<div class="invalid-feedback">
    Please fill the {{$DisplayName}}
</div>

</div>


<script>
	GetRelatedFields=(columnName,value,DropdownId)=>{

        if($('#currentModuleId').val())
		{
			ModulelId=$('#currentModuleId').val();
		}
		else
		{
			if(!$('#QModuleId').val())
			{
			   ModulelId=$('#CreateViewModuleId').val();
			}
			else
			{
			ModulelId=$('#QModuleId').val();
			}
		}
        


    DependentFeildsId=value;

    url="{{url('')}}/{{$apiUrl}}GetDependentFields2";

        // console.log('url',url);

        $.ajax({
            type:"post",
            url,
            data:{ModulelId,DependentFeildsId:DependentFeildsId,DropdownId},
            beforeSend:function(){
                // $(`#${columnName}DependentFields`).html("<center><div class='loader dual-loader mx-auto'></div></center>");
            },
            success:function(response)
            {
                res=JSON.parse(response);

                ShowColumns=res.ShowColumns;
                HideColumns=res.HideColumns;

                // console.clear();
                // console.log(`-----------------------------------------------------------------`);
                // console.log(`showColumns`,ShowColumns);
                // console.log(`hideColumns`,HideColumns);

                HideColumns.map((colName)=>{
                        // console.log(colName.ColumnName);
                        columnName=colName.ColumnName;
                        Required=colName.Required;
                        $(`#${columnName}Wrapper${ModulelId}`).css("display","none");

                        $(`#${columnName}${ModulelId}`).prop("required",false);
                        $(`#${columnName}${ModulelId}`).val("").change();

                        $(`input[name='${columnName}']`).each(function(){

                            $(this).prop('disabled',true);
                        })

                    })

                ShowColumns.map((colName)=>{
                    columnName=colName.ColumnName;
                    Required=colName.Required;

                    $(`input[name='${columnName}']`).each(function(){

                        $(this).prop('disabled',false);
                    })

                    // console.log(`#${columnName}Wrapper${ModulelId}`);
                    $(`#${columnName}Wrapper${ModulelId}`).css("display","block");

                    if(Required)
                    {
                        $(`#${columnName}${ModulelId}`).prop("required",true);
                    }


                })


                // console.log(`Wrapper${ModulelId}`);



            }
        });





    // console.log('moduleid',ModuelId);
    // console.log('ddval',DependentFeildsId);
}

</script>