columns: [
                    { field: "centreName", title: "Centre Name", width: "180px" },
                    { field: "address", title: "Address", width: "188px", encoded: false },
                    { field: "programme", title: "Programme", width: "180px", encoded: false },
                    { field: "action", width: "180px", encoded: false }
                ],

$primary: #4dcae6;

@import "~@progress/kendo-theme-default/dist/all.scss";

@use "@progress/kendo-theme-default/dist/all.scss" with (
    $primary: #4dcae6
)

@model Models.Tasking.TaskModel

<div class="modal-content">

    @using (Ajax.BeginForm("SaveEditTask", "Tasking", null, new AjaxOptions()
    {
        UpdateTargetId = "frmEditTask",
        InsertionMode = InsertionMode.Replace,
        OnSuccess = "taskingSaveSuccess"
    }, new { id = "frmEditTask", autocomplete = "off" }))
    {
        <div class="modal-header">
            <h5 class="modal-title" id="modalTitle">Edit Task</h5>
        </div>
        <div class="modal-body" style="max-height:70vh; overflow-y:auto">
            @Html.AntiForgeryToken()

            @Html.ValidationSummary(false, "", new { @class = "text-danger" })

            @Html.HiddenFor(m => m.ID)
            @Html.HiddenFor(m => m.PtOID)
            @Html.HiddenFor(m => m.PtMRN)
            @Html.HiddenFor(m => m.CreatedByUserFK)
            @Html.HiddenFor(m => m.CreatedDTTM)

            <div class="form-group">
                @Html.LabelFor(m => m.PtFullName, new { @class = "text-dark font-weight-bold" })
                @Html.TextBoxFor(m => m.PtFullName, new { @class = "form-control mb-2", @readonly = "readonly" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.TypeFK, new { @class = "text-dark font-weight-bold" })
                @Html.DropDownListFor(m => m.TypeFK, (IList<SelectListItem>)ViewBag.TaskTypeOptions, new { @class = "form-control p-1 w-auto mb-2", @disabled = "disabled", @readonly = "readonly" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.StatusFK, new { @class = "text-dark font-weight-bold" })
                <br />
                @Html.DropDownListFor(m => m.StatusFK, (IList<SelectListItem>)ViewBag.TaskStatusOptions, new { @id = "ddTaskStatusType", @class = "form-control p-1 w-auto mb-2" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.PriorityFK, new { @class = "text-dark font-weight-bold" })
                <br />
                @Html.DropDownListFor(m => m.PriorityFK, (IList<SelectListItem>)ViewBag.TaskPriorityOptions, new { @id = "ddTaskPriorityType", @class = "form-control p-1 w-auto mb-2", data_default_due_date_url = Url.Action("GetDefaultDueDate", "Tasking", new { area = "" }) })
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.DueDTTM, new { @class = "text-dark font-weight-bold" })
                @if (Model.CreatedByUserFK == User.Identity.GetUserId())
                {
                    @(Html.Kendo().DateTimePickerFor(m => m.DueDTTM).HtmlAttributes(new { @id="dtpTaskDueDate", data_toggle = "tooltip", data_placement = "bottom", data_trigger = "focus", required = "required" }))
                }
                else
                {
                    @Html.TextBoxFor(m => m.DueDTTM, new { @class = "form-control mb-2", @readonly = "readonly" })
                }
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.AssigneeFK, new { @class = "text-dark font-weight-bold" })
                <br />
                <div class="row">
                    <div class="col-9 pr-0">
                        <select id="ddTaskAssignee" name="AssigneeFK" data-all-assignees-url="@Url.Action("GetAllTaskAssigneeOptions", "Tasking", new { area = "" })" />
                    </div>
                    <div class="col-3 pl-2">
                        <button id="btnSelfAssignTask" type="button" class="btn btn-secondary" data-user-id-url="@Url.Action("GetUserId", "Tasking", new { area = "" })">Take It</button>
                    </div>
                </div>
                @Html.HiddenFor(m => m.AssigneeTypeFK, new { @id = "hiddenAssigneeTypeFK" })
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.Description, new { @class = "text-dark font-weight-bold" })
                @if (Model.CreatedByUserFK == User.Identity.GetUserId())
                {
                    @Html.TextAreaFor(m => m.Description, new { @class = "form-control" })
                }
                else
                {
                    @Html.TextAreaFor(m => m.Description, new { @class = "form-control", @readonly = "readonly" })
                }
            </div>

        </div>

        <div class="modal-footer">
            @if (Model.CreatedByUserFK == User.Identity.GetUserId())
            {
                <button id="btnDeleteTask" type="button" class="btn btn-danger" data-target-url="@Url.Action("DeleteTask", "Tasking", new { area = "" })">Delete Task</button>
            }
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    }

</div>

function initAssigneeDropDown() {
    $("#ddTaskAssignee").kendoDropDownList({
        optionLabel: 'Select Assignee ...',
        filter: "contains",
        dataTextField: 'AssigneeName',
        dataValueField: 'AssigneeFK',
        template: function (dataItem) {
            //TODO - improve logic
            if (dataItem.AssigneeTypeFK == 1)
                return '<span><i class="fas fa-user pr-2"></i>' + dataItem.AssigneeName + '</span>';
            else if (dataItem.AssigneeTypeFK == 2)
                return '<span><i class="fas fa-users pr-2"></i>' + dataItem.AssigneeName + '</span>';
        }
    });
}

function getAllAssigneesDataSource() {
    var url = $('#ddTaskAssignee').data('all-assignees-url');

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: url
            }
        }
    });

    return dataSource;
}

function onEditTask(e) {
    //Fetch the ID, assigneeTypeFK, and assigneeFK from the grid item that's getting edited
    var grid = $('#taskGrid').data('kendoGrid');
    var taskDataItem = grid.dataItem($(e).closest("tr"));
    var taskId = taskDataItem.ID;
    var assigneeTypeFK = taskDataItem.AssigneeTypeFK;
    var assigneeFK = taskDataItem.AssigneeFK; 

    $('#taskModal').modal('show'); //Show the edit modal

    $('#taskModal .modal-content').html(''); //Clear out the modal container

    //ajax to return partial view for editing task
    $.ajax({
        url: $(e).data("target-url"), 
        type: "POST",
        cache: false,
        data: JSON.stringify({ taskId: taskId }), //Pass the task id to controller
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            $('#taskModal .modal-content').replaceWith(response); //add edit view html to modal

            initAssigneeDropDown();
            var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
            ddAssignee.setDataSource(dataSource);
            var assigneeDataSourceView = ddAssignee.dataSource.view(); //Issue - this is empty so select (below) will not work

            ddAssignee.select(function (dataItem) {
                return dataItem.AssigneeTypeFK == assigneeTypeFK && dataItem.AssigneeFK == assigneeFK;
            });

        },
        error: function (jqXHR, exception) {
            if (jqXHR.statusText !== 'abort') {
                // Our error logic here
                $('#kNotification').data('kendoNotification').error("An error occurred while loading the page.");
            }
        }
    });
    
}

$('#taskModal').on('click', '#btnSelfAssignTask', function (e) {
 
    //Ajax to return the current user's ID from the controller
    $.ajax({
        url: $(e.currentTarget).data("user-id-url"),
        type: "POST",
        cache: false,
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            var userId = response;

            //Set the value of the dropdown based on the user's id
            var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
            var assigneeDataSource = ddAssignee.dataSource.view(); //For testing
            //TODO improve logic
            ddAssignee.select(function (dataItem) {
                return dataItem.AssigneeTypeFK == 1 && dataItem.AssigneeFK == userId;
            });
        },
        error: function (jqXHR, exception) {
            if (jqXHR.statusText !== 'abort') {
                $('#kNotification').data('kendoNotification').error("An error occurred while assigning task");
            }
        }
    });

});