@using Newtonsoft.Json
@model ResponseQuestionnaireWithUsersViewModel

@{
    ViewData["Title"] = "Detailed Survey Analysis";
}

<style>
    .progress {
        position: relative;
        height: 30px; /* Increased height for better visibility */
    }

    .progress-text {
        position: absolute;
        width: 100%;
        text-align: center;
        color: black; /* Ensures text is visible on light backgrounds */
        font-weight: bold;
        line-height: 30px; /* Align text vertically */
    }

    #Errocard{
        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
        border-radius: 5px;
        background-color: 0px 0px 8px -1px rgba(20,101,230,1);
        height: auto;

      
       
       
    }

    .Errocard {
        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
        border-radius: 5px;
       
    }

   /*  rect{
       
        border-radius:5px !important;
        background-color:transparent !important;
    } */

    body {
        font-family: "Poppins", Arial, sans-serif;
        font-size: 14px;
        line-height: 1.8;
        font-weight: normal;
        background: #ffffff;
        color: gray;
    }

    img{
        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
        border-radius: 5px;
        background-color: 0px 0px 8px -1px rgba(20,101,230,1);
        height: auto;
    }
</style>

<div class="container mt-5 p-5">


    <div class="card" id="Errocard">
        <div class="card-header">
            Survey Analyzer
        </div>
        <div class="card-body">
            <h5 class="card-title font-weight-bolder ">@Model.Title</h5>
            <p class="card-text">@Html.Raw(Model.Description)</p>
          
        </div>
        <div class="card-footer">
            <div class="font-weight-bolder">
               
                Total user respond <span class="badge text-bg-primary">@Model.ParticipantCount</span><br />
              
                Participated users
                @foreach (var item in Model.Users)
                {
                    <span class="badge text-bg-primary">@item.UserName</span>

                }
            </div>
            
        </div>
    </div>
   
   @*  <div class="mt-5" >
        @foreach (var question in Model.Questions)
        {
  
        
            <div class="text-center">

                <div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div>
            </div> 
        }

    </div> *@
    <div class="container mt-5 p-5">
        @foreach (var question in Model.Questions)
        {
            <div class="text-center">
                <!-- Chart container for all questions -->
                <div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div>

                <!-- Image container only for image questions -->
                @if (question.Type == QuestionType.Image)
                {
                    <div id="img_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: auto;"></div>
                }
            </div>
        }
    </div>


</div>
@section Scripts {
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawCharts);

        function drawCharts() {
        @foreach (var question in Model.Questions.Select((value, index) => new { Value = value, Index = index }))
        {
            <text>
                 var type = '@question.Value.Type.ToString()';
                var chartContainer = document.getElementById('chart_div_@question.Value.Id');
                var imgContainer = (type === "Image") ? document.getElementById('img_div_@question.Value.Id') : null;

                var colors = [
                    '#cc0000', // dark red
                    '#00cc00', // dark green
                    '#0000cc', // dark blue
                    '#cccc00', // dark yellow
                    '#00cccc', // dark cyan
                    '#cc00cc', // dark magenta
                    '#008080', // dark teal
                    '#808000', // olive
                    '#800080', // purple
                    '#800000', // maroon
                    '#808080', // gray
                    '#404040'  // darker gray
                ];


                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Option');
                data.addColumn('number', 'Count');
                data.addRows([]);
                var colorIndex = 0; // Initialize colorIndex here
            </text>
            @foreach (var answer in question.Value.Answers)
            {
                <text>
                        data.addRow(['@Html.Raw(answer.Text)', @answer.Count]);
                </text>
            }
            <text>
                            var options = {
                    'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
                    is3D: true,
                    'titleTextStyle': { color: 'blue', fontSize: 15, bold: true },
                    // 'colors': colors
                };

                if (chartContainer) {
                    var chart = new google.visualization.PieChart(chartContainer);
                    chart.draw(data, options);
                }

                if (imgContainer && type === "Image") {
                    var imagesHtml = '';
                @foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
                {
                    <text>
                          var color = colors[colorIndex % colors.length]; // Correct usage of colorIndex
                        imagesHtml += '<div style="display: inline-block; text-align: center; margin: 10px;">' +
                            '<img src="@answer.Text" style="max-width:50%; height:auto; display: block; margin: auto;">' +
                            '<div style="display: flex; align-items: center; gap: 10px;">' +
                            '<span style="width: 12px; height: 12px; border-radius: 50%; background-color: ' + color + ';"></span>' +
                            '<span style="color: ' + color + ';">@Html.Raw(answer.Text)</span>' +
                            '</div></div>';
                        colorIndex++; // Increment colorIndex within the loop
                    </text>
                }
                        imgContainer.innerHTML = imagesHtml;
                }
            </text>
        }
                }
    </script>
}



@* @section Scripts {
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawCharts);

        function drawCharts() {
        @foreach (var question in Model.Questions.Select((value, index) => new { Value = value, Index = index }))
        {
            <text>
                            var type = '@question.Value.Type.ToString()';
                var chartContainer = document.getElementById('chart_div_@question.Value.Id');
                var imgContainer = type === "Image" ? document.getElementById('img_div_@question.Value.Id') : null;

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Option');
                data.addColumn('number', 'Count');
                data.addRows([
            </text>
            @foreach (var answer in question.Value.Answers)
            {
                <text>['@Html.Raw(answer.Text)', @answer.Count], </text>
            }
            <text>
                            ]);

                var options = {
                    'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
                    is3D: true,
                    'titleTextStyle': { color: 'blue', fontSize: 15, bold: true }
                };

                if (chartContainer) {
                    var chart = new google.visualization.PieChart(chartContainer);
                    chart.draw(data, options);
                }

                if (imgContainer) {
                    var imagesHtml = '';
                @foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
                {
                    <text>imagesHtml += '<img src="@answer.Text" style="max-width:20%; height:auto; display: block; margin: 20px auto;">'; </text>
                }
                        imgContainer.innerHTML = imagesHtml;
                }
            </text>
        }
                }
    </script>
}
 *@




@* @section Scripts {
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawCharts);

        function drawCharts() {
        @foreach (var question in Model.Questions)
        {
            <text>
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Option');
                data.addColumn('number', 'Count');
                data.addRows([
                @foreach (var answer in question.Answers)
                {
                    <text>['@Html.Raw(answer.Text)', @answer.Count], </text>
                }
                 ]);

                // Set chart options
                var options = {
                    'title': 'Question: @Html.Raw(question.Text)',
                    is3D: true,
                   
                };

                // Select the right container for the chart
                var container = document.getElementById('chart_div_@question.Id');
                if (container) {
                    var chart = new google.visualization.PieChart(container);
                    chart.draw(data, options);
                }
            </text>
        }
        }
    </script>
} *@