@model UserResponsesViewModel

@{
    ViewData["Title"] = "User Responses";
}



<style>
    .stepper-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: relative;
    }

    .stepper-item {
        display: flex;
        align-items: flex-start;
        position: relative;
        padding-left: 120px;
    }

        .stepper-item::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #007bff;
        }

    .step-counter {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: #007bff;
        color: white;
        border-radius: 50%;
        font-size: 14px;
        font-weight: bold;
    }

    .step-content {
        flex-grow: 1;
    }

    .step-header {
        margin-bottom: 10px;
    }
</style>

<div class="container-fluid mt-3">
    <p>
        <a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
    </p>

    <div class="card p-5 m-3 shadow">
        <div class="bd-callout bd-callout-primary">
            <h4 class="text-primary">User Responses</h4>
            <text>@Model.UserName (@Model.UserEmail)</text>
        </div>

        <!-- Stepper -->
        <div class="stepper-wrapper">
            @foreach (var response in Model.Responses)
            {
                <div class="stepper-item">
                    <div class="step-counter">
                        <span class="badge bg-primary p-3 shadow">@response.Questionnaire.Title</span>
                    </div>
                    <div class="step-content">

                        <div class="card p-4">
                            <div class="step-header">
                                <h6>Survey: @response.Questionnaire.Title</h6>
                                <p>Submitted on: @response.SubmissionDate</p>
                            </div>

                            <!-- Collapsible button -->
                            <button class="btn btn-primary btn-sm mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Id">
                                View Responses
                            </button>

                            <!-- Collapsible content -->
                            <div class="collapse mt-3" id="collapseResponse-@response.Id">
                                <table class="table table-responsive w-100 d-block d-md-table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Question</th>
                                            <th>Response</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var detail in response.ResponseDetails)
                                        {
                                            <tr>
                                                <td>@detail.Question.Text</td>
                                                <td>
                                                    @if (detail.QuestionType == QuestionType.Text || detail.QuestionType == QuestionType.Slider || detail.QuestionType == QuestionType.Open_ended)
                                                    {
                                                        <ul class="list-group">
                                                            <li class="list-group-item d-flex justify-content-between align-items-center border-1">
                                                                Question type
                                                                <span class="badge text-bg-primary rounded-pill p-1">@detail.QuestionType</span>
                                                            </li>
                                                        </ul>
                                                        <br />
                                                        <ul class="list-group">
                                                            <li class="list-group-item d-flex justify-content-between align-items-center border-1">
                                                                Answer
                                                                <span class="badge text-bg-primary rounded-pill p-1">@detail.TextResponse</span>
                                                            </li>
                                                        </ul>
                                                    }
                                                    else
                                                    {
                                                        <ul class="list-group">
                                                            <li class="list-group-item d-flex justify-content-between align-items-center border-1">
                                                                Question type
                                                                <span class="badge text-bg-primary rounded-pill p-1">@detail.QuestionType</span>
                                                            </li>
                                                        </ul>
                                                        <br />
                                                        <ul class="list-group">
                                                            @foreach (var answer in detail.ResponseAnswers)
                                                            {
                                                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                    Answer
                                                                    <span class="badge text-bg-primary rounded-pill p-1">@detail.Question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId)?.Text</span>
                                                                </li>
                                                            }
                                                        </ul>
                                                    }
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                      
                    </div>
                </div>
            }
        </div>
    </div>
</div>


@* <div class="container-fluid mt-3">
    <p>
        <a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
    </p>

    <div class="card p-5 m-3 shadow">
        <div class="bd-callout bd-callout-primary">
            <h4 class="text-primary">User Responses</h4>
            <text>@Model.UserName (@Model.UserEmail)</text>
        </div>
      
        <div>
            @foreach (var response in Model.Responses)
            {
                <div class="container card mt-4 p-3">
                    <div>
                        <h6>Survey: @response.Questionnaire.Title</h6>
                        <p>Submitted on: @response.SubmissionDate</p>

                        <!-- Collapsible button -->
                        <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Id">
                            View Responses
                        </button>

                        <!-- Collapsible content -->
                        <div class="collapse mt-3" id="collapseResponse-@response.Id">
                            <table class="table table-responsive w-100 d-block d-md-table table-hover">
                                <thead>
                                    <tr>
                                        <th>Question</th>
                                        <th>Response</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var detail in response.ResponseDetails)
                                    {
                                        <tr>
                                            <td>@detail.Question.Text</td>
                                            <td>
                                                @if (detail.QuestionType == QuestionType.Text || detail.QuestionType == QuestionType.Slider || detail.QuestionType == QuestionType.Open_ended)
                                                {
                                                    <ul class="list-group">
                                                        <li class="list-group-item d-flex justify-content-between align-items-center border-1">
                                                            Question type
                                                            <span class="badge text-bg-primary rounded-pill p-1s">@detail.QuestionType</span>
                                                        </li>

                                                    </ul>
                                                    <br />
                                                   
                                                    <ul class="list-group">
                                                        <li class="list-group-item d-flex justify-content-between align-items-center border-1">

                                                            Answer
                                                            <span class="badge text-bg-primary rounded-pill p-1">@detail.TextResponse</span>
                                                        </li>
                                                    </ul>
                                                 
                                                }
                                                else
                                                {

                                                    <ul class="list-group">
                                                        <li class="list-group-item d-flex justify-content-between align-items-center border-1">
                                                            Question type
                                                            <span class="badge text-bg-primary rounded-pill p-1">@detail.QuestionType</span>
                                                        </li>
                                                       
                                                    </ul>
                                                    <br />

                                                    <ul class="list-group">

                                                        @foreach (var answer in detail.ResponseAnswers)
                                                        {
                                                          

                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                Answer
                                                                <span class="badge text-bg-primary rounded-pill p-1">@detail.Question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId)?.Text</span>
                                                            </li>
                                                        }

                                                    </ul>

                                                }
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div> *@

@section Scripts {
    <!-- Include Bootstrap 5 JS for collapse functionality -->
  
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var collapseElements = document.querySelectorAll('[data-bs-toggle="collapse"]');

            collapseElements.forEach(function (element) {
                var targetId = element.getAttribute('data-bs-target');
                var targetElement = document.querySelector(targetId);

                // Initialize button text and color based on current state
                if (targetElement.classList.contains('show')) {
                    element.textContent = 'Hide Responses';
                    element.classList.remove('btn-primary');
                    element.classList.add('btn-info');
                } else {
                    element.textContent = 'View Responses';
                    element.classList.remove('btn-info');
                    element.classList.add('btn-primary');
                }

                targetElement.addEventListener('shown.bs.collapse', function () {
                    element.textContent = 'Hide Responses';
                    element.classList.remove('btn-primary');
                    element.classList.add('btn-info');
                });

                targetElement.addEventListener('hidden.bs.collapse', function () {
                    element.textContent = 'View Responses';
                    element.classList.remove('btn-info');
                    element.classList.add('btn-primary');
                });
            });
        });
    </script>
}