@php
	$demographyconfigid=$demographyconfigId;
	$Style="none";
	$checktext="";
	$GetCondition="";
	$DisplayFromDate="";
	$DisplayToDate="";
	$C1='';
	$C2='';
	$C3='';
	$C4='';
	$C5='';
	$C6='';
	$C7='';
	$C8='';
	$C9='';
	$C10='';
	$C11='';
	$C12='';
	$C13='';
	$C14='';
	$C15='';
	$C16='';
	$C17='';
	$C18='';
	$C19='';
	$C20='';
	$C21='';
	$C22='';
	$C23='';
	$C24='';
	$desc='';
	$asc='';
	$DisplayMaxDay=30;
	if(array_key_exists($demographyconfigId,$valueforhold))
	{
		$TempValueArray=$valueforhold[$demographyconfigId];
		$Column=$TempValueArray->range;
		$GetCondition=$TempValueArray->range;
		$DisplayFromDate=$TempValueArray->from;
		$DisplayToDate=$TempValueArray->to;
		
		if(property_exists($TempValueArray,'MaxDay'))
		{
			$DisplayMaxDay=$TempValueArray->MaxDay;
		}
		$checktext="checked";
	}
	if($GetCondition!='')
	{
		if($GetCondition=='=')
		{
			 $C1="selected";
		}
		elseif($GetCondition=='SelectDate')
		{
			 $C3="selected";
		}
		elseif($GetCondition=='last_year')
		{
			 $C12="selected";
		}
		elseif($GetCondition=='this_year')
		{
			 $C13="selected";
		}
		elseif($GetCondition=='yesterday')
		{
			 $C2="selected";
		}
		elseif($GetCondition=='next_year')
		{
			 $C14="selected";
		}
		elseif($GetCondition=='today')
		{
			 $C20="selected";
		}
		elseif($GetCondition=='this_week')
		{
			 $C21="selected";
		}
		elseif($GetCondition=='MTD')
		{
			 $C22="selected";
		}
		elseif($GetCondition=='YTD')
		{
			 $C23="selected";
		}
		elseif($GetCondition=='YTD')
		{
			 $C24="selected";
		}
		elseif($GetCondition=='last_14_days')
		{
			 $C16="selected";
		}
		elseif($GetCondition=='last_7_days')
		{
			 $C5="selected";
		}
		elseif($GetCondition=='next_7_days')
		{
			 $C6="selected";
		}
		elseif($GetCondition=='next_14_days')
		{
			 $C17="selected";
		}
		elseif($GetCondition=='last_21_days')
		{
			 $C18="selected";
		}
		elseif($GetCondition=='next_21_days')
		{
			 $C19="selected";
		}
		elseif($GetCondition=='last_30_days')
		{
			 $C7="selected";
		}
		elseif($GetCondition=='next_30_days')
		{
			 $C8="selected";
		}
		elseif($GetCondition=='last_month')
		{
			 $C9="selected";
		}
		elseif($GetCondition=='this_month')
		{
			 $C10="selected";
		}
		elseif($GetCondition=='next_month')
		{
			 $C11="selected";
		}
		elseif($GetCondition=='between')
		{
			 $C15="selected";
			 $Style="block";
		}
	}
@endphp
@props(['columnname','labelvalue','modulename','demographyconfigId','$valueforhold'])

<div class="col-md-4 form-group form-groupC" id="{{$columnname}}Wrapper">
	<label>{{ucwords($labelvalue)}} Range</label>
	<a href="javascript:void(0);" class=" rounded bs-tooltip" title="{{$modulename}}" data-original-title="{{$modulename}}">
		<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-alert-circle" style="color: blue;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
	</a>
	<select id="{{$columnname}}Range" class="form-control customDropdown" name="{{$demographyconfigid}}Range" onchange="DateRange_change(this.value,'{{$columnname}}');">
		<option value="" >--select--</option> 
		<option value="=" {{$C1}}>equal</option> 
		<option value="SelectDate" {{$C3}}>Single Date</option> 
		<option value="today" {{$C20}}>today</option>
		<option value="Yesterday" {{$C2}}>Yesterday</option>
		<option value="last_14_days" {{$C16}}>Last 14 Days</option>
		<option value="last_7_days" {{$C5}}>Last 7 Days</option>
		<option value="next_7_days" {{$C6}}>Next 7 Days</option>
		<option value="next_14_days" {{$C17}}>Next 14 Days</option>
		<option value="last_21_days" {{$C18}}>Last 21 Days</option>
		<option value="next_21_days" {{$C19}}>Next 21 Days</option>
		<option value="last_30_days" {{$C7}}>Last 30 Days</option>
		<option value="next_30_days" {{$C8}}>Next 30 Days</option>
		<option value="last_month" {{$C9}}>Last Month</option>
		<option value="this_month" {{$C10}}>This Month</option>
		<option value="next_month" {{$C11}}>Next Month</option>
		<option value="last_year" {{$C12}}>Last Year</option>
		<option value="this_year" {{$C13}}>This Year</option>
		<option value="next_year" {{$C14}}>Next Year</option>
		 <option value="between" {{$C15}}>Is Between</option> 
	</select>
	<br>
	<input type="hidden" name="MaxDay{{$columnname}}" id="MaxDay{{$columnname}}"  value="{{$DisplayMaxDay}}">
	<div id="{{$columnname}}FromDiv" style="display:block">
	<label>{{ucwords($labelvalue)}} </label>
		<input type="date" name="{{$demographyconfigid}}" id="{{$columnname}}" class="form-control flatpickr" placeholder="{{$columnname}}" >
	</div>
	<div id="{{$columnname}}ToDiv" style="display:none">
		<label>{{ucwords($labelvalue)}} To</label>
		<input type="date" name="to{{$demographyconfigid}}" id="to{{$columnname}}" class="form-control flatpickr" placeholder="{{$columnname}}" title="">
	</div>
</div>
<script>

	$('.flatpickr').each(function(dateinput,dateinput2){
		
		flatpickr($(this), {
			enableTime: true,
			dateFormat: "Y-m-d H:i",
			allowInput: true,
			minuteIncrement:1,
			onClose:function()
			{
				if (dateinput2.hasAttribute("title")) {
					var idname=dateinput2.id;
					var getColumnName=idname.slice(2);
					//console.log("getColumnName"+getColumnName);
					var MaxDays=$('#MaxDay'+getColumnName).val();
					//console.log("MaxDays"+MaxDays);
					IsbetweenDaysCondition(MaxDays,getColumnName);
				}
			}
		});
		
	});


	function DateRange_change(value,ColumnName)
	{
		if(value=="between")
		{
			$('#'+ColumnName+"ToDiv").css("display","block");

			$('#'+ColumnName+"FromLabel").html(" From");
		}
		else
		{
			$('#'+ColumnName+"ToDiv").css("display","none");
			$('#'+ColumnName+"FromLabel").html("");

		}
		if(value=="=" || value=="not_equal" || value=="greater_than" || value=="less_than" || value=="between" || value=="SelectDate")
		{
			$('#'+ColumnName+"FromDiv").css("display","block");
		}
		else
		{
			$('#'+ColumnName+"FromDiv").css("display","none");

		}
	}
</script>