{% extends 'EPSOBundle::index.html.twig' %}
{% block body %}

    <link rel="stylesheet" type="text/css" media="screen"  href="{{ asset('bundles/epso/css/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" type="text/css" media="screen"  href="{{ asset('bundles/epso/css/datetimepicker-style.css') }}">




<div class="col-md-12">

<form class="form-inline" action="{{ path('get_search')}}" method="post">

  <div class="form-group input-append date" id="datetimepicker" >
    <label for="exampleInputName2">From</label>
     <input id='date1' name="date1" value='{{date1}}'  class="form-control" type="text"></input>
    <span class="add-on"  style="height: 30px;"><i class="glyphicon glyphicon-time"></i></span>
        
  </div>
    
  <div class="form-group input-append date" id="datetimepicker2" >
    <label for="exampleInputName2">To</label>
     <input id='date2'   name="date2"  value='{{date2}}'    class="form-control" type="text"></input>
    <span class="add-on"  style="height: 30px;"><i class="glyphicon glyphicon-time"></i></span>
        
  </div>   

  <div class="form-group" >
    <label for="exampleInputName2">Box ID</label>

<select class="form-control" name="box" id="box" >

  <option value='' >All Box</option>

{% for box in boxs %}

{% if box.boxId == boxname %}

  <option selected=selected value ='{{box.id}}'>{{box.boxId}}</option>

  {% else %}

  <option value ='{{box.id}}'>{{box.boxId}}</option>


{% endif %}

{% endfor%}

</select> 
  </div>
    
      
  <div class="form-group " >

  <button type="submit" class=" btn btn-sm btn-success"><i class="glyphicon glyphicon-search"></i> Searh</button>

        <a class=" btn btn-sm   btn-warning" href="javascript:window.print()"><i class="glyphicon glyphicon-print"></i> Print</a>
  </div> 

  <div class="form-group " >

<!-- Single button -->
<div class="btn-group ">
  <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Export <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a id="btnExport" href="#">PDF</a></li>
    <li><a id="btnExport2" href="#">EXCEL</a></li>

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

</form>
<br><br>
<h3>Statistic from <strong>{{date1}} </strong>to <strong>{{ date2 }} </strong> for <strong> {{boxname}} </strong></h3>
<hr>

</div>



<div class="col-md-12">
<div class="panel panel-success">
  <div class="panel-heading">Statistics satisfaction with Nbr vote</div>
  <div class="panel-body">

<table class="table table-striped table-bordered table-hover table-checkable order-column">
<thead> 

<tr id="qst">
<th >Question</th>
<th> <img class="img-responsive center-block" src="{{ asset('bundles/epso/img/0.png') }}" alt="..."></th>
<th> <img class="img-responsive center-block" src="{{ asset('bundles/epso/img/1.png') }}" alt="..."></th>
<th> <img class="img-responsive center-block" src="{{ asset('bundles/epso/img/2.png') }}" alt="..."></th>
<th> <img  class="img-responsive center-block" src="{{ asset('bundles/epso/img/3.png') }}" alt="..."></th>
<th> <img class="img-responsive center-block" src="{{ asset('bundles/epso/img/4.png') }}" alt="..."></th>



</tr>
</thead> 

<tbody>

{% set ln= qesx|length %}
{% set j=0 %}
{% set cnt=0 %}
{% for qes in qesx %}
{% set txt=0 %}




<tr  >
<td>{{qes.Question}}</td>

{% for i in 0..4 %}

<td id='tr-center'>{{tabs[j][i]}}</td>

{% set txt=txt+tabs[j][i] %}


{% endfor %}

{% set cnt=cnt+txt %}


</tr>





{% set j=j+1 %}


{% endfor %}



</tbody>

</table>

  </div>
</div>


</div>


{% set cnt=cnt/ln %}



<div class="col-md-12">


<div class="panel panel-danger">
  <div class="panel-heading">Statistics satisfaction with percentages by Question </div>
  <div class="panel-body">


<form class="form-inline" action="{{ path('get_search')}}" method="post">
<div class="form-group">
     <input  id='date11'  name="date1" value='{{date1}}'  class="form-control" type="text"></input>
     <input id='date22'  name="date2" value='{{date2}}'  class="form-control" type="text"></input>
     <input id='boxa' name="box"  class="form-control" value='{{boxid}}' type="text"></input>





<select class="form-control" id="quest"  name="ask" >

  <option value='' >All Questions</option>

{% for qes in qesx %}

{% if(qes.Question==qt) %}
  <option  selected=selected value ='{{qes.id}}'>{{qes.Question}}</option>


  {% else %}

  <option value ='{{qes.id}}'>{{qes.Question}}</option>

{% endif %}
{% endfor%}

</select> 

  </div>

  <button type="submit" class=" btn btn-sm btn-success"><i class="glyphicon glyphicon-search"></i> Searh</button>
</form>














</div>

        <div id="donutchart" style="width: 100%;height: 500px; "></div>



  </div>
</div>


</div>
<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(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
         ['Extremely satisfied ',     {{ tab[0] }} ],
          ['Very satisfied ',     {{ tab[1] }}],
          ['Satisfied',      {{ tab[2] }}],
          ['Dissatisfied', {{ tab[3] }}],
          ['Very dissatisfied',  {{ tab[4] }}],
        ]);

        var options = {
          pieHole: 0.5
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>




 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#box").change(function(){

               var box=$("select[name~='box']").val();

       $('#boxa').val(box)
     
       

    });

  $(".bootstrap-datetimepicker-widget").mouseleave(function(){

               var box=$("#date1").val();

       $('#date11').val(box)
     


               var box=$("#date2").val();

       $('#date22').val(box)
     
       

    });



});
</script>






























<div id="dvData">

<table>
<thead> 

<tr>
<th >Question</th>
<th> Extremely satisfied</th>
<th> Very satisfied</th>
<th>Satisfied </th>
<th>Dissatisfied</th>
<th>Very dissatisfied</th>



</tr>
</thead> 

<tbody>

{% set ln= qesx|length %}
{% set j=0 %}
{% set cnt=0 %}
{% for qes in qesx %}
{% set txt=0 %}




<tr  >
<td>{{qes.Question}}</td>

{% for i in 0..4 %}

<td >{{tabs[j][i]}}</td>

{% set txt=txt+tabs[j][i] %}


{% endfor %}

{% set cnt=cnt+txt %}


</tr>





{% set j=j+1 %}


{% endfor %}



</tbody>

</table>


</div>















    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript"src="{{ asset('bundles/epso/js/bootstrap-datetimepicker.min.js') }}"></script>
    <script type="text/javascript"src="{{ asset('bundles/epso/js/bootstrap-datetimepicker.pt-BR.js') }}"></script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'yyyy-MM-dd',
        language: 'pt-BR'
      });

      $('#datetimepicker2').datetimepicker({
        format: 'yyyy-MM-dd',
        language: 'pt-BR'
      });


$("#btnExport").click(function (e) {
    window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
    e.preventDefault();
});



    </script>


 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript">

$("#btnExport2").click(function (e) {

  var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'report_' + d + '.pdf',
        pdf = new jsPDF('p', 'pt', 'letter'),
        specialElementHandlers = {
          '#editor': function( element, renderer ) {
              return true;
          }
    };
    pdf.fromHTML(
          $('#dvData').get(0) // HTML element
        , 15  // x coord
        , 0.5  // y coord
        , {
              'width': 2000 // was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        }
    );
    pdf.save( filename );
});

</script>
    {% endblock %}