@extends('layouts.app')

@section('conteudo')

@php
function trataPerfil($perfil){
        switch ($perfil) {
            case 0:
                return 'Não há uma tipo de perfil atribuido';
            case 1:
                return 'Administrativo';
                break;
            case 2:
                return 'Professor(a)';
                break;
            case 3:
                return 'Instrutor(a)';
                break;
            case 4:
                return 'Instrutor(a) Ou Coordenador(a)';
                break;
            case 5:
                return 'Administrativo e Coordenador';
            case 6:
                return 'Voluntario';
        }
    }
@endphp

<!-- Toastr CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

<!-- Toastr JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>


<br><br>
            <div class="card">

                <div class="card-header py-2">

                    <h3 class="card-title">
                        Defina as funções dos usuários
                    </h3>
                </div>

                </div class="card-body">

                 <div class="table-responsive bg-white">
                        <table class="table table-striped table-bordered">
                        <thead>
                                <tr>
                                    <th>Nº</th>
                                    <th>Usuários</th>
                                    <th>Perfil</th>
                                    <th>Ação</th>
                                </tr>

                        </thead>
                        <tbody>
                            @foreach($users as $item)
                        <tr>

                        <td>{{$item->id}}</td>
                        <td>
                        <select class="form-control" name="user_id" disabled>
                            <option value="{{$item->id}}">{{$item->nome_completo}}</option>
                       </select>
                        </td>
                        <td>
                        <form action="/salvar_roles_users" method="POST" enctype="multipart/form-data">
                      @csrf
                       <select class="form-control custom-select" name="role_id" id="select_{{$loop->index}}" data-value="{{$item->id}}">
                        <option value="{{$item->tipo_perfil}}" selected> {{trataPerfil($item->tipo_perfil)}} </option>
                        @foreach ($roles as $item_role)

                        <option value="{{$item_role->id}}"> {{$item_role->name}} </option>

                        @endforeach
                       </select>
                       </form>
                        </td>
                        <td>
                          <a href="/inativar_usuario/{{$item->id}}">  <button class="btn btn-danger"> Inativar </button> </a>
                        </td>
                    </tr>
                    @endforeach
                        </tbody>
                    </table>

                       <div>
                        {{-- <button type="submit" name="Enviar" class="btn btn-primary">Salvar</button> --}}

                </div>
            </div>






<script>
    document.querySelectorAll('.custom-select').forEach(function(select) {
      select.addEventListener('change', function() {
        var id_role = this.value;
        var selectId = this.id;
        var id_user = this.getAttribute('data-value');
        // console.log(id_role);
        // console.log(selectId);
        // console.log(id_user);
        $.ajax({
    type: 'POST',
    url: '/actualizar_roles_users',
    data: { role_id: id_role, user_id: id_user },
    success: function(response) {
        toastr.success("Função do usuário atualizada com sucesso");
    },
    error: function(error) {
        console.error('Erro ao atualizar o valor: ', error);
    }
});
      });
    });
  </script>

  @endsection