@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="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', 'bar','line','table'] }); // Ensure 'bar' package is loaded if using BarChart
        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()';
                console.log('Type:', type); // Debug output to check type
                var chartContainer = document.getElementById('chart_div_@question.Value.Id');
                var chart; // Declare chart variable here for scope

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Option');
                data.addColumn('number', 'Count');

                </text>
            if (question.Value.Type == QuestionType.Text || question.Value.Type == QuestionType.Slider || question.Value.Type == QuestionType.Open_ended)
            {
                    <text>
                    console.log('Initializing Bar Chart'); // Debug output
                    </text>
                    @foreach (var item in question.Value.SelectedText)
                    {
                        <text>
                            data.addRow(['@Html.Raw(item)', @question.Value.Answers]);
                        </text>
                    }
                    <text>
                    chart = new google.visualization.Table(chartContainer);
                    </text>
                } else {
                    <text>
                    console.log('Initializing Pie Chart'); // Debug output
                    </text>
                    @foreach (var answer in question.Value.Answers)
                    {
                        <text>
                            data.addRow(['@Html.Raw(answer.Text)', @answer.Count]);
                        </text>
                    }
                    <text>
                    chart = new google.visualization.PieChart(chartContainer);
                    </text>
                }
                <text>
                var options = {
                    'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
                    is3D: type !== "Text" && type !== "Slider" && type !== "Open_ended", // Only use 3D for Pie Charts
                    'titleTextStyle': { color: '#17a2b8', fontSize: 12, bold: true },
                    'colors': ['#cc0000', '#00cc00', '#0000cc', '#cccc00', '#00cccc', '#cc00cc', '#008080', '#808000', '#800080', '#800000', '#808080', '#404040']
                };

                chart.draw(data, options); // Draw chart outside conditional blocks
                </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 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');
                 var colorIndex = 0;
                </text>
                if (question.Value.Type ==QuestionType.Text || question.Value.Type ==QuestionType.Slider || question.Value.Type ==QuestionType.Open_ended)
                {
                    @foreach (var item in question.Value.SelectedText)
                    {
                        <text>
                            data.addRow(['@Html.Raw(item)', 1]);
                        </text>
                    }
                      <text>
                    // Initialize Bar Chart for Text, Slider, or Open-ended questions
                    var chart = new google.visualization.BarChart(chartContainer);
                    </text>

                }

                else
                {
                    @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: '#17a2b8', fontSize: 12, bold: true },
                    'colors': colors,
                      'pieSliceText': 'percentage',  // Display percentages on the chart slices
                         'tooltip': { text: 'percentage' }  // Configure tooltip to show percentage
                };

                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];
                            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++;
                        </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 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: '#17a2b8', fontSize: 12, 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>
} *@