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

@php

$Calculations=['1'=>'Sum','2'=>'Product','3'=>'Average','4'=>'Percentage','5'=>'Difference','6'=>'Division','7'=>'Concatenate','8'=>'Add Time','9'=>'Subtract Time','10'=>'Date Difference'];

@endphp

<br>

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


	<form id="AddCalculationForm">

		<div class="form-group row">

			<div class="col-md-3">
				<label>Module <font color="red">*</font> </label>
				<select class="form-control customDropdown" name="ModuleId" id="ModuleId" required>
					<option value="">--Select Module--</option>
					@foreach($ModulesArray as $ModuleId => $ModuleName)
					<option value="{{$ModuleId}}">{{$ModuleName}}</option>
					@endforeach
				</select>
				<div class="invalid-feedback">
					Please select Module
				</div>
			</div>

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

			<div class="col-md-3">
				<button type="button" class="btn btn-primary"  onclick="AddCalculations()" style="margin-top:35px">Add Calculation</button>
			</div>

		</div>
	</form>
	
</div>

<br>

<div id="CalculationGroupDiv"></div>

@endsection


<script>

	document.addEventListener('DOMContentLoaded',()=>{

		setTimeout(LoadCalculations,200);

	})

	const AddCalculations=()=>
	{	

		var form = document.getElementById('AddCalculationForm');

		formData=new FormData(form);

		var invalid = $('#AddCalculationForm .invalid-feedback');

		if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			invalid.css('display', 'block');

			return;
		} else {
			invalid.css('display', 'none');
			form.classList.add('was-validated');
		}


		$.ajax({
			type:"POST",
			url:"{{url('WorkFlowCalculation-AddCalculations')}}",
			data:formData,
			contentType:false,
			processData:false,
			cache:false,
			beforeSend:()=>{
				

			},
			success:response=>{

				$('#ModuleId').val('').change();
				$('#CalculationsName').val('');
				form.classList.remove('was-validated');

				res=JSON.parse(response);

				Snackbar.show({
					text: res.msg, 
					pos: 'top-right',
				});
				LoadCalculations();
			}

		})

	}


	LoadCalculations=()=>
	{
		$.ajax({
			type:"POST",
			url:"{{url('WorkFlowCalculation-GetCalculations')}}",
			beforeSend:()=>{
				$('#CalculationGroupDiv').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`);
			},
			success:response=>{
				$('#CalculationGroupDiv').html(response);
			}

		})
	}

	const Calculate=(WorkFlowCalculationsId)=>{

		$.ajax({
			type:"post",
			url:"{{url('WorkFlowCalculation-calculate')}}",
			data:{CalculationsId:WorkFlowCalculationsId},
			beforeSend:()=>{},
			success:response=>{
				console.log(response);
				res=JSON.parse(response);

				$(`#CalculationViewDiv${WorkFlowCalculationsId}`).html(`
					<p>Expression : ${res.Expression}</p>
					<p>Value : ${res.Value}</p>
					`)
			}
		})
	}




	DeleteCalculations=(WorkFlowCalculationsId)=>
	{

		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-DeleteCalculations')}}/${WorkFlowCalculationsId}`,
					beforeSend:()=>{},
					success:response=>{
						LoadCalculations();
					}

				})
			}

		});


		
	}





//Old Functions from here

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

		})
	}

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

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

		$.ajax({
			type:"POST",
			url:"{{url('WorkFlowCalculation-Values')}}",
			data:{ValueType,WorkFlowCalculationId,ModuleId,DemographyConfigId,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",
					});
				})

				
			}

		})
	}

	
</script>