@extends('layout.master')
@section('parentPageTitle', 'Perfil')
@section('title', 'Editar 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/plugins/bootstrap-select/css/bootstrap-select.css')}}">
@stop

@section('content')

    <div class="row clearfix">
        <!-- <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-lg-8 col-md-8 col-sm-8">-->
            <div class="col-md-12 d-flex justify-content-center">
            <div class="card">
               
                <div class="body">

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

                    <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-1" align="left">
                       <p class="" style="color:#FF0000" ><small>* Son campos obligatorios.</small></p>
                    </div>

                    

                    </br>
                    <form action="" id="formEditarPerfil" method="post">

                        {{ csrf_field() }}

                         <input type="hidden" id="idperfil" name="idperfil" value="{{$data[0]->id}}">

                         <input type="hidden" id="tipoperfil" name="tipoperfil" value="{{$data[0]->tipoperfil}}">

                          <input type="hidden" id="idrol" name="idrol" value="{{$data[0]->rol_id}}">


                        <div class="row clearfix">

                            <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Rol
                                </div>
                            </div>                             
                            <div class="col-sm-4">
                                  <div class="form-group">
                                    <input type="text" id="nombrerol" name="nombrerol" class="form-control" autocomplete="off" value="{{$data[0]->nombrerol}}" disabled="">
                                  </div>  
                            </div> 

                            <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Nombre perfil *
                                </div>
                            </div>                             
                            <div class="col-sm-4">
                                  <div class="form-group">
                                    <input type="text" id="nombre" name="nombre" class="form-control" autocomplete="off" value="{{$data[0]->nombre}}">
                                  </div>  
                            </div> 

                            <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                    Descripcion perfil
                                </div>
                            </div>                             
                            <div class="col-sm-4">
                                  <div class="form-group">
                                    <input type="text" id="descripcion" name="descripcion" class="form-control" autocomplete="off" value="{{$data[0]->descripcion}}">
                                  </div>  
                            </div> 

                        </div>

                        

                        <h4 align="left">&nbsp;Acceso modulos</h4>
                        <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="tablaaccesomodulos" name="tablaaccesomodulos">
                                <thead>
                                    <tr class="ui-widget-header">    

                                        <th> </th>                                
                                        <th>Nombre</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                
                            </table>
                        </div>

                    </div>

                    </br>
                    </br>


                    <div class="row clearfix" align="right">          
                        <div class="col-sm-12">
                            <button style="border-color:#18ce0f; color:#18ce0f;" type="button" class="btn btn-default btn-round btn-simple" id="btnEditar" name="btnEditar"><strong>Grabar</strong></button>
                            <button style="border-color:#FF3636; color:#FF3636;"type="button"  id="btnCancelarEditar" class="btn btn-default btn-round btn-simple"><strong>Cancelar</strong></button>
                            
                        </div>
                    </div>

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

    <div id="dialog_alerta" title="{{config('maestro.nombresistema')}}">
        <p id=dialog_texto align="center"></p>
    </div>
@stop

@section('page-script')

<script src="{{asset('assets/bundles/datatablescripts.bundle.js')}}"></script>
<script src="{{asset('assets/jquery-ui.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"
    }
}

$(function () {

    $("#dialog_alerta").dialog({ autoOpen: false });

    $('#nombre').keypress(function (e) {
        var tecla = document.all ? tecla = e.keyCode : tecla = e.which;
        return !((tecla > 47 && tecla < 58) || tecla == 46);
    });

     
    $('#descripcion').keypress(function (e) {
        var tecla = document.all ? tecla = e.keyCode : tecla = e.which;
        return !((tecla > 47 && tecla < 58) || tecla == 46);
    });

    $("#btnCancelarEditar").click(function(){

        window.location.href = "listado"; 

    });

});


$("#btnEditar").click(function(){

   
    var nombreperfil= $("#nombre").val();
    var descripperfil= $("#descripcion").val();
    var idperfil= $("#idperfil").val();
    var tipoperfil= $("#tipoperfil").val();

    if(nombreperfil==""){

      $( "#dialog_texto" ).empty();
      $( "#dialog_texto" ).append("Debe ingresar el nombre del perfil.");
      $( "#dialog_alerta" ).dialog('open');
      return false;

    }


    var token = $('meta[name="csrf-token"]').attr('content');

    $.ajax({

        type:'POST',            
        async:false,
        url:'editar',
        data:{
            nombreperfil: nombreperfil,
            descripperfil: descripperfil,
            idperfil: idperfil,
            tipoperfil: tipoperfil

        },
        headers: {'X-CSRF-TOKEN': token},

        success:function(data){

            if (data.mensaje == 'actualizado') {

                $("#dialog_texto").empty();
                $("#dialog_texto").append("Los datos del perfil han sido actualizados con exito");
                $("#dialog_alerta").dialog('open');
                setTimeout(function(){
                    window.location.href = "listado";
                },1500); 
               
            }

        }
    });  

});

function cambiarEstado(id,estado,btn_id){

    var rol= $("#idrol").val();
    var idperfil= $("#idperfil").val();
    
    var token = $('meta[name="csrf-token"]').attr('content');
    var url='ajax_cambiar_estado';
    var enviarData={"id" : id, "estado" : estado, "rol": rol, "idperfil": idperfil};

    $.ajax({
        type:'POST',
        url: url,
        data: enviarData,
        headers: {
            'X-CSRF-TOKEN': token
        },
        success:function(data){
            if(data==1){
                $("#"+btn_id).text("Activo");
                $("#"+btn_id).removeClass();
                $("#"+btn_id).addClass('tag badge badge-default');
                $("#"+btn_id).css({'border-color':'#18ce0f','color':'#18ce0f'});
                $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '1', '"+btn_id+"')");
            }else{
                $("#"+btn_id).text("Inactivo");
                $("#"+btn_id).removeClass();
                $("#"+btn_id).addClass('tag badge badge-default');
                $("#"+btn_id).css({'border-color':'#FF3636','color':'#FF3636'});
                $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '0', '"+btn_id+"')");
            }
        }
    });
    
}

function listaraccesomodulos() {

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

    var rol= $("#idrol").val();
    var idperfil= $("#idperfil").val();
    

    var eliminartabla = jQuery('#tablaaccesomodulos').dataTable().fnDestroy();
    var recargartabla = jQuery('#tablaaccesomodulos').dataTable({
        
        "aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],
        "lengthMenu": [50],
        "pageLength": 50,
        "ajax": {
            method:'post',
            url: route,
            headers:{
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            "data": function(data) {
               data.rol = rol;
               data.idperfilorigen = idperfil;
            }

        },
        
        columns: [

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

            {   
                className: 'text-left',
                data:'id',
                
                render: function (data,type,row) {
                   
                    var estado= row.estado; 

                    if (estado == 0){

                      var boton = '<tr class="identificador" data-id="' + data + '">'+'<a href="#" id="'+ data + '" name="' + data + '" class="tag badge badge-suc" style="border-color:#FF3636; color:#FF3636;" onclick="cambiarEstado('+data+','+estado+','+data+')">Inactivo</a> </tr>'
                    }

                    if (estado == 1){
                      
                      var boton = '<tr class="identificador" data-id="' + data + '">'+'<a href="#" id="' + data + '" name="' + data + '" class="tag badge badge-default" style="border-color:#18ce0f;color:#18ce0f;" onclick="cambiarEstado('+data+','+estado+','+data+')">Activo</a></tr>'
                    }

                    return ''+boton+'';  
                }
            }
            
        ],

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

        language: lenguaje

    });

}


$(document).ready(function() {

    
    listaraccesomodulos();
     

} );
  
</script>
@stop