@push('scripts1')
<script type="text/javascript">
    $(document).ready(function(){
        $('.btn_add').click(function(evento){
            var button = evento.target;

            agregar($(button).attr("data-norden"));
        })
    });

    function agregar(id) {

        //Paso el array de php a json
        var resenia={!!$resenia->toJson(JSON_UNESCAPED_UNICODE)!!};

        //Recojo las claves de json
        var arr=Object.keys(resenia[0]);

        //Creo un nuevo array
        var arr2=new Array();

        //Creo las variables para las posiciones del id_libro, el no, y el título
        var pos_libro_id;
        var pos_no;
        var pos_titulo;

        //Creo los array que contendrán los títulos y los no de los titulos
        var cmt_titulo = new Array();
        var cmt_no = new Array();

        //Lleno el array creado con los datos del json
        for(k=0; k<resenia.length; k++){
            arr2[k]=Object.values(resenia[k]);
        }

        //Recorro el array en el que he creado las claves y guardo los valores
        // de las posiciones cuyos nombres
        //concuerdan con los dados
        for(l=0; l<arr.length; l++){
            switch(arr[l]){
                case 'cmt_libro_id':
                    pos_libro_id=l;
                    break;
                case 'cmt_no':
                    pos_no=l;
                    break;
                case 'cmt_titulo':
                    pos_titulo=l;
                    break;
                default:
                    break;
            }
        }

        a=0;
        //Recojo los datos con los valores de las posiciones que conseguí
        // anteriormente siempre y cuando el
        //id del libro concuerde con el que llega por parámetro
        for (j = 0; j <arr2.length; j++) {

            if(arr2[j][pos_libro_id]==id)
            {


                cmt_no[a] = arr2[j][pos_no];
                cmt_titulo[a] =arr2[j][pos_titulo];
                a++;
            }

        }


        //Borro los hijos del dom que se encuentran en el objeto del DOM
        //con el id resenias
        $("#resenias").empty();

        //Voy recorriendo el array anterior con los datos y voy añadiéndolo
        //a una variable DOM que después voy a introducir en el objeto
        //del dom con id resenias
        for(j=0; j< cmt_titulo.length; j++)
        {
                    var fila= '<div class="col-md-3 col-md-offset-2" > <div class="panel panel-default">';

                    fila += '<div class="panel-heading centering">' + cmt_titulo[j] + '</div>';

                    fila += '<a href="http://localhost/libreir/public/cliente/entrarHilo/' + cmt_no[j]
                    + '">';

                    fila+= '<button type="button"  class="btn btn-primary center-block">Entrar en hilo</button></a>';

                    fila += '</div></div>';

            $("#resenias").append(fila);


        }



    }
</script>
@endpush

<div class="content">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">Libros para comentar</div>
                <div class="panel-body">
                    <div class="form-group">
                        @include('cliente.comenta.search')
                    </div>

                   <div class="row">
                       <div class="table-responsive" >
                           <table class="table table-striped table-hover" >
                                <thead >
                                    <th>Imagen</th>
                                    <th>Título</th>
                                    <th>Autor</th>
                                    <th>Fecha creación</th>
                                    <th>Género Literario</th>
                                    <th>Género Artístico</th>
                                    <th>Opciones</th>
                                </thead>
                               <tbody>
                                    @foreach($libros as $lib)
                                        <tr>
                                            <td><img src="{{asset('images-help/libros/' . $lib->lib_imagen)}}" alt="{{$lib->lib_titulo}}" height="10" width="10"></td>
                                            <td>{{$lib->lib_titulo}}</td>
                                            <td>{{$lib->autor}}</td>
                                            <td>{{$lib->lib_fecha_creacion}}</td>
                                            <td>{{$lib->generoliterario}}</td>
                                            <td>{{$lib->generoartistico}}</td>
                                            <td>
                                                <!--<a href=URL::action('GeneroLiterarioController@edit', $lib->lib_no)}}"><button>Comprar</button></a>-->
                                                <a href="{{URL::action('ComentarioController@generarComentario', $lib->lib_no)}}"><button class="btn-default btn">Comentar</button></a>
                                                <button type="button" class="btn btn_add btn-info" data-norden="{{$lib->id_libro}}">Ver Comentarios</button>
                                            </td>
                                        </tr>
                                    @endforeach
                               </tbody>
                           </table>
                       </div>
                       {{$libros->render()}}
                   </div>

                    <div class="row">
                        <h3>Reseñas</h3>
                        <div id="anteresenia">
                            <div id="resenias" >
                                @foreach($resenia as $res)
                                    <div class="col-md-3 col-md-offset-2" >
                                        <div class="panel panel-default">
                                            <div class="panel-heading centering">{{$res->cmt_titulo}}</div>

                                            <a href="{{URL::action('ComentarioController@entrarHilo', $res->cmt_no)}}"><button class="btn btn-primary center-block">Entrar en hilo</button></a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>