<?php
ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);  

include './assets/functions.php';
include './settings/settings.php';
include './settings/config.php';
include_once './settings/translations/translations_US.php';
include_once './settings/systemfirmware.php';
/*
//------------------------------------------
// Get DATA from API
//------------------------------------------   
$request = explode('/', trim($_SERVER['PATH_INFO'],'/'));
//$input = json_decode(file_get_contents('php://input'),true);
$post_data_curl = fopen('php://input', 'r');
$input = stream_get_contents($post_data_curl);

//------------------------------------------
// Include functions
//------------------------------------------   
require_once './assets/functions.php';
include './settings/settings.php';

//------------------------------------------
// Retrieve API version and Collection
// api.php/(v)ersion/{get/post}/collection/
//------------------------------------------   
$version = (isset($request[0])) ? strtolower($request[0]) : '';
$collection = (isset($request[1])) ? strtolower($request[1]) : '';
$get_content = (isset($request[2])) ? strtolower($request[2]) : '';

///------------------------------------------
// Application related calls
//------------------------------------------
$action = $request[2] ?? '';

$user_data['service'] = '';
$token = createCommunicationToken($user_data['service']);
echo $token;
*/


$tags = ['test1','test2','test3'];

echo '
<html>
<head>
<style>
.multiselect {
    position: relative;
    display: flex;
    flex-flow: wrap;
    border-bottom: 1px solid #dedfe1;
    padding-bottom: 10px;
    margin: 15px 0 25px 0;
    margin-bottom: 25px;
  }
  
.multiselect > .item {
    display: inline-flex;
    border: 1px solid #dedfe1;
    padding: 0 10px;
    height: 40px;
    margin: 0 5px 5px 0;
    font-size: 14px;
    justify-content: center;
    align-items: center;
  }
  
.multiselect > .item .remove {
    font-style: normal;
    cursor: pointer;
    font-size: 19px;
    margin-right: 3px;
    margin-top: -2px;
    color: #b5b9bd;
  }
  
.multiselect > .item .remove:hover {
    color: #9aa0a5;
  }
  
.multiselect input {
    height: 40px;
    width: 80px;
    flex-grow: 1;
    padding: 0;
    margin: 0;
    outline: 0;
    border: 0;
  }
  
.multiselect input:hover {
    border: 0;
  }
  
.multiselect .list {
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    flex-flow: column;
    background-color: #fff;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
    max-height: 100px;
    overflow-y: auto;
    z-index: 1000000000;
  }
  
.multiselect .list span {
    display: flex;
    padding: 5px 7px;
    cursor: pointer;
  }
  
 .multiselect .list span:hover {
    background-color: #f3f4f4;
  }
  
 .multiselect:hover, main .multiselect:active {
    border-bottom: 1px solid #b5b9bd;
  }
  </style>
  </head>
  <body>
<form action="" method="post">
<label for="category">Categories</label>
            <div class="multiselect" data-name="tags[]">';

            foreach ($tags as $tag){
                echo '
                <span class="item" data-value="'.$tag.'" onclick="remove(this)">
                    <i class="remove" >&times;</i>'.$tag.'
                    <input type="hidden" name="tags[]" value="'.$tag.'">
                </span>
                ';
            }
             echo'   <input type="text" name="tags[]" placeholder="Categories">
             <input type="submit" value="test">
            </div>
            
</form>
<script>
function remove(tag) {
    var element = tag;
    element.remove();
  }
</script>
</body>
</html>
';
var_dump($_POST);
?>