@php
$fieldList_array = json_decode($fieldList);
$userdetails=Auth::user();
try{
$LoggedUserId = Auth::user()->RefId;
$LoggedAssUser=Auth::user()->RefId;





}
catch(\Exception $e)
{
	$LoggedUserId=1;
	$LoggedAssUser=1;
}
echo "<pre>";
	use App\Models\Demography;

	$Demography=new Demography;
	$QuickCreatePrimaryKeyName=$Demography->getPrimaryKeyName($ModuleId);
$QuickCreatePrimaryKeyValue=uniqid();


	//print_r($newfieldList);
	//print_r($headers);
	//print_r($RowId);
	//print_r($ListBoxNamesIDs);
	//print_r($RelatedModulesList);
	//print_r($getDependentRelateToList);
	$QModuleId=$ModuleId;
echo "</pre>";
@endphp
<style>
	.col-md-4
	{
		float: left;
	}
	.col-md-12
	{
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		clear: both;
	}
	.invalid-feedback
	{
		position: absolute;
	}
	.mb-4
	{
		margin-bottom: 0px !important;
	}

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

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

<input type="hidden" name="RowId" id="RowId" value="{{$RowId}}"/>
<input type="hidden" name="FormRowId" id="FormRowId" value="{{$FormRowId}}"/>

<input type="hidden" name="ModuleName" id="ModuleName" value="{{$modulename}}"/>
<input type="hidden" name="subpanelLoop" id="subpanelLoop" value="{{$subpanelLoop}}"/>
<input type="hidden" id="QuickCreateSource" value="{{$source}}"/>
<input type="hidden" id="monitorUcid" value="{{$monitorUcid}}"/>


<form name="ConfigCreate"  class="simple-example row" id="ConfigCreate"  method="post" enctype="multipart/form-data"  novalidate >

	<input type="hidden" name="QModuleId" id="QModuleId" value="{{$QModuleId}}"/>
	<input type="hidden" name="PrimaryModuleId" id="PrimaryModuleId" value="{{$PrimaryModuleId}}"/>
	<input type="hidden" name="CallRecordId" id="CallRecordId" value="{{$monitorUcid}}"/>

	<input type="hidden" id="QuickCreatePrimaryKeyName" name="{{$QuickCreatePrimaryKeyName}}" value="{{$QuickCreatePrimaryKeyValue}}">

	@php
	if($source=="API" && $QModuleId=="806867ab-96a5-11eb-948a-56b1773fd56f")
	{
		try
		{
			if($_SERVER['HTTP_HOST']=="tbo.bpm360.net")
			{
				@endphp
				<input type="hidden" name="Source"  value="272"/>
				@php
			}
			
		}
		catch(\Exception $e){}
	}
	@endphp

	<!-- <input type="hidden" id="UniqueReferenceId" name="UniqueReferenceId"> -->
	@foreach($newfieldList AS $fieldList)
	@php
	$ColumnName = $fieldList["ColumnName"];
	$config_id = $fieldList["DemographyConfigId"];
	$TableName = $fieldList["TableName"];
	$ColumnName = $fieldList["ColumnName"];
	$SortOrder = $fieldList["SortOrder"];
	$DisplayType = $fieldList["DisplayType"];
	$Required = $fieldList["Required"];
	$Display = $fieldList["Display"];
	$LabelValue = $fieldList["LabelValue"];
	$DropDownNameId = $fieldList["DropDownNameId"];
	$ParentModuleId = $fieldList["ParentModuleId"];	
	if($Required==1)
	{
		$required="required";
		$requiredLabel="<font color='red'>*</font>";
	}
	else
	{
		$required="";
		$requiredLabel="";
	}
	@endphp
	@if($DisplayType == '10' || $DisplayType == '27')
	<div class="col-md-12">
		@else
		<div class="col-md-4">
			@endif
			<div class="form-group">
				@if($DisplayType == '9' || $DisplayType == '16')
				@else

				@if($DisplayType!=8)
				<!--<strong class='text-primary'>{{ucwords($LabelValue)}} @php echo $requiredLabel; @endphp</strong>-->
				<strong class='text-primary'> @php echo $requiredLabel; @endphp</strong>
				@else
				<strong class='text-primary'>{{ucwords($LabelValue)}} @php echo $requiredLabel; @endphp

					@php
					$accountsModuleId="f408691f-96a4-11eb-948a-56b1773fd56f";
					try
					{

						if($_SERVER['HTTP_HOST']=="tbo.bpm360.net" && $ParentModuleId==$accountsModuleId)
						{
							@endphp

							<span class="text-primary" onclick="displayAddAgency()" style="cursor:pointer"  title="click heree to Add Agency">
								<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12" ></line></svg>
							</span>

							@php
						}

					}catch(\Exception $e){}
					@endphp
				</strong>
				@endif

				
				@endif
				@if($DisplayType == '2' || $DisplayType == '26')
				@php
				if(empty($ListBoxNamesIDs))
				{
					@endphp
					<select name='$ColumnName' id='$ColumnName' class='form-control' onchange="checkparentNew('{{$ColumnName}}',this.value)">
						<option value=''>---Select---</option>
					</select>
					@php
				}
				else
				{	
					//$ListBoxNamesIDVal=$ListBoxNamesIDs[$ColumnName];
					$ListBoxNamesIDVal=$DropDownNameId;
					$listBoxVal=$GetDropdownLists[$ListBoxNamesIDVal];
					@endphp
					<select name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" data-live-search="true" onchange="checkparentNew('{{$ColumnName}}',this.value)" >
						<option value="">---Select---</option>
						@if(!array_key_exists($ListBoxNamesIDVal,$childList))
						@foreach($listBoxVal as $listBoxKey=>$listBoxValue)
						@php
						echo "<option value='$listBoxKey'>$listBoxValue</option>";
						@endphp
						@endforeach
						@endif
					</select>
					@if($Required==1)
					<div class="invalid-feedback">
						Please fill the {{$ColumnName}}
					</div>
					@endif
					@php
				}
				@endphp
				@elseif($DisplayType=='15')
				<select name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control">
					<option value="">--Select--</option>
					@foreach($AssignedToList as $assigned=>$val)
					@php
					if($LoggedUserId==$assigned)
					{
						$selected="selected";
					}
					else
					{
						$selected="";
					}
					@endphp
					<option class="bs-tooltip" title="{{$val['email']}}" value="{{$assigned}}" {{$selected}} > {{$val['name']}}</option>	
					@endforeach
				</select>
				@elseif($DisplayType == '3')
				@php
				if(empty($ListBoxNamesIDs))
				{
					echo "<select name='$ColumnName' id='$ColumnName' class='form-control' multiple {{$required}}>
						<option value=''>---Select---</option>
					</select>";
				}
				else
				{
					$ListBoxNamesIDVal=$ListBoxNamesIDs[$ColumnName];
					$listBoxVal=$GetDropdownLists[$ListBoxNamesIDVal];
					@endphp

					<select name="{{$ColumnName}}" id="{{$ColumnName}}"  class="form-control"  multiple="true" {{$required}}>
						<option value="">---Select---</option>
						@if(!array_key_exists($ListBoxNamesIDVal,$childList))
						@foreach($listBoxVal as $listBoxKey=>$listBoxValue)
						@php
						echo "<option value='$listBoxKey'>$listBoxValue</option>";
						@endphp
						@endforeach
						@endif
					</select>
					@if($Required==1)
					<div class="invalid-feedback">
						Please fill the {{$ColumnName}}
					</div>
					@endif
					@php
				}
				@endphp
				@elseif($DisplayType == '4')
				<input type="date" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" placeholder="{{$ColumnName}}">
				@elseif($DisplayType == '14')
				@php
				$todaydate=date("d/m/Y H:i a");
				$displayDate=date('Y-m-d H:i:s');
				@endphp
				<div class="form-group mb-0">
					<input name="{{$ColumnName}}" id="{{$ColumnName}}" value="{{$displayDate}}" placeholder="{{$todaydate}}" class="form-control flatpickr flatpickr-input active kab" type="text" readonly="readonly">
				</div>
				@elseif($DisplayType == '5')
				@if(empty($ListBoxNamesIDs))
				<div class="n-chk" style="margin-top: 10px">
					<label class="new-control new-radio radio-classic-primary">
						<input type="radio" class="new-control-input" name="{{$ColumnName}}"value="">
						<span class="new-control-indicator"></span>
					</label>
				</div>
				@else
				@php
				$ListBoxNamesIDVal=$ListBoxNamesIDs[$ColumnName];
				$listBoxVal=$GetDropdownLists[$ListBoxNamesIDVal];
				@endphp
				<ul style="list-style: none;padding-left: 0px !important">
					@foreach($listBoxVal as $listBoxKey=>$listBoxValue)
					<li style="display: inline-block;">
						<div class="n-chk" style="margin-top: 10px">
							<label class="new-control new-radio radio-classic-primary">
								<input type="radio" class="new-control-input" name="{{$ColumnName}}"value="{{$listBoxKey}}">
								<span class="new-control-indicator"></span>{{$listBoxValue}}
							</label>
						</div>
					</li>
					<!-- <input type="radio" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control"> -->
					@endforeach
				</ul>
				@endif
				@elseif($DisplayType == '6')
				<!--<input type="checkbox" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control">-->
				<x-screenpopcreate.displaytype6 :demographyconfigId="$config_id"  :moduleid="$QModuleId" :mandatory="$Required"/>
				@elseif($DisplayType == '27')


				<x-screenpopcreate.displaytype27 :demographyconfigId="$config_id"  :moduleid="$QModuleId" :mandatory="$Required"/>

				<!--<input type="checkbox" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control">-->
				@elseif($DisplayType == '7')
				<textarea name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control"></textarea>
				@elseif($DisplayType == '8')
				@php
				if(empty($RelatedModulesList))
				{
					echo "<select name='$ColumnName' id='$ColumnName' class='form-control'>
						<option value=''>---Select---</option>
					</select>";
				}
				else
				{
					$Readonly="";
					@endphp
					<ul class="relatedclass">
						<li style="width:55%">
							<input type="text" class="form-control"  id="{{$ColumnName}}Displayq" onkeyup="getRelatedList('{{$ParentModuleId}}','{{$ColumnName}}')" autocomplete="off" {{$required}} {{$Readonly}}>
							<input type="text" style="display:none" class="form-control"  name="{{$ColumnName}}" id="{{$ColumnName}}q" {{$required}} {{$Readonly}}>
							@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}}Listq">
							</div>


						</li>
						<li style="width:40%;text-align:right" >
							<button class="btn btn-info mb-2" type="button" onclick="popupSearch('{{$ParentModuleId}}','{{$ColumnName}}')" style="margin-bottom: 0px!important">
								<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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
							</button>

							<button class="btn btn-info mb-2"  type="button"onclick="clearInput('{{$ColumnName}}')"  style="margin-bottom: 0px!important">
								<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-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>

					<br>
					@php
					try
					{

						if($_SERVER['HTTP_HOST']=="tbo.bpm360.net")
						{
							@endphp
							<x-customcomponents.agencyname :moduleid="$ModuleId" />
							@php
						}

					}catch(\Exception $e){}
					@endphp
					@php
				}
				@endphp
				@elseif($DisplayType == '9')
				<div class="custom-file mb-4">
					<div class="custom-file-container" data-upload-id="myFirstImage">
						<strong>
							<label style="margin-bottom: 0px !important">{{ucwords($LabelValue)}} 
								<span style="cursor:pointer"href="javascript:void(this)" class="custom-file-container__image-clear" id="clear{{$ColumnName}}"title="Clear Image" onclick="clearImage('{{$ColumnName}}')">x</span>
								<span class="custom-file-container__image-clear" title="Preview Image" style="cursor:pointer"onclick="triggerModal('{{$ColumnName}}')">
									<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
								</span>
							</label>
						</strong>
						<label class="custom-file-container__custom-file">
							<input type="file" class="custom-file-container__custom-file__custom-file-input" name="{{$ColumnName}}" id="{{$ColumnName}}" accept=".png, .jpg, .jpeg,.bmp" onchange="showmodal(window.URL.createObjectURL(this.files[0]),this.files[0].size,'{{$ColumnName}}',this.files[0].name,'photo')">
							<!-- <input type="hidden" name="MAX_FILE_SIZE" value="10485760"> -->
							<span class="custom-file-container__custom-file__custom-file-control"><span id="fileName{{$ColumnName}}">Choose file...</span><span class="custom-file-container__custom-file__custom-file-control__button"> Browse </span></span>
						</label>
						<div id="bgImage{{$ColumnName}}"class="custom-file-container__image-preview" style="display:none !important"></div>
					</div>
				</div>
				@elseif($DisplayType == '16')
				<div class="custom-file mb-4">
					<div class="custom-file-container" data-upload-id="myFirstImage">
						<strong>
							<label style="margin-bottom: 0px !important">{{ucwords($LabelValue)}} 
								<span style="cursor:pointer"href="javascript:void(this)" class="custom-file-container__image-clear" id="clear{{$ColumnName}}"title="Clear Document" onclick="clearImage('{{$ColumnName}}')">x</span>
								<span class="custom-file-container__image-clear" title="Preview Image" style=" display:none;cursor:pointer"onclick="triggerModal('{{$ColumnName}}')">
									<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
								</span>
							</label>
						</strong>
						<label class="custom-file-container__custom-file">
							<input type="file" class="custom-file-container__custom-file__custom-file-input" name="{{$ColumnName}}" id="{{$ColumnName}}" accept=".txt, .pdf, .doc,.docx,.xls,.xlsx,.ppt,.pptx" onchange="showmodal(window.URL.createObjectURL(this.files[0]),this.files[0].size,'{{$ColumnName}}',this.files[0].name,'document')">
							<!-- <input type="hidden" name="MAX_FILE_SIZE" value="10485760"> -->
							<span class="custom-file-container__custom-file__custom-file-control"><span id="fileName{{$ColumnName}}">Choose file...</span><span class="custom-file-container__custom-file__custom-file-control__button"> Browse </span></span>
						</label>
						<div id="bgImage{{$ColumnName}}"class="custom-file-container__image-preview" style="display:none !important"></div>
					</div>
				</div>
				@elseif($DisplayType == '10')
				<div class="row" >
					<!-- <input type="hidden" name="{{$ColumnName}}" id="{{$ColumnName}}" value="" {{$required}}> -->
					<div class="col-lg-12 col-md-12 layout-spacing">

						<!-- <div id="editor-container" class="ql-container ql-snow">
							<div class="ql-editor "id="" data-gramm="false" data-placeholder="Compose an epic..." contenteditable="true"><p></p></div><div class="ql-clipboard" tabindex="-1" contenteditable="true"></div><div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a>
							</div>
						</div> -->
						<textarea name="{{$ColumnName}}" id="{{$ColumnName}}"></textarea>

					</div>


				</div>

				<script type="text/javascript">

									CKEDITOR.replace("{{$ColumnName}}");//
									// CKEDITOR.replace("{{$ColumnName}}Editor");//
									CKEDITOR.instances["{{$ColumnName}}"].on('change',function(){
										document.getElementById("{{$ColumnName}}").value=CKEDITOR.instances["{{$ColumnName}}"].getData();

										// console.log(CKEDITOR.instances["{{$ColumnName}}"].getData());
									});

								</script>

								@elseif($DisplayType == '11')
								<script type="text/javascript">
									maskmobile('{{$ColumnName}}');function maskmobile(id)
									{
										$("#"+id).inputmask({mask:"9999-999-999"});
									}
								</script>
								<input type="text" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" onblur="ValidateFunction('{{$DisplayType}}','{{$ColumnName}}')" {{$required}}>
								@if($Required==1)
								<div class="invalid-feedback" id="error{{$ColumnName}}">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@elseif($DisplayType == '12')
								<span style="cursor:pointer" onclick="addEmail('{{$ColumnName}}')">
									<svg style="color:#1b55e2;" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
								</span>


								<input type="hidden" name="{{$ColumnName}}" value='' id="{{$ColumnName}}">

								<input type="hidden" name="{{$ColumnName}}Count" value='' id="{{$ColumnName}}Count">

								<input type="hidden" name='{{$ColumnName}}Primary' value='' id="{{$ColumnName}}Primary">

								<input type="hidden" name='{{$ColumnName}}OptedOut' value='' id="{{$ColumnName}}OptedOut">

								<input type="hidden" name='{{$ColumnName}}Invalid' value='' id="{{$ColumnName}}Invalid">

								<ul class="relatedclass" id="emailContainer{{$ColumnName}}">

								</ul>

								@if($Required==1)
								<div class="invalid-feedback" id="error{{$ColumnName}}">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@elseif($DisplayType == '13')
								<input type="text" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" onblur="ValidateFunction('{{$DisplayType}}','{{$ColumnName}}')"{{$required}}>
								@if($Required==1)
								<div class="invalid-feedback" id="error{{$ColumnName}}">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@elseif($DisplayType == '17')
								<input type="text" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" onblur="ValidateFunction('{{$DisplayType}}','{{$ColumnName}}')" {{$required}}>
								@if($Required==1)
								<div class="invalid-feedback" id="error{{$ColumnName}}">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@elseif($DisplayType == '18')
								<script type="text/javascript">
									maskZipCode('{{$ColumnName}}');function maskZipCode(id)
									{
										$("#"+id).inputmask("9{1,6}");
									}
								</script>
								<input type="text" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" onblur="ValidateFunction('{{$DisplayType}}','{{$ColumnName}}')" placeholder="EG:81009" {{$required}}>
								@if($Required==1)
								<div class="invalid-feedback" id="error{{$ColumnName}}">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@elseif($DisplayType == '1')
								<input type="text" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" onblur="ValidateFunction('{{$DisplayType}}','{{$ColumnName}}')" {{$required}}>
								@if($Required==1)
								<div class="invalid-feedback" id="error{{$ColumnName}}">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@elseif($DisplayType == '19')
								<input type="text" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" onblur="ValidateFunction('{{$DisplayType}}','{{$ColumnName}}')" {{$required}}>
								@if($Required==1)
								<div class="invalid-feedback" id="error{{$ColumnName}}">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@elseif($DisplayType == '23')
								@php
								$Drl=1;
								if($Drl==1)
								{
									if(empty($RelateModules))
									{
										echo "<select name='$ColumnName' id='$ColumnName' class='form-control customDropdown' >
											<option value=''>---Select---</option>
										</select>";
									}
									else
									{
										$DependentRelateGroupId=$DependentRelateGroupsList[$ColumnName];
										if(array_key_exists($ParentModuleId,$getDependentRelateToList) && array_key_exists($ParentModuleId,$RelatedModulesList))
										//if(array_key_exists($ParentModuleId,$getDependentRelateToList))
										{

											@endphp
											<select name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control customDropdown" data-live-search="true" onchange="getChildRelateNew('{{$ParentModuleId}}',this.value,'{{$DependentRelateGroupId}}')" >
												<option value="">---Select ---</option>
												@foreach($RelatedModulesList[$ParentModuleId] as $listBoxKey=>$listBoxValue)
												@php
												echo "<option value='$listBoxKey' >$listBoxValue</option>";
												@endphp
												@endforeach
											</select>

											@php 
										}
										else
										{
											@endphp
											<select name='{{$ColumnName}}' id='{{$ColumnName}}' class='form-control customDropdown' onchange="getChildRelateNew('{{$ParentModuleId}}',this.value,'{{$DependentRelateGroupId}}')" >
												<option value=''>---Select---</option>
											</select>
											@php
										}
									}
								}
								@endphp
								@elseif($DisplayType == '28')
								@php
								if(empty($ListBoxNamesIDs) || $DropDownNameId=='')
								{
									@endphp
									<input list="{{$ColumnName}}" name="{{$ColumnName}}" class="form-control" autocomplete="off">
									<datalist id="{{$ColumnName}}">

									</datalist>

									@php
								}
								else
								{	
									//$ListBoxNamesIDVal=$ListBoxNamesIDs[$ColumnName];
									$ListBoxNamesIDVal=$DropDownNameId;


									if(array_key_exists($ListBoxNamesIDVal,$GetDropdownLists))
									{
										$listBoxVal=$GetDropdownLists[$ListBoxNamesIDVal];
										@endphp
										<input list="{{$ColumnName}}" name="{{$ColumnName}}" class="form-control" autocomplete="off">
										<datalist id="{{$ColumnName}}">
											@if(!array_key_exists($ListBoxNamesIDVal,$childList))
											@foreach($listBoxVal as $listBoxKey=>$listBoxValue)
											@php
											echo "<option value='$listBoxValue'/>";
											@endphp
											@endforeach
											@endif

										</datalist>
									</select>
									@php
								}
								else
								{
									@endphp
									<input list="{{$ColumnName}}" name="{{$ColumnName}}" class="form-control" autocomplete="off">
									<datalist id="{{$ColumnName}}">

									</datalist>
									@php
								}
								@endphp
								@if($Required==1)
								<div class="invalid-feedback">
									Please fill the {{$ColumnName}}
								</div>
								@endif
								@php
							}
							@endphp

							@else
							<input type="text" name="{{$ColumnName}}" id="{{$ColumnName}}" class="form-control" value=""{{$required}}>
							@if($Required==1)
							<div class="invalid-feedback">
								Please fill the {{$ColumnName}}
							</div>
							@endif
							@endif
						</div>
					</div>

					@endforeach
					<input type="hidden" name="AssignedUserId" id="AssignedUserId" value="{{$LoggedAssUser}}"/>
				</div>
				<div class="row" style="clear:both">
					<div class="col-md-12 text-center">
						<div class="form-group">
							<button type="button" id="mySubBtn" class="btn btn-primary" onclick="QuickCreateSubmit('ConfigCreate')">Submit</button>
						</div>
					</div>
				</div>
			</form>
			@php
			// on 28th Jul '21
			$siteurl=$_SERVER['HTTP_HOST'];
			//$url=explode(".",$siteurl);	// crm.bpm360.net/cloud
			@endphp
<!-- <script type="text/javascript" src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo6/plugins/editors/quill/quill.js"></script>
	<script type="text/javascript" src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo6/plugins/editors/quill/custom-quill.js"></script> -->
	<script src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo2/plugins/flatpickr/flatpickr.js"></script>
	<script src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo2/plugins/flatpickr/custom-flatpickr.js"></script>
	<script src="{{asset('cork/HTML/ltr/demo6/plugins/editors/quill/quill.js') }}"></script>
	<script src="{{asset('cork/HTML/ltr/demo6/plugins/editors/quill/custom-quill.js') }}"></script>
	<script>

		// $(document).ready(function()
		// {       
		// 	var forms = document.getElementsByClassName('simple-example');
		// 	var invalid = $('.simple-example .invalid-feedback');
		// 	var subbutton=document.getElementById("mySubBtn");
		// 	// console.log("in Quickcreatre view");
  //       // console.log("form"+forms);
  //       // Loop over them and prevent submission
  //       var validation = Array.prototype.filter.call(forms, function(form) {
  //       	subbutton.addEventListener('click', function(event) {

  //       		// alert("validated");
  //       		if (form.checkValidity() === false) {
  //       			event.preventDefault();
  //       			event.stopPropagation();
  //       		} else {
  //       			submitQuickcreate();
  //       		}
  //       		form.classList.add('was-validated');

  //       	}, false);
  //       });
  //   });

  var f2 = flatpickr(document.getElementsByClassName('kab'), {
  	enableTime: true,
  	dateFormat: "Y-m-d H:i",
  });
  QuickCreateSubmit=(FormId,source="QuickCreate")=>
  {

  	console.log(`formid ${FormId}`)

  	var invalid = $('.simple-example .invalid-feedback');
  	var subbutton=document.getElementById("mySubBtn");

  	form=document.getElementById(FormId);
  	if (form.checkValidity() === false) {
  		event.preventDefault();
  		event.stopPropagation();
  		invalid.css('display', 'block');
  	} else {

				// $('#mySubBtn').prop("disabled",true);

				submitQuickcreate(source);
				// alert("form submitted");
				invalid.css('display', 'none');
				form.classList.add('was-validated');
			}
		}

		function submitQuickcreate()
		{


			// var forms = document.getElementsByClassName('simple-example');
			// alert("form Submitted");
			// return false;

			var ModuleId = $('#QModuleId').val();
			// var editor_status=$('.ql-editor').html();
			var RowId=$('#RowId').val();
			var ModuleName=$('#ModuleName').val();
			var PrimaryModuleId=$('#PrimaryModuleId').val();
			var monitorUcid=$('#monitorUcid').val();
			// $('.editorClass').val(editor_status);

			RefId=$('#LoggedAssUser').val();

			console.clear();
			console.log('RefId',RefId)

			var QuickcreateForm = JSON.stringify($('#ConfigCreate').serializeArray());
			var formData = {
				ModuleId: ModuleId,
				source: "QuickCreate",
				data: QuickcreateForm,
				RowId:RowId,
				ModuleName:ModuleName,
				PrimaryModuleId:PrimaryModuleId,
				monitorUcid:monitorUcid,
				RefId
			};
			// alert(formData);
			 //return false;

			 // console.log("response",QuickcreateForm);
			 // return false;
			 source='';
			 if(source=="API")
			 {
			 	url="{{ url('api/ConfigInsertData') }}";
			 }
			 else
			 {
			 	url= "{{ url('ConfigInsertData') }}";
			 }

			 $.ajax({
			 	type:'POST',
			 	url: url,
			 	data: formData,
			 	dataType: "json",
			 	headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			 	success: function(response) 
			 	{
					// alert(JSON.stringify(response));


					

					var txt = response;
					Snackbar.show({
						text: txt.Message, 
						pos: 'top-right',
					});
					
					subpanelVal=$('#subpanelLoop').val();
					$('#ConfigCreate').trigger("reset");
					$('#headingThree'+subpanelVal).trigger('click');

					// $("#QuickCreateModal .close").click();
					// $("#exampleModal .close").click();
					$('.modal .close').click();
					$('.modal .btn-close').click();

					$('.modal-backdrop').removeClass('modal-backdrop');
				},
				error:function(response)
				{
					// alert(JSON.stringify(response));
					console.log("response",response);

				}
			});
			}

			function getChildRelateNew(ParentModuleId,listId,DependentRelateToGroupId)
			{
				if(listId=='')
				{
					return false;
				}
				ModuleId=$('#QModuleId').val();
				$.ajax({
					type:"post",
					url:"{{url('api/GetChildRelateTo')}}",
					data:{ParentModuleId:ParentModuleId,ModuleId:ModuleId,DependentValueId:listId,GroupId:DependentRelateToGroupId},
					success:function(response)
					{
						// alert(response);
						res=JSON.parse(response);
						columnList=res.colList;
						for(i=0;i<columnList.length;i++)
						{
							$('#'+columnList[i]).empty();
							$('#'+columnList[i]).append(res.optList);
						}
						// console.log(res.colList);
					}

				});
				
			}
			
			checkparentNew=(fieldname,fieldValue)=>
			{
			 // alert(fieldValue);
			 // $('#LeadChild').empty();
			 if(fieldValue=="")
			 {
			 	return false;
			 }
			 var ModuleId = $('#QModuleId').val();
			 $.ajax({
			 	type:"post",
			 	url:'{{url("api/verifyChildExists")}}',
			 	data:{fieldname:fieldname,fieldValue:fieldValue,ModuleId:ModuleId},
			 	headers:{'X-CSRF_TOKEN':$('meta[name="csrf-token"]').attr('content')},
			 	dataType: "json",
			 	success:function(response)
			 	{
			 		if(response.field!="")
			 		{
			 			$('#'+response.field).empty();
			 			$('#'+response.field).val('');
			 			$('#'+response.field).append(response.dropdown);
						// alert(response.dropdown);
					}
					else
					{
						// alert("no child");
					}
					// console.log(response);

					
				},
				error:function(error)
				{
					// alert("error:"+JSON.stringify(error));
					// console.log(error);
				}
			});

			}


			function getRelatedList(ParentModuleId,ColumnName)
			{	
				// console.log('functio called')
				keywords=$('#'+ColumnName+"Displayq").val();
				$('#'+ColumnName).val('');

				// console.log(`keywords =${keywords} columnname=${ColumnName}`)

				if(keywords=='' || (keywords.length<=2))
				{
					$('#'+ColumnName+'Displayq').html('');
					$('#'+ColumnName+'Listq').html('');
					$('#'+ColumnName+'Listq').css('display','none');
					// console.log('returned');
					return false;
				}
				$.ajax({
					type:"post",
					url:"{{url('api/RelateToSearch')}}",
					data:{ParentModuleId:ParentModuleId,keywords:keywords,ColumnName:ColumnName},
					success:function(response)
					{
						// console.log(response)
			// alert(response);
			$('#'+ColumnName+'Listq').html(response);
			$('#'+ColumnName+'Listq').css('display','block');

		}
	});
			}


			function setListValue(value,ParentModuleId,label,ColumnName)
			{
	// alert(label);
	if(label!='empty')
	{
		$('#'+ColumnName+'q').val(value);
		$('#'+ColumnName+'Displayq').val(label);
		$('#'+ColumnName+"Listq").html('');
		$('#'+ColumnName+'Listq').css('display','none');

		MainModuleId=$('#QModuleId').val();
		$.ajax({
			type:"post",
			url:"{{url('api/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).val(RedirecctValue);
				}
				ColumnName=$('#ColumnName').val();
				rowId=result.RowId;
				displayVal=result.DisplayName;
				$('#'+ColumnName+'q').val(rowId);
				$('#'+ColumnName+"Displayq").val(displayVal);
			}
		});
	}
	 // $RowId=$_POST['RowId'];
  // $ModuleId=$_POST['ModuleId'];
  // $MainModuleId=$_POST['MainModuleId'];
}
function getChildRelateTo(ParentModuleId,listId,GroupId)
{
	if(listId=='')
	{
		return false;
	}
	ModuleId=$('#CreateViewModuleId').val();
	$.ajax({
		type:"post",
		url:"{{url('GetChildRelateTo')}}",
		data:{ParentModuleId:ParentModuleId,ModuleId:ModuleId,DependentValueId:listId,GroupId:GroupId},
		success:function(response)
		{
			// alert(response);
			res=JSON.parse(response);
			columnList=res.colList;
			// console.log(columnList);
			for(i=0;i<columnList.length;i++)
			{
				$('#'+columnList[i]).empty();
				$('#'+columnList[i]).append(res.optList);
			}
			// console.log(res.colList);
		}

	});
	
}


function clearInput(columnId)
{
	$('#'+columnId+'q').val('');
	$('#'+columnId+"Displayq").val('');
}
function Select_me(result)
{
	ColumnName=$('#ColumnName').val();
	rowId=result.RowId;
	displayVal=result.DisplayName;
	$('#'+ColumnName).val(rowId);
	$('#'+ColumnName+"Display").val(displayVal);
	Snackbar.show({
		text: "Selected", 
		pos: 'top-right',
	});
	console.log();
	$('#SearchModal .close').click();
}
function addEmail(ColumnName)
	{
		var emailCount =(new Date()).getTime();
		fieldsArray=[];

		fieldsval=$('#'+ColumnName+'Count').val();

		if(fieldsval)
		{
			fieldsArray=fieldsval.split(",");
		}
		

		fieldsArray.push(emailCount); 
		
		outerdivOpen=`<div id='emailDiv${emailCount}' style="margin-bottom: 5px;margin-top: 5px;">`;

		emailField=`
		<li style="width:100%">
		<input type="email" id="${ColumnName}${emailCount}" ${ColumnName}IdNum='${emailCount}' class="form-control EmailIds${ColumnName}"  value="" name='${ColumnName}${emailCount}' autocomplete="off" onblur="ValidateFunction(12,'${ColumnName}${emailCount}');UpdateEmailId('${ColumnName}');">
		</li>

		
		
		<li  style="margin-top:5px !important;margin-bottom:10px !important;width:20%;text-align:center">
		<label style="display:block">Primary</label>
		<input type="radio" name="emailPrimary${ColumnName}" value="1" onclick="updatePrimaryEmail('${ColumnName}','${emailCount}')">
		</li>

		<li style="margin-top:5px !important;margin-bottom:10px !important;width:25%;text-align:center">
		<label style="display:block">Opted Out</label>
		<input type="checkbox" class="optedOut${ColumnName}" name="optedOut${ColumnName}${emailCount}" id="optedOut${ColumnName}${emailCount}" value="" onchange="UpdateOptedOut('${ColumnName}',${emailCount})">
		</li>

		<li style="margin-top:5px !important;margin-bottom:10px !important;width:20%;text-align:center">
		<label style="display:block">Invalid</label>
		<input type="checkbox" class="invalid${ColumnName}"  name="Invalid${ColumnName}${emailCount}" id='Invalid${ColumnName}${emailCount}' value="" onchange="UpdateInvalid('${ColumnName}',${emailCount})">
		</li>

		<li style="margin-top:5px !important;margin-bottom:10px !important;width:20%;text-align:center" title="Remove Email">
		<label style="display:block">Remove</label>
		<svg onclick="removeEmail('${ColumnName}',${emailCount})"  style="cursor:pointer; title"Remove Email" xmlns="https://www.w3.org/2000/svg" width="20" height="20" 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>
		</li>
		`;


		outerdivClose="</div>";
		emailField=outerdivOpen+emailField+outerdivClose;

		$('#emailContainer'+ColumnName).append(emailField);

		Snackbar.show({
			text: "Added Email", 
			pos: 'top-right',
		});

		$('#'+ColumnName+'Count').val(fieldsArray);
	}
	function updatePrimaryEmail(ColumnName,count)
	{
		primaryEmail=ColumnName+count;
		primaryEmailId=$('#'+primaryEmail).val();
		$('#'+ColumnName+'Primary').val(primaryEmailId);
	}
</script>