@extends('template.layout')

@section('content')
    <h1 class="page-title">
        Encuestas Acad&eacute;micas
    </h1>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">Lista de Encuestas</div>
            <div class="actions">
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-hover" id="tb_encuestas">
                <thead class="thead-default">
                <tr>
                    <th>Encuesta</th>
                    <th>Inicio</th>
                    <th>Fin</th>
                    <th>Estado</th>
                    <th>Opciones</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var urlBase = "{{ url('encuestas')  }}";
        var urlData = "{{ route('encuesta.usuario.get') }}";
        var oTable = $('#tb_encuestas').DataTable({
            "language": {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "No existen registros creados",
                "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":    "",
                "sSearch":         "Buscar:",
                "sUrl":            "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst":    "Primero",
                    "sLast":     "Último",
                    "sNext":     "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
            processing: true,
            serverSide: true,
            destroy: true,
            responsive:true,
            ajax:{
                url: urlData,
                method: 'POST',
                error: function(error){
                    console.log(error);
                }
            },
            columns:[
                {
                    data:'nombre',
                    name:'encuesta.nombre',
                    "searchable": true
                },
                {
                    data:'fecha_publicacion',
                    name:'encuesta.fecha_publicacion',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            +Date.parse(data).toString("dd/MM/yyyy")+
                            '</td>'
                    }
                },
                {
                    data:'fecha_finalizacion',
                    name:'encuesta.fecha_finalizacion',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            +Date.parse(data).toString("dd/MM/yyyy")+
                            '</td>'
                    }
                },
                {
                    data:'respondida',
                    name:'encuesta_usuario.respondida',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            +(data == 0 ? 'Sin responder' : 'Respondida')
                            +'</td>'
                    }
                },
                {
                    data:'id',
                    name:'id',
                    "searchable": false,
                    render: function(data,type,row){
                        return '<td>'
                            + (row.respondida == 0 ?
                                    '<a class="btn btn-outline btn-circle btn-sm blue" href="' + urlBase + '/responder/' + data + '"><i class="fa fa-pencil"></i> Responder </a>'
                                    : '<a class="btn btn-outline btn-circle btn-sm blue" href="' + urlBase + '/respuestas/' + data + '"><i class="fa fa-pencil"></i> ver respuestas </a>'
                                )
                            +'</td>'
                    }
                }
            ],
            "pageLength": 10,
            "columnDefs": [{ // set default column settings
                'orderable': false,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "bInfo": false,
            "bLengthChange": false,
            "ordering": false
        });
    </script>
@endsection