@page
@model ToDoList.Pages.ToDos.IndexModel

<h1>@Model._user.UserName's To Do List</h1>

@if (Model.ShowMessage)
{
    <div class="alert alert-info alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="close"><span></span></button>
        @Model.Message
    </div>
}

<form method="post">
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-inline">
        <label>Create a new task: &nbsp;</label>
        <input asp-for="ToDo.Description" class="form-control" size="120" />
        <span asp-validation-for="ToDo.Description" class="text-danger"></span>
        <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i></button>
    </div>
</form>
<p></p>

@* <p>
    <p align="right">Filter: <button class="btn btn-primary" onclick="AllFilter()">All</button> | <button class="btn btn-primary" onclick="IncompleteFilter()">Incomplete</button> | <button class="btn btn-primary" onclick="FinishedFilter()">Finished</button></p>
*@

@if (Model._user.ToDos != null && Model._user.ToDos.Count > 0)
{

    <form method="post">
        <table class="table">
            <thread>
                <tr>
                    <th>Completed?</th>
                    <th>@Html.DisplayNameFor(t => t.ToDos[0].Description)</th>
                    <th>@Html.DisplayNameFor(t => t.ToDos[0].Created)</th>
                    <th>Date/Time Completed</th>
                    <th>&nbsp;</th>
                </tr>
            </thread>
            <tbody>
                @foreach (var todo in Model.filteredToDos)
                {
                    <tr>
                        <td><input type="checkbox" value="@todo.IsComplete" onclick="ToggleToDo(@todo.TaskID)" checked="@todo.IsComplete" /></td>
                        @*@Html.CheckBoxFor(t => todo.IsComplete, new { id = todo.TaskID, @class = "toggle"})*@
                        <td>@Html.DisplayFor(t => todo.Description)</td>
                        <td>@Html.DisplayFor(t => todo.Created)</td>
                        <td id="@todo.TaskID">
                            @if (!todo.IsComplete)
                            {
                                <p></p>@*<button asp-page-handler="Edit" asp-route-id="@todo.TaskID" class="btn btn-sm btn-primary">Mark as completed</button>*@
                            }
                            else
                            {
                                @Html.DisplayFor(t => todo.Completed)
                            }
                        </td>
                        <td><button asp-page-handler="Delete" asp-route-id="@todo.TaskID" class="btn btn-sm btn-danger"><i class="far fa-trash-alt"></i></button></td>
                    </tr>
                }
            </tbody>
        </table>
    </form>
}

else
{
    <p>No tasks found.</p>
}

@section Scripts {
    <script>
        function ToggleToDo(id) {
            console.log(id);
            var data = { 'TaskID': id }

            $.ajax({
                type: "POST",
                url: "api/ToDo",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (response) {
                    console.log(response.Completed);
                    $('#' + id).empty();
                    var completeTime = "<p>" + response.Completed + "</p>";
                    if (response.Completed) {
                        $('#' + id).html(completeTime);
                    }
                },
                failure: function (response) {
                    alert(response);
                    console.log(response);
                }
            });
        }
    </script>
}