@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('WorkFlow-Create')}}">Create Workflow</a></li>
		<li class="breadcrumb-item"><a href="#">WorkFLow Conditions</a></li>
	</ol>
</nav>


<style>
	.col-md-4
	{
		margin-bottom: 5px;
		margin-top: 5px;
	}
	.addConditionBtn
	{
		height: fit-content;
		width: fit-content;
	}
</style>

<div class="statbox widget box box-shadow">

	

	<h4>{{$WorkFlowInfo->WorkFlowName}} 
		&nbsp;&nbsp;

		<a href="javascript:void(0);" class="text-primary" onclick="CopyQuery()" title="Click Here to Copy the query">
			<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-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
		</a>
		
		&nbsp;&nbsp;

		<a href="javascript:void(0);" class="text-primary" onclick="ViewQuery('{{$WorkFlowInfo->WorkFlowId}}')" title="Click Here to refresh the query">
			<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-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
		</a> </h4>
		<input type="hidden" id="ModuleId" value="{{$WorkFlowInfo->ModuleId}}">
		<input type="hidden" id="WorkFlowId" value="{{$WorkFlowInfo->WorkFlowId}}">


		


		<div class="form-group row">
			<div class="col-md-12">
				<textarea class="form-control" id="QueryBox" readonly></textarea>
			</div>
		</div>
		<br>

		
		<a href="javascript:void(0);" class="text-primary" onclick="GetWorkFlowConditionsForm('{{$WorkFlowInfo->WorkFlowId}}','{{$WorkFlowInfo->ModuleId}}','2')" >
			<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> Add Condition Group
		</a>

		<div class="col-md-12" id="QueryDiv" style="display: none;"></div>

	</div>
	<br>


	<div id="workflowConditionsContainer">
		<div id="workflowConditionDiv"  class="accordion"></div>
		<br>
		<center><span id="ConditionLoader"></span></center>

	</div>

	<div id="workflowList"></div>
	@endsection

	<script>


		document.addEventListener('DOMContentLoaded',()=>{
			setTimeout(LoadConditionGroups, 100,'{{$WorkFlowInfo->WorkFlowId}}','{{$WorkFlowInfo->ModuleId}}');

		});

		GetWorkFlowConditionsForm=(WorkFlowId,ModuleId,ConditionType)=>
		{

			$.ajax({
				type:"post",
				url:"{{url('WorkFlow-ConditionsForm')}}",
				data:{WorkFlowId,ModuleId,ConditionType},
				beforeSend:()=>{
					$('#ConditionLoader').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`)
				},
				success:response=>{
					$('#workflowConditionDiv').append(response)
					$('#ConditionLoader').html('')
				}
			});
		}


		

		function ValueTypeChange(WorkFlowConditionId,workFlowConditionEncoded="[]")
		{

			// console.clear();
			// console.log( JSON.parse(workFlowConditionEncoded) );
			// console.log( workFlowConditionEncoded );
			
			$(`.RemoveDivs${WorkFlowConditionId}`).remove();

			var moduleid = document.getElementById(`ConditionModuleId${WorkFlowConditionId}`).value;
			var RelatedField= document.getElementById(`RelatedFields${WorkFlowConditionId}`).value;

			var DemogrpahyIdname = "DemographyConfigId"+WorkFlowConditionId;
			var DemogrpahyIdValue = document.getElementById(DemogrpahyIdname).value;

			var DisplayTypename = "DemographyDisplayType"+WorkFlowConditionId;
			var DisplayTypeValue = document.getElementById(DisplayTypename).value;

			var ValueTypename = `ValueType${WorkFlowConditionId}`;
			var ValueType = document.getElementById(ValueTypename).value;

			var OperatorValue=document.getElementById(`Operator${WorkFlowConditionId}`).value;

			var ConditionValueDivname = "ConditionValueDiv"+WorkFlowConditionId;		
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
				}
			});

			if(!ValueType)
			{
				return;
			}	

			var formData = {
				moduleid: moduleid,
				DemographyConfigId: DemogrpahyIdValue,
				DisplayTypeValue: DisplayTypeValue,
				UnqRecordId: WorkFlowConditionId,
				ValueType: ValueType,
				OperatorValue,
				workFlowConditionEncoded
			};


			$.ajax({
				type:"post",
				url: "{{url('WorkFlow-ConditionValue')}}",
				data:formData,
				beforeSend:()=>{
					$(`.RemoveDivs${WorkFlowConditionId}`).remove();
				},
				success:function(result)
				{

					$(`#FullBlockRow${WorkFlowConditionId}`).append(result);

				},
				error:function(response)
				{
					// console.log("error:",JSON.parse(response));
				}
			});
		}



		function SaveCondition(WorkFlowConditionId, WorkFlowConditionGroupId)
		{
			var WorkFlowId = document.getElementById('WorkFlowId').value;
			const ConditionForm=document.getElementById(`ConditionForm${WorkFlowConditionId}`);
			var Myform=new FormData(ConditionForm);
			Myform.append('WorkFlowId',WorkFlowId);
			Myform.append('WorkFlowConditionId',WorkFlowConditionId);
			Myform.append('WorkFlowConditionGroupId',WorkFlowConditionGroupId);

			// console.clear();

			// for (let entry of Myform.entries()) {
			// 	console.log(entry[0] + ": " + entry[1]);
			// }

			$.ajax({
				type:"post",
				url:"{{url('WorkFlow-SaveCondition')}}",
				data: Myform,
				cache:false,
				contentType:false,
				processData:false,
				mimeType:"multipart/form-data",
				success: function (result) {
					// console.log(result);

					var txt = JSON.parse(result);
					if(txt.Status =="Success"){
						Snackbar.show({
							text: 'Updated Successfully',
							pos: 'top-right',
						});
					}else{
						Snackbar.show({
							text: 'Update Failed',
							pos: 'top-right',
							actionTextColor: '#fff',
							backgroundColor: '#e7515a'
						});
					}
				}

			})

		}



		function UpdateCondGrpType(WorkFlowConditionGroupId,ConditionGroupType)
		{
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
				}
			});
			var formData = {
				ConditionGroupType: ConditionGroupType,
				conditionGroupID: WorkFlowConditionGroupId,
			};
			var type = "POST";
			var ajaxurl ="{{url('UpdateConditionGrpType')}}";
			$.ajax({
				type: type,
				url: ajaxurl,
				data: formData,
				success: function (result) {
					Snackbar.show({
						text: 'Condition Group Type Updated Successfully',
						pos: 'top-right',
					});
				},
				complete: function () {

				},
				error: function (data) {
					// console.clear();
					// console.log(JSON.stringify(data));
				}
			});
		}

		LoadConditionGroups=(WorkFlowId,ModuleId)=>
		{
			$.ajax({
				type:"post",
				url:"{{url('WorkFlow-LoadConditionGroups')}}",
				data:{WorkFlowId,ModuleId},
				beforeSend:()=>{
					$('#ConditionLoader').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`)
				},
				success:response=>{
			// console.log('response');

					$('#workflowConditionDiv').append(response)
					$('#ConditionLoader').html('')

					ViewQuery(WorkFlowId);
				}
			});
		}

		ViewQuery=(WorkFlowId)=>
		{
			$('#QueryDiv').toggle();

			$.ajax({
				type:"post",
				url:"{{url('WorkFlow-ViewQuery')}}",
				data:{WorkFlowId},
				beforeSend:()=>{
					$('#QueryDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`)
				},
				success:response=>{
					console.clear();
					res=JSON.parse(response);
					console.log(res);

					AC=res.AuditQueries;
					query=`MainQuery: ${res.MainQuery}  AuditQueries:  `;

					AC.map((condition)=>{
						query+=`   ${condition}  `;
					})


					$('#QueryDiv').html(``);
					$('#QueryBox').val(query);

				}
			});
		} 

		DeleteConditionGroup =(WorkFlowConditionGroupId)=>
		{

			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-DeleteConditionGroup')}}/${WorkFlowConditionGroupId}`,
						beforeSend:()=>{
						},
						success:response=>{
							// console.clear();
							// console.log(response);

							res=JSON.parse(response);

							if(res.status=="success")
							{
								Snackbar.show({
									text: 'Condition Group deleted successfully!',
									pos: 'top-right',
								});

								$(`#ConditionGroupCard${WorkFlowConditionGroupId}`).remove();
							}
							else
							{
								Snackbar.show({
									text: 'Failed to  delete!',
									pos: 'top-right',
								});
							}

						}
					});

				}
			})

		}

		GetValueTypes=(unqid,DisplayType)=>
		{	
			$(`.RemoveDivs${unqid}`).remove();

			$.ajax({
				type:"POST",
				url:"{{url('WorkFlow-GetValueTypes')}}",
				data:{DisplayType},
				beforeSend:()=>{
					$(`#ValueType${unqid}`).empty();
					$('.customDropdown').trigger('chosen:updated');
					$('.customDropdown').chosen();
				},
				success:response=>{
					// console.log(response);

					$(`#ValueType${unqid}`).append(response);
					$('.customDropdown').trigger('chosen:updated');
					$('.customDropdown').chosen();
				}
			});

		}

		TimeTypeChange=(uniqId)=>
		{
			timeType=$(`#TimeType${uniqId} :selected`).val();
			var ModuleId = document.getElementById("ModuleId").value;
			$.ajax({
				type:"post",
				url:"{{url('WorkFlow-TimeTypeChange')}}",
				data:{uniqId,timeType,ModuleId},
				beforeSend:()=>{
			// $('.AdditionalFields').remove();
				},
				success:response=>{
			// var existingDiv=document.getElementById(`AdjacentDiv${uniqId}`);
			// existingDiv.insertAdjacentHTML("afterend", response);

					$(`#TimeField${uniqId}`).html(response);

					// console.clear();
					// console.log(response);
				}
			});
		}


		AddNewCondition=async (WorkFlowConditionGroupId,WorkFlowConditionId)=>
		{
			try
			{
				await AddCondition(WorkFlowConditionGroupId,WorkFlowConditionId);
			}
			catch(e){}
		}

		AddCondition=(WorkFlowConditionGroupId,WorkFlowConditionId)=>
		{
			return new Promise((resolve,reject)=>{

				console.clear();

				var ModuleId = document.getElementById("ModuleId").value;
				var RelatedField = document.getElementById(`RelatedFields${WorkFlowConditionId}`).value;

				if(!RelatedField)
				{
					Snackbar.show({
						text: 'Please Select RelatedField!',
						pos: 'top-right',
						actionTextColor: '#fff',
						backgroundColor: '#e7515a'
					});
					return;
				}	

				$.ajax({
					type: "post",
					url: "{{url('WorkFlow-AddCondition')}}",
					data: {ModuleId,RelatedField,WorkFlowConditionGroupId,WorkFlowConditionId},
					success:result=>{
						$(`#ModuleFields${WorkFlowConditionId}`).html(result);
						resolve();
					}
				});

			});

			


		}

		RemoveConditionGroups=(WorkFlowConditionGroupId)=>
		{
			return new Promise((resolve,reject)=>{

				$.ajax({
					type:"post",
					url:`{{url('WorkFlow-DeleteCondition')}}/${WorkFlowConditionGroupId}`,
					beforeSend:()=>{
						$(`#ModuleFields${WorkFlowConditionGroupId}`).html('');
					},
					success:response=>{
						// console.log(response);
						resolve();
					}
				})

			});
			
		}




		AddSubCondition=(WorkFlowConditionGroupId)=>
		{
			var ModuleId = document.getElementById("ModuleId").value;
			$.ajax({
				type:"post",
				url:`{{url('WorkFlow-AddSubCondition')}}`,
				data:{WorkFlowConditionGroupId,ModuleId},
				beforeSend:()=>{
					$(`#SubConditionsLoader${WorkFlowConditionGroupId}`).html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`);
				},
				success:response=>{
					$(`#SubConditionsLoader${WorkFlowConditionGroupId}`).html(``);
					$(`#SubConditions${WorkFlowConditionGroupId}`).append(response);
				}
			})
		}

		DeleteCondition=(WorkFlowConditionId)=>
		{
			return new Promise((resolve,reject)=>{

				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-DeleteCondition')}}/${WorkFlowConditionId}`,
							beforeSend:()=>{
							},
							success:response=>{
								// console.log(response);
								$(`#SubConditionAccordion${WorkFlowConditionId}`).remove();
								resolve();
							}
						})

					}
				});
				
			})

		}

		CopyQuery=()=>
		{
			navigator.clipboard.writeText($('#QueryBox').val())
			.then(function() {
				Snackbar.show({
					text: 'Query copied to clipboard!',
					pos: 'top-right',
				});
			})
			.catch(function(error) {
				Snackbar.show({
					text: 'Failed to copy!',
					pos: 'top-right',
				});
			});
		}

	</script>