@php
$siteurl=$_SERVER['HTTP_HOST'];
$field_list =$GetFieldValues;
// echo "<pre>";
// print_r($DisplayTypeArray);
// echo "</pre>";
$LayoutValue=$LayoutType;
$SelectMe1="";
$SelectMe2="";
if($LayoutValue=="0")
{
	
}
elseif($LayoutValue=="1")
{
	$SelectMe1='Selected';
}
else if($LayoutValue=="2")
{
	$SelectMe2="Selected";
}
@endphp
<div class="row">
<div class="col-md-4">
	<label for="Role" class="text-primary">Layout View </label>
	<select name="LayoutType" id="LayoutType" class="form-control" onchange="SetLayoutType(this.value)">
		<option selected="" value="">-- Select Layout --</option>
		<option  value="1" {{$SelectMe1}}>Default View</option>
		<option  value="2" {{$SelectMe2}}>Profile View</option>
	</select>
</div>
</div>
<br>
<div class="col-md-12" style="overflow-x: scroll">
	<table class="table style-2 table-hover no-footer" id="table1">
		<thead>
			<tr>
				<td>Icon</td>
				<td>Label Name</td>
				<td>Fields Name</td>
				<td>Display Type</td>
				<td>Order No.</td>
				<td>Enable/Disable</td>
			</tr>
		</thead>
		@php
		 $loopcount=0;
		 $i=1;
		 $HoldMe="";
		@endphp
		@foreach($field_list as $fieldname)
			<tr>
				 @php
					$fields=$fieldname['ColumnName'];
					$LabelValue=$fieldname['LabelValue'];
					$FontIcon=$fieldname['FontIcon'];
					$DispayType=$fieldname['DisplayType'];
					$Display="";
					if(array_key_exists($DispayType,$DisplayTypeArray))
					{
					 $Display=$DisplayTypeArray[$DispayType];
					}
				$OrderValue=$loopcount;
				 @endphp
				<td>
				@php 
					if($FontIcon)
					{
				@endphp
					<div  data-toggle="modal" data-target="#exampleModal"  id="ModuleIcon" title="Click here to change icon!" onclick="setId('{{$fieldname['DemographyConfigId']}}')" >
					
				@php
					echo $FontIcon;
					echo "</div>";
					}
					else
					{
				@endphp
					<div  data-toggle="modal" data-target="#exampleModal" id="ModuleIcon"  title="Click here to change icon!" onclick="setId('{{$fieldname['DemographyConfigId']}}')" >Select Icon</div>
				@php
					}
				@endphp
				
				</td>
				<td>@php echo $LabelValue @endphp</td>
				<td>{{$fields}}</td>
				<td>{{$Display}}</td>
				<td> 
						<input type="hidden" class="form-control" name="DemographyId{{$loopcount}}" id="DemographyId{{$loopcount}}" value="{{$fieldname['DemographyConfigId']}}">
						<input type="text" class="form-control" name="OrderNO{{$loopcount}}" id="OrderNO{{$loopcount}}" value="{{$fieldname['SortOrder']}}" onblur="EnableDisableDetailView('{{$loopcount}}')">
				</td>
				<td> 
					<!--<input type="checkbox" class="form-control" name="EnableDisable{{$loopcount}}" id="EnableDisable{{$loopcount}}" onclick="EnableDisableDetailView({{$loopcount}})" {{$fieldname['CheckMe']}} >-->
					<div class="n-chk">
						<label class="new-control new-checkbox checkbox-info">
						  <input type="checkbox" class="new-control-input" name="EnableDisable{{$loopcount}}" id="EnableDisable{{$loopcount}}" onclick="EnableDisableDetailView({{$loopcount}})" {{$fieldname['CheckMe']}} >
						  <span class="new-control-indicator"></span>
						</label>
					</div>
				</td>
			 </tr>
			 @php
			 $i++;
			 $loopcount++;
			 @endphp
		@endforeach
	</table>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Change Icon</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <div class="icon-content-container">
                	<div class="icon-content-container">
                    	<div class="row" id="icon_container">
						<input type="hidden" name="MyId" id="MyId" value="" >
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="activity"></i><span class="icon-name"> activity</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="airplay"></i><span class="icon-name"> airplay</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="alert-circle"></i><span class="icon-name"> alert-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="alert-octagon"></i><span class="icon-name"> alert-octagon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="alert-triangle"></i><span class="icon-name"> alert-triangle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-center"></i><span class="icon-name"> align-center</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-justify"></i><span class="icon-name"> align-justify</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-left"></i><span class="icon-name"> align-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-right"></i><span class="icon-name"> align-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="anchor"></i><span class="icon-name"> anchor</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="aperture"></i><span class="icon-name"> aperture</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="archive"></i><span class="icon-name"> archive</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down"></i><span class="icon-name"> arrow-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down-circle"></i><span class="icon-name"> arrow-down-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down-left"></i><span class="icon-name"> arrow-down-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down-right"></i><span class="icon-name"> arrow-down-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-left"></i><span class="icon-name"> arrow-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-left-circle"></i><span class="icon-name"> arrow-left-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-right"></i><span class="icon-name"> arrow-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-right-circle"></i><span class="icon-name"> arrow-right-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up"></i><span class="icon-name"> arrow-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up-circle"></i><span class="icon-name"> arrow-up-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up-left"></i><span class="icon-name"> arrow-up-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up-right"></i><span class="icon-name"> arrow-up-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="at-sign"></i><span class="icon-name"> at-sign</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="award"></i><span class="icon-name"> award</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bar-chart"></i><span class="icon-name"> bar-chart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bar-chart-2"></i><span class="icon-name"> bar-chart-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="battery"></i><span class="icon-name"> battery</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="battery-charging"></i><span class="icon-name"> battery-charging</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bell"></i><span class="icon-name"> bell</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bell-off"></i><span class="icon-name"> bell-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bluetooth"></i><span class="icon-name"> bluetooth</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bold"></i><span class="icon-name"> bold</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="book"></i><span class="icon-name"> book</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bookmark"></i><span class="icon-name"> bookmark</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="book-open"></i><span class="icon-name"> book-open</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="box"></i><span class="icon-name"> box</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="briefcase"></i><span class="icon-name"> briefcase</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="calendar"></i><span class="icon-name"> calendar</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="camera"></i><span class="icon-name"> camera</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="camera-off"></i><span class="icon-name"> camera-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cast"></i><span class="icon-name"> cast</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="check"></i><span class="icon-name"> check</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="check-circle"></i><span class="icon-name"> check-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="check-square"></i><span class="icon-name"> check-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-down"></i><span class="icon-name"> chevron-down</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-left"></i><span class="icon-name"> chevron-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-right"></i><span class="icon-name"> chevron-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-down"></i><span class="icon-name"> chevrons-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-left"></i><span class="icon-name"> chevrons-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-right"></i><span class="icon-name"> chevrons-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-up"></i><span class="icon-name"> chevrons-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-up"></i><span class="icon-name"> chevron-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chrome"></i><span class="icon-name"> chrome</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="clipboard"></i><span class="icon-name"> clipboard</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="clock"></i><span class="icon-name"> clock</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud"></i><span class="icon-name"> cloud</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-drizzle"></i><span class="icon-name"> cloud-drizzle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-lightning"></i><span class="icon-name"> cloud-lightning</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-off"></i><span class="icon-name"> cloud-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-rain"></i><span class="icon-name"> cloud-rain</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-snow"></i><span class="icon-name"> cloud-snow</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="code"></i><span class="icon-name"> code</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="codepen"></i><span class="icon-name"> codepen</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="codesandbox"></i><span class="icon-name"> codesandbox</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="coffee"></i><span class="icon-name"> coffee</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="columns"></i><span class="icon-name"> columns</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="command"></i><span class="icon-name"> command</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="compass"></i><span class="icon-name"> compass</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="copy"></i><span class="icon-name"> copy</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-down-left"></i><span class="icon-name"> corner-down-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-down-right"></i><span class="icon-name"> corner-down-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-left-down"></i><span class="icon-name"> corner-left-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-left-up"></i><span class="icon-name"> corner-left-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-right-down"></i><span class="icon-name"> corner-right-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-right-up"></i><span class="icon-name"> corner-right-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-up-left"></i><span class="icon-name"> corner-up-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-up-right"></i><span class="icon-name"> corner-up-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cpu"></i><span class="icon-name"> cpu</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="credit-card"></i><span class="icon-name"> credit-card</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="crop"></i><span class="icon-name"> crop</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="crosshair"></i><span class="icon-name"> crosshair</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="database"></i><span class="icon-name"> database</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="delete"></i><span class="icon-name"> delete</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="disc"></i><span class="icon-name"> disc</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="dollar-sign"></i><span class="icon-name"> dollar-sign</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="download"></i><span class="icon-name"> download</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="download-cloud"></i><span class="icon-name"> download-cloud</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="droplet"></i><span class="icon-name"> droplet</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="edit"></i><span class="icon-name"> edit</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="edit-2"></i><span class="icon-name"> edit-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="edit-3"></i><span class="icon-name"> edit-3</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="external-link"></i><span class="icon-name"> external-link</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="eye"></i><span class="icon-name"> eye</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="eye-off"></i><span class="icon-name"> eye-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="facebook"></i><span class="icon-name"> facebook</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="fast-forward"></i><span class="icon-name"> fast-forward</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="feather"></i><span class="icon-name"> feather</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="figma"></i><span class="icon-name"> figma</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file"></i><span class="icon-name"> file</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file-minus"></i><span class="icon-name"> file-minus</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file-plus"></i><span class="icon-name"> file-plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file-text"></i><span class="icon-name"> file-text</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="film"></i><span class="icon-name"> film</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="filter"></i><span class="icon-name"> filter</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="flag"></i><span class="icon-name"> flag</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="folder"></i><span class="icon-name"> folder</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="folder-minus"></i><span class="icon-name"> folder-minus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="folder-plus"></i><span class="icon-name"> folder-plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="framer"></i><span class="icon-name"> framer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="frown"></i><span class="icon-name"> frown</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="gift"></i><span class="icon-name"> gift</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-branch"></i><span class="icon-name"> git-branch</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-commit"></i><span class="icon-name"> git-commit</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="github"></i><span class="icon-name"> github</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-merge"></i><span class="icon-name"> git-merge</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-pull-request"></i><span class="icon-name"> git-pull-request</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="globe"></i><span class="icon-name"> globe</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="grid"></i><span class="icon-name"> grid</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="hard-drive"></i><span class="icon-name"> hard-drive</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="hash"></i><span class="icon-name"> hash</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="headphones"></i><span class="icon-name"> headphones</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="heart"></i><span class="icon-name"> heart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="help-circle"></i><span class="icon-name"> help-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="hexagon"></i><span class="icon-name"> hexagon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="home"></i><span class="icon-name"> home</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="image"></i><span class="icon-name"> image</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="inbox"></i><span class="icon-name"> inbox</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="info"></i><span class="icon-name"> info</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="instagram"></i><span class="icon-name"> instagram</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="italic"></i><span class="icon-name"> italic</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="key"></i><span class="icon-name"> key</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="layers"></i><span class="icon-name"> layers</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="layout"></i><span class="icon-name"> layout</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="life-buoy"></i><span class="icon-name"> life-buoy</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="link"></i><span class="icon-name"> link</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="link-2"></i><span class="icon-name"> link-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="linkedin"></i><span class="icon-name"> linkedin</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="list"></i><span class="icon-name"> list</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="loader"></i><span class="icon-name"> loader</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="lock"></i><span class="icon-name"> lock</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="log-in"></i><span class="icon-name"> log-in</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="log-out"></i><span class="icon-name"> log-out</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mail"></i><span class="icon-name"> mail</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="map"></i><span class="icon-name"> map</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="map-pin"></i><span class="icon-name"> map-pin</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="maximize"></i><span class="icon-name"> maximize</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="maximize-2"></i><span class="icon-name"> maximize-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="meh"></i><span class="icon-name"> meh</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="menu"></i><span class="icon-name"> menu</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="message-circle"></i><span class="icon-name"> message-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="message-square"></i><span class="icon-name"> message-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mic"></i><span class="icon-name"> mic</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mic-off"></i><span class="icon-name"> mic-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minimize"></i><span class="icon-name"> minimize</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minimize-2"></i><span class="icon-name"> minimize-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minus"></i><span class="icon-name"> minus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minus-circle"></i><span class="icon-name"> minus-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minus-square"></i><span class="icon-name"> minus-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="monitor"></i><span class="icon-name"> monitor</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="moon"></i><span class="icon-name"> moon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="more-horizontal"></i><span class="icon-name"> more-horizontal</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="more-vertical"></i><span class="icon-name"> more-vertical</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mouse-pointer"></i><span class="icon-name"> mouse-pointer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="move"></i><span class="icon-name"> move</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="music"></i><span class="icon-name"> music</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="navigation"></i><span class="icon-name"> navigation</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="navigation-2"></i><span class="icon-name"> navigation-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="octagon"></i><span class="icon-name"> octagon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="package"></i><span class="icon-name"> package</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="paperclip"></i><span class="icon-name"> paperclip</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pause"></i><span class="icon-name"> pause</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pause-circle"></i><span class="icon-name"> pause-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pen-tool"></i><span class="icon-name"> pen-tool</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="percent"></i><span class="icon-name"> percent</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone"></i><span class="icon-name"> phone</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-call"></i><span class="icon-name"> phone-call</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-forwarded"></i><span class="icon-name"> phone-forwarded</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-incoming"></i><span class="icon-name"> phone-incoming</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-missed"></i><span class="icon-name"> phone-missed</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-off"></i><span class="icon-name"> phone-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-outgoing"></i><span class="icon-name"> phone-outgoing</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pie-chart"></i><span class="icon-name"> pie-chart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="play"></i><span class="icon-name"> play</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="play-circle"></i><span class="icon-name"> play-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="plus"></i><span class="icon-name"> plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="plus-circle"></i><span class="icon-name"> plus-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="plus-square"></i><span class="icon-name"> plus-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pocket"></i><span class="icon-name"> pocket</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="power"></i><span class="icon-name"> power</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="printer"></i><span class="icon-name"> printer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="radio"></i><span class="icon-name"> radio</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="refresh-ccw"></i><span class="icon-name"> refresh-ccw</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="refresh-cw"></i><span class="icon-name"> refresh-cw</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="repeat"></i><span class="icon-name"> repeat</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rewind"></i><span class="icon-name"> rewind</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rotate-ccw"></i><span class="icon-name"> rotate-ccw</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rotate-cw"></i><span class="icon-name"> rotate-cw</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rss"></i><span class="icon-name"> rss</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="save"></i><span class="icon-name"> save</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="scissors"></i><span class="icon-name"> scissors</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="search"></i><span class="icon-name"> search</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="send"></i><span class="icon-name"> send</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="server"></i><span class="icon-name"> server</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="settings"></i><span class="icon-name"> settings</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="share"></i><span class="icon-name"> share</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="share-2"></i><span class="icon-name"> share-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shield"></i><span class="icon-name"> shield</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shield-off"></i><span class="icon-name"> shield-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shopping-bag"></i><span class="icon-name"> shopping-bag</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shopping-cart"></i><span class="icon-name"> shopping-cart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shuffle"></i><span class="icon-name"> shuffle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sidebar"></i><span class="icon-name"> sidebar</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="skip-back"></i><span class="icon-name"> skip-back</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="skip-forward"></i><span class="icon-name"> skip-forward</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="slack"></i><span class="icon-name"> slack</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="slash"></i><span class="icon-name"> slash</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sliders"></i><span class="icon-name"> sliders</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="smartphone"></i><span class="icon-name"> smartphone</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="smile"></i><span class="icon-name"> smile</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="speaker"></i><span class="icon-name"> speaker</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="star"></i><span class="icon-name"> star</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="stop-circle"></i><span class="icon-name"> stop-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sun"></i><span class="icon-name"> sun</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sunrise"></i><span class="icon-name"> sunrise</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sunset"></i><span class="icon-name"> sunset</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="tablet"></i><span class="icon-name"> tablet</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="tag"></i><span class="icon-name"> tag</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="target"></i><span class="icon-name"> target</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="terminal"></i><span class="icon-name"> terminal</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="thermometer"></i><span class="icon-name"> thermometer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="thumbs-down"></i><span class="icon-name"> thumbs-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="thumbs-up"></i><span class="icon-name"> thumbs-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="toggle-left"></i><span class="icon-name"> toggle-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="toggle-right"></i><span class="icon-name"> toggle-right</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trash"></i><span class="icon-name"> trash</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trash-2"></i><span class="icon-name"> trash-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trello"></i><span class="icon-name"> trello</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trending-down"></i><span class="icon-name"> trending-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trending-up"></i><span class="icon-name"> trending-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="triangle"></i><span class="icon-name"> triangle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="truck"></i><span class="icon-name"> truck</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="tv"></i><span class="icon-name"> tv</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="twitter"></i><span class="icon-name"> twitter</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="type"></i><span class="icon-name"> type</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="umbrella"></i><span class="icon-name"> umbrella</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="underline"></i><span class="icon-name"> underline</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="unlock"></i><span class="icon-name"> unlock</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="upload"></i><span class="icon-name"> upload</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="upload-cloud"></i><span class="icon-name"> upload-cloud</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user"></i><span class="icon-name"> user</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-check"></i><span class="icon-name"> user-check</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-minus"></i><span class="icon-name"> user-minus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-plus"></i><span class="icon-name"> user-plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="users"></i><span class="icon-name"> users</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-x"></i><span class="icon-name"> user-x</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="video"></i><span class="icon-name"> video</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="video-off"></i><span class="icon-name"> video-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="voicemail"></i><span class="icon-name"> voicemail</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume"></i><span class="icon-name"> volume</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume-1"></i><span class="icon-name"> volume-1</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume-2"></i><span class="icon-name"> volume-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume-x"></i><span class="icon-name"> volume-x</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="watch"></i><span class="icon-name"> watch</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="wifi"></i><span class="icon-name"> wifi</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="wifi-off"></i><span class="icon-name"> wifi-off</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="wind"></i><span class="icon-name"> wind</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x"></i><span class="icon-name"> x</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x-circle"></i><span class="icon-name"> x-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x-octagon"></i><span class="icon-name"> x-octagon</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x-square"></i><span class="icon-name"> x-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="youtube"></i><span class="icon-name"> youtube</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zap"></i><span class="icon-name"> zap</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zap-off"></i><span class="icon-name"> zap-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zoom-in"></i><span class="icon-name"> zoom-in</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zoom-out"></i><span class="icon-name"> zoom-out</span>
								</div>
							</div>

						</div>                            
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
				<button class="btn" data-dismiss="modal" onclick="RemoveIcon()"><i class="flaticon-cancel-12"></i> Remove Icon</button>
                <button type="button" class="btn btn-primary">Change</button>
            </div>
        </div>
    </div>
</div>
<script src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo7/plugins/font-icons/feather/feather.min.js"></script>
<script type="text/javascript">
	feather.replace();
</script>
<script type="text/javascript">
  $('#icon_container').on('click', '.col-auto', function (event) {
        var icon = $(this).find('.icon-container').text();
        var new_icon=$.trim(icon);
        var other_content='<i data-feather="'+$.trim(icon)+'" ></i>';
        var content=feather.icons[new_icon].toSvg();
        feather.replace(); 
		var DemographyId=document.getElementById('MyId').value;
		//document.getElementById('ModuleIcon'+DemographyId).value=content;
        $('#ModuleIcon').val(content);
        $('#exampleModal1').modal('hide');
		//alert(content);
		SaveIcon(DemographyId,content);
    });
	function RemoveIcon()
	{
		 var DemographyId=document.getElementById('MyId').value;
		//alert(content);
		var nullvalue="";
		SaveIcon(DemographyId,nullvalue);
	}
	function SaveIcon(DemographyId,Icon)
{
		var formData = {
		DemographyId: DemographyId,
		Icon : Icon,
	};
	var type = "POST";
	var ajaxurl = "{{ url('SaveIconDetailConfig-AccessView') }}";
	$.ajax({
		type: type,
		url: ajaxurl,
		data: formData,
		beforeSend:function()
		{
			
			// $('#ConfigFields').html();
			
		},
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		dataType: 'json',
		success: function () {
		
		},
		complete: function (response) {
			//window.location("{{ url('Admin-Panel') }}");
			var txt = response.responseJSON;
				if(txt.Status=="Success"){
					Snackbar.show({
						text: txt.Message,
						pos: 'top-right',
					});
				}
		},
		error: function (data) {
			console.log(data);
			// alert(data);
		}
	}); 
}
	</script>