@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 px-4 gy-5 shadow bg-body-tertiary rounded">
                        
                        <div id="questions-container">
                            
                            <h3>Create Questions</h3>
                            <div class="form-group px-4 gy-5 ">
                                @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">Remove Answer <i class="bi bi-trash3-fill"></i></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>

                        <button type="button" id="add-question-btn" class="btn btn-md btn-success mb-3"><i class="bi bi-plus-lg"></i> Add New Question </button>

                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            | <a asp-action="Index" class="btn btn-info">Back to list</a>
                        </div>
                    </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 ml-5 mr-5 p-4 px-4 gy-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"><hr class="border border-primary border-3 opacity-75">`;
                newQuestionHtml += `<label>Answer 1</label>`;
                newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/>`;
                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 += `<button type="button" class="btn btn-md btn-danger remove-answer mt-2" style="display:none"> <i class="bi bi-trash3-fill"></i></button><br><hr>`;
                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 <hr class="border border-primary border-3 opacity-75">`
                newQuestionHtml += `</div>`;
              
                $("#questions-container .form-group").append(newQuestionHtml);
                questionIndex++;
            });

            // Add answer dynamically without "Add Answer" button
            $("#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 answerGroup = $(this).closest('.answers-container').find('.answer-group:first').clone();
                answerGroup.find('input').val(''); // Clear input values

                answerGroup.find('.add-answer').hide(); // Hide the "Add Answer" button
                answerGroup.find('.remove-answer').show(); // Show the "Remove Answer" button

                answerGroup.data('answer-index', answerIndex);
                answerGroup.find('label').text(`Answer ${answerIndex + 1}`);
                answerGroup.find('input').attr('name', `Questions[${questionIndex}].Answers[${answerIndex}].Text`);
                $(this).closest('.answers-container').append(answerGroup);
            });

            // 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>


    

    
    

   
  

}