@extends('layouts.header')
@section('content')
<br>
<div class="row">
	<div class="col-lg-12 col-md-12 layout-spacing">
		<div class="statbox widget box box-shadow">
			<div class="row">
				<div class="col-md-4">
					<label>Group Name <font color="red">*</font> </label>
					<input type="text" class="form-control" name="groupName" id="groupName">
				</div>

				<div class="col-md-4" data-toggle="modal" data-target="#exampleModal" title="Click here to change icon!">
					<div class="form-group">
						<label>ModuleIcon:</label>
						<br>
						<div class="oldIcon" id="oldIcon">

							<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-user-check"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>	

						</div>
						<input type="hidden" name="ModuleIcon" id="ModuleIcon" value="<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-user-check&quot;><path d=&quot;M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2&quot;></path><circle cx=&quot;8.5&quot; cy=&quot;7&quot; r=&quot;4&quot;></circle><polyline points=&quot;17 11 19 13 23 9&quot;></polyline></svg>">
					</div>
				</div>

				<div class="col-md-4">
					<button class="btn btn-primary mb-2 mr-2" onclick="CreateGroups()" style="margin-top: 37px;"><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-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> Create</button>
					<!-- 	<button type="button" class="btn btn-primary" onclick="CreateGroups()" style="margin-top: 37px;">Create Group</button> -->
				</div>
			</div>
			<br>
			<div class="row">
				<div class="col-md-12" id="ConfiguredGroups">

				</div>
			</div>
		</div>
	</div>
</div>


<!-- Modal -->
<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">

							<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 type="button" class="btn btn-primary">Change</button>
			</div>
		</div>
	</div>
</div>
<!-- Modal end -->


@endsection
@php
$siteurl=$_SERVER['HTTP_HOST'];
@endphp
<script src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo7/plugins/font-icons/feather/feather.min.js"></script>
<script src="https://{{$siteurl}}/cork/HTML/ltr/demo7/plugins/font-icons/feather/feather.min.js"></script>
<script type="text/javascript">
	feather.replace();
</script>

<script type="text/javascript">
	document.addEventListener('DOMContentLoaded',()=>{
		// alert("ready");
		feather.replace();
		$('#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();

			$('#oldIcon').html(content); 
			feather.replace(); 
			$('#ModuleIcon').val(content);
			
			$('#exampleModal').modal('hide');

		});

		setTimeout(GetConfiguredgroups,100);
	});
	CreateGroups=()=>{
		groupName=$('#groupName').val();
		groupName=groupName.trim();

		ModuleIcon=$('#ModuleIcon').val();

		if(groupName.length==0)
		{
			Snackbar.show({
				pos:"top-right",
				text:"Please fill all the fields!",
				actionTextColor: '#fff',
				backgroundColor: '#e7515a'
			});
			return false;
		}



		$.ajax({
			type:"post",
			url:"{{url('GroupModules-Create')}}",
			data:{groupName,ModuleIcon},
			beforeSend:()=>{},
			success:response=>{

				$('#groupName').val('');
				res=JSON.parse(response);
				console.log(response);
				if(res.type=="error")
				{
					Snackbar.show({
						pos:"top-right",
						text:res.msg,
						actionTextColor: '#fff',
						backgroundColor: '#e7515a',
					});
				}
				else
				{
					Snackbar.show({
						pos:"top-right",
						text:res.msg,
					});
				}

				GetConfiguredgroups();
			}
		});
	}

	UpdateModuleGroups=(GroupId)=>{
		ModuleIds=[];
		$(`#group${GroupId} :selected`).each(function(){

			if($(this).is(' :checked'))
			{
				ModuleIds.push($(this).val());
			}
		});
		ModuleIds=JSON.stringify(ModuleIds);

		$.ajax({
			type:"post",
			url:"{{url('UpdateModuleGroups')}}",
			data:{GroupId,ModuleIds},
			beforeSend:()=>{},
			success:response=>{
				res=JSON.parse(response);
				if(res.type=="error")
				{
					Snackbar.show({
						pos:"top-right",
						text:res.msg,
						actionTextColor: '#fff',
						backgroundColor: '#e7515a',
					});
				}
				else
				{
					Snackbar.show({
						pos:"top-right",
						text:res.msg,
					});
				}
				// console.log(response);
			},
		});
	}

	UpdateModuleGroupField=async(groupId,UpdateField,UpdateValue)=>
	{
		if(!UpdateValue)
		{
			return false;
		}
		if(UpdateField=="SortOrder")
		{
			if(isNaN(UpdateValue)){
				return false;
			}
		}
		if(UpdateField=="DeletedStatus")
		{
			try
			{
				confirmStatus=await confirmStatus();
			}catch(e)
			{
				alert('rejected');	
			}
			
		}

		$.ajax({
			type:"post",
			url:"{{url('UpdateModuleGroupField')}}",
			data:{groupId,UpdateField,UpdateValue},
			beforeSend:()=>{
			},
			success:response=>{

				res=JSON.parse(response);
				if(res.type=="error")
				{
					Snackbar.show({
						pos:"top-right",
						text:res.msg,
						actionTextColor: '#fff',
						backgroundColor: '#e7515a',
					});
				}
				else
				{
					Snackbar.show({
						pos:"top-right",
						text:res.msg,
					});
				}

				if(UpdateField=="DeletedStatus")
				{
					GetConfiguredgroups();
				}
			},
		});

	}

	confirmStatus=()=>{
		return new Promise((resolve,reject)=>{
			swal({
				title: 'Are you sure?',
				text: "You won't be able to revert this!",
				type: 'warning',
				showCancelButton: true,
				confirmButtonText: 'Delete',
				padding: '2em'
			}).then(function(result) {
				if (result.value) 
				{	
					resolve();
				}
				else
				{
					reject();
				}
			})
		});	
	}

	GetConfiguredgroups=()=>{
		$.ajax({
			type:"post",
			url:"{{url('GetConfiguredgroups')}}",
			beforeSend:()=>{

				$('#ConfiguredGroups').html("<center><div class='loader dual-loader mx-auto'></div></center>")
			},
			success:response=>{
				$('#ConfiguredGroups').html(response)
				// console.log(response)
			},
		});
	}







</script>