@extends('template.layout')
@section('styles')
    <link href="{{ asset('plugins/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('plugins/datatables/plugins/bootstrap/datatables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    <h1 class="page-title">
        Libros perdidos
    </h1>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <h1 class="caption-subject font-green sbold uppercase"> Lista de libros perdidos</h1>
            </div>
            <div class="actions">
                <div class="btn-group">
                    <button class="btn blue btn-outline sbold " onclick="myModalShow()"> Registrar perdida</button>
                </div>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-lg-12">
                    <div class="Forum-ForumTopicList" style="margin:20px">
                        <table class="table table-hover nowrap dataTable dtr-inline collapsed tbPerdidos" id="tbPerdidos"
                               width="100%" role="grid" aria-describedby="tbPerdidos_info">
                            <thead class="thead-default">
                            <tr>
                                <th>N°</th>
                                <th>C&oacute;digo del ejemplar</th>
                                <th>Nombre bibliografia</th>
                                <th>Fecha de perdida</th>
                                <th>DNI Alumno</th>
                                <th>Nombre Alumno</th>
                                <th>Perdido</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php ($count = 1)
                            @foreach($perdidas as $item)
                                <tr>
                                    <td> {{ $count }} </td>
                                    <td> {{ $item->codigo_CS }} </td>
                                    <td> {{ $item->nombre }} </td>
                                    <td> {{ $item->fecha_perdida }} </td>
                                    <td> {{ $item->dni }} </td>
                                    <td> {{ $item->apellido_paterno }} {{ $item->apellido_materno }}, {{ $item->nombres }}</td>
                                    <td>
                                        <div class="onoffswitch">
                                            @if($item->estado == 1)
                                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox chk"
                                                       id="switch_{{ $item->id }}" checked="checked">
                                            @else
                                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox chk"
                                                       id="switch_{{ $item->id }}">
                                            @endif
                                            <label class="onoffswitch-label" for="switch_{{ $item->id }}"
                                                   style="margin-bottom:0">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                                @php ($count++)
                            @endforeach
                            </tbody>
                        </table>
                    </div>

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

    <div id="RegistrarPerdidalModal" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Registrar perdida</h4>
                </div>

                {!! Form::open(array('id' => 'form-validation','route' => array('perdida.crear'))) !!}
                <div class="modal-body" id="ModalBody">

                    <div class="form-group">
                        {!! Form::label('codigo_CS', 'Codigo libro:', ['class' => 'control-label']) !!}
                        {!! Form::text('codigo_CS', null, ['class' => 'form-control typeahead','required'=>'required']) !!}
                    </div>

                    <div class="form-group">
                        {!! Form::label('dni', 'DNI usuario:', ['class' => 'control-label']) !!}
                        {!! Form::text('dni', null, ['class' => 'form-control typeahead','required'=>'required']) !!}
                    </div>

                    <div class="form-group">
                        {!! Form::label('motivo', 'Motivo:', ['class' => 'control-label']) !!}
                        {!! Form::textarea('motivo', null, ['class' => 'form-control','required'=>'required','style'=>'resize:none;']) !!}
                    </div>

                    <div class="form-group">
                        {!! Form::label('fecha_perdida', 'Fecha perdida:', ['class' => 'control-label']) !!}
                        {!! Form::text('fecha_perdida', null, array('placeholder' => '','class' => 'form-control' ,'style' => 'resize:none;', 'required' => 'required')) !!}
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Cancelar</button>
                    {!! Form::submit('Guardar', ['class' => 'btn green']) !!}
                </div>
                {!! Form::close() !!}
                @include('alerts.index')

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

@endsection

@section('scripts')
    <script src="{{ asset('plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
    <script src="{{asset('plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-validation/js/jquery.validate.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-validation/js/additional-methods.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-validation/js/localization/messages_es_PE.js')}}" type="text/javascript"></script>
    <script>
        $(function() {
            $( "#fecha_perdida" ).datepicker({ format:"yyyy-mm-dd", endDate: new Date(),language:"es" });
        });
        $("#form-validation").validate({
            rules: {
                dni: {
                    required:true,
                    pattern: '^[0-9]{8}$'
                }

            }
        });


        $('#tbPerdidos').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": false},
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": false},
                {"bSearchable": true},
                {"bSearchable": true},
                {"bSearchable": false},

            ],
            "columns": [
                {"orderable": false},
                {"orderable": true},
                {"orderable": true},
                {"orderable": false},
                {"orderable": true},
                {"orderable": true},
                {"orderable": false},
            ],
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'pdfs',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5 ]
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5 ]
                    }
                }
            ]
        });

        function myModalShow() {
            $('#RegistrarPerdidalModal').modal('show');
        }

        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 };
                    });
                }
            }
        });

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

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

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

        $('.chk').click(function () {
            var aux = this.id;
            var aux1 = aux.split("_");
            var id = aux1[1];

            $.ajax({
                url: "{{ url('perdidas/cambiarestado') }}" + "/" + id,

                context: document.body
            }).always(function() {
                swal("Se cambio el estado del ejemplar!");
            });
        });

    </script>
@endsection