@extends('layouts.app')
@section('head')

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">


  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <style>
    .bordered-box
    {
      border-style: solid;
      border-color: #2B3170;
      border-width: 1px;
    }
    .chart-box
    {
      border-style: solid;
      border-color: #2B3170;
      border-width: 1px;
    }
  </style>
@endsection
@section('content')
  <div class="container">
    <div class="row">
      <div class="col-md-9 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-heading">{{$poll->name}}</div>
          <div class="panel-body">
            <div class="row">
              <div class="col-md-8">
                <p>{{$poll->text}}</p>
              </div>
              <div class="col-md-4">
                Version:
                <select onchange="changeVersion()" id="versionSelect">
                  @foreach($poll->versions as $version)
                    @if($version->version == $poll->version)
                      <option selected value="{{$version->id}}">{{$version->version}} Creada : {{$version->created_at}}</option>
                    @else
                      <option value="{{$version->id}}">{{$version->version}} Creada: {{$version->created_at}}</option>
                    @endif
                  @endforeach
                </select>
              </div>
            </div>
            <table id="chartsTable" class="display">
              <thead>
                <th></th>
                <th>Pregunta</th>
                <th>Descripción</th>
                <th>Gráfica</th>
              </thead>
              <tbody>
                                @foreach($poll->questions as $question)
                  <tr>
                    <td>
                      {{$j}}
                    </td>
                    <td>
                      <b>{{$question->question}}</b><br>
                    </td>
                    <td>
                      {{$question->text}}
                    </td>
                    <td>
                      <div id="{{$question->id}}-chart">
                        
                      </div>
                      <div id="{{$question->id}}-chart-answers">
                        
                      </div>
                    </td>
                  </tr>
                  
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    google.charts.load('current', {'packages':['corechart']});
    var questions = @json($poll->questions);

    $(document).ready(function() 
    {
      var charts = []
      var chartsTable = $('#chartsTable').DataTable(
      {

      });
      for (var i = 0; i < questions.length; i++) 
      {
        var chart = function(questionIndex) 
        {
          console.log(questionIndex)
          google.charts.setOnLoadCallback(function(){
            drawChart(questionIndex)
          })
        };
        charts.push(chart)
      }
      for (var i = 0; i < charts.length; i++) 
      {
        charts[i](i)
      }

    });
    function drawChart(questionIndex)
    {
      var question = questions[questionIndex]
      console.log(question)
      
      var type
      $("#" + question['id'] + "-chart-answers").html("<a href=" + "{{url('admin/encuestas/respuestas/pregunta')}}/" + question['id'] + ">Ver respuestas</a>")

      switch (question['type'])
      {

        case 0:
          type = "Abierta"
          break;
        case 1:
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Opción');
          data.addColumn('number', 'Respuestas');
          var scores = [
            ['No', 0],
            ['Si', 0],
          ]
          for (var i = 0; i < question['answers'].length; i++) 
          {
            var answerInd = question['answers'][i]['answer']
            console.log(answerInd)
            scores[parseInt(answerInd)][1] += 1
          }
          console.log('scores', scores)
          data.addRows(scores);
         
          var options = {title:'Respuestas: ' + question['answers'].length, width:400, height:300};
          var chart = new google.visualization.PieChart(document.getElementById(question['id'] + '-chart'));
          chart.draw(data, options);
          break;
        case 2:
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Opción');
          data.addColumn('number', 'Calificación');
          var promedio = 0
          var scores = [
            ['1', 0],
            ['2', 0],
            ['3', 0],
            ['4', 0],
            ['5', 0],
          ]
          for (var i = 0; i < question['answers'].length; i++) 
          {
            console.log(question['answers'][i]['answer'])
            var answerInd = question['answers'][i]['answer'] - 1
            promedio = promedio + parseInt(answerInd) + 1

            scores[answerInd][1] += 1
          }
          console.log(promedio)
          data.addRows(scores);
          promedio = promedio / question['answers'].length
          var options = {title:'Calificación promedio: ' + promedio, width:400, height:300};
          var chart = new google.visualization.PieChart(document.getElementById(question['id'] + '-chart'));
          chart.draw(data, options);
          break;
      }
      // Instantiate and draw the chart for Sarah's pizza.
      
    }
    function changeVersion()
    {
      document.location.href = "{{url('/admin/encuestas')}}/" + $('#versionSelect').val() + "/graficas"
    }
  </script>
@endsection