@php
$fieldList_array = json_decode($fieldList);
$i=0;
$SavedConditionArray=array();
$FieldsArray=array();
foreach($GetDemographyConfigData as $EachMainField)
{
$DemographyConfigId=$EachMainField->DemographyConfigId;
$FieldsArray[$DemographyConfigId]=$EachMainField->LabelValue;
}
foreach($GetSavedConditionValue as $eachsavedCond)
{
$DemographyConfigId=$eachsavedCond->DemographyConfigId;
$SavedConditionArray[$DemographyConfigId]=json_decode($eachsavedCond->Conditions);
}
$sortWise['Desc']='Descending order';
$sortWise['Asc']='Ascending order';
@endphp
<style>
	.form-groupC {
		margin: 5px 0px;
	}
</style>
<input type="hidden" name="SearchModuleId" id="SearchModuleId" value="{{$ModuleId}}">
<form name="SearchForm" id="SearchForm">
	<div class="tab-pane" id="tab" role="tabpanel">
		<div class="row">
			@if($source=='AdhocReport')
			@foreach($fieldList_array AS $fieldList)
			@php
			$i++;
			$DemographyConfigId = $fieldList->DemographyConfigId;
			$ColumnName = $fieldList->ColumnName;
			$DisplayType = $fieldList->DisplayType;
			$LabelValue = $fieldList->LabelValue;
			$TableName = $fieldList->TableName;
			$ModuleName = $fieldList->ModuleName;
			@endphp
			@if($DisplayType==1 || $DisplayType==11 || $DisplayType==20)
			<x-Report.displaytype1 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType==2 || $DisplayType==26)
			<x-Report.displaytype2 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :dropdownname="$DropDownIds" :dropdownvalues="$GetDropdownLists" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType=='15' )
			<x-Report.SearchMultiUsersFields :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType==14)
			<x-Report.displaytype14 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType==4)
			<x-Report.displaytype4 :demographyconfigid="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType==5 || $DisplayType==6 || $DisplayType==3)
			<x-Report.displaytype5 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :dropdownname="$DropDownIds" :dropdownvalues="$GetDropdownLists" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType==25)
			<x-Report.displaytype25 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :selfrelatedlist="$selfRelatedList" />
			@elseif($DisplayType==17 || $DisplayType==13)
			<x-Report.displaytype17 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType==12)
			<x-Report.displaytype12 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType==8)
			<x-Report.displaytype8 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType=='31')
			<x-Report.SearchMultiUsersFields :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType=='32')
			<x-Report.SearchMultiUsersFields :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" />
			@elseif($DisplayType=='33')
			<x-Report.SearchMultiUsersFields :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :modulename="$ModuleName" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" />
			@endif
			@endforeach
			@else
			@foreach($fieldList_array AS $fieldList)
			@php
			$i++;
			$DemographyConfigId = $fieldList->DemographyConfigId;
			$ColumnName = $fieldList->ColumnName;
			$DisplayType = $fieldList->DisplayType;
			$LabelValue = $fieldList->LabelValue;
			$TableName = $fieldList->TableName;
			$ModuleName = $fieldList->ModuleName;
			@endphp
			@if($DisplayType==1 || $DisplayType==11 || $DisplayType==20)
			<x-search.displaytype1 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType==2 || $DisplayType==26)
			<x-search.displaytype2 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :dropdownname="$DropDownIds" :dropdownvalues="$GetDropdownLists" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType=='15' )
			<x-search.displaytype15 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType==14)
			<x-search.displaytype14 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType==4)
			<x-search.displaytype4 :demographyconfigid="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType==5 || $DisplayType==6 || $DisplayType==3)
			<x-search.displaytype5 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :dropdownname="$DropDownIds" :dropdownvalues="$GetDropdownLists" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType==25)
			<x-search.displaytype25 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :selfrelatedlist="$selfRelatedList" :modulename="$ModuleName" />
			@elseif($DisplayType==17 || $DisplayType==13)
			<x-search.displaytype17 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType==12)
			<x-search.displaytype12 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType==8)
			<x-search.displaytype8 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType=='31')
			<x-search.displaytype31 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType=='32')
			<x-search.displaytype32 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@elseif($DisplayType=='33')
			<x-search.displaytype33 :demographyconfigId="$DemographyConfigId" :columnname="$ColumnName" :labelvalue="$LabelValue" :assignedtolist="$AssignedToList" :valueforhold="$SavedConditionArray" :modulename="$ModuleName" />
			@endif
			@endforeach
			@endif
		</div>
	</div>
</form>
@if($source!='AdhocReport')
<br>
<h4>Save the Filter</h4>
<div class="row">
	<div class="col-md-4">
		<label>Seach Name</label>
		<input type="text" id="SeachName" name="SeachName" class="form-control" placeholder="SeachName">
	</div>
	<div class="col-md-4">
		<br>
		<button class="btn btn-outline-primary mb-2" onclick="SaveSearchFilter()">
			<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-bookmark">
				<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
			</svg>
			Save the Filter
		</button>
		<button class="btn btn-outline-primary mb-2" onclick="EditSearchFilter()" data-toggle="modal" data-target="#EditFilterModal">
			<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-edit-2">
				<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
			</svg>
			Edit Saved Filter
		</button>
	</div>
</div>
<div class="row">
	<div class="col-md-4">
		<label>Saved Filters</label>
		<select class="form-control" id="savedFilter" name="savedFilter" onchange="FilterFieldsMatch(this.value)">
			<option value="">--select--</option>
			@foreach($FilterList as $EachFilter)
			@php
			// Check if this is the default filter
			$isDefault = DB::table('UserSearch')
			->where('UserSearchId', $EachFilter->UserSearchId)
			->where('UserId', auth()->user()->RefId)
			->where('DefaultFilter', 1)
			->where('DeletedStatus', 0)
			->exists();

			$selected = $EachFilter->UserSearchId == $FilterId || $isDefault ? 'selected' : '';
			@endphp
			<option value="{{$EachFilter->UserSearchId}}" {{$selected}} data-default="{{$isDefault ? '1' : '0'}}">
				{{$EachFilter->SearchName}} {{$isDefault ? '(Default)' : ''}}
			</option>
			@endforeach
		</select>
	</div>
</div>
<br>
@endif
<div class="row">
	<div class="col-md-4 form-group form-groupC">
		<label>Select Field to Sort</label>
		<select id="FieldNameNew" name="FieldNameNew" class="form-control">
			<!--<option value=''>--select--</option>-->
			@foreach($GetSavedConfigDataNew as $EachDemoDetails)
			@php
			$EachDemoId=$EachDemoDetails['DemographyId'];
			$Default=$EachDemoDetails['Default'];
			$selectme="";
			if($Default==1)
			{
			$selectme="selected";
			}
			@endphp
			@if(array_key_exists($EachDemoId,$FieldsArray))
			<option value="{{$EachDemoId}}" {{$selectme}}>{{$FieldsArray[$EachDemoId]}}</option>
			@endif
			@endforeach
		</select>
	</div>
	<div class="col-md-4 form-group form-groupC">
		<label>Sort Order</label>
		<select name="OrderByNew" id="OrderByNew" class="form-control">
			<!--<option value="">-select Order-</option>-->
			@foreach($sortWise as $SortOrderKey=>$sortOrderValue)
			<option value="{{$SortOrderKey}}">{{$sortOrderValue}}</option>
			@endforeach
		</select>
	</div>
</div>
<br>
<!-- search Modal -->
<div class="modal fade" id="EditFilterModal" tabindex="-1" role="dialog" aria-labelledby="EditFilterModal" aria-hidden="true">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Edit Saved Filters</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<svg aria-hidden="true" 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-x">
						<line x1="18" y1="6" x2="6" y2="18"></line>
						<line x1="6" y1="6" x2="18" y2="18"></line>
					</svg>
				</button>
			</div>
			<div class="modal-body">
				<div id="EditFilterModalDiv">
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade " id="SearchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Search</h5>
				<button type="button" class="btn-close close" data-bs-dismiss="modal" aria-label="Close">
					<svg aria-hidden="true" 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-x">
						<line x1="18" y1="6" x2="6" y2="18"></line>
						<line x1="6" y1="6" x2="18" y2="18"></line>
					</svg>
				</button>
				</button>
			</div>
			<div class="modal-body">
				<input type="hidden" id="ParentModuleId" value="">
				<input type="hidden" id="ColumnName" value="">

				<div class="row">
					<!-- 	<div class="form-group row" >
					<div class="col-md-12"align="center">
						<button class="btn btn-primary" onclick="SearchAll()">Search</button>
					</div>
				</div> -->
					<br>

					<div class="form-group row">
						<div class="col-md-12">
							<div id="ShowResultsNew">
							</div>
						</div>
					</div>
				</div>

				<div class="modal-footer">
					<button class="btn" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- search Modal -->
<script>
	let isFilterProcessing = false;

	$(document).ready(function() {
		// Add loading state
		if ($('#savedFilter option[data-default="1"]').length > 0) {
			var defaultFilterId = $('#savedFilter option[data-default="1"]').val();
			$('#savedFilter').val(defaultFilterId);
			// Call FilterFieldsMatch directly once
			FilterFieldsMatch(defaultFilterId, true);
		}
	});

	function checkthenumberfilter(value, label, loopcnt) {
		if (value == 'IS_Between') {
			var k = label + "" + loopcnt;
			document.getElementById(k).style.display = "block";
		} else {
			var k = label + "" + loopcnt;
			document.getElementById(k).style.display = "none";
		}
	}

	function selectAll(currentValue, label, demoid) {
		var DisplayOnOffDashboardName = "SelectAll" + demoid;
		var k = "#" + label + "" + demoid + " option";
		if (document.getElementById(DisplayOnOffDashboardName).checked == true) {
			console.clear();
			$(k).prop('selected', true);

		} else {
			$(k).prop('selected', false);
		}
		$('.customDropdown').chosen('destroy').chosen();
	}

	function IsbetweenDaysCondition(MaxDays, ColumnName) {
		var todateid = "to" + ColumnName;
		GetFromDate = $('#' + ColumnName).val();
		GetToDate = $('#' + todateid).val();
		const date1 = new Date(GetFromDate);
		const date2 = new Date(GetToDate);
		const diffInMilliseconds = Math.abs(date2 - date1);
		const diffInDays = Math.ceil(diffInMilliseconds / (1000 * 60 * 60 * 24)) + 1;
		if (diffInDays > MaxDays) {
			setTimeout(() => {
				$('#' + todateid).val('');
				document.getElementById(todateid).value = '';
				//alert(todateid);
				$('#' + ColumnName).val('');
				//alert('Please Select From & To Date with in '+MaxDays+' Days');
				Snackbar.show({
					text: 'Please Select From & To Date with in ' + MaxDays + ' Days',
					pos: 'top-right',
					actionTextColor: '#fff',
					backgroundColor: '#e7515a'
				});
				return false;
			}, 100);

		}
	}

	function FilterFieldsMatch(FilterId, isInitialLoad = false) {
    // Prevent multiple simultaneous calls
    if(isFilterProcessing) {
        return;
    }

    if(FilterId == '') {
        Snackbar.show({
            text: 'Please Select Saved Search Filter',
            pos: 'top-right',
            actionTextColor: '#fff',
            backgroundColor: '#e7515a'
        });
        return false;
    }

    isFilterProcessing = true;
    var SearchModuleId = document.getElementById('SearchModuleId').value;
    
    var formData = {
        FilterId: FilterId,
        ModuleId: SearchModuleId,
    };

    $.ajax({
        url: "{{ url('FilterFieldsMatch') }}",
        type: 'POST',
        data: formData,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend: function() {
            // Show loading state if needed
        },
        success: function(result) {
            if(result == 1) {
                alert('Field is not Match with Configured Filters');
                $('#savedFilter').val('');
            } else if(result == 0) {
                SearchFilterswithFilterId(FilterId);
            }
        },
        error: function(data) {
            $('#savedFilter').val('');
            Snackbar.show({
                text: 'Error in filter validation',
                pos: 'top-right',
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
        },
        complete: function() {
            isFilterProcessing = false;
        }
    });
}

// Modified change event handler
$('#savedFilter').on('change', function() {
    if(!isFilterProcessing) {
        FilterFieldsMatch(this.value);
    }
});

	SaveSearchFilter = () => {
		var SeachName = document.getElementById('SeachName').value;
		var SearchModuleId = document.getElementById('SearchModuleId').value;
		var FieldNameNew = document.getElementById('FieldNameNew').value;
		var OrderByNew = document.getElementById('OrderByNew').value;
		if (SeachName == '') {
			Snackbar.show({
				text: 'Please Select Search Name',
				pos: 'top-right',
				actionTextColor: '#fff',
				backgroundColor: '#e7515a'
			});
			return false;
		}
		var searchForm = JSON.stringify($('#SearchForm').serializeArray());

		var formData = {
			data: searchForm,
			SeachName: SeachName,
			SearchModuleId: SearchModuleId,
			FieldNameNew: FieldNameNew,
			OrderByNew: OrderByNew,
		};
		var ajax_url = "{{ url('SaveSearchFilter') }}";
		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			beforeSend: function() {

			},
			success: function(result) {
				var reponse = JSON.parse(result);
				Snackbar.show({
					text: reponse.msg,
					pos: 'top-right',
				});
			},
			error: function(data) {

			}
		});
	}
	EditSearchFilter = () => {
		var SearchModuleId = document.getElementById('SearchModuleId').value;
		var formData = {
			ModuleId: SearchModuleId,
		};
		var ajax_url = "{{ url('GetAllSavedSearchFilter') }}";
		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			beforeSend: function() {

			},
			success: function(result) {
				$('#EditFilterModalDiv').html(result);
			},
			error: function(data) {

			}
		});
	}
	ActivateFilter = (FilterId) => {
		var Display = 1;
		var CheckboxId = "FilterActiveStatus" + FilterId;
		if (document.getElementById(CheckboxId).checked == true) {
			Display = 0;
		} else {
			Display = 1;
		}
		var formData = {
			FilterId: FilterId,
			Display: Display,
		};

		var ajax_url = "{{ url('ActivateFilter') }}";
		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			beforeSend: function() {

			},
			success: function(result) {
				console.clear();
				console.log(result);
				var response = JSON.parse(result);
				console.log(response);
				console.log(response.msg);
				Snackbar.show({
					text: response.msg,
					pos: 'top-right',
				});
			},
			error: function(data) {

			}
		});
	}
	ChangeDefaultFilter = (FilterId, ModuleId) => {
		var formData = {
			FilterId: FilterId,
			ModuleId: ModuleId,
		};
		var ajax_url = "{{ url('ChangeDefaultFilter') }}";
		$.ajax({
			url: ajax_url,
			type: 'POST',
			data: formData,
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			beforeSend: function() {

			},
			success: function(result) {
				console.clear();
				console.log(result);
				var response = JSON.parse(result);
				console.log(response);
				console.log(response.msg);
				Snackbar.show({
					text: response.msg,
					pos: 'top-right',
				});
			},
			error: function(data) {

			}
		});
	}
</script>