@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");
            }
        }
    });

});

columns: [
	{
		field: "workItemLink",	
		template: "#=workItemLink#",
		title: "Work Item Ref",
		width: "110px"
	}
]

columns: [
	{ 
		field: "workItemLink",
		template: "#=workItemLink#",
		title: "Link"
}]

<div data-ng-controller="GridCtrl as gridCtrl"><script type="text/x-kendo-template" id="detail-grid-template">
        <div class="detail-tab-strip">
            <ul>
                <li class="k-active">
                    Grid One
                </li>
                <li class="k-active">
                    Grid Two
                </li>
            </ul>
            <div>
                <div class="grid-one"></div>
            </div>
            <div>
                <div class="grid-two"></div>
            </div>
        </div>
    </script><script type="text/x-kendo-template" id="grid-one-editor">
        <div>
            <ul class="fieldlist">
                <li>
                    <label for="GridOneID">ID</label>
                    <input type="text" class="k-input k-textbox full-width k-state-disabled" disabled="disabled" name="GridOneID" data-bind="value:GridOneID">
                </li>
                <li>
                    <label for="GridFieldOne">One</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldOne" data-bind="value:GridFieldOne">
                </li>
                <li>
                    <label for="GridFieldTwo">Two</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldTwo" data-bind="value:GridFieldTwo">
                </li>
                <li>
                    <label for="GridFieldThree">Three</label>
                    <input type="text" class="k-input k-textbox full-width" name="GridFieldThree" data-bind="value:GridFieldThree">
                </li>
                <li>
                    <label for="GridFieldFour">Four</label>
                    <select id="GridFieldFour" name="GridFieldFour" data-bind="value:GridFieldFour"></select>
                </li>
                <li>
                    <label for="GridFieldFive">Five</label>
                    <select id="GridFieldFive" name="GridFieldFive" data-bind="value:GridFieldFive"></select>
                </li>
            </ul>
        </div>
    </script></div>
 

function gridOneCreateOrEditEvent(e) {

	var detailGridWrapper = this.wrapper,
		mainGrid = $("#parentGrid").data("kendoGrid"),
		$parentGridTr = $(detailGridWrapper).closest("tr").prev(),
		parentData = mainGrid.dataItem($parentGridTr);
	
	e.model.set("GridOneID", parentData.get("GridOneID"));
	e.model.set("GridFieldFive", parentData.get("GridFieldFive"));

	if (e.model.isNew()) {
		e.container.kendoWindow("title", "Create Item");
	}
	else {
		e.container.kendoWindow("title", "Edit Item");
	}

	$("#GridFieldFive").kendoDropDownList({
		dataSource: vm.fieldFiveOptions,
		change: function (c) {

			var dropDownValue = $('#GridFieldFive').data("kendoDropDownList").value();
			e.model.set("GridFieldFive", dropDownValue);

			this.value(dropDownValue);
		}
	});

	$("#GridFieldFour").kendoDropDownList({
		dataSource: [
			{ id: "A", name: "B" },
			{ id: "B", name: "B" }
		],
		dataTextField: "name",
		dataValueField: "id",
		change: function (c) {
			var dropDownValue = $("#GridFieldFour").data("kendoDropDownList").value();
			e.model.set("GridFieldFour", dropDownValue);

			this.value(dropDownValue);
		}
	});

	if (e.model.get('GridFieldFour') === 'A')
		$('#GridFieldFour').data("kendoDropDownList").value('A');
	else {
		$('#GridFieldFour').data("kendoDropDownList").value('B');
		e.model.set("GridFieldFour", $('#GridFieldFour').data("kendoDropDownList").value());
	}

	var popupWindow = e.container.data("kendoWindow");
	popupWindow.setOptions({ width: "600px" });
	popupWindow.setOptions({ height: "700px" });
	popupWindow.center();
}

function detailInit(e) {
	var gridOneToolbar = [];
	var gridOneCommands = [];
	var detailRow = e.detailRow;

	gridOneToolbar = [
		{ name: "create", text: "Add New Entry" }
	];

	gridOneCommands = [
		{ name: "edit", text: { edit: "Edit", update: "Save" } },
		{ name: "Delete", iconClass: "k-icon k-i-close", click: showGridOneDeleteConfirmation }
	];


	detailRow.find(".detail-tab-strip").kendoTabStrip({
		animation: {
			open: { effects: "fadeIn" }
		}
	});

	detailRow.find(".grid-one").kendoGrid({
		dataSource: {
			transport: {
				create: createItem,
				read: readItems,
				update: updateItem,
				parameterMap: function (options, operation) {
					if (operation !== "read" && options.models) {
						return { models: kendo.stringify(options.models) };
					}
				}
			},
			batch: true,
			pageSize: 10,
			filter: [
				{ field: "GridOneID", operator: "eq", value: e.data.GridOneID },
				{ field: "GridFieldFive", operator: "eq", value: e.data.GridFieldFive }
			],
			schema: {
				data: "Data",
				total: "Data.length",
				errors: handleGridErrors,
				model: {
					id: "GridOneID",
					fields: {
						GridOneID: {
							editable: true,
							defaultValue: e.data.GridOneID
						},
						GridFieldOne: {
							editable: true
						},
						GridFieldTwo: {
							editable: true
						},
						GridFieldThree: {
							editable: true
						},
						GridFieldFour: {
							editable: true
						},
						GridFieldFive: {
							editable: true
						},
						RowStatus: {
							editable: false, validation: { required: false }
						},
						RowMessage: {
							editable: false, validation: { required: false }
						}
					}
				}
			}
		},
		scrollable: false,
		sortable: true,
		pageable: {
			refresh: true
		},
		toolbar: gridOneToolbar,
		columns: [
			{ title: "", width: "40px", template: $('#grid-row-status-template').html() },
			{ field: "GridOneID", title: "ID", width: "100px" },
			{ field: "GridFieldOne", title: "One", width: "70px" },
			{ field: "GridFieldTwo", title: "Two", width: "40px" },
			{ field: "GridFieldThree", title: "Three", width: "40px" },
			{ field: "GridFieldFour", title: "Four", width: "50px" },
			{ field: "GridFieldFive", title: "Five", width: "60px" },
			{
				command: gridOneCommands,
				title: "&nbsp;", width: "180px"
			}
		],
		edit: gridOneCreateOrEditEvent,
		editable: {
			mode: "popup",
			template: kendo.template($("#grid-one-editor").html())
		}
	});
}