@model QuestionnaireViewModel

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



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


    <div class="card ">
        <div class="card-header">
            Details
        </div>
       
        <div class="card-body shadow rounded ">
            <div class="card-title">

               
              <h4>Questionnaire details</h4>
              <br />

              <div>
                 <span class="badge badge-primary shadow m-1 p-2">Questionnaire</span>
              </div>
                <div>
                    <span class="badge badge-success shadow m-1 p-2">Question</span>
                </div>
                <div>
                    <span class="badge badge-info shadow m-1 p-2">Answer</span>
                </div>
              
            </div>
            <table class="table table-bordered  table-responsive  table-hover   ">
                <thead>
                    <tr >
                        <th scope="col" class="text-primary h5">Id</th>
                        <th scope="col" class="text-primary h5">Questionnaire</th>
                        <th scope="col" class="text-primary h5">Description</th>
                        <th scope="col" class="text-success h5 ">Questions</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><span class="badge p-2 m-1 bg-primary shadow-sm rounded">@Model.Id</span></th>
                        <th scope="row">
                            <div class="title-container">
                                <div class="title-text">
                                   
                                        <span class="item-title ">@Html.Raw(Model.Title.Length >= 30 ? Model.Title.Substring(0, 30) : Model.Title)</span>
                                        <span class="more-title " style="display:none;">@(Model.Title.Length > 30 ? Model.Title.Substring(20) : "")</span>
                                        <a href="#" id="ReadMore" class="read-more-title-btn ">Read More</a>
                                   
                                  
                                </div>
                            </div>
                        </th>
                        <th scope="row">
                            <div class="description-container">
                                <div class="description-text">
                                
                                        <span class="item-description">@Html.Raw(Model.Description.Length >= 30 ? Model.Description.Substring(0, 30) : Model.Title)</span>
                                        <span class="more-text " style="display:none;">@(Model.Description.Length > 30 ? Model.Description.Substring(30) : "")</span>
                              
                                    <a href="#" id="ReadMore" class="read-more-btn ">Read More</a>
                                </div>
                            </div>
                        </th>
                       
                        <td class="h6">
                            <table>
                                <tr >
                                    <th class="text-success">Id</th>
                                    <th class="text-success">Question</th>
                                    <th class="text-success">Question Type</th>
                                    <th class="text-info">Answers</th>
                                </tr>

                                @foreach (var question in Model.Questions)
                                {
                                    <tr>
                                        <td> <span class="badge p-2 m-1 bg-success ">@question.Id</span></td>
                                        <td>
                                            <div class="question-container">
                                                <div class="question-text">
                                                    <span class="badge badge-success p-2">
                                                        <span class="item-question">@Html.Raw(question.Text.Length >= 30 ? question.Text.Substring(0, 30) : question.Text)</span>
                                                        <span class="more-question" style="display:none;">@(question.Text.Length > 30 ? question.Text.Substring(30) : "")</span>
                                                        <a href="#" id="ReadMore" class="read-more-btn-question mt-1 text-white ">Read More</a>
                                                    </span>
                                                   

                                                   
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge p-2 m-1 bg-success ">@question.Type</span>
                                        </td>
                                        <td>
                                            <table class="table-borderless">
                                               <tr>
                                                    <th class="text-info">Id</th>
                                                    <th class="text-info">Answer</th>
                                               </tr>
                                                @foreach (var answer in question.Answers)
                                                {
                                                   <tr>
                                                        <td>
                                                            <span class="badge p-2 m-1 bg-info shadow-sm">@answer.Id</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge p-2 m-1 bg-info shadow-sm">@answer.Text</span>
                                                        </td>
                                                   </tr>
                                                       
                                                  
                                                }
                                            </table>
                                        </td>
                                    </tr>
                                }
                            </table>

                           
                        </td>

                    </tr>
                  
                </tbody>
              
            </table>
            <footer>
                <a class="btn btn-primary" asp-action="Index">Back to List</a>
               
            </footer>
        </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";
                });

            });
            $('.read-more-btn-question').click(function () {
                var $titleText = $(this).closest('.question-container').find('.question-text');
                var $moreTitle = $titleText.find('.more-question');
                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>

}