@(Html.Kendo().Chart()
    .Name("productsChart")
    .Series(series =>
    {
        series.Bar(new[] { 100, 200, 300 }).Name("Sales");
    })
    .CategoryAxis(axis => axis
        .Categories("Product A", "Product B", "Product C")
        .Labels(labels => labels
            .Template("<a href='https://example.com/product/#= value #' target='_blank'>#= value #</a>")
        )
    )
)

public async Task<ActionResult> GenerateSupplierAIReponse()
{
    var apiKey = ConfigurationManager.AppSettings["OpenAPIKey"];
    var aiServiceUrl = "https://api.openai.com/v1/chat/completions";
    StringBuilder sb = new StringBuilder();
    using (var httpClient = new HttpClient())
    {
        httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", apiKey);

        try
        {
            using (var requestStream = new StreamReader(HttpContext.Request.InputStream))
            {
                var body = await requestStream.ReadToEndAsync();
                var requestBody = new
                {
                    model = "gpt-4",
                    messages = new[]
                    {
                        new { role = "user", content = body }
                    }
                };

                var response = await httpClient.PostAsJsonAsync(aiServiceUrl, requestBody);
             
                response.EnsureSuccessStatusCode();
                var jsonResponse = await response.Content.ReadAsStringAsync();
                OpenAIResponse aIResponse = JsonConvert.DeserializeObject<OpenAIResponse>(jsonResponse);


                foreach (var i in aIResponse.choices)
                {
                    sb.AppendLine(i.message.content);
                }

                var formattedResponse = new
                {
                    Output = sb.ToString(),
                };

                string finalJsonResult = new JavaScriptSerializer().Serialize(formattedResponse);
                return Content(finalJsonResult, "application/json");
            }

        }
        catch (HttpRequestException ex)
        {
            // Log the error
            Console.Error.WriteLine($"HTTP Error: {ex.Message}");
            return Json(new { error = "Error communicating with OpenAI." }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            // Log the error
            Console.Error.WriteLine($"General Error: {ex.Message}");
            return Json(new { error = "An unexpected error occurred." }, JsonRequestBehavior.AllowGet);
        }
    }

}

@(Html.Kendo().AIPrompt()
    .Name("aiprompt")
    .ActiveView(0)
    .Service("GenerateSupplierAIReponse", "Supplier")
    //.Events(events => events
    //    .PromptRequest("onPromptRequest")
    //)
    .ToolbarItems(items =>
    {
        items.Add().Type(ItemType.Spacer);

        items.Add()
             .Type(ItemType.Button)
             .Icon("x")
             .FillMode(ButtonFillMode.Flat)
             .Rounded(Rounded.Full)
             .ThemeColor(ThemeColor.Primary)
             .Click("onToolbarButtonClick");
    })
    .Views(views =>
    {
        views.Add().Type(Kendo.Mvc.UI.ViewType.Prompt)
        .PromptSuggestions(new string[] { "What is the parent company of " + Model.Name, "Give me the headquarter address of " + Model.Name });
        views.Add().Type(Kendo.Mvc.UI.ViewType.Output);
    })
)

 public class TestViewModel
 {
     public List<string> SelectedItems { get; set; } = new List<string>();
     public List<string> AvailableItems { get; set; } = new List<string>();
 }

public class TestController : Controller
{
    public ActionResult Index()
    {
        var model = new TestViewModel
        {
            AvailableItems = ["Option A", "Option B", "Option C"],
            SelectedItems  = []
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(TestViewModel model)
    {
        model.AvailableItems = ["Option A", "Option B", "Option C"];
        return View(model);
    }
}

@(Html.Kendo().Form<TestViewModel>()
    .Name("testForm")
    .HtmlAttributes(new { method = "post", id = "testForm" })
    .Items(items =>
    {
        items.AddGroup()
             .Label("Demo")
             .Items(g =>
             {
                 g.Add().Field(m => m.SelectedItems)
                      .Label("Pick Items")
                      .Editor(e => e.MultiSelect()
                          .BindTo(Model.AvailableItems)
                          .Placeholder("Select…")
                      );
             });
    })
)

            @(Html.Kendo().Button()
                .Name("AddNew")
                .Icon("plus")
                .FillMode(ButtonFillMode.Solid)
                .Rounded(Rounded.Medium)
                .HtmlAttributes(new { @class = "add-button" })
                .Events(e=>e.Click("addNewClick"))
            )

            @(Html.Kendo().ListView<MyNamespace.Models.ItemComment>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("commentListTemplate")
                .Editable()
                .DataSource(dataSource => dataSource
                    .Model(model => model.Id(comment => comment.CommentID))
                    .Read(read => read.Action("Comments_Read", "Comment").Data("getCommentReadParameters"))
                    .Update(update => update.Action("Comments_Update", "Comment"))
                    .Destroy(destroy => destroy.Action("Comments_Delete", "Comment"))
                    .Events(e => e.Error("epic.error.kendoErrorHandler"))
                )
                .Events(e => e.DataBound("onCommentsDataBound"))
                .Events(e => e.Remove("deleteConfirmation"))

            )

<script type="text/x-kendo-tmpl" id="commentListTemplate">
     <div class="k-card">
            <div class="k-card-body k-card-horizontal k-vbox k-column" style="margin:0;padding:4px 4px 0">
                <img class='k-card-image' style="height:16px; margin-right:5px;" src="@Url.Content("~/Content/assets/images/blue-person.png")">
                <div class='commentHeader'>
                    <h6 class='k-card-subtitle'>#= UserID #</h6>
                    <div class="edit-buttons">
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#">#= kendo.ui.icon({ icon: 'pencil' }) #</a>
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#">#= kendo.ui.icon({ icon: 'x' }) #</a>
                    </div>
                    <p>
                        #: Comment #
                    </p>
                </div>
            </div>
    </div>
</script>

<script type="text/javascript">

    function onCommentsDataBound() {
        if (this.dataSource.data().length == 0) {
            $("#listView").append("<h3 style='padding: 2px 4px 0;'>No comments</h3>");
        }
    }

    function addNewClick(e) {
        var listView = $("#listView").data("kendoListView");
        listView.add();
        e.preventDefault();
    }

    function deleteConfirmation(event) {

        if (!confirm("Are you sure you want to delete this comment?"))
            event.preventDefault();
    }

</script>