{{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();
            $("#projectoverview > tbody > tr").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");
                }
                let newRow = $('<tr><td>' + item.title + '</td></tr>');
                let selectElement = $('<select name="project_type" data="' + item.id + '"></select>');
                for (let typeId in response.types) {
                    if (response.types.hasOwnProperty(typeId)) {
                        let option = $('<option value="' + typeId + '"' + (typeId == item.project_type_id ? ' selected' : '') + '>' + response.types[typeId] + '</option>');
                        selectElement.append(option);
                    }
                }
                newRow.append('<td>' + selectElement.prop('outerHTML') + '</td>');
                $("#shorttitle").append(newItem);
                $("#projectoverview > tbody").append(newRow);
            });
        }).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>
