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

@php
use App\Models\Demography;

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

if($mandatory==1)
{
	$RequiredField="required";
	$DisplayredStar="*";

}
else
{
	$RequiredField="";
	$DisplayredStar="";
}

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

@endphp
<div class="col-md-4 form-group {{$displayHide}}" id="{{$ColumnName}}Wrapper{{$moduleid}}">
	<label style="display: block">{{$DisplayName}}
		<span style="cursor:pointer" onclick="addEmail('{{$ColumnName}}','{{$moduleid}}')">
			<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> <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>
	<ul class="relatedclass" id="emailContainer{{$ColumnName}}">
		@php

		$emailAddresses="";	
		$EmailcountVal="";	
		$primaryEmailAddress="";	
		$OptedOutEmailAddress="";	
		$InvalidEmailAddress="";	
		@endphp
		<!-- <input type="hidden" name="{{$ColumnName}}" value='{{$emailAddresses}}' id="{{$ColumnName}}{{$moduleid}}" {{$RequiredField}}> -->
		<input type="text" name="{{$ColumnName}}" class="form-control" value='{{$emailAddresses}}' id="{{$ColumnName}}{{$moduleid}}" {{$RequiredField}} style="display: none">
		<div class="invalid-feedback">
			Please fill the {{$DisplayName}}
		</div>

		<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,ModuleId)
	{
		allemailIds=[];
		$('.EmailIds'+ColumnName).each(function(){
			if($(this).val()!='')
			{
				allemailIds.push($(this).val());
			}

		});

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

	function addEmail(ColumnName,ModuleId)
	{
		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}','${ModuleId}');">
		</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},'${ModuleId}')"  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);
	}

	function removeEmail(ColumnName,emailCount,ModuleId)
	{

		updateCount=0;
		const swalWithBootstrapButtons = swal.mixin({
			confirmButtonClass: 'btn btn-success btn-rounded',
			cancelButtonClass: 'btn btn-danger btn-rounded mr-3',
			buttonsStyling: false,
		})

		Swal.fire({
			title: 'Are you sure to remove this email?',
			text: "You won't be able to revert this!",
			type: 'warning',
			showCancelButton: true,
			confirmButtonText: 'Yes, Remove it',
			cancelButtonText: 'No, cancel',
			reverseButtons: true,
			padding: '2em'
		}).then(function(result) {
			if (result.value) {
				var elem = document.getElementById('emailDiv'+emailCount);
				elem.parentNode.removeChild(elem);

				primaryEmailId=$('#'+ColumnName+'Primary').val();
				if(primaryEmailId==emailCount)
				{
					$('#'+ColumnName+'Primary').val('');
				}
				fieldsVal=$('#'+ColumnName+'Count').val();

				fieldsArray=fieldsVal.split(",");

				newfieldsArray=fieldsArray.filter((fieldcount)=>{

					return fieldcount!=emailCount;
				});

				$('#'+ColumnName+'Count').val(newfieldsArray);

				updateCount=1;
				UpdateEmailValues(ColumnName,ModuleId);
				swalWithBootstrapButtons(
					'Removed!',
					'Email has been removed.',
					'success'
					)
			} else if (
				result.dismiss === swal.DismissReason.cancel
				) {
				swalWithBootstrapButtons(
					'Cancelled',
					)
			}
		})

	}


	function UpdateEmailValues(ColumnName,ModuleId)
	{
		invalidArray=[];
		optedOutArray=[];
		allemailIds=[];
		$('.invalid'+ColumnName).each(function(){

			if($(this).is(" :checked"))
			{
				if($(this).val()!='')
				{
					invalidArray.push($(this).val());
				}
			}
		});

		$('#'+ColumnName+'Invalid').val(invalidArray);

		$('.optedOut'+ColumnName).each(function(){

			if($(this).is(" :checked"))
			{
				if($(this).val()!='')
				{
					optedOutArray.push($(this).val());
				}

			}
		});

		$('#'+ColumnName+'OptedOut').val(optedOutArray);

		$('.EmailIds'+ColumnName).each(function(){


			if($(this).val()!='')
			{
				allemailIds.push($(this).val());
			}

		});

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

	// console.log(allemailIds);
}

function UpdateOptedOut(ColumnName,count)
{	
	optedOutArray=[];
	if($('#optedOut'+ColumnName+count).is(" :checked"))
	{
		optedOutEmail=$('#'+ColumnName+count).val();



		$('#optedOut'+ColumnName+count).val(optedOutEmail);
	}
	else
	{
		$('#optedOut'+ColumnName+count).val('');

	}


	$('.optedOut'+ColumnName).each(function(){

		if($(this).is(" :checked"))
		{
			if($(this).val()!='')
			{
				optedOutArray.push($(this).val());
			}
			
		}
	});

	$('#'+ColumnName+'OptedOut').val(optedOutArray);
	// console.log(optedOutArray);

	// AllOptedOutval=split(",")
}

function UpdateInvalid(ColumnName,count)
{
	if($('#Invalid'+ColumnName+count).is(" :checked"))
	{
		optedOutEmail=$('#'+ColumnName+count).val();
		$('#Invalid'+ColumnName+count).val(optedOutEmail);
	}
	else
	{
		$('#Invalid'+ColumnName+count).val('');

	}

	invalidArray=[];
	$('.invalid'+ColumnName).each(function(){

		if($(this).is(" :checked"))
		{
			if($(this).val()!='')
			{
				invalidArray.push($(this).val());
			}
		}
	});

	$('#'+ColumnName+'Invalid').val(invalidArray);


}
</script>