@extends('modules.head') @section('contenido')
<h3>
    <a class="ruta" class="" href="{{url('/results')}}">Encuestas</a>
</h3>
<!-- List answers-->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">{{ __('messages.answers.title_13') }}</h3>
    </div>

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="example2" class="table table-bordered table-hover dataTable" role="grid"
            aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ __('messages.answers.title_3') }}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ __('messages.answers.title_4') }}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
                        aria-label="Browser: activate to sort column ascending">
                        {{ __('messages.answers.title_7') }}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
                        aria-label="Engine version: activate to sort column ascending">
                        {{ __('messages.answers.title_15') }}</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- /.box-body -->

    <div class="modal fade" id="modal_results">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Respuestas de la encuesta</h4>
                </div>
                <div class="modal-body">
                    <div class="box-body" id="body_seat">
                        HOLI
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/results.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {

      _table = $('#example2').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        "order" : [],
        "language": {
            url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
        },
        ajax: '{{ route('answers.table' , ["form_id" => $form_id]) }}',
        columns: [
            { data: 'form.name', name: 'form_id'  },
            {
                data: "user.first_name",
                render: function ( data, type, row ) {
                    return row.user.first_name + ' ' + row.user.last_name;
                }
            },
            { data: 'created_at', name: 'created_at'  },
            { data: 'actions', name: 'actions'  }
        ]
    });

    setTimeout( function(){
        $('#example2_filter > label > input').unbind();
        $('#example2_filter > label > input').bind('keyup', function (e) {
        if (e.keyCode == 13){
            _table.search(this.value).draw();
        }
        });
    },500);

    var info = '<i class="fa  fa-info-circle"  id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Nombre, Orden y Link</p></div>';
        $('#example2_filter').append(info);
        $('#btn-info-busqueda').on('click', function () {
            $('#menuBusqueda').toggle();
        });
    });

</script>