@props(['workFlowCalculationGroupId','workFlowCalculationId','moduleId','calculation','fieldsList','mainCalculations'])
@php


$WorkFlowCalculationGroupId=$workFlowCalculationGroupId;
$WorkFlowCalculationId=$workFlowCalculationId;
$ModuleId=$moduleId;

$Calculations=[
'1'=>'Add',
'2'=>'Subtract',
'3'=>'Multiply',
'4'=>'Divide',
'5'=>'Concatenate',
'6'=>'Add Time',
'7'=>'Subtract Time',
'8'=>'Date Difference',
'9'=>'Extract Last 10 character'
];
$ValueTypes=['1'=>'Field','2'=>"Value",'3'=>'Calculation'];	


//echo "<pre>";
	//print_r($fieldsList);
//echo "</pre>";


$Operator="";
$ValueType="";

$SortOrder="";

if(isset($calculation))
{
	$Operator=$calculation->Operator;
	$ValueType=$calculation->ValueType;
	$SortOrder=$calculation->SortOrder;
}



@endphp

<div id="toggleAccordion{{$workFlowCalculationId}}" class="accordion">

	<div class="card">
		<div class="card-header" id="...">
			<section class="mb-0 mt-0">
				<div role="menu" class="" data-bs-toggle="collapse" data-bs-target="#defaultAccordionTwo{{$workFlowCalculationId}}" aria-expanded="true" aria-controls="defaultAccordionTwo{{$workFlowCalculationId}}">

					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-danger" onclick="DeleteCalculation('{{$workFlowCalculationId}}')" height="17" width="17" style="position: relative;top: -3;"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>

					Calculation   <div class="icons"><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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
				</div>
			</section>
		</div>
		<div id="defaultAccordionTwo{{$workFlowCalculationId}}" class="collapse show" aria-labelledby="..." data-bs-parent="#toggleAccordion{{$workFlowCalculationId}}">
			<div class="card-body">

				<form id="CalculationGroupFrom{{$WorkFlowCalculationId}}">
					<input type="hidden" name="WorkFlowCalculationGroupId" id="WorkFlowCalculationGroupId{{$WorkFlowCalculationId}}" value="{{$workFlowCalculationGroupId}}">

					<div class="form-group row">

						<div class="col-md-3">
							<label>Sort Order</label>
							<input type="number" class="form-control" value="{{$SortOrder}}" name="SortOrder" name="SortOrder{{$WorkFlowCalculationId}}">
						</div>
					</div>

					<div class="form-group row">

						<div class="col-md-3">
							<label>Operator</label>
							<select class="form-control customDropdown" name="Operator" id="Operator{{$WorkFlowCalculationId}}" onchange="RemoveAdditionalFields('{{$WorkFlowCalculationId}}')">
								<option value="">--Select Operator--</option>
								@foreach($Calculations as $key=>$value)

								@php
								$OperatorSelected="";
								if($key==$Operator)
								$OperatorSelected="selected";
								@endphp

								<option value="{{$key}}" {{$OperatorSelected}}>{{$value}}</option>
								@endforeach
							</select>
						</div>


						<div class="col-md-3" id="CalculationValueDiv{{$WorkFlowCalculationId}}">
							<label>Value Types</label>

							<select class="form-control customDropdown" name="ValueType" id="ValueType{{$WorkFlowCalculationId}}" onchange=" GetCalculationValue(this.value,'{{$WorkFlowCalculationId}}','{{$ModuleId}}')">
								<option value="">--Select Operator--</option>
								@foreach($ValueTypes as $key=>$value)

								@php
								$ValueTypeSelected="";
								if($key==$ValueType)
								$ValueTypeSelected="selected";
								@endphp

								<option value="{{$key}}" {{$ValueTypeSelected}}>{{$value}}</option>
								@endforeach
							</select>

						</div>

						@if(isset($calculation))
						<x-workflow.calculationValuesEdit :calculation="$calculation" :fieldsList="$fieldsList" :calculations="$mainCalculations"/>
						@endif


						<!-- <div class="col-md-3" ></div> -->


					</div>
					<br>
					<div class="form-group row">
						<center>
							<div class="col-md-3">
								<button type="button" class="btn btn-primary" onclick="SaveCalculation('{{$WorkFlowCalculationId}}')">Save</button>
							</div>
						</center>
					</div>

				</form>

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

</div>