SurveyVista/Web/Areas/Admin/Views/Questionnaire/Create.cshtml

@model QuestionnaireViewModel

@{
    ViewData["Title"] = "Create";
}

<div class="container mt-4">
    <div class="card justify-content-center p-4 shadow rounded">
        <div class="card-body">
            <h5 class="card-title h5">Create questionnaire</h5>

            <div class="row ">
                <!-- 12 columns for textboxes -->

                <form asp-action="Create" asp-controller="Questionnaire">
                    <div asp-validation-summary="All" class="text-danger"></div>

                    <div class="mb-3 col-12">
                        <label asp-for="Title" class="control-label"></label>
                        <input asp-for="Title" class="form-control" />
                        <span asp-validation-for="Title" class="text-danger"></span>
                    </div>
                    <div class="mb-3 col-12">
                        <label asp-for="Description" class="control-label"></label>
                        <textarea asp-for="Description" class="form-control"></textarea>
                        <span asp-validation-for="Description" class="text-danger"></span>
                    </div>
                    <div class="container p-5 shadow bg-body-tertiary rounded">
                        
                        <div id="questions-container" class="mx-md-3 mx-lg-3 px-md-3 px-lg-3 mx-sm-0 px-sm-0">
                            
                            <h3 class="text-primary font-weight-bold">Create Questions</h3>
                           
                            <div class="form-group">
                               

                                @for (int i = 0; i < Model.Questions?.Count; i++)
                                {
                                    <div class="question-group" data-question-index="@i">
                                        <label>Question @(i + 1)</label>
                                        <textarea name="Questions[@i].Text" class="form-control">@Model.Questions[i].Text</textarea>
                                        
                                        <select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type">
                                            
                                            <!-- Include options for question types... -->
                                            <div class="container-sm"></div>
                                        </select>
                                        <div class="answers-container">
                                            <label>Answers:</label>
                                            @for (int j = 0; j < Model.Questions?[i].Answers?.Count; j++)
                                            {
                                                <div class="answer-group">
                                                    <input type="text" name="Questions[@i].Answers[@j].Text" class="form-control" value="@Model.Questions?[i]?.Answers?[j]?.Text" />
                                                    <button type="button" class="btn btn-sm btn-danger remove-answer"> </button>
                                                </div>
                                            }
                                            <button type="button" class="btn btn-sm btn-success add-answer"><i class="bi bi-plus-lg"></i> Add Answer</button>
                                            <!-- Add a hidden field to address the required field validation -->
                                            <input type="hidden" name="Questions[@i].Answers" />
                                        </div>
                                        
                                        <button type="button" class="btn btn-sm btn-danger remove-question">Remove Question <i class="bi bi-trash3-fill"></i></button>
                                        
                                    </div>
                                  
                                }
                            </div>
                        </div>

                      
                        
                      
                    </div>

                    <div class="mt-3 card-footer">
                        <button type="button" id="add-question-btn" class="btn btn-md btn-success"><i class="bi bi-plus-lg"></i>Add New Question</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                        | <a asp-action="Index" class="btn btn-info">Back to list</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<hr />




@section Scripts {

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
    <script>
        CKEDITOR.replace("Description");
    </script>

    @{
            <partial name="_ValidationScriptsPartial" />
    }

     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            var questionIndex = @Model.Questions?.Count;

            $("#add-question-btn").click(function () {
                var newQuestionHtml = `
                        <div class="question-group" data-question-index="${questionIndex}">
                            <label>Question ${questionIndex + 1}</label>
                            <textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
                            <br>
                             <label class=h5>Select question type</label>
                            <select name="Questions[${questionIndex}].Type" class="form-control question-type">`;

                                var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));

                                for (var i = 0; i < questionTypes.length; i++) {
                                    newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
                                }

                newQuestionHtml += `</select>`;

                // Add answers input fields

                newQuestionHtml += `<div class="container-ms mx-5 py-2 px-5 ">`;
                newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
                newQuestionHtml += `<label class="h3">Create Answers:</label>`;
                newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hrclass="border border-primary border-1 opacity-35">`;
                newQuestionHtml += `<label>Answer 1</label>`;
                newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/><br>`;
                
                newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2"><i class="bi bi-plus-lg"></i> Add Answer</button>`;
                newQuestionHtml += `<hr class="border m-2">`
                newQuestionHtml += `</div> `;
                newQuestionHtml += `</div>`;
                newQuestionHtml += `</div> `;
               
                // Add Remove Question button
                newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
                newQuestionHtml += `<hr class="border border-primary border-4 opacity-75 mb-5">`
                newQuestionHtml += `</div>`;
               
                $("#questions-container .form-group").append(newQuestionHtml);
                questionIndex++;
            });
            $("#questions-container").on("click", ".add-answer", function () {
                var questionIndex = $(this).closest('.answers-container').data('question-index');
                var answerIndex = $(this).closest('.answers-container').find('.answer-group').length;

                var answerGroupHtml = `
                <div class="answer-group">
                <br>
                    <label class="control-label">Answer ${answerIndex + 1}</label>
                            <input type="text" class="form-control" name="Questions[${questionIndex}].Answers[${answerIndex}].Text" placeholder="new answer"/>
                            <button type="button" class="btn btn-danger remove-answer"><i class="bi bi-trash3-fill"></i></button>
                            <br>
                            
                </div>`;

                // Append the new answer group before the "Add Answer" button
                $(this).before(answerGroupHtml);

                // Show the "Remove Answer" button only for the newly added answer group
                $(this).prev('.answer-group').find('.remove-answer').show();
            });








            // Remove answer dynamically
            $("#questions-container").on("click", ".remove-answer", function () {
                $(this).closest('.answer-group').remove();
            });

            // Remove question dynamically
            $("#questions-container").on("click", ".remove-question", function () {
                $(this).closest('.question-group').remove();
            });
        });
    </script>


    

    
    

   
  

}