@php
$fieldList_array = json_decode($field_list);
$CapturedValues = json_decode($captured_values);

//print_r($fieldtypes);

//die();
@endphp
<table class="table style-2 table-hover no-footer">
	<thead>
		<tr>
			<td>Fields</td>
			<td>Order No.</td>
			<td>Required</td>
			<td>Enable/Disable</td>
			
		</tr>
	</thead>
	@php
	$loopcount=1;
	@endphp
	@foreach($fieldList_array as $fields)
	@php
	$ConfigId = $fields->DemographyConfigId;
	$ColumnName = $fields->ColumnName;
	@endphp
	<tr class="rownum" input_field_id={{$loopcount}} id="rowid{{$loopcount}}" >
		<input type="hidden" name="ConfigId{{$loopcount}}" id="ConfigId{{$loopcount}}" value="{{$ConfigId}}"/>
		<input type="hidden" name="ModuleId" id="ModuleId" value="{{$ModuleId}}"/>
		<td title="Drag and re-arrange display order">{{$fields->LabelValue}}</td>
		<input type="hidden" name="ConfigId{{$loopcount}}" id="ConfigId{{$loopcount}}" value="{{$ConfigId}}"/>
		<input type="hidden" name="ModuleId" id="ModuleId" value="{{$ModuleId}}"/>
		@foreach($fieldtypes as $fieldtype)
		@php
		$field_type='';
		$fieldType='';
		@endphp
		@if($fieldtype['key'] == $fields->DisplayType) 
		@php
		$field_type=$fieldtype['value'];
		$fieldType=$fieldtype['key'];
		@endphp
		@endif

		@endforeach
		<td title="{{$field_type}}">
			@php
			$SortOrder=$loopcount;
			$HoldMe="";
			$HoldMeR="";
			@endphp
			@foreach($CapturedValues as $enabled_fields)
			@if($enabled_fields->FieldName == $fields->ColumnName) 
			@php
			$SortOrder=$enabled_fields->SortOrder;
			@endphp
			@endif

			@if($enabled_fields->FieldName == $fields->ColumnName && $enabled_fields->DeletedStatus == 0) 
			@php
			$HoldMe="checked='checked'";
			@endphp
			@endif

			@if($enabled_fields->FieldName == $fields->ColumnName && $enabled_fields->Required == 0) 
			@php
			$HoldMeR="checked='checked'";
			@endphp
			@endif
			@endforeach
			<input type="number" class="form-control" placeholder="Order No." name="SortOrder{{$loopcount}}"  id="SortOrder{{$loopcount}}"  min="1" value="{{$SortOrder}}" onchange="RequiredDisableEnable('{{$loopcount}}','{{$ColumnName}}','{{$fieldType}}','sort')" readonly />
		</td>
		<td title="{{$fields->LabelValue}}">
			<label class="new-control new-checkbox checkbox-outline-primary m-auto">
				<input type="checkbox" class="new-control-input child-chk select-customers-info" id="Required{{$loopcount}}" onchange="RequiredDisableEnable('{{$loopcount}}','{{$ColumnName}}','{{$fieldType}}')" {{$HoldMeR}}>
				<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
			</label>
		</td>
		<td title="{{$fields->LabelValue}}">
			<label class="new-control new-checkbox checkbox-outline-primary m-auto">
				<input type="checkbox" class="new-control-input child-chk select-customers-info" id="DisplayOnOff{{$loopcount}}" onchange="RequiredDisableEnable('{{$loopcount}}','{{$ColumnName}}','{{$fieldType}}')" {{$HoldMe}}>
				<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
			</label>
		</td>
	</tr>
	@php
	$loopcount++;
	@endphp
	@endforeach
</table>

<script>
		////////////////////////drag and drop function//////////////////////
		$('tbody').sortable();
		var isDragging = false;
		var mouseDown = false;

		$('.rownum').mousedown(function() {
			isDragging = false;
			mouseDown = true;
		}).mousemove(function(e) {
			isDragging = true;

		}).mouseup(function(e) {
			if (isDragging === true && mouseDown === true) {
				isDragging = false;
				mouseDown = false;
				setTimeout(my_special_function,100,$(this).attr("input_field_id"),$(this).index(),'{{$loopcount}}');
			}

		});
		my_special_function=(id,index,loopcount)=>
		{
			// alert("dropped");
			loopcount=loopcount-1;
			for(i=1;i<=loopcount;i++)
			{
				fieldid="SortOrder"+i;
				rowid="rowid"+i;
				sortorderval=$('#'+rowid).index()+1;
				$('#'+fieldid).val(sortorderval);
				$('#'+fieldid).trigger("onchange");
			}
		}
////////////////////////drag and drop function//////////////////////

</script>