<div class="container">
	<h3>Add New Group</h3><hr>
    <div class="form-group">
    	<input type="text" class="form-control text-capitalize" id="group_name" name="group_name" placeholder="Enter Group Name" required>
  	</div>

    <div class="form-group">
    	<button type="button" class="btn btn-success" onclick="addNewGroup()">Add Group</button>
  	</div>
	<div class="row">
		<div class="col-md-6">
			<h3>List of currently available groups</h3><hr>
			<ul class="list-group text-capitalize">
				<?php
					foreach (glob(__DIR__."/group_names/*") as $filename) {
						$filename = explode('/', $filename);
						$filename = end($filename);
						echo '<li class="list-group-item d-flex justify-content-between align-items-center">'.$filename. '<span class="badge badge-warning badge-pill" onclick="deleteGroup('."'$filename'".')">X</span></li>';
					}
				?>
			</ul>
		</div>
	</div>
</div>

<style>
.badge-warning {
	background: red;
	cursor: pointer;
}
</style>

<script>
	function addNewGroup() {
		var gname = document.getElementById("group_name").value,
			inFolder = 'group_names',
			path ='/api/create_file?filename='+gname+'&inFolder='+inFolder;
		fetch(path)
		.then(function(response) { return response.json(); })
		.then(function(json) {
			if(json.status=='success') {
				// createButton(fname,inFolder,inDiv);
				console.log(json.status);
				alert(json.msg);
				location.reload(true);
			}
		});
		console.log(gname);
	}

	function deleteGroup(fname) {
		var inFolder = 'group_names',
			f='/api/delete_file?name='+fname+'&folder=/CONTENT/ROOT_URI/Admin/'+inFolder;
		fetch(f)
		.then(function(response) { return response.json(); })
		.then(function(json) {
			if(json.status=='success'){
				// removeModal(fname);
				console.log(json.status);
				alert(json.msg);
				location.reload(true);
			}
		});
	}
</script>