@extends('layouts.header')
@section('content')

<br>
<div class="statbox widget box box-shadow">
	<div class="form-group row">
		<h4>{{$CalculationsDetails->CalculationsName}}</h4>
		<a href="javascript:void(0)" class="text-primary" onclick="AddCalculationGroup('{{$CalculationsDetails->WorkFlowCalculationsId}}')">
			<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 Group
		</a>
		<input type="hidden" id="ModuleId" value="{{$CalculationsDetails->ModuleId}}">
	</div>
</div>

<br>

<div id="CalculationGroup"></div>

@endsection

<script>

	document.addEventListener('DOMContentLoaded',()=>{
		setTimeout(()=>{
			LoadGroups('{{$CalculationsDetails->WorkFlowCalculationsId}}');
		},200)

	})

	AddCalculationGroup =(WorkFlowCalculationsId)=>
	{
		ModuleId=$('#ModuleId').val();
		$.ajax({
			type:"POST",
			url:"{{url('WorkFlowCalculation-AddGroup')}}",
			data:{WorkFlowCalculationsId,ModuleId},
			beforeSend:()=>{},
			success:response=>{
				$('#CalculationGroup').append(response);
			}
		})
	}

	DeleteCalculationGroup=(WorkFlowCalculationGroupId)=>
	{

		console.clear();

		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('WorkFlowCalculation-DeleteGroup')}}/${WorkFlowCalculationGroupId}`,
					beforeSend:()=>{},
					success:response=>{
				// console.log(response);
				// $('#CalculationGroup').append(response);
						res=JSON.parse(response);
						Snackbar.show({
							text: res.msg, 
							pos: 'top-right',
						});

						$(`#CalculationGroupAccordian${WorkFlowCalculationGroupId}`).remove();
					}
				})

			}
		});




		
	}
	AddCalculation=(WorkFlowCalculationGroupId)=>
	{
		ModuleId=$('#ModuleId').val();
		$.ajax({
			type:"POST",
			url:`{{url('WorkFlowCalculation-Add')}}`,
			data:{ModuleId,WorkFlowCalculationGroupId,},
			beforeSend:()=>{},
			success:response=>{
				// console.log(response);					
				$(`#CalculationsDiv${WorkFlowCalculationGroupId}`).append(response);
			}
		})
	}


	GetCalculationValue=(ValueType,WorkFlowCalculationId,ModuleId)=>
	{
		// console.log(`WorkFlowCalculationId ${WorkFlowCalculationId} ModuleId =${ModuleId}`);


		if(!ValueType)
		{
			$(`.removeDivs${WorkFlowCalculationId}`).remove();

			return;
		}

		Operator=$(`#Operator${WorkFlowCalculationId}`).val();

		$.ajax({
			type:"POST",
			url:"{{url('WorkFlowCalculation-Values')}}",
			data:{ValueType,WorkFlowCalculationId,ModuleId,Operator},
			beforeSend:()=>{
				$(`.removeDivs${WorkFlowCalculationId}`).remove();
			},
			success:response=>{

				var existingDiv=document.getElementById(`CalculationValueDiv${WorkFlowCalculationId}`);
				existingDiv.insertAdjacentHTML("afterend", response);

				$(`.dateTimePicker${WorkFlowCalculationId}`).each(function(){
					flatpickr(this, {
						enableTime: true,
						dateFormat: "Y-m-d H:i",
					});
				})

				
			}

		})
	}

	RemoveAdditionalFields=(WorkFlowCalculationId)=>
	{
		$(`#ValueType${WorkFlowCalculationId}`).val('').change();
		$('.customDropdown').trigger('chosen:updated');
		$('.customDropdown').chosen();
		$(`.removeDivs${WorkFlowCalculationId}`).remove();
	}

	UpdateGroup=(WorkFlowCalculationGroupId,UpdateColumn,UpdateValue,)=>
	{
		console.clear();
		$.ajax({
			type:"post",
			url:"{{url('WorkFlowCalculation-UpdateGroup')}}",
			data:{WorkFlowCalculationGroupId,UpdateColumn,UpdateValue},
			beforeSend:()=>{},
			success:response=>{
				// console.log(response);
				res=JSON.parse(response);
				Snackbar.show({
					text: res.msg, 
					pos: 'top-right',
				});

			}
		})
	}


	LoadGroups=(WorkFlowCalculationsId)=>
	{
		console.clear();
		ModuleId=$('#ModuleId').val();
		$.ajax({
			type:"post",
			url:"{{url('WorkFlowCalculation-GetGroups')}}",
			data:{WorkFlowCalculationsId,ModuleId},
			beforeSend:()=>{},
			success:response=>{
				// console.log(response);
				$('#CalculationGroup').html(response);
			}
		})
	}

	SaveCalculation=(WorkFlowCalculationId)=>
	{

		calculationForm=document.getElementById(`CalculationGroupFrom${WorkFlowCalculationId}`);

		myForm=new FormData(calculationForm);

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

		// console.clear();
		// console.log("{{url('WorkFlowCalculation-SaveCalculation')}}");

		// return;

		myForm.append('WorkFlowCalculationId',WorkFlowCalculationId);
		$.ajax({
			type:"post",
			url:"{{url('WorkFlowCalculation-SaveCalculation')}}",
			data:myForm,
			processData:false,
			cache:false,
			contentType: false,
			mimeType: "multipart/form-data",
			beforeSend:()=>{},
			success:response=>{
				// console.log(response);
				res=JSON.parse(response);
				Snackbar.show({
					text: res.msg, 
					pos: 'top-right',
				});
			}
		})
	}
	

	DeleteCalculation=(WorkFlowCalculationId)=>
	{

		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('WorkFlowCalculation-Delete')}}/${WorkFlowCalculationId}`,
					beforeSend:()=>{},
					success:response=>{
				console.log(response);
						$(`#toggleAccordion${WorkFlowCalculationId}`).remove();
					}
				})

			}
		});



		
	}
</script>