@extends('template.layout')

@section('content')
    @include('sweet::alert')
    <h1 class="page-title">
        Reporte estadístico de encuestas
    </h1>
    <div class="portlet light portlet-fit portlet-datatable bordered">

        <div class="portlet-body">

            <div class=" row" style="padding-top: 3%;">
                <div class="col-lg-12 ">
                    <div class="row">
                        <div class="col-lg-12" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Encuestas respondidas vs no respondidas </span>
                            <div id="graph1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" style="padding-top: 3%;">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-12" style="text-align: center;">
                            <span class="caption-subject font-green sbold uppercase"> Encuestas registradas </span>

                            <table class="table table-hover nowrap dataTable dtr-inline collapsed tbEncuestas"
                                   id="tbEncuestas" width="100%" role="grid"
                                   aria-describedby="tbEncuestas_info">
                                <thead class="thead-default">
                                <tr>

                                    <th>Título</th>
                                    <th>Publicación</th>
                                    <th>Finalización</th>
                                    <th>Resultado</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($encuestas as $item)
                                    <tr>
                                        <td> {{ $item->nombre }} </td>
                                        <td> {{ \Carbon\Carbon::parse( $item->fecha_publicacion)->format('d-m-Y') }} </td>
                                        <td> {{ \Carbon\Carbon::parse( $item->fecha_finalizacion)->format('d-m-Y') }} </td>
                                        <td> @if( \Carbon\Carbon::parse( $item->fecha_finalizacion)->format('d-m-Y')  <= \Carbon\Carbon::now()->format('d-m-Y'))
                                                <a class="link-underlined color-primary" href="{{url('reportesestadisticos/encuestas/detalle',['id'=> $item->id])}}"> Ver Respuestas </a>
                                            @else
                                                <a class="link-underlined color-primary" href="{{url('reportesestadisticos/encuestas/detalle',['id'=> $item->id])}}"> Ver Respuestas </a>

                                                {{--<a class="link-underlined color-primary" href="#"> Sin finalizar</a>--}}
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>

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

        </div>

    </div>


@endsection
@section('scripts')
    <script>
       $('#tbEncuestas').DataTable({
            "lengthMenu": [[25, 20, 50, -1], [25, 20, 50, "Todas"]],
            bFilter: true,
            "bLengthChange": false,
            bInfo: true,
            responsive: true,
            "autoWidth": true,
            "language": {
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "zeroRecords": "No se encontraron registros",
                "info": "Mostrando la página _PAGE_ de _PAGES_",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtrado de _MAX_ registros totales)",
                "search": "Buscar: ",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
            },
            "order": [],
            "aoColumns": [
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": false},
                {"bSearchable": false},
            ],
            "columns": [
                {"orderable": true},
                {"orderable": true},
                {"orderable": false},
                {"orderable": false},
            ]
        });

        var color_array = ['#03658C', '#7CA69E', '#F2594A', '#F28C4B', '#7E6F6A', '#36AFB2', '#9c6db2', '#d24a67', '#89a958', '#00739a', '#BDBDBD'];

        $(document).ready(function () {

            //-------------Graph-----------------

            $.ajax({
                url: "{{ url('reportesestadisticos/encuestas/graph1') }}",
                type: "GET",
                success: function (result) {

                    if(result.length != 0){
                        var data = result,
                            config = {
                                data: data,
                                xkey: 'y',
                                ykeys: ['a', 'b'],
                                labels: ['Respondidas', 'No respondidas'],
                                hideHover: 'auto',
                                behaveLikeLine: true,
                                resize: true,
                                pointFillColors: color_array,
                                pointStrokeColors: color_array,
                                lineColors: color_array,
                                gridIntegers: true,
                                parseTime: false,
                                yLabelFormat: function(y){return y != Math.round(y)?'':y;},
                            };
                        config.element = 'graph1';
                        Morris.Bar(config);
                        config.stacked = true;

                    }else {
                        $("#graph1").html("<div class='well' style='text-align: center;'> No se tiene información registrada</div>");

                    }


                }
            });

            //-------------Fin Graph-----------------


        });

    </script>
@endsection