@model Models.ViewModels.TodoViewModel

@{
    ViewData["Title"] = "To-do App";
}

<form asp-action="Insert" method="post" id="forms">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group" id="createform">
        <label asp-for="Todo.Name">To do name</label>
        <input type="text" asp-for="Todo.Name" class="form-control" id="todoname" placeholder="Enter your to do's name">
        <span asp-validation-for="Todo.Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Create" id="submitbutton" style="margin: 1em 0px 1em 0px;" class="btn btn-success" />
    </div>
</form>

<div class="todolist">
    <ul id="todolist">
        @foreach (var todo in Model.TodoList)
        {
            <li class="listitems">
                @todo.Name
                <a asp-action="Delete" asp-route-id="@todo.Id" method="post" class="btn btn-danger">Delete</a>
                <a onclick="showUpdateInput('@todo.Id')" class="btn btn-primary">Update</a>
                <form asp-action="Update" method="post" class="updateformbutton" id="[email protected]" style="display: none;">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <input type="text" asp-for="Todo.Name" id="updatetodoinput" style="margin-left: 15px;" />
                    <span asp-validation-for="Todo.Name" class="text-danger"></span>
                    <input type="hidden" asp-for="Todo.Id" value="@todo.Id">
                    <input type="submit" value="Update" />
                </form>
            </li>
        }
    </ul>
</div>

@section Scripts{

    <script>
        const createButton = document.getElementById("create");
        const forms = document.querySelector("#forms");
        const updateForm = document.querySelector(".updateform");
        const submitButton = document.querySelector("#submitbutton");
        const updateButton = document.getElementById("updatebutton");
        const todoList = document.getElementById("todolist");
        const createTodoInput = document.getElementById("todoname")

        createTodoInput.value = "";

        document.querySelector(".updateformbutton")

        let previousFormId = null;

        function showUpdateInput(todoId){
            if (previousFormId) {
                document.getElementById(previousFormId).style.display = "none";
            }

            var updateForm = document.getElementById("updateform_" + todoId);
            updateForm.style.display = "block";

            previousFormId = "updateform_" + todoId;
        }
    </script>
}