@model EditQuestionnaireViewModel

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



<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" id="customCard">
                        <div class="text-center">
                            <h4 class="text-primary font-weight-bold">Edit existing questions or add new question</h4>
                        </div>


                        <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 mt-2">
                                            <p><span class="badge badge-primary">NEXT QUESTION</span></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 shadow editQuestion"><i class="bi bi-pencil-square"></i> Edit question</button>|
                                </div> *@
                                    <div class="question-title mt-2">
                                        <span class="item-question">@Html.Raw(Model.Questions[i].Text.Length >= 30 ? Model.Questions[i].Text.Substring(0, 30) : Model.Questions[i].Text)</span>
                                        <span class="more-question" style="display:none;">@Html.Raw(Model.Questions[i].Text.Length >= 30 ? Model.Questions[i].Text.Substring(30) : "")</span>
                                        <button type="button" class="btn btn-primary btn-sm shadow read-more-btn"> Read More</button> | <button type="button" class="btn btn-primary btn-sm shadow editQuestion"><i class="bi bi-pencil-square"></i> Edit </button> |   <button type="button" class="btn btn-danger btn-sm shadow removeQuestion"><i class="bi bi-trash"></i> Remove </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 btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
                                                    </div>
                                                </div>
                                            }
                                        </div>
                                        <button type="button" class="btn btn-success ml-4 btn-sm mb-1 shadow addAnswer" id="AddnewAnswerForEdit"><i class="bi bi-plus-square"></i> Add new Answer</button>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm shadow saveQuestion" id="SaveQuestionForEdit" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
                                    <!-- Remove Question Button -->
                                    <div class="d-block">

                                        <button type="button" class="btn btn-danger btn-sm mt-3 shadow removeQuestion1" id="RemoveQuestion1ForEdit" style="display:none;"><i class="bi bi-trash"></i> Remove question</button>
                                        <button type="button" class="btn btn-danger btn-sm mt-2 shadow removeQuestion3" style="display:none;"><i class="bi bi-trash"></i> Remove question</button>

                                    </div>


                                </div>


                            }
                        </div>

                    </div>
                    <button type="button" class="btn btn-success btn-sm ml-4 mt-3 shadow" id="addNewQuestion"><i class="bi bi-plus"></i> Add New Question</button>
                    <div class="m-4">
                        <button type="submit" class="btn btn-primary btn-sm shadow">Update questionnaire</button>
                        | <a asp-action="Index" class="btn btn-info btn-sm shadow">Back to list</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this question?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger confirm-delete">Delete</button>
            </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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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" placeholder="Enter answer" />
                                    <button type="button" class="btn btn-danger btn-sm 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();
            });

            // 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();
                questionContainer.find('.removeQuestion').show();
                questionContainer.find('.removeQuestion1').show();
            });

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

                var questionText = questionContainer.find('.question-details input[name^="Questions"]').val();

                // 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();
                questionContainer.find('.removeQuestion1').hide();
                // questionContainer.find('.removeQuestion3').show();
                var successMessage = $('<div class="alert alert-success" role="alert">Question updated successfully!</div>');
                $(this).closest('.question').find('.question-title').prepend(successMessage);
                successMessage.fadeIn();


            });

            // Function to remove a question
            $(document).on('click', '.removeQuestion, .removeQuestion1, .removeQuestion3', function () {
                // Store a reference to the question being removed
                var questionToRemove = $(this).closest('.question');

                // Show the confirmation modal
                $('#confirmDeleteModal').modal('show');

                // Handle deletion confirmation
                $('.confirm-delete').click(function () {
                    // Remove the question
                    questionToRemove.remove();

                    // Hide the modal after deletion
                    $('#confirmDeleteModal').modal('hide');
                });
            });
            // $(document).on('click', '.removeQuestion1', function () {
            //     $(this).closest('.question').remove();
            // });
            // $(document).on('click', '.removeQuestion3', function () {
            //     $(this).closest('.question').remove();
            // });

            // Function to add a new question
            // Function to add a new question
            // Function to add a new question


            $('.read-more-btn').click(function () {
                var $questionTitle = $(this).closest('.question-title');
                var $moreQuestion = $questionTitle.find('.more-question');
                var $readMoreBtn = $(this);

                if ($moreQuestion.is(':visible')) {
                    $moreQuestion.hide(); // Hide the "Read More" text
                    $readMoreBtn.text('Read More'); // Change button text to "Read More"
                } else {
                    $moreQuestion.show(); // Show the "Read More" text
                    $readMoreBtn.text('Read Less'); // Change button text to "Read Less"
                }
            });
            // Function to add a new question
            $('#addNewQuestion').click(function () {
                var newQuestionIndex = $('.question').length;

                var questionHtml = `
                            <div class="question">
                                <!-- Question separator -->
                                <div class="question-separator">
                                    <div class="line-container">
                                        <hr class="border border-primary border-4 opacity-75 line-start">
                                    </div>
                                    <div class="next-question-container mt-2">
                                        <p><span class="badge badge-primary">NEXT QUESTION</span></p>
                                    </div>
                                    <div class="line-container">
                                        <hr class="border border-primary border-4 opacity-75 line-end">
                                    </div>
                                </div>
                                <!-- Question title with success message -->
                                <div class="question-title" style="display:none;">
                                   
                                    <button type="button" class="btn btn-primary btn-sm ml-5 mt-2 editQuestion"><i class="bi bi-floppy"></i> Edit question</button>|
                                    <button type="button" class="btn btn-danger btn-sm mt-2 shadow removeQuestion3"><i class="bi bi-trash"></i> Remove question</button>
                                </div>
                                <!-- Question details -->
                                <div class="question-details">
                                    <div class="form-group">
                                        <label class="control-label">Question</label>
                                        <input type="text" class="form-control" name="Questions[${newQuestionIndex}].Text" placeholder="Enter question text"/>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">Question Type</label>
                                        <select class="form-control" name="Questions[${newQuestionIndex}].Type">
                                            <option value="0">Text</option>
                                            <option value="1">CheckBox</option>
                                            <option value="2">TrueFalse</option>
                                            <option value="3">Multiple_choice</option>
                                            <option value="4">Rating</option>
                                            <option value="5">Likert</option>
                                            <option value="6">Matrix</option>
                                            <option value="7">Open_ended</option>
                                            <option value="8">Demographic</option>
                                            <option value="9">Ranking</option>
                                            <option value="10">Image</option>
                                            <option value="11">Slider</option>
                                        </select>
                                    </div>
                                    <div class="answers">
                                        <div class="form-group">
                                            <label class="control-label">Answer</label>
                                            <input type="text" class="form-control" name="Questions[${newQuestionIndex}].Answers[0].Text" placeholder="Enter answer"/>
                                            <button type="button" class="btn btn-danger btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-success btn-sm ml-5 shadow  addAnswer" id="AddnewAsnwerForCreatr"><i class="bi bi-plus-square"></i> Add new Answer</button>
                                </div>
                                <!-- Save and remove buttons -->
                                
                                    <button type="button" class="btn btn-primary btn-sm ml-5 mt-2 shadow saveQuestion"><i class="bi bi-floppy"></i> Save question</button>
                                    <div class="d-block">
                                        <button type="button" class="btn btn-danger ml-5 btn-sm mt-3 shadow removeQuestion1"><i class="bi bi-trash"></i> Remove question</button>
                                    </div>
                               
                            </div>`;

                // Append the new question HTML to the container
                $('#questionsContainer').append(questionHtml);

                // Show success message
                // var successMessage = $('<div class="alert alert-success" role="alert">Question created successfully!</div>');
                // $('.question-title').prepend(successMessage);
                // successMessage.fadeIn().delay(2000).fadeOut();
            });


        });
    </script>


  



}