@extends('template.layout')

@section('content')
    <h1 class="page-title">
        Devoluci&oacute;n de Pr&eacute;stamos
    </h1>

    <div class="portlet light portlet-fit portlet-datatable bordered">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject font-green sbold uppercase"> Devoluci&oacute;n de libro </span>
            </div>
        </div>

        <div class="portlet-body">
            <div class="Forum-ForumTopicList row" style="margin:20px">

                <form class="form-horizontal" method="post" action="{{ route('busqueda') }}">
                    {{ csrf_field() }}
                    <div class="search-bar ">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="input-group">
                                    <input type="text" class="form-control typeahead" id="dniUsuario" name="dniUsuario" placeholder="DNI del usuario">
                                    <span class="input-group-btn">
                                                <button class="btn blue uppercase bold" type="submit">Buscar</button>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <p class="search-desc clearfix"> Por favor ingrese el DNI del alumno que desea devolver los libros.</p>
                            </div>
                        </div>
                    </div>

                </form>

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

    <script src="{{asset('plugins/typeahead/typeahead.bundle.min.js')}}" type="text/javascript"></script>

    <script>

        var posts = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: "{{url('getdniusuario')}}" +"/%QUERY",
                wildcard: '%QUERY',
                transform: function(response) {
                    return $.map(response.data, function(user) {
                        return { value: user.dni };
                    });
                }
            }
        });

        $('.typeahead').typeahead({
                hint: false,
                highlight: true,
                minLength: 2,
                limit: 10
            },
            {
                name: 'Posts',
                display: 'value',
                source: posts
            });


    </script>
@endsection