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

@php
use App\Models\Demography;

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


@endphp
<div class="col-md-4 form-group">
	<label id="label{{$ColumnName}}" style="display: block">{{$DisplayName}}
		<span style="cursor:pointer" onclick="addEmail('{{$ColumnName}}')">
			<svg style="color:#1b55e2;" xmlns="https://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>
	</label>
	<ul class="relatedclass" id="emailContainer{{$ColumnName}}">
		@php

		$emailAddresses="";	
		$EmailcountVal="";	
		$primaryEmailAddress="";	
		$OptedOutEmailAddress="";	
		$InvalidEmailAddress="";	
		@endphp
		<input type="hidden" name="{{$ColumnName}}" value='{{$emailAddresses}}' id="{{$ColumnName}}">
		<input type="hidden" name="{{$ColumnName}}Count" value='{{$EmailcountVal}}' id="{{$ColumnName}}Count">
		<input type="hidden" name='{{$ColumnName}}Primary' value='{{$primaryEmailAddress}}' id="{{$ColumnName}}Primary">
		<input type="hidden" name='{{$ColumnName}}OptedOut' value='{{$OptedOutEmailAddress}}' id="{{$ColumnName}}OptedOut">
		<input type="hidden" name='{{$ColumnName}}Invalid' value='{{$InvalidEmailAddress}}' id="{{$ColumnName}}Invalid">
	</ul>
</div>

<style>
	.relatedclass
	{
		padding-left: 0px !important;
	}
	.relatedclass li
	{
		display: inline-block !important;
	}
</style>
<script>
	function UpdateEmailId(ColumnName)
	{
		allemailIds=[];
		$('.EmailIds'+ColumnName).each(function(){
			if($(this).val()!='')
			{
				allemailIds.push($(this).val());
			}

		});

		$('#'+ColumnName).val(allemailIds);
	}

	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>