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

<br>
<div class="statbox widget box box-shadow">
	<h4>{{$Name}} Form</h4>

	<div class="form-group row">
		<div class="col-md-3">
			<label>Column</label>
			<select class="form-control customDropdown" id="DemographyConfigId">
				<option value="">--Select Column--</option>
				@foreach($ModuleFields as $ModuleField)
				<option value="{{$ModuleField->DemographyConfigId}}">{{$ModuleField->LabelValue}}</option>
				@endforeach
			</select>
		</div>
		<div class="col-md-3">
			<button class="btn btn-primary" type="button" onclick="AddColumn('{{$WorkFlowRecordsConfigId}}')" style="margin-top:35px">Add</button>
		</div>
	</div>
</div>
<br>


<div class="statbox widget box box-shadow">
	<div class="table-responsive">
		<table class="table table-hover table-striped table-bordered table-no-space ">
			<thead>
				<tr>
					<th>Column Name</th>
					<th>Value Type</th>
					<th>Value</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody id="ConfiguredColumns">
			</tbody>
		</table>
	</div>

</div>
@endsection

<script>

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

		setTimeout(LoadColumns,200);
	})

	AddColumn=(WorkFlowRecordsConfigId)=>{
		const DemographyConfigId=$('#DemographyConfigId :selected').val();

		if(!DemographyConfigId)
		{
			return;
		}

		$.ajax({
			type:"post",
			url:"{{url('WorkFlow-UpdateCreate-AddColumn')}}",
			data:{DemographyConfigId,WorkFlowRecordsConfigId},
			beforeSend:()=>{},
			success:response=>{
				$('#ConfiguredColumns').append(response);
			}
		})
	}

	UpdateColumn=(UpdateValue,UpdateColumn,ModuleId,DemographyConfigId,WorkFlowRecordsFormConfigId)=>
	{
		console.clear();
		if(!UpdateValue)
		{
			return;
		}
		
		$.ajax({
			type:"post",
			url:"{{url('WorkFlow-UpdateCreate-ColumnUpdate')}}",
			data:{UpdateValue,UpdateColumn,WorkFlowRecordsFormConfigId},
			beforeSend:()=>{},
			success:response=>{

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

				if(UpdateColumn=="ValueType")
				{
					GetColumnValues(UpdateValue,ModuleId,DemographyConfigId,WorkFlowRecordsFormConfigId);
				}
				else if(UpdateColumn=="DeletedStatus")
				{
					LoadColumns();
				}

			}
		})
		
	}
	GetColumnValues=(ValueType,ModuleId,DemographyConfigId,WorkFlowRecordsFormConfigId)=>
	{
		$.ajax({
			type:"post",
			url:"{{url('WorkFlow-UpdateCreate-GetColumnValues')}}",
			data:{ValueType,ModuleId,DemographyConfigId,WorkFlowRecordsFormConfigId},
			beforeSend:()=>{},
			success:response=>{
				$(`#ValueDiv${DemographyConfigId}`).html(response);
			}
		})
	}

	LoadColumns=()=>
	{
		WorkFlowRecordsConfigId='{{$WorkFlowRecordsConfigId}}',

		$.ajax({
			url:`{{url('WorkFlow-UpdateCreate-ListColumn')}}/${WorkFlowRecordsConfigId}`,
			beforeSend:()=>{
				$('#ConfiguredColumns').html(`<center> <div class="spinner-border text-primary align-self-center loader-lg">Loading...</div> </center>`);
			},
			success:response=>{
				$('#ConfiguredColumns').html(response);
			}
		});
	}
</script>