@extends('layouts.app')
@section('content')
<meta name="_token" content="{!! csrf_token() !!}" />

<!--Filters and actions-->
<!-- <div class="actions">
    <div class="container">
        <a class="add" href="forms">
            <i class="fa fa-plus-circle"></i>
        </a>

        <form class="form-search form form-inline">
            <input type="text" name="pesquisar" placeholder="Pesquisar?" class="form-control">
            <input type="submit" name="pesquisar" value="Encontrar" class="btn btn-success">
        </form>
    </div>
</div> --><!--Actions-->
@if($message = Session::get('success'))
<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    {{$message}}
</div>
@endif
@if($message = Session::get('danger'))
<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{$message}}</div>
@endif

<div class="clear"></div>
<div class="row">        
    <div class="col-md-12">
      <!--   <a class="btn btn-success float-right mb-4 " href="{{ route('register') }}">Novo Relacionamento</a> -->
        <button type="button" class="btn btn-success float-right" data-toggle="modal" data-target="#Addpermission" data-whatever="@getbootstrap">Relacionar novo usuário</button> 
    </div>          
</div>

<div class="container">
    <h4 class="title">
        Função "Cargo": <b> {{$role->name}}</b>
    </h4>

    <table class="table table-hover table-sm mt-4">
        <tr>
            <th>Usuário</th>
            <th>Login</th>
            <th width="100px">Ações</th>
        </tr>

        @forelse( $users as $user )
        <tr>
            <td>{{$user->name}}</td>
            <td>{{$user->email}}</td>
            <td>
                    <form method="POST" action="{{action('RoleController@destroy',$role->id)}}" class="float-right">
                    @csrf
                    <input type="hidden" id="id_user" name="id_user" value="{{$user->id}}">
                    <input type="hidden" id="id_funcao" name="id_funcao" value="{{$role->id}}">
                    <input type="hidden" id="tipo" name="tipo" value="users">
                    <input type="hidden" name="_method" value="DELETE">                             
                    <button class="btn btn-danger"><i class="fa fa-trash"></i></button>                               
                </form>
            </td>
        </tr>
        @empty
        <tr>
            <td colspan="90">
                <p>Nenhum Resultado!</p>
            </td>
        </tr>
        @endforelse
    </table>
 
      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" id="Addpermission">
              <div class="modal-dialog modal-lg">   
                <div class="modal-content">                  
                   <input type="hidden" name="id_role" id="id_role" value="{{ $role->id }}">
                   <table class="table table-hover"> 
                        <thead>
                            <tr>
                                <td colspan="4"><h5>Usuários não relacionados a uma Função "Cargo"</h5>
                                   <div class="col-md-12">                 
                                            <div class="input-group mb-3">                          
                                                <input type="text" name="busca" id="busca" class="form-control" placeholder="Busque o Usuários...">  
                                            </div> 
                                    </div>
                                </td>

                            </tr>
                            <tr>                 
                                <th scope="col">Nome</th>
                                <th scope="col">Email</th>
                                <th scope="col" class="float-right">Ação</th>
                            </tr>
                        </thead>
                        <tbody id="myTable">
                         @forelse($semfuncoes as $semfuncao)
                            @if(Auth::check())
                                <tr id="tr_{{ $semfuncao->id}}">
                                    <td>{{  $semfuncao->name }}<input type="hidden" id="id_usuario_{{ $semfuncao->id}}" value="{{ $semfuncao->id}}"></td>
                                    <td>{{  $semfuncao->email }}</td>
                                    <td>
                                        <button class="btn badge badge-pill badge-success float-right d-print-none" id="bt_relc_{{ $semfuncao->id}}">Relacionar</button>
                                        <div id="resp_{{ $semfuncao->id}}"></div> 
                                        <script type="text/javascript">

                                            $('#bt_relc_{{ $semfuncao->id}}').click(function(e){
                                                var id_role  = $('#id_role').val();                                 

                                                    $.ajaxSetup({
                                                        headers: {
                                                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                                                        }
                                                    })

                                                    e.preventDefault(); 
                                                    var formData = {
                                                        id_usuario:    $('#id_usuario_{{ $semfuncao->id}}').val(),
                                                        id_funcao: id_role,                                           
                                                    }

                                                    var type            = "POST";  
                                                    $.ajax({
                                                            type: type,
                                                            url: "../../../get-roles_users/relacionar_user",  
                                                            data: formData,
                                                            dataType: 'json',
                                                            success: function (data) {
                                                                    $.each(JSON.parse(data),function(key,value){                                                    
                                                                            $('#resp_{{ $semfuncao->id}}').append('<span class="badge badge-pill badge-'+key+' float-right">'+value+'</span>');
                                                                            $('#bt_relc_{{ $semfuncao->id}}').addClass('d-none');
                                                                    });  
                                                            },
                                                            error: function (data) {
                                                                   // console.log('Error:', data);
                                                                   $.each(data.responseJSON.errors, function(key,value) {
                                                                        $('#resp_{{ $semfuncao->id}}').append('<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+value+'</div');
                                                                    //alert(value);
                                                                    });                                                 
                                                            
                                                                }
                                                    });
                                            }); 
                                        </script>

                                    </td>
                                </tr>                       
                            @endif
                        @empty  
                            <tr>    
                                <td colspan="4">Todos os usuários já estão com funções "Cargos" relacionados!</td>
                            </tr>   
                        @endforelse 
                            </tbody>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="fechar_relac">Fechar</button>          
                    </div>
                </div>
              </div>
            </div>

</div>

@endsection
@section('post-script')

<script type='text/javascript'>

//Ativação do Jquery
$(document).ready(function() {
  $("#busca").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
// Fim do document ready
}) ;

   
</script>
<script type="text/javascript">
        //Quando aperta o cancelar do modal
        $("#fechar_relac").click(function(){        
            $('.bd-example-modal-lg').modal('hide');
             location.reload();
        });
</script>


@endsection