{{form}}
{{projects}}
<script>
$(document).ready(function() {
    $("form").submit(function(event) {
        event.preventDefault();
    });
    
    $("#addproject").click(function() {
        $.post("projectsmanagement", {
            'action': 'create',
            'newname': $("#new_title").val(),
            },
            null,
            "json"
        ).done(function(response) {
            if ("error" in response) {
                alert(response.error);
                return;
            }
            $("#shorttitle > option:not(:first-child)").remove();
            response.list.forEach(function(item) {
                let newItem = $("<option></option>");
                newItem.attr("id", item.id);
                newItem.text(item.title);
                if (item.id == response.id) {
                    newItem.attr("selected", "selected");
                }
                $("#shorttitle").append(newItem);
            });
        }).fail(function(response) {
            alert(response);
        });
    });
    $("#shorttitle").change(function() {
        if ($(this).val() !== 'NULL') {
            $("#new_title").hide();
            $("#addproject").hide();
        } else {
            $("#new_title").show();
            $("#addproject").show();
        }
        $.post("projectsmanagement", {
            "action": "getdetails",
            "id": $("#shorttitle").val()
            },
            null,
            "json"
        ).done(function(response) {
            if ("error" in response) {
                $("#description").val("");
                $("#projecttype option:first").attr('selected','selected');
                alert(response.error);
                return;
            }
            $("#description").val(response.description);
            $("#projecttype").val(response.projecttype);
        }).fail(function() {
            $("#shorttitle").val("NULL");
            $("#description").val("");
            $("#projecttype option:first").attr('selected','selected');
        });
    });
    $("#description").focusout(function() {
        if ($("#shorttitle").val() === "NULL") {
            return;
        }
        console.log($("#shorttitle").val());
        $.post("projectsmanagement", {
            "action": "setdescription",
            "id": $("#shorttitle").val(),
            "description": $("#description").val()
            },
            null,
            "json"
        ).done(function(response) {
            if ("error" in response) {
                alert(response.error);
            }
        });
    });
    $("#projecttype").change(function() {
        $.post("projectsmanagement", {
            "action": "setprojecttype",
            "id": $("#shorttitle").val(),
            "newtype": $("#projecttype").val()
            },
            null,
            "json"
        ).done(function(response) {
            if ("error" in response) {
                alert(response.error);
            }
        });
    });
    $("select").change(function() {
        if ($(this).attr('name') === 'project_type') {
            $.post(
                '/projectsmanagement',
                {
                    'action': 'setprojecttype',
                    'id': $(this).attr('data'),
                    'newtype': $(this).val()
                },
                null,
                'json'
            ).done(function(response) {
                if ("error" in response) {
                    alert(response.error);
                }
            });
        }
    });
});
</script>