@model EditQuestionnaireViewModel

@{
    ViewData["Title"] = "Edit";
}
<style>
    .question-separator {
        display: flex;
        align-items: center;
    }

    .line-container {
        flex-grow: 1;
    }

    .next-question-container {
        margin: 0 10px; /* Adjust margin as needed */
        text-align: center;
    }

    .next-question {
        margin: 0;
    }


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

            <div class="row">
                <form asp-action="Edit">
                    <input type="hidden" asp-for="Id" />
                    <div class="form-group">
                        <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="form-group">
                        <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="card shadow rounded p-4">
                        <div id="questionsContainer">
                            @for (int i = 0; i < Model.Questions.Count; i++)
                            {
                                <hr />
                                <div class="question">
                                    <input type="hidden" asp-for="Questions[i].Id" />
                                    <div class="question-title">
                                        @Model.Questions[i].Text
                                        <button type="button" class="btn btn-primary editQuestion">Edit</button>
                                    </div>
                                    <div class="question-details" style="display: none;">
                                        <div class="form-group">
                                            <label asp-for="Questions[i].Text" class="control-label"></label>
                                            <input asp-for="Questions[i].Text" class="form-control" />
                                            <span asp-validation-for="Questions[i].Text" class="text-danger"></span>
                                        </div>
                                        <div class="form-group">
                                            <label asp-for="Questions[i].Type" class="control-label"></label>
                                            <select asp-for="Questions[i].Type" asp-items="@ViewBag.QuestionTypes" class="form-control"></select>
                                            <span asp-validation-for="Questions[i].Type" class="text-danger"></span>
                                        </div>
                                        <div class="answers">
                                            @for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
                                            {
                                                <div class="answer">
                                                    <input type="hidden" asp-for="Questions[i].Answers[j].Id" />
                                                    <div class="form-group">
                                                        <label asp-for="Questions[i].Answers[j].Text" class="control-label"></label>
                                                        <input asp-for="Questions[i].Answers[j].Text" class="form-control" />
                                                        <span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
                                                        <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
                                                    </div>
                                                </div>
                                            }
                                        </div>
                                        <button type="button" class="btn btn-primary addAnswer">Add Answer</button>
                                    </div>
                                    <button type="button" class="btn btn-success saveQuestion" style="display: none;">Save</button>
                                </div>
                            }
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">Update</button>
                    | <a asp-action="Index" class="btn btn-info">Back to list</a>
                </form>
            </div>
        </div>
    </div>
</div>








@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>
        $(document).ready(function () {
            // Function to add a new answer
            $(document).on('click', '.addAnswer', function () {
                var questionContainer = $(this).closest('.question');
                var newQuestionIndex = questionContainer.index();

                // Correctly find the length of answers for the specific question
                var newAnswerIndex = questionContainer.find('.answers .form-group').length;

                var answerHtml = `
                        <div class="form-group">
                            <label class="control-label">Answer</label>
                            <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
                            <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
                        </div>`;

                // Append the new answer to the specific question
                questionContainer.find('.answers').append(answerHtml);
            });

            // Function to remove an answer (including dynamically added answers)
            $(document).on('click', '.removeAnswer', function () {
                $(this).closest('.form-group').remove();
            });

            // Function to toggle question edit mode
            $(document).on('click', '.editQuestion', function () {
                var questionContainer = $(this).closest('.question');
                questionContainer.find('.question-title').hide();
                questionContainer.find('.question-details').show();
                questionContainer.find('.editQuestion').hide();
                questionContainer.find('.saveQuestion').show();
            });

            // Function to save question details
            $(document).on('click', '.saveQuestion', function () {
                var questionContainer = $(this).closest('.question');
                questionContainer.find('.question-title').show();
                questionContainer.find('.question-details').hide();
                questionContainer.find('.editQuestion').show();
                questionContainer.find('.saveQuestion').hide();
            });
        });


    </script>




    @* this script is working for adding mutiple answers for a question *@


       @* <script>
        $(document).ready(function () {
            // Function to add a new answer
            $(document).on('click', '.addAnswer', function () {
                var questionContainer = $(this).closest('.question');
                var newQuestionIndex = questionContainer.index();
                var newAnswerIndex = questionContainer.find('.answers .form-group').length; // Correct way to find the length

                var answerHtml = `
                    <div class="form-group">
                        <label class="control-label">Answer Text</label>
                        <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
                    </div>`;

                $(this).siblings('.answers').append(answerHtml);
            });

            // Function to remove an answer
            $(document).on('click', '.removeAnswer', function () {
                $(this).closest('.form-group').remove();
            });
        });
    </script>
    
} *@
}