
@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">
                <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  shadow remove-answer">Remove Answer</button>
                                                </div>
                                            }
                                            <button type="button" class="btn btn-sm btn-success shadow add-answer"><i class="bi bi-plus-square"></i> Create Answer</button>
                                            <input type="hidden" name="Questions[@i].Answers" />
                                        </div>
                                        <button type="button" class="btn btn-sm p-3 btn-danger  shadow remove-question">Remove Question <i class="bi bi-trash3-fill"></i></button> |
                                        <button type="button" class="btn btn-sm btn-primary  shadow m-3 save-question"><i class="bi bi-floppy"></i> Save Question</button>
                                        <button type="button" class="btn btn-sm btn-primary  shadow edit-question" style="display: none;"><i class="bi bi-pencil-square"></i> Edit Question</button>
                                    </div>
                                }
                            </div>
                        </div>
                        <button type="button" id="add-question-btn" class="btn btn-md btn-success shadow"><i class="bi bi-plus-square"></i> Create New Question</button>
                    </div>
                    <div class="mt-3 card-footer">
                        
                        <button type="submit" class="btn btn-primary  shadow"> <i class="bi bi-floppy2-fill"></i> Save questionnaire</button>
                        | <a asp-action="Index" class="btn btn-info  shadow">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" placeholder="new question"></textarea>
                        <br>
                        <label class=h5>Select question type</label>
                        <select name="Questions[${questionIndex}].Type" class="form-control question-type-${questionIndex}">`;

                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"><hr class="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 shadow 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-sm btn-danger shadow m-4 remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
                newQuestionHtml += `<button type="button" class="btn btn-sm btn-primary shadow save-question"><i class="bi bi-floppy"></i> Save Question</button>`;
                newQuestionHtml += `<button type="button" class="btn btn-sm btn-info shadow edit-question" style="display: none;"><i class="bi bi-pencil-square"></i> Edit 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 btn-sm mt-1 remove-answer"><i class="bi bi-trash3-fill"></i></button>
                        <br>
                    </div>`;

                $(this).before(answerGroupHtml);
                $(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
            $(document).on("click", ".remove-question", function () {
                $(this).closest('.question-group').remove();
            });

            // Save question

            $("#questions-container").on("click", ".save-question", function () {
                var questionGroup = $(this).closest('.question-group');
                questionGroup.find('.edit-question').show();
                questionGroup.find('.remove-question').hide();
                questionGroup.find('.save-question').hide();
                questionGroup.find('.form-control').attr('disabled', true); // Disable question text and answer input fields
                questionGroup.find('.question-type').attr('disabled', true); // Disable question type select field
                questionGroup.find('.answers-container').slideUp();
                questionGroup.addClass('collapsed');

                // Show success message
                var successMessage = $('<div class="alert alert-success" role="alert">Question created successfully!</div>');
                questionGroup.prepend(successMessage);
            });

            // Function to edit a question
            $("#questions-container").on("click", ".edit-question", function () {
                var questionGroup = $(this).closest('.question-group');
                questionGroup.find('.save-question').show();
                questionGroup.find('.remove-question').show();
                questionGroup.find('.edit-question').hide();
                questionGroup.find('.form-control').attr('disabled', false); // Enable question text and answer input fields
                questionGroup.find('.question-type').attr('disabled', false); // Enable question type select field
                questionGroup.find('.answers-container').slideDown();
                questionGroup.removeClass('collapsed');

                // Remove any existing success message
                questionGroup.find('.alert-success').remove();
            });

            // Enable form fields before form submission
            $("form").submit(function () {
                $(this).find('.form-control').prop('disabled', false); // Enable all form fields before submission
            });

        });
    </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-${questionIndex}">`;

            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"><hr class="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 shadow"><i class="bi bi-plus-lg"></i> create 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-sm btn-danger m-4  shadow remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
            newQuestionHtml += `<button type="button" class="btn btn-sm btn-primary  shadow save-question">Save Question</button>`;
            newQuestionHtml += `<button type="button" class="btn btn-sm btn-secondary  shadow edit-question" style="display: none;">Edit 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 btn-sm mt-1  shadow remove-answer"><i class="bi bi-trash3-fill"></i></button>
                    <br>
                </div>`;

            $(this).before(answerGroupHtml);
            $(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
        $(document).on("click", ".remove-question", function () {
            $(this).closest('.question-group').remove();
        });

        // Save question
        $("#questions-container").on("click", ".save-question", function () {
            var questionGroup = $(this).closest('.question-group');
            questionGroup.find('.edit-question').show();
            questionGroup.find('.remove-question').hide();
            questionGroup.find('.save-question').hide();
            questionGroup.find('.question-type').prop('disabled', true).hide(); // Hide question type
            questionGroup.find('textarea').prop('disabled', true);
            questionGroup.find('.answers-container').slideUp();
            questionGroup.addClass('collapsed');
        });

        // Edit question
        $("#questions-container").on("click", ".edit-question", function () {
            var questionGroup = $(this).closest('.question-group');
            questionGroup.find('.save-question').show();
            questionGroup.find('.remove-question').show();
            questionGroup.find('.edit-question').hide();
            questionGroup.find('.question-type').prop('disabled', false).show(); // Show question type
            questionGroup.find('textarea').prop('disabled', false);
            questionGroup.find('.answers-container').slideDown();
            questionGroup.removeClass('collapsed');
        });
    });
</script>
 *@


} 