@props(['demographyconfigId','moduleid','mandatory','displaysearch'])

@php

use App\Models\Demography;


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

$dispRelatedValue="";

$ParentModuleId=$Field->ParentModuleId;
$ParentRowId='';

$ParentField=DB::table('DemographyConfig')->where('ModuleId',$ParentModuleId)->where('ReferenceField',1)->get(['ColumnName'])->first();


try
{
	$ParentField=$ParentField->ColumnName;
}
catch(\Exception $e)
{
	$ParentField=DB::table('DemographyConfig')->where('ModuleId',$ParentModuleId)->where('ColumnName','%like%','Name')->get(['ColumnName'])->first();

	try
	{
		$ParentField=$ParentField->ColumnName;
	}
	catch(\Exception $e)
	{
		$ParentField="CreatedDate";	
	}
}

$RelatedNames=[];


if($ParentModuleId!="")
{
	$demography=new Demography();
	$MainTableName=$demography->getMainTableName($ParentModuleId);
	$CstmTableName=$demography->GetCustomTableName($ParentModuleId);
	$primarykeyName=$demography->getPrimaryKeyName($ParentModuleId);
	$CstmPrimaryKeyName=$demography->getCstmPrimaryKeyName($ParentModuleId);


	

	if($LabelValue)
	{
		$DisplayValues=DB::table($MainTableName)->join($CstmTableName,$MainTableName.".".$primarykeyName,'=',$CstmTableName.".".$CstmPrimaryKeyName)->where($primarykeyName,$LabelValue)->where('DeletedStatus',0)->get([$ParentField])->first();

		try{
		$dispRelatedValue=$DisplayValues->$ParentField;
	}
	catch(\Exception $e)
	{

		$dispRelatedValue="";
	}
}

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

<style>
	.relatedclass
	{
		padding-left: 0px !important;
	}
	.relatedclass li
	{
		display: inline-block !important;
	}

	.autocomplete-suggestions
	{
		background: #fff !important;
	}
</style>

<div class="col-md-4 form-group">

	<label>{{$DisplayName}} <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>


	@if(!$ParentModuleId)
	<select class="form-control customDropdown" name="{{$ColumnName}}" id="{{$ColumnName}}" {{$RequiredField}}>
		<option value="">--Select--</option>
	</select>
	@endif


	<ul class="relatedclass">
		<li style="width:55%">
			<input type="text" class="form-control"  id="{{$ColumnName}}Display" onkeyup="getRelatedList('{{$ParentModuleId}}','{{$ColumnName}}')" autocomplete="off" {{$RequiredField}} value="{{$dispRelatedValue}}" >
			<input type="text" style="display:none" class="form-control"  name="{{$ColumnName}}" id="{{$ColumnName}}{{$moduleid}}" {{$RequiredField}} value ="{{$LabelValue}}" >
			@php
			if($Required==1)
			{
				@endphp
				<div class="invalid-feedback">
					Please fill the {{$ColumnName}}
				</div>
				@php
			}
			@endphp
			<div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;width:51%" id="{{$ColumnName}}List">
			</div>


		</li>
		<li style="width:40%;text-align:right" >

			@if($displaysearch==1)
			<button type="button"class="btn btn-info mb-2" onclick="popupSearch('{{$ParentModuleId}}','{{$ColumnName}}')" style="margin-bottom: 0px!important">
				<svg xmlns="https://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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
			</button>
			@endif


			<button type="button" class="btn btn-info mb-2"  onclick="clearInput('{{$ColumnName}}','{{$moduleid}}')"  style="margin-bottom: 0px!important">
				<svg xmlns="https://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-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
			</button>
		</li>
	</ul>


</div>




<script>
	function getRelatedList(ParentModuleId,ColumnName)
	{   
		keywords=$('#'+ColumnName+"Display").val();
		$('#'+ColumnName+ParentModuleId).val('');
		if(keywords=='' || (keywords.length<=2))
		{
			$('#'+ColumnName+'Display').html('');
			$('#'+ColumnName+'List').html('');
			$('#'+ColumnName+'List').css('display','none');
			return false;
		}
		$.ajax({
			type:"post",
			url:"{{url('RelateToSearch')}}",
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			data:{ParentModuleId:ParentModuleId,keywords:keywords,ColumnName:ColumnName},
			success:function(response)
			{
            // alert(response);
            $('#'+ColumnName+'List').html(response);
            $('#'+ColumnName+'List').css('display','block');

        }
    });
	}

	function setListValue(value,ParentModuleId,label,ColumnName)
	{
    // alert(label);
    if(label!='empty')
    {
    	MainModuleId="{{$moduleid}}";

    	$('#'+ColumnName+MainModuleId).val(value);
    	$('#'+ColumnName+'Display').val(label);
    	$('#'+ColumnName+"List").html('');
    	$('#'+ColumnName+'List').css('display','none');

    	
    	$.ajax({
    		type:"post",
    		url:"{{url('GetRelatedName')}}",
    		data:{RowId:value,ModuleId:ParentModuleId,MainModuleId:MainModuleId},
    		success:function(response)
    		{
    			result1=JSON.parse(response);

    			result=result1.result;
    			CountofMap=result1.CountofMap;
    			GetFetechedMappedFields=result1.GetFetechedMappedFields;
    			for(i=1;i<=CountofMap;i++)
    			{
    				RedirecctField=GetFetechedMappedFields[i].FromFieldId;
    				RedirecctValue=GetFetechedMappedFields[i].DisplayFieldName;
    				$('#'+RedirecctField+ParentModuleId).val(RedirecctValue);
    			}
    			ColumnName=$('#ColumnName').val();
    			rowId=result.RowId;
    			displayVal=result.DisplayName;
    			$('#'+ColumnName+ParentModuleId).val(rowId);
    			$('#'+ColumnName+"Display").val(displayVal);
    		}
    	});

    }
}

function clearInput(columnId,ModuleId)
{
	$('#'+columnId+ModuleId).val('');
	$('#'+columnId+"Display").val('');
}


function popupSearch(ParentModuleId,ColumnName)
{
	$('#SearchModal').modal("show");
	$('#ParentModuleId').val(ParentModuleId);
	$('#ColumnName').val(ColumnName);
	ModuleId=ParentModuleId;
	SearchFilters(ModuleId);
	SearchAll(ModuleId);
}
function SearchFilters(ModuleId)
{

	var ModuleId = "{{$ParentModuleId}}";
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
		}
	});

	var formData = {
		ModuleId: ModuleId,
        source: ModuleId, //"Search",
    };
    var type = "POST";
    var urls = "{{ url('SearchGetFields') }}";  // GetDemographyFields calls Controller
    $.ajax({
    	type: type,
    	url: urls,
    	data: formData,
    	beforeSend:function() {
    		$('#ShowFields').html("<div class='loader dual-loader mx-auto'></div>");
    	},
    	success: function (results) {
    		$('#ShowFields').html(results);
    	},
    	error: function (data) {
    		$('#ShowFields').html("");
    	}
    });
}

function SearchAll(ModuleId)
{


	var ModuleId = $('#ParentModuleId').val();
	var limit = $('#limit').val();
	var field_name = $('#field_name').val();
	var sort_order = $('#sort_order').val();
	var page_num = $('#page_num').val();
	var mode='RelatedSearch';


	// console.log(ModuleId);
	// return;

	if(limit==undefined || limit=="")
		limit=10;

	if(page_num==undefined || page_num=="")
		page_num=1;

	if(sort_order==undefined || sort_order=="")
		sort_order="DESC";

	if(field_name==undefined || field_name=="")
		field_name="CreatedDate";

	var searchForm = JSON.stringify( $('#SearchForm').serializeArray() );

	var formData = {
		data: searchForm,
		source: ModuleId,
		ModuleId: ModuleId,
		page_num: page_num,
		limit: limit,
		field_name: field_name,
		sort_order: sort_order,
		mode: mode
	};

	var ajax_url = "{{ url('GetListViewPagination') }}";
	$.ajax({
		url: ajax_url,
		type: 'POST',
		data: formData,
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		beforeSend:function() {
			$('#ShowResults').html(`<div class="spinner-border text-primary align-self-center loader-lg">Loading...</div>`);
		},
		success: function(result) {
            // console.log("Success...");
            $('#loading').html('');
            $('#ShowResults').html(result);
        },
        error: function (data) {
        	$('#ShowResults').html("");
        }
    });
}

SelectMe2=(RowId,ModuleId)=>
{
	MainModuleId=$('#CreateViewModuleId').val();
	$.ajax({
		type:"POST",
		url:"{{url('GetRelatedName')}}",
		data:{RowId,ModuleId,MainModuleId},
		beforeSend:function(){},
		success:function(response)
		{
			result1=JSON.parse(response);

			result=result1.result;
			CountofMap=result1.CountofMap;
			GetFetechedMappedFields=result1.GetFetechedMappedFields;
			for(i=1;i<=CountofMap;i++)
			{
				RedirecctField=GetFetechedMappedFields[i].FromFieldId;
				RedirecctValue=GetFetechedMappedFields[i].DisplayFieldName;
				$('#'+RedirecctField+MainModuleId).val(RedirecctValue);
			}
			ColumnName=$('#ColumnName').val();
			rowId=result.RowId;
			displayVal=result.DisplayName;
			$('#'+ColumnName+MainModuleId).val(rowId);
			$('#'+ColumnName+"Display").val(displayVal);
			Snackbar.show({
				text: "Selected", 
				pos: 'top-right',
			});
			
			$('#SearchModal .close').click();

		}
	});
}

</script>