@model WebApplication1.Data.Item

@{
    ViewData["Title"] = "CreateItem";
} 
<h1>CreateItem</h1> 
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateItem">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
            <div class="form-group">
                <label asp-for="ItemName" class="control-label"></label>
                <input asp-for="ItemName" class="form-control" />
                <span asp-validation-for="ItemName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CategoryID" class="control-label"></label>
                <select asp-for="CategoryID" id="ddlcategory" class="form-control" asp-items="@ViewBag.Categories">
                    <option value="0">--Select Category--</option>
                </select>
                <span asp-validation-for="CategoryID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div> 
<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content"> 
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add New Category</h4>
        <button type="button" class="close btnclose" >&times;</button>
      </div> 
      <!-- Modal body -->
      <div class="modal-body">
         <div class="form-group">
                Category Name:  <input id="txtNewCategory" class="form-control" /> 
         </div>
      </div> 
      <!-- Modal footer -->
      <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" id="btnSave" >Save</button>
        <button type="button" class="btn btn-danger btnclose" >Close</button>
      </div> 
    </div>
  </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script>
        $(function(){
            //dropdownlist chanage event
            $("#ddlcategory").change(function(){
                if($(this).val() == "new"){
                    $("#myModal").modal('show');
                    //after clicking the save button, get the new category name and using Ajax method to call the AddCategory action method.
                    $("#btnSave").click(function(){
                        var newcategory = $("#txtNewCategory").val();
                        if(newcategory.length>0){
                            $.ajax({
                                url:"/Home/AddCategory",
                                method:"Post",
                                data:{ newcategory: newcategory},
                                success: function(response){
                                    //populate the category dropdownlist with the latest data
                                    var ddlcategory = $("#ddlcategory");
                                    ddlcategory.empty().append('<option selected="selected" value="0">--select category--</option>');
                                    $.each(response, function () {
                                        ddlcategory.append($("<option></option>").val(this['value']).html(this['text']));
                                    });
                                    ddlcategory.append('<option value="new">--add new category--</option>');

                                    //clear the new category textbox and close the popup modal
                                    $("#txtNewCategory").val("");
                                    $("#myModal").modal('hide');
                                }
                            })
                        }

                    });
                }
            });
            //close the popup modal
            $(".btnclose").click(function(){
                  $("#myModal").modal('hide');
            });
        });
    </script>
}