@model IEnumerable<QuestionnaireViewModel>

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


<div class="container-fluid d-flex justify-content-center">

    <partial name="_Notification" />

    <div class="card bg-default mb-3 p-4 shadow ">
        <div class="card-header">Questionnaire</div>
        <div class="card-body">
            <h4 class="card-title">Questionnaire list</h4>
            <p>
                <a asp-action="Create" class="btn btn-primary"><span><i class="bi bi-plus-square-fill"></i></span> Create New</a>
            </p>
            <table class="table table-responsive table-light table-hover ">
                <thead class="w-auto">
                    <tr>

                        <th scope="col">Id</th>
                        <th scope="col">Title</th>
                        <th scope="col">Description</th>
                        <th scope="col">Total Questions</th>
                        <th scope="col"> <span class="badge badge-primary">Questions</span> | <span class="badge badge-info">Type</span> | <span class="badge badge-success">Answers </span></th>
                       
                        <th scope="col" class="d-flex justify-content-end">Action</th>
                    </tr>
                </thead>
                <tbody class="w-auto">
                    @foreach (var item in Model)
                    {
                        <tr class="table-secondary">

                            <td>@item.Id</td>
                      @*       <td> @item.Title</td> *@
                                <td>
                                <div class="title-container">
                                    <div class="title-text">
                                        <span class="item-title">@Html.Raw(item.Title.Length >= 30 ? item.Title.Substring(0, 30) : item.Title)</span>
                                        <span class="more-title" style="display:none;">@(item.Title.Length > 30 ? item.Title.Substring(30) : "")</span>
                                        <a href="#" id="ReadMore" class="read-more-title-btn">Read More</a>
                                    </div>
                                </div>
                                </td>
                           
                      @*       <td>@Html.Raw(item.Description)</td> *@
                            <td>
                                <!-- Display only a portion of the description initially -->
                                <div class="description-container">
                                    <div class="description-text">
                                        <span class="item-description">@Html.Raw(item.Description.Length >= 30 ? item.Description.Substring(0, 30) : item.Title)</span>
                                        <span class="more-text" style="display:none;">@(item.Description.Length > 30 ? item.Description.Substring(30) : "")</span>
                                        <a href="#" id="ReadMore" class=" read-more-btn">Read More</a>
                                    </div>
                                </div>
                            </td>

                            <td>
                                @* <button type="button" class="btn btn-primary btn-sm">
                                   
                                </button> *@
                                <span class="badge shadow rounded text-bg-primary p-2">
                                    Questions <span class="badge text-bg-secondary shadow rounded p-1">@item.Questions?.Count()</span>
                                </span>
                               
                            </td>
                            <td class="h5">
                                
                                @foreach (var question in item.Questions.Take(1))
                                {
                                    
                                     <span class="badge p-1 m-1 bg-primary shadow-sm"> Question:@question.Text</span>
                                    <span class="badge p-1 m-1 bg-info shadow-sm">Type: @question.Type</span>
                                    foreach (var answer in question.Answers)
                                    {
                                        <span class="badge p-1 m-1 bg-success shadow-sm"> Asnwer:@answer.Text</span>

                                        
                                    }
                               
                                }
                              
                            </td>
 
                            <td class="d-flex justify-content-end">
                                <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i> Delete</a> |
                                <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary btn-sm"><i class="bi bi-pencil-square"></i> Edit</a>|
                                <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info btn-sm"><i class="bi bi-pencil-square"></i> Details</a> |
                                <a asp-action="SendQuestionnaire" asp-route-id="@item.Id" class="btn btn-success btn-sm"><i class="bi bi-pencil-square"></i> Send</a>
                                
                            </td>
                        </tr>
                    }

                </tbody>
            </table>

        </div>
    </div>
</div>


@section Scripts{
    <script>
        $(document).ready(function () {
            $('.read-more-btn').click(function () {
                var $descriptionText = $(this).closest('.description-container').find('.description-text');
                var $moreText = $descriptionText.find('.more-text');
                var $toggleMore = $descriptionText.find('.toggle-more');

                if ($moreText.is(':visible')) {
                    $moreText.slideUp();
                    $toggleMore.fadeIn();
                } else {
                    $moreText.slideDown();
                    $toggleMore.fadeOut();
                }

                $(this).text(function (i, text) {
                    return text === "Read More" ? "Read Less" : "Read More";
                });
            });
            $('.read-more-title-btn').click(function () {
                var $titleText = $(this).closest('.title-container').find('.title-text');
                var $moreTitle = $titleText.find('.more-title');
                var $toggleMore = $titleText.find('.toggle-more');

                if ($moreTitle.is(':visible')) {
                    $moreTitle.slideUp();
                    $toggleMore.fadeIn();
                } else {
                    $moreTitle.slideDown();
                    $toggleMore.fadeOut();
                }

                $(this).text(function (i, text) {
                    return text === "Read More" ? "Read Less" : "Read More";
                });
            });
          
        });
    </script>


}