@php
                                        $debug = false;
  $debug=$debug?'text':'hidden';
@endphp
<div id="vue-app">
   <div class="row">

      {!! Form::custom_input_one("usuario", "Usuario", "col-md-3", ($rol_usuario->id)?$rol_usuario->usuario->persona->nombre_o_fantasia:'' ) !!}
      <input type="{{ $debug }}" name="cod_usuario" id="cod_usuario" value="{{ $rol_usuario->cod_usuario }}">
      <input type="{{ $debug }}" name="cod_empresa" id="cod_empresa" value="{{ $rol_usuario->cod_empresa }}">

      {!! Form::custom_input_one("rol", "Rol", "col-md-3", optional($rol_usuario->rol)->nombre ) !!}
      <input type="{{ $debug }}" name="rol_id" id="rol_id" value="{{ $rol_usuario->rol_id }}">

   </div>

   <hr>

   <div class="row">

      <div class="col-md-2">
         <input type="submit" class="btn btn-primary btn-block" value="{{ $rol_usuario->id?'ACTUALIZAR':'GUARDAR' }}">
      </div>

   </div>

</div>

@section("styles")
  @include('libraries', ['added' => array( 'jquery-ui-css', 'jquery-toast-css' )])
@endsection

@section('scripts')
   @include('libraries', ['added' => array('jquery-ui-js', 'jquery-toast-js' )])
  <script>
      $("#usuario").autocomplete
      ({
         source: "{{ route('administracion.base.mantenimientos.roles_usuarios.search_usuario') }}",
         autoFocus: true, 
         select: function(event, ui)
         {
            $("#cod_usuario").val( ui.item.cod_usuario );
            $("#cod_empresa").val( ui.item.cod_empresa );
         },
         response: function( e, ui ) 
         {
            for(var i=0; i<ui.content.length; i++)
               ui.content[i].label = ui.content[i].value = ui.content[i].persona.nombre_o_fantasia;
         }
      });

      $("#rol").autocomplete
      ({
         source: "{{ route('administracion.base.mantenimientos.roles_usuarios.search_rol') }}",
         autoFocus: true, 
         select: function(event, ui)
         {
            $("#rol_id").val( ui.item.id );
         },
         response: function( e, ui ) 
         {
            for(var i=0; i<ui.content.length; i++)
            {
               ui.content[i].label = ui.content[i].nombre + ' - ' + ui.content[i].descripcion;
               ui.content[i].value = ui.content[i].nombre;
            }
               
         }
      });

      $("form").on("submit", function(e)
      {  
         if( $("#cod_usuario").val() == "" || $("#cod_empresa").val() == "" )
            return !$.toast
            ({
               heading: 'AVISO',
               text: "No se selecciono ningun usuario.",
               position: 'top-right',
               stack: false,
               icon: 'error',
               hideAfter: 5000
            });
         else if( $("#rol_id").val() == "" )
            return !$.toast
            ({
               heading: 'AVISO',
               text: "No se selecciono ningun rol.",
               position: 'top-right',
               stack: false,
               icon: 'error',
               hideAfter: 5000
            });

      });
      
  </script>
@endsection