<%-include ('./header')%>
<div class="container col-md-6">
    <div class="my-md-5">
        <div class="card">
            <div class="card-header">
            <h2><i class="fa-solid fa-folder-plus mr-2 fa-sm"></i>Create Project</h2>
            </div>
            <div class="card-body">
                <form action="/group/create" method="POST">
                    <div class="form-group">
                        <label for="admin_id">Admin ID:</label>
                        <input type="text" class="form-control" id="admin_id" name="admin_id" value="<%= user.userId %>" readonly>
                    </div>
                    <div class="form-group">
                        <label for="group_id">Project ID:</label>
                        <span class="text-muted mx-2">*ProjectID cannot be changed once set*</span>
                        <input type="text" class="form-control" id="group_id" name="group_id" required>
                        <span id="duplicateGroupId" style="display: none; color: red;">This projectID is already taken.</span>
                        <span id="alphaWarning" style="display: none; color: red;">*Only Alphanumeric Characters Allowed*</span>
                    </div>
                    <div class="form-group">
                        <label for="group_name">Project Name:</label>
                        <input type="text" class="form-control" id="group_name" name="group_name" required>
                    </div>
                    <div class="form-group">
                        <label for="project">Project Description:</label>
                        <input type="text" class="form-control" id="project" name="project" required>
                    </div>
                    <button type="submit" class="btn btn-create-group btn-block"><i class="fa-solid fa-floppy-disk mr-2"></i>Add Project</button>
                </form>
            </div>
        </div>
    </div>
</div>

<%-include ('./footer')%>

<script>
    document.getElementById('group_id').addEventListener('input', (event) => {
    const groupIds = <%- JSON.stringify(groupIds) %>;
    const inputValue = document.getElementById('group_id').value;
    console.log(inputValue);
    const duplicateGroupId = document.getElementById('duplicateGroupId');
    const groupIdSpaceCheck=document.getElementById('groupIdSpaceCheck');
    if (groupIds.includes(inputValue.toLowerCase())) 
        duplicateGroupId.style.display = 'block';
    else 
        duplicateGroupId.style.display = 'none'; 

    if (!/^[a-zA-Z0-9]+$/.test(inputValue))
        alphaWarning.style.display="block"
    else
        alphaWarning.style.display="none"
    });
</script>

