@extends('layouts.header')
@section('content')	
@php
$Modules=$pageValues['Modules'];
@endphp
<div class="page-header">
	<div class="breadcrumb-four">
		<ul class="breadcrumb">
			<li><a href="{{url('dashboard')}}"><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-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>

		</ul>
	</div>
</div>
<div class="row">
	<div class="col-lg-12 col-md-12 layout-spacing">
		<div class="statbox widget box box-shadow"> 
			<div class="col-md-3">
				<label>Modules</label>
				<select class="form-control" name="Module" id="Module" onchange="GetFields()">
					<option value="">--Select--</option> 
					@foreach($Modules as $module)
					<option value="{{$module['ModuleId']}}"> {{$module['ModuleName']}}</option>
					@endforeach

				</select>
			</div>					
			@csrf
			<div class="col-xs-12 col-sm-12 col-md-12" name="ConfigFields" id="ConfigFields">
				
			</div>
		</div>
	</div>
</div>
@endsection

<script>
	GetFields=()=>{
		ModuleId=$(	'#Module :selected').val();
		ModuleId=ModuleId.trim();
		if(ModuleId.length==0)
		{
			$('#ConfigFields').html('');
			return false;
		}

		$.ajax({
			type:"post",
			url:"{{url('ModulesFieldsList')}}",
			data:{ModuleId},
			beforeSend:()=>{
				$('#ConfigFields').html("<div class='loader dual-loader mx-auto'></div>");
			},
			success:response=>{
				$('#ConfigFields').html(response);
				// console.log(response);

			}	
		});
	}
	CheckOptions=async (DemographyConfigId,functionId)=>
	{
		try
		{

			fdetails=await getFunctionDetails(functionId);
			fdetails=JSON.parse(fdetails);

			ColumnsList=await GetColumnsList();
			ColumnsList=JSON.parse(ColumnsList);

			columns=`<option value="">Select Column</option>`;
			ColumnsList.forEach((column)=>{
				columns+=`<option value="${column.DemographyConfigId}">${column.LabelValue}</option>`
			});


			p=0;
			a=0;
			if(fdetails.Parameters!="0")
			{
				p=1;
				$(`#Params${DemographyConfigId}`).html("<div class='loader dual-loader mx-auto'></div>");
				ParamSelect=`<select class="form-control" id="parCol${DemographyConfigId}" onchange="updateConfiguredCustomFunction('1','${DemographyConfigId}','${functionId}')">${columns}</select>`
				$(`#Params${DemographyConfigId}`).html(ParamSelect);
			}

			if(fdetails.ValidationType=="2")
			{
				a=1;
				$(`#Autofill${DemographyConfigId}`).html("<div class='loader dual-loader mx-auto'></div>");

				AfCol=`<select class="form-control" id="AfCol${DemographyConfigId}" onchange="updateConfiguredCustomFunction('2','${DemographyConfigId}','${functionId}')">${columns}</select>`
				$(`#Autofill${DemographyConfigId}`).html(AfCol);

			}

			if(p==1)
			{
				Snackbar.show({
					text: 'Please select Parameters column',
					pos: 'top-right',
					actionTextColor: '#fff',
					backgroundColor: '#e7515a'
				});
			}
			if(p==1)
			{
				Snackbar.show({
					text: 'Please select Autofill column',
					pos: 'top-right',
					actionTextColor: '#fff',
					backgroundColor: '#e7515a'
				});
			}

			AddCustomFunction(DemographyConfigId,functionId);
			// if(parameters.Parameters==0)
			// {
			// 	var SaveResult= await AddCustomFunction(DemographyConfigId,functionId);

			// 	console.log(SaveResult);
			// }

		}
		catch(e){}

		
		// console.log("DemographyConfigId",DemographyConfigId);
		// console.log("functionId",functionId);
	}

	getFunctionDetails=(FunctionId)=>{
		return new Promise((resolve,reject)=>{
			$.ajax({
				type:"post",
				url:"{{url('GetfunctionData')}}",
				data:{FunctionId},
				beforeSend:function(){},
				success:function(response){
					resolve(response);
				}
			});
		})
	}

	AddCustomFunction=(DemographyConfigId,FunctionId)=>
	{
		return new Promise((resolve,reject)=>{
			ModuleId=$('#Module :selected').val();
			EventType=$(`#EventType${DemographyConfigId} :selected`).val();
			$.ajax({
				type:"post",
				url:"{{url('AddCustomFunction')}}",
				data:{DemographyConfigId,FunctionId,EventType,ModuleId},
				beforeSend:()=>{
				 // $('#ConfigFields').html("<div class='loader dual-loader mx-auto'></div>");
				},
				success:response=>{
					console.log(response);
					// resolve(response);
				}	
			});
		});	
	}
	GetColumnsList=()=>{
		return new Promise((resolve,reject)=>{
			ModuleId=$('#Module :selected').val();
			$.ajax({
				type:"post",
				url:"{{url('GetColumnsList')}}",
				data:{ModuleId},
				beforeSend:()=>{
				 // $('#ConfigFields').html("<div class='loader dual-loader mx-auto'></div>");
				},
				success:response=>{
					resolve(response);
					// console.log(response);
					// resolve(response);
				}	
			});
		});
	}

	ViewConfiguredFunctions= (DemographyConfigId,labelValue)=>{
		$.ajax({
			type:"post",
			url:"{{url('ViewConfiguredFunctions')}}",
			data:{DemographyConfigId},
			beforeSend:()=>{},
			success:response=>{
				console.log(response);
				$('#ConfiguredFunctionLabel').html(labelValue);
				$('#ConfiguredFunctionModal').modal("show");
				$('#ConfiguredFunctionModalBody').html(response);
			}

		});
	}

	updateConfiguredCustomFunction=(updateType,DemographyConfigId,functionId)=>{

		ParameterConfigId="";
		if(updateType==1)
		{
			ParameterConfigId=$(`#parCol${DemographyConfigId} :selected`).val();
		}

		if(updateType==2)
		{
			ParameterConfigId=$(`#Autofill${DemographyConfigId} :selected`).val();
		}

		if(ParameterConfigId=='')
		{
			return false;
		}

		// console.log("response");

		$.ajax({
			type:"post",
			url:"{{url('updateConfiguredCustomFunction')}}",
			data:{DemographyConfigId:DemographyConfigId,functionId:functionId,updateType:updateType,ParameterConfigId:ParameterConfigId},
			beforeSend:()=>{},
			success:response=>{
				console.log(response);
				// $('#ConfiguredFunctionLabel').html(labelValue);
				// $('#ConfiguredFunctionModal').modal("show");
				// $('#ConfiguredFunctionModalBody').html(response);
			}

		});

	}

</script>