@extends('layout.master')
@section('parentPageTitle', 'Listado de perfil')
@section('title', 'Listado de perfil')


@section('page-style')
<link rel="stylesheet" href="{{asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
<link rel="stylesheet" href="{{asset('assets/bootstrap.min.css')}}">
@stop

@section('content')


<meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="row clearfix">
         <div class="col-md-12 d-flex justify-content-center"> 
            <div class="card patients-list">
                <div class="body">
                    <!-- Nav tabs -->

                    <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                        <big style="color: black;font-size: 25px;"class="">@yield('title')</big>
                    </div>


                    <div align="right">
                        <a href="ingresar" class="btn btn-primary btn-round">Nuevo perfil</a>
                    </div>
                        
                    <!-- Tab panes -->
                    <div class="tab-content m-t-10">
                        <div class="tab-pane table-responsive active" id="All" style="overflow-x: hidden;">
                            <table class="table m-b-0 table-hover" id="tabla1" name="tabla1">
                                <thead>
                                    <tr class="ui-widget-header">         

                                        <th>Rol</th>
                                        <th>Nombre</th>
                                        <th>Descripción</th>
                                        <th>Acción</th>
                                    </tr>
                                </thead>
                                
                            </table>
                        </div>


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

@stop

@section('page-script')

<script src="{{asset('assets/bundles/datatablescripts.bundle.js')}}"></script>

<script>

    var lenguaje = {
        "lengthMenu": "Listar _MENU_ ",
        "zeroRecords": "Aún no tiene registros",
        "info": "Página _PAGE_ de _PAGES_",
        "infoEmpty": "",
        "Search": "Buscar",
        "infoFiltered": "(filtered from _MAX_ total records)",
        "search": "Buscar",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    }

    $(document).ready(function() {

       listarperfilindex();
    
    } );


    function listarperfilindex() {

        var route = "{{route('perfil.listarperfilindex')}}";

        var recargartablatotal = jQuery('#tabla1').dataTable({
            
            //"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],
            "ajax": {
                method:'post',
                url: route,
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                "data": function(data) {

                }
            },
            
            columns: [

                {
                    name: 'nombrerol',
                    data: 'nombrerol'
                },
                
                {
                    name: 'nombre',
                    data: 'nombre'
                },

                {
                    name: 'descripcion',
                    data: 'descripcion'
                },


                {   
                    className: 'text-left',
                    data:'id',
                    
                    render: function (data,type,row) {
                    
                       
                        return '<a href="'+row.tipoperfil+''+'-'+''+data+'" class="btn btn-primary btn-round btn-sm">Editar</a>';

                    }  
                }      
                
            ],

            "columnDefs": [
                 
                
                { "orderable": false, "targets": 3},
                 
            ],

            language: lenguaje

        });

    }


</script>
@stop