@php
$fieldList_array = json_decode($fieldList);
$GetlistField = json_decode($GetlistField);
echo "<pre>";
	//echo $UniqueReferenceId;
	//print_r($fieldList);
	//print_r($fieldtypes);
	//print_r($GetlistField);
	//print_r($ModulesArray);
	//print_r($panels);
echo "</pre>";
@endphp
<br />
<input type="hidden" id="UniqueReferenceId" value="{{$UniqueReferenceId}}">
<h5 class="text-primary">Demography Fields</h5>
<div class="mb-4 mt-4"style="overflow-x: scroll;">
	<table class="table table-bordered table-hover table-striped mb-4" >
		<thead>
			<tr>
				<th nowrap>Column Name</th>
				<th nowrap>Label</th>
				<!-- <th nowrap>Panel</th> -->
				<th nowrap>Type</th>
				<th nowrap>Options</th>
				<th nowrap>Order</th>
				<th nowrap>Display</th>
				<th nowrap>Editable</th>
				<th nowrap>Required</th>
				<th nowrap>ReadOnly</th>
				<th nowrap>Audit</th>
				<th nowrap >Mass Update</th>
			</tr>
		</thead>
		@php
		$loopcount=0;
		@endphp
		@foreach($fieldList_array as $fields)
		@php
		$ConfigId = $fields->DemographyConfigId;
		@endphp
		<tbody >
			<tr class="rownum" input_field_id={{$loopcount}} id="rowid{{$loopcount}}">
				<input type="hidden" name="ConfigId{{$loopcount}}" id="ConfigId{{$loopcount}}" value="{{$ConfigId}}"/>
				<td title="Click here to mark {{$fields->ColumnName}} as Reference Field" nowrap>
					<label class="new-control new-radio radio-primary">
						<input type="radio" class="new-control-input" name="ReferenceField" id="ReferenceField" 
						onclick="updatevalue('ReferenceField', '{{$ConfigId}}', '1')"; 
						@if($fields->ReferenceField == 1) 
						@php 
						echo "checked='checked'";
						@endphp
						@endif
						>
						<span class="new-control-indicator"></span>{{$fields->ColumnName}}
					</label>
				</td>
				<td title="{{$fields->LabelValue}}"nowrap>
					<input type="hidden" name="LabelValueOld" id="LabelValueOld" value="{{$fields->LabelValue}}" />
					<input type="text" name="LabelValue" id="LabelValue" value="{{$fields->LabelValue}}" onclick="displayoptions(,'LabelValue')" class="form-control"/>
					<div name="saveexitlabelLabelValue" id="saveexitlabelLabelValue" style="display:none;">
						<a onclick="savelabel(,'LabelValue')" ><i class="fa fa-check" style="color:green;">
							<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check" style="color:green;"><polyline points="20 6 9 17 4 12"></polyline></svg><span class="icon-name"></span>
						</a>
						<a onclick="dontsavelabel(,'LabelValue')" >
							<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" style="color:red;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
						</a>
					</div>
				</td>
				<!-- <td nowrap>
					<select class="form-control" id="modules" name="paneltype{{$loopcount}}" id="paneltype{{$loopcount}}" onchange="PanelTypeChange({{$loopcount}},this.value)"> -->
						<!-- <option value="">--Select--</option> -->
						@foreach($panels as $panel)
						<!-- <option value="{{$panel->DisplayPanelId}}" -->
							@if($panel->DisplayPanelId == $fields->PanelId) 
							@php 
							//echo "selected='selected'";
							@endphp
							@endif
							>{{$panel->PanelName}}</option>
							@endforeach
			<!-- 	</select>
			</td> -->
			<td nowrap>
				<select class="form-control form-control-sm" name="displaytype{{$loopcount}}" id="displaytype{{$loopcount}}" onchange="DisplayTypeChange({{$loopcount}},this.value)">
					@foreach($fieldtypes as $fieldtype)
					<option value="{{$fieldtype['key']}}" title="{{$fieldtype['value']}}"
					@if($fieldtype['key'] == $fields->DisplayType) 
					@php 
					echo "selected='selected'";
					@endphp
					@endif
					>
				{{$fieldtype['value']}}</option>
				@endforeach
			</select>
		</td>

		<td nowrap>
			<div id="fieldid{{$loopcount}}">
				@php
				if($fields->DisplayType==2 or $fields->DisplayType==3 or $fields->DisplayType==5 or $fields->DisplayType==6)
				{
					@endphp	
					<select class="form-control form-control-sm" name="DropDownNameId" id="DropDownNameId"  onchange="saveOptions('{{$fields->DisplayType}}','{{$ConfigId}}','DropDownNameId',this.value)" >
						<option value="">--Select--</option>
						@foreach($GetlistField as $fieldtype)
						<option value="{{$fieldtype->DropDownNameId}}" title="{{$fieldtype->DropDownNames}}"

							@if($fieldtype->DropDownNameId == $fields->DropDownNameId) 
							@php 
							echo "selected='selected'";
							@endphp
							@endif

							>{{$fieldtype->DropDownNames}}</option>
							@endforeach
						</select>
						@php
					}

					if($fields->DisplayType==8 || $fields->DisplayType==23)
					{
						@endphp	
						<select class="form-control form-control-sm" name="ParentModuleId" id="ParentModuleId"   onchange="saveOptions('{{$fields->DisplayType}}','{{$ConfigId}}','ParentModuleId',this.value)" >
							<option value="">--Select--</option>
							@foreach($ModulesArray as $listBoxKey=>$listBoxValue)
							<option value="{{$listBoxKey}}"

							@if($listBoxKey == $fields->ParentModuleId) 
							@php 
							echo "selected='selected'";
							@endphp
							@endif
							>{{$listBoxValue}}</option>
							@endforeach
						</select>

						
						@php
					}
					@endphp
				</div>
			</td>
			<td title="{{$fields->SortOrder}}"nowrap>
				<input type="hidden" name="SortOrderOld" id="SortOrderOld" value="{{$fields->SortOrder}}" />
				<input type="number" name="SortOrder" id="SortOrder" value="{{$fields->SortOrder}}" onchange="savelabel(,'SortOrder')" class="form-control" min="1" maxlength="3" />
				<div name="saveexitlabelSortOrder" id="saveexitlabelSortOrder" style="display:none;">
					<a onclick="savelabel(,'SortOrder')" ><i class="fa fa-check" style="color:green;">
						<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check" style="color:green;"><polyline points="20 6 9 17 4 12"></polyline></svg><span class="icon-name"></span>
					</a>
					<a onclick="dontsavelabel(,'SortOrder')" >
						<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" style="color:red;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
					</a>
				</div>
			</td>
			<td title="Enable/Disable {{$fields->ColumnName}}"nowrap>
				<label class="new-control new-checkbox checkbox-outline-success  m-auto">
					<input type="checkbox" class="new-control-input child-chk select-customers-info" id="DisplayOnOff{{$loopcount}}" onchange="DisplayOnOffChange({{$loopcount}})"
					@if($fields->Display == 1) 
					@php 
					echo "checked='checked'";
					@endphp
					@endif
					>
					<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
				</label>
			</td>
			<td title="Can {{$fields->ColumnName}} be an editable field?"nowrap>
				<label class="new-control new-checkbox checkbox-outline-primary  m-auto">
					<input type="checkbox" class="new-control-input child-chk select-customers-info" id="EditableField{{$loopcount}}" onchange="FieldChange({{$loopcount}},'Editable')"
					@if($fields->Editable == 1) 
					@php 
					echo "checked='checked'";
					@endphp
					@endif
					>
					<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
				</label>
			</td>
			<td title="Will {{$fields->ColumnName}} be a required or mandatory field?"nowrap>
				<label class="new-control new-checkbox checkbox-outline-danger  m-auto">
					<input type="checkbox" class="new-control-input child-chk select-customers-info" id="RequiredField{{$loopcount}}" onchange="RequiredFieldChange({{$loopcount}})"
					@if($fields->Required == 1) 
					@php 
					echo "checked='checked'";
					@endphp
					@endif
					>
					<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
				</label>
			</td>
			<td title="Will {{$fields->ColumnName}} be a readonly field?"nowrap>
				<label class="new-control new-checkbox checkbox-outline-info  m-auto">
					<input type="checkbox" class="new-control-input child-chk select-customers-info" id="ReadonlyField{{$loopcount}}" onchange="FieldChange({{$loopcount}},'Readonly')"
					@if($fields->Readonly == 1) 
					@php 
					echo "checked='checked'";
					@endphp
					@endif
					>
					<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
				</label>
			</td>
			<!-- audit -->
			<td title="Will {{$fields->ColumnName}} be a Audit field?"nowrap>
				<label class="new-control new-checkbox checkbox-outline-warning  m-auto">
					<input type="checkbox" class="new-control-input child-chk select-customers-info" id="AuditField{{$loopcount}}" onchange="AuditFieldChange({{$loopcount}})"
					@if($fields->Audit == 1) 
					@php 
					echo "checked='checked'";
					@endphp
					@endif
					>
					<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
				</label>
			</td>
			<!-- massupdate -->
			<td title="Will {{$fields->ColumnName}} be a Mass Update field?"nowrap>
				<label class="new-control new-checkbox checkbox-outline-dark m-auto">
					<input type="checkbox" class="new-control-input child-chk select-customers-info" id="MassUpdateField{{$loopcount}}" onchange="MassUpdateFieldChange({{$loopcount}})"
					@if($fields->MassUpdate == 1) 
					@php 
					echo "checked='checked'";
					@endphp
					@endif
					>
					<span class="new-control-indicator"></span><span style="visibility:hidden">c</span>
				</label>
			</td>
		</tr>
		@php
		$loopcount++;
		@endphp
		@endforeach
	</tbody>


</table>
</div>
<style>
	th {
		min-width: 150px !important;
	}
</style>
<script>
	$(document).ready(function(){
		UniqueReferenceId=$('#UniqueReferenceId').val();
		$('#formUniqueReferenceId').val(UniqueReferenceId);
			// alert(UniqueReferenceId);
		});
	$('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");
			// alert(loopcount);
			// loopcount=loopcount-1;
			for(i=0;i<=loopcount;i++)
			{
				fieldid="SortOrder"+i;
				rowid="rowid"+i;
				sortorderval=$('#'+rowid).index()+1;
				$('#'+fieldid).val(sortorderval);
				$('#'+fieldid).trigger("onchange");
			}
		}
	</script>