@extends('layouts.master-horizontal')
@section('title') Facedra @endsection
@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
	<link href="{{ URL::asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
@endsection
@section('content')
@component('common-components.breadcrumb')
    @slot('pagetitle') Gestion Usuarios @endslot
    @slot('title') <a href="{{Route('dashboard')}}"> Menu principal </a> / Administración de Roles @endslot
@endcomponent
<div class="row">
	<div class="col-12">
		<div class="card">
			<div class="card-body">
				<h4 class="card-title">Filtros</h4>
                <hr>
                <form action="{{route('rol.filtro') }}" method="POST">
                    @csrf
                    <div class="form-group row">
                        <label class="col-md-1 col-form-label" for="password">Código: </label>
                        <div class="col-md-3">
                            <input type="text" class="form-control" id="codigo" name="codigo" placeholder="Código del Rol">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-1 col-form-label" for="nombre">Nombre: </label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre del Rol">
                        </div>
                    </div>
                    @include('flash::message')
                    <div class="button-items">
                        <a href=""> 
                            <button type="submit" class="btn btn-primary waves-effect waves-light">
                                Buscar

                            </button>
                        </a>
                        <button id="ButtonLimpiar" type="button" class="btn btn-primary waves-effect waves-light" >
                            Limpiar Filtros
                        </button>
                        <button id="ButtonAdd" type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#myModal">
                            Alta de Aplicacion
                        </button>
                    </div>
                </form>
				<br>
                <div class="table-responsive">
                    <table id="datatable" class="table table-bordered dt-responsive nowrap yajra-datatable" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
							<tr>
                                <th>Código</th>
                                <th>Descripción</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forEach($roles as $item)
                            <tr class="filas">
                                <td>{{$item->ROLE_CODIGO_ROL}}</td>
                                <td>{{$item->ROLE_DS_ROL}}</td>
                                <td>
                                    <button type="button" class="btn btn-primary" onclick="editar({{$item->ROLE_ID_ROL}})" data-toggle="modal" data-target="#myModal2">Editar <i class='uil-edit ml-2'></i></button>
                                    <button type="button" class="btn btn-danger"  onclick="eliminar({{$item->ROLE_ID_ROL}})">Eliminar <i class='mdi mdi-delete'></i></button>
                                </td>          
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL DE CAMBIOI de contraseña-->
<div>
    <!-- sample modal content -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title mt-0 text-white" id="myModalLabel">Alta de Rol</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" action="{{Route('rol.store')}}">
                    @csrf
                    <div class="modal-body">
                        
                          
                            <div class="row">
                                <label class="col-md-3 col-form-label" for="progresspill-pancard-input">Código:</label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control" id="codigo" name="codigo" placeholder="Código Rol">
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <label class="col-md-3 col-form-label" for="confir_password">Nombre:</label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre Rol">
                                </div>
                            </div>  
                        
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary waves-effect waves-light">Guardar</button>
                        <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Cerrar</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<!-- FINALIZA MODAL -->
<!-- MODAL EDITAR A UNA APLICACION-->
<div>
    <!-- sample modal content -->
    <div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title mt-0 text-white" id="myModalLabel2">Modificar Rol</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" action="{{Route('roles.update')}}">
                    @csrf
                    <div class="modal-body">
                        
                          
                            <div class="row">
                                <label class="col-md-3 col-form-label" for="progresspill-pancard-input">Código:</label>
                                <div class="col-lg-6">
                                    <input type="hidden" id="id" name="id" value="">
                                    <input type="text" class="form-control" id="codigo_edite" name="codigo" value="">
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <label class="col-md-3 col-form-label" for="confir_password">Nombre de Aplicacion:</label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control" id="nombre_edite" name="nombre" value="">
                                </div>
                            </div>  
                        
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary waves-effect waves-light">Guardar</button>
                        <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Cerrar</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<!-- FINALIZA MODAL -->
@endsection
@section('script')  
    <script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
    <script src="{{ URL::asset('assets/js/pages/datatables.init.js')}}"></script>
    
    <!-- Sweet Alerts js -->
    <script src="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
    <!-- Range slider init js-->
	<script src="{{ URL::asset('assets/js/pages/sweet-alerts.init.js')}}"></script> 
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
    
        var table;
        var l_Item;
        $(document).ready(function() {
            /*table = $('.yajra-datatable').DataTable({
            select: true,
            "order": [[ 0, "desc" ]],
            language:{url:'https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json'},
            processing: true,
            serverSide: true,
            "ajax": {
                "url": "",
                "dataType": "json",
                "type": "GET",

            },
            "columns": [
                {data: 'id_paciente', orderable: true, searchable: false},
                {data: 'documento_identificacion'},
                {data: 'numero_expediente'},
                {data: 'codigo_paciente'},
                {data: 'id_sexo_nominal'},
                {data: 'post',orderable: false, searchable: false},
            
            ],
            
            //Configuracion Inicial
                
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Todos  * ']],
                
            });


            table.on( 'select', function ( e, dt, type, indexes ) {
               var rowData = table.rows( indexes ).data().toArray();
               l_Item = table.rows({ selected: true }).data()[0];
               seleccion(l_Item.id_paciente)
           });*/
         });
         function encode(data){
            var encode = window.btoa(data);
            return encode;

        }
         $('#codigo').autocomplete({
            source: function(request, response){
                $.ajax({
                    url:"{{route('roles.getcodigo')}}",
                    type: 'GET',
                    dataType:'json',
                    data:{
                        term:request.term
                    },
                    success:function(data){

                        response(data)
                    }
                });
            }
        });
        $('#nombre').autocomplete({
            source: function(request, response){
                $.ajax({
                    url:"{{route('roles.getnombre')}}",
                    type: 'GET',
                    dataType:'json',
                    data:{
                        term:request.term
                    },
                    success:function(data){

                        response(data)
                    }
                });
            }
        });
        $('#ButtonLimpiar').click(function() {
            $('input[type="text"]').val('');
        });
        function eliminar(id){
            Swal.fire({
                title: 'Estas seguro de eliminar el registro?',
                text: 'No podras deshacer esta accion',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
                }).then((result) => {
                if (result.value) {
                    Swal.fire(
                    'Eliminado!',
                    'Registro eliminado',
                    'success'
                    )
                    window.location.href = "{{ url('roles/destroy') }}/"+id;
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire(
                    'Cancelado',
                    'El registro no fue eliminado :)',
                    'error'
                    )
                    
                }
                })      
        }
        function editar(id){
                $.ajax({
                    type:'GET',
                    url:'{{ url("roles/edite") }}/'+id,
                    success:function(data) {
                        
                        $("#id").val(data[0].ROLE_ID_ROL);
                        $("#codigo_edite").val(data[0].ROLE_CODIGO_ROL);
                        $("#nombre_edite").val(data[0].ROLE_DS_ROL);
                    }
                });
            //$('#myModal2').modal('show') 
        }
    </script>
@endsection