@model FindRecipeProject.Models.Recipe

@{
    ViewBag.Title = "Create";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var counter = 2;

        $("#addbtn").click(function () {

            if (counter > 10) {
                alert("You can Select Only 10  Subjects \n In one Session ");
                return false;
            }

            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
            newTextBoxDiv.after().html('<label>Field #' + counter + ' : </label>' +
                '<input type="text" name="TextBox A ' + counter +
                ' value="" id="subj' + counter + '">' + '&nbsp;' + '<input type="text" name="TextBox B ' + counter +
                ' value="" size="5"  id="fee' + counter + '">'



                                      );


            newTextBoxDiv.appendTo("#TextBoxesGroup");

            counter++;
        });

        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;

            $("#TextBoxDiv" + counter).remove();
        });

        $("#getButtonValue").click(function () {

            var msg = '';
            for (i = 1; i < counter; i++) {
                msg += "subj" + i + " : " + $('#subj' + i).val();
                msg += " ";
                msg += "fee" + i + " : " + $('#fee' + i).val();
                msg += ", ";
            }
            alert(msg);
        });

    });
</script>







<h2>Create</h2>





@using (Html.BeginForm("Create", "Recipe", FormMethod.Post, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Recipe</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.RecipeName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.RecipeName)
            @Html.ValidationMessageFor(model => model.RecipeName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.RecipeTime)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.RecipeTime)
            @Html.ValidationMessageFor(model => model.RecipeTime)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserId, "userProfile")
        </div>
        <div class="editor-field">
            @Html.DropDownList("UserId", String.Empty)
            @Html.ValidationMessageFor(model => model.UserId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Picture)
        </div>
        <div class="editor-field">
            <input name="ImageFile" type="file" />
            @Html.ValidationMessageFor(model => model.Picture)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>


<input type='button' value='Add Subject' id='addbtn'>
<input type='button' value='Remove Subject' id='removeButton'>
<input type="button" id="getButtonValue" value="Get TextBox Value">
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Subject 1 :</label>
        <input class="textbox" type='text' name="subj1" id="subj1" />&nbsp;
        <input class="textbox" type='text' size="5" name="fee1" id="fee1" />
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}