@extends('layouts.header')
@section('content')
<br>
<nav class="breadcrumb-style-one mb-3" aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="{{url('CreateWorkFlowV2')}}">Create Workflow</a></li>
		<li class="breadcrumb-item"><a href="#">WorkFLow Actions</a></li>
	</ol>
</nav>


<style>
	.col-md-4
	{
		margin-bottom: 5px;
		margin-top: 5px;
	}
</style>

<div class="statbox widget box box-shadow">
	<h4>WorkFlow Actions</h4>


	<form name="workFlowActionForm" id="workFlowActionForm">

		<div class="form-group row">

			<div class="col-md-3">
				<label>Module</label>
				<select class="form-control" name="ModuleId" id="ModuleId">
					<option value="">--Select Module--</option>
					@foreach($Modules as $Module)
					<option value="{{$Module->ModuleId}}">{{$Module->ModuleName}}</option>
					@endforeach
				</select>
			</div>

			<div class="col-md-3">
				<label>Action Name <font color="red">*</font></label>
				<input type="text" id="WorkFlowActionName" name="WorkFlowActionName" class="form-control" required>
				<div class="invalid-feedback">
					Please fill the Action Name
				</div>
			</div>

			<div class="col-md-3">
				<label>Action Type <font color="red">*</font></label>
				<select class="form-control customDropdown" name="ActionType" id="ActionType" required>
					<option value="">--Select Action--</option>
					<option value="1">Update Record</option>
					<option value="5">Update Related Records</option>
					<option value="2">Create Record</option>
					<option value="3">Send Mails</option>
					<option value="4">Send Escalation Mails</option>
				</select>
				<div class="invalid-feedback">
					Please fill the Action Type
				</div>
			</div>

			<div class="col-md-3">
				<button type="button" id="ActionFormBtn" class="btn btn-primary" style="margin-top: 32px;" onclick="SaveAction()">Add</button>
			</div>

		</div>

	</form>

</div>
<br>
<div class="statbox widget box box-shadow">
	<div id="WorkFlowActionsList" class="form-group row"></div>
</div>
<div id="WorkFlowActionFormDiv" class="form-group row"></div>
<br>
<div id="workflowSctionsContainer">
	<div id="workflowActionDiv"  class="accordion"></div>
	<br>
	<!-- <center><span id="ActionsLoader"></span></center> -->

</div>

<div id="workflowActionsList"></div>


<!-------------------Modal Starts---------------------->

<div class="modal fade" id="ActionConfigModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<svg aria-hidden="true" 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
				</button>
			</div>
			<div class="modal-body" id="ActionConfigModalBody">
				<p class="modal-text">Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. </p>
			</div>
			<div class="modal-footer">
				<button class="btn" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
			</div>
		</div>
	</div>
</div>


<!-------------------Modal Ends---------------------->

@endsection

<script>


	document.addEventListener('DOMContentLoaded',()=>{
		console.clear();
		setTimeout(()=>{
			LoadActions();
		},500)
	})


	SaveAction=async ()=>
	{
		console.clear();

		try
		{
			await  new Promise((resolve,reject)=>{
				form=document.getElementById('workFlowActionForm');
				form.classList.add('was-validated');

				if (form.checkValidity() === false) 
				{
					event.preventDefault();
					event.stopPropagation();
					return;
				}
				else
				{
					formData=new FormData(form);

					$.ajax({
						type:"POST",
						url:"{{url('WorkFlow-SaveAction')}}",
						data:formData,
						contentType:false,
						cache:false,
						processData:false,
						beforeSend:()=>{},
						success:response=>{
					// console.log(response);
							res=JSON.parse(response);
							Snackbar.show({
								text: res.msg,
								pos: 'top-right',
							});

							resolve();
							
						}
					})
				}
			})

			await LoadActions();
		}
		catch(e){}

		
		
	}


	LoadActions=()=>
	{

		return new Promise((resolve,reject)=>{
			$.ajax({
				type:"POST",
				url:"{{url('WorkFlow-LoadActions')}}",
				beforeSend:()=>{
					$('#WorkFlowActionsList').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`)
				},
				success:response=>{
				// console.log(response);
					$('#WorkFlowActionsList').html(response)
				}
			})

		})
		
	}


	AddActionForm=(WorkFlowId)=>
	{

		form=document.getElementById('workFlowActionForm');

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

			formData=new FormData(form);

			$.ajax({
				type:"post",
				url:"{{url('WorkFlow-ActionForm')}}",
				data:formData,
				contentType:false,
				cache:false,
				processData:false,
				beforeSend:()=>{
					$('#ActionFormBtn').prop('disabled',true);

					$('#WorkFlowActionFormDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`)
				},
				success:response=>{
					$('#ActionFormBtn').prop('disabled',false);
					$('#WorkFlowActionName').val('');
					$('#ActionType').val('').change();

					form=document.getElementById('workFlowActionForm');
					form.classList.remove('was-validated');

					try
					{
						res=JSON.parse(response)
						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
							actionTextColor: '#fff',
							backgroundColor: '#e7515a'
						});
						$('#WorkFlowActionFormDiv').html(``)
					}
					catch(e)
					{
						console.clear();
						$('#WorkFlowActionFormDiv').html(response);


					}

				}
			});
		}

	}


	GetToAddressColumn=(ColumnType,divname="")=>
	{
		ModuleId=$('#ModuleId').val();

		if(!ColumnType)
		{
			$(`#ToAddressDiv${divname}`).html('');
			return;
		}

		

		$.ajax({
			type:"post",
			url:"{{url('WorkFlow-GetToAddressColumn')}}",
			data:{ColumnType,ModuleId,divname},
			beforeSend:()=>{
				$(`#ToAddressDiv${divname}`).html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`);
			},
			success:response=>{
					// $('#ActionFormBtn').prop('disabled',false);
				$(`#ToAddressDiv${divname}`).html(response);
			}
		});

	}


	GetFromAddressColumn=(ColumnType,divname="")=>
	{
		ModuleId=$('#ModuleId').val();

		if(!ColumnType)
		{
			$(`#FromAddressDiv${divname}`).html('');
			return;
		}

		$.ajax({
			type:"post",
			url:"{{url('WorkFlow-GetFromAddressColumn')}}",
			data:{ColumnType,ModuleId},
			beforeSend:()=>{
				$(`#FromAddressDiv${divname}`).html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`);
			},
			success:response=>{
					// $('#ActionFormBtn').prop('disabled',false);
				$(`#FromAddressDiv${divname}`).html(response);
			}
		});

	}



	removeDateCondition=(DivName,uniqId)=>
	{
		$(`#${DivName}${uniqId}`).remove();
	}

	addDate=(DivName)=>
	{
		var uniqId = (new Date()).getTime();

		

		datediv=`
		<div class="form-group row" id="${DivName}${uniqId}">

		<div class="col-md-4" style="float: left">
		<label>From</label>
		<select name="DateFrequencyFrom[]" id="${DivName}From${uniqId}" class="form-control">
		<option value="0">Same Day</option>
		<option value="3">Before  3 days</option>
		<option value="7">Before  7 days</option>
		<option value="7">Before  15 days</option>
		<option value="30">Before 30 Days</option>
		<option value="60">Before 60 Days</option>
		<option value="90">Before 90 Days</option>
		</select>
		</div>

		<div class="col-md-4" style="float: left">
		<label>To</label>
		<select name="DateFrequencyTo[]" id="${DivName}To${uniqId}" class="form-control">
		<option value="">--Select--</option>
		<option value="3">Next  3 days</option>
		<option value="7">Next  7 days</option>
		<option value="7">Next  15 days</option>
		<option value="30">Next 30 Days</option>
		<option value="60">Next 60 Days</option>
		<option value="90">Next 90 Days</option>
		</select>
		</div>

		<div class="col-md-4" style="float: left">

		<button type="button" class="btn btn-success btn-small" onclick="addDate('${DivName}')" style="margin-top: 30px">Add</button>
		<button type="button" class="btn btn-danger btn-small" onclick="removeDateCondition('${DivName}','${uniqId}')" style="margin-top: 30px">Remove</button>

		</div>
		</div>
		`;

		$(`#${DivName}`).append(datediv);
	}

	addTime=(DivName)=>
	{
		var OptionsList=``;

		for(x=5;x<=120;x=x+5)
		{
			OptionsList+=`<option value="${x}">Greater ${x} Minutes</option>`
		}
		
		var uniqId = (new Date()).getTime();


		var timeDiv=`

		<div class="form-group row" id="EmailTimeDiv${uniqId}">

		<div class="col-md-4">
		<label>Time <font color="red">*</font> 
		<span class="text-primary"  title="Add" onclick="addTime('EmailTimeDiv')"> 
		<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-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>
		&nbsp;
		<span class="text-danger"  title="Remove" onclick="removeTime('EmailTimeDiv${uniqId}')"> 
		<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>
		</span>

		</label>

		<select name="EscalationTime[]" class="form-control" required>
		<option value="">--Select--</option>
		${OptionsList}
		</select>
		<div class="invalid-feedback">
		Please fill To Time
		</div>
		</div>

		<div class="col-md-4">
		<label>To Address Type <font color="red">*</font> </label>
		<select class="form-control customDropdown" name="ToAddressType[]" id="ToAddressType" required onchange="GetToAddressColumn(this.value,'${uniqId}')">
		<option value="">--select--</option>
		<option value="1">Module Column</option>
		<option value="2">Manual</option>
		</select>
		<div class="invalid-feedback">
		Please fill To Address Type
		</div>
		</div>

		<div class="col-md-4">
		<label>To Address <font color="red">*</font> </label>
		<span id="ToAddressDiv${uniqId}"></span>
		</div>
		</div>
		`
		
		$(`#${DivName}`).append(timeDiv);

		console.clear();
		console.log(OptionsList);
	}


	removeTime=(DivName)=>
	{
		$(`#${DivName}`).remove();
	}


	SaveEmailForm=()=>
	{
		console.clear();
		console.log($('#MailForm').serializeArray());

		form=document.getElementById('MailForm');

		formData=new FormData(form);

		form.classList.add('was-validated');
		if (form.checkValidity() === false) 
		{
			event.preventDefault();
			event.stopPropagation();
			return;
		}
		else
		{
			$.ajax({
				url: "{{url('WorkFlow-SaveMailForm')}}",
				type: 'POST',
				data: formData,
				mimeType: "multipart/form-data",
				contentType: false,
				cache: false,
				processData: false,
				beforeSend:()=>{
					$('#WorkFlowActionFormDiv').html(`<center>
						<div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`);

				},
				success:response=>
				{
					console.clear();
					console.log(response);
					res=JSON.parse(response);

					$('#WorkFlowActionFormDiv').html('');

					if(res.status=="success")
					{
						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
						});
					}
					else
					{
						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
							actionTextColor: '#fff',
							backgroundColor: '#e7515a'
						});
					}
				}
			});
		}

	}


	SaveEscalationForm=()=>
	{
		console.clear();
		console.log($('#EscalationForm').serializeArray());

		form=document.getElementById('EscalationForm');

		formData=new FormData(form);

		form.classList.add('was-validated');
		if (form.checkValidity() === false) 
		{
			event.preventDefault();
			event.stopPropagation();
			return;
		}
		else
		{
			$.ajax({
				url: "{{url('WorkFlow-SaveEscalationForm')}}",
				type: 'POST',
				data: formData,
				mimeType: "multipart/form-data",
				contentType: false,
				cache: false,
				processData: false,
				beforeSend:()=>{
					$('#WorkFlowActionFormDiv').html(`<center>
						<div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`);

				},
				success:response=>
				{
					console.clear();
					console.log(response);
					res=JSON.parse(response);

					$('#WorkFlowActionFormDiv').html('');

					if(res.status=="success")
					{
						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
						});
					}
					else
					{
						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
							actionTextColor: '#fff',
							backgroundColor: '#e7515a'
						});
					}
				}
			});
		}

	}


	DeleteAction=(WorkFlowActionId)=>
	{
		Swal.fire({
			title: 'Are you sure?',
			text: "You won't be able to revert this!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.isConfirmed) {

				$.ajax({
					type:'post',
					url:`{{url('WorkFlow-DeleteAction')}}/${WorkFlowActionId}`,
					beforeSend:()=>{},
					success:response=>{
						console.log(response);

						res=JSON.parse(response);
						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
						});
					}
				})

				WorkFlowId=$('#WorkFlowId').val();

				LoadActions(WorkFlowId);
			}
		})
	}

	UpdateAction=(WorkFlowActionId)=>
	{	

		form=document.getElementById(`ActionForm${WorkFlowActionId}`);
		formData=new FormData(form);
		formData.append('WorkFlowActionId',WorkFlowActionId);

		// for( let entries of formData.entries(formData) )
		// {
		// 	console.log(entries);
		// }

		$.ajax({
			type:"post",
			url:"{{url('WorkFlow-UpdateAction')}}",
			data:formData,
			processData:false,
			cache:false,
			contentType:false,
			beforeSend:()=>{},
			success:response=>{
				console.log(response);
			}
		})

	}

	GetConfigForm=(WorkFlowActionId)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('WorkFlowAction-GetConfigForm')}}",
			data:{WorkFlowActionId},
			beforeSend:()=>{},
			success:response=>{
				$('#ActionConfigModal').modal('show');
				$('#ActionConfigModalBody').html(response);
			}
		})
	}

	UpdateWorkFlowAction=(UpdateValue,UpdateColumn,WorkFlowActionId)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('WorkFlow-ActionUpdate')}}",
			data:{UpdateValue,UpdateColumn,WorkFlowActionId},
			beforeSend:()=>{},
			success:response=>{
				console.log(response);
			}
		})
	}
</script>