@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++)
                            {
                                 
                                <div class="question">
                                    <div class="question-separator">
                                        <!-- Container for the first half of the line -->
                                        <div class="line-container">
                                            <hr class="border border-primary border-4 opacity-75 line-start">
                                        </div>
                                        <!-- Container for the next question text -->
                                        <div class="next-question-container">
                                            <p class="next-question">Next Question</p>
                                        </div>
                                        <!-- Container for the second half of the line -->
                                        <div class="line-container">
                                            <hr class="border border-primary border-4 opacity-75 line-end">
                                        </div>
                                    </div>
                                    <input type="hidden" asp-for="Questions[i].Id" />
                                    <div class="question-title">
                                        @Model.Questions[i].Text
                                        <button type="button" class="btn btn-primary m-4 btn-sm editQuestion"><i class="bi bi-pencil-square"></i> Edit question</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 btn-sm addAnswer">Add new Answer</button>
                                    </div>
                                    <button type="button" class="btn btn-success btn-sm m-5 saveQuestion" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
                                </div>
                            }
                        </div>
                    </div>
                    <div class="m-4">
                        <button type="submit" class="btn btn-primary">Update questionnaire</button>
                        | <a asp-action="Index" class="btn btn-info">Back to list</a>
                    </div>
                   
                </form>
            </div>
        </div>
    </div>
</div>




@* <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 m-4">
                        <div id="questionsContainer" class="m-4">
                            @for (int i = 0; i < Model.Questions.Count; i++)
                            {
                                <div class="question">
                                    <input type="hidden" asp-for="Questions[i].Id" />
                                    <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 m-4">
                                        @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 mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
                                                </div>

                                            </div>
                                        }
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm addAnswer"><i class="bi bi-floppy"></i> Add new Answer</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();

                // Add a line below the editQuestion button
                // var lineHtml = '<hr class="border border-primary border-4 opacity-75 mt-3 mb-3">';
                // questionContainer.find('.editQuestion').before(lineHtml);
            });

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

                // Apply styles for success (green text color)
                titleTextElement.css('color', '#28a745'); // Set the success text color

                // Add checkmark icon before the text
                titleTextElement.prepend('<span class="check-icon">&#x2714; </span>');

                // Show the original question title
                titleTextElement.show();

                // Hide the question details
                questionContainer.find('.question-details').hide();

                // Show the edit button and hide the save button
                questionContainer.find('.editQuestion').show();
                questionContainer.find('.saveQuestion').hide();
            });

        });

        // $(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');
        //         var titleTextElement = questionContainer.find('.question-title');

        //         // Apply styles for success (green text color)
        //         titleTextElement.css('color', '#28a745'); // Set the success text color

        //         // Add checkmark icon before the text
        //         titleTextElement.prepend('<span class="check-icon">&#x2714; </span>');

        //         // Show the original question title
        //         titleTextElement.show();

        //         // Hide the question details
        //         questionContainer.find('.question-details').hide();

        //         // Show the edit button and hide the save button
        //         questionContainer.find('.editQuestion').show();
        //         questionContainer.find('.saveQuestion').hide();
        //     });

        // });

    </script>

   

   @*  <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 mt-1 removeAnswer"><i class="bi bi-trash3"></i></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();
            });



        });
    </script> *@

}