@extends('layout.padrao')
@section('title', 'Details - User')
@section('content')


<div class="row col">
  <div class="col-lg-8 col-sm-12 col-md-12">
    <div class="folha-interna shadow folha-branca-contornada padding-15 margin-top-10 justify-content-center">
      <div class="display-flex text-center justify-content-center">
        <div class="boxUser">
          <div class="circleStatus" data-toggle="tooltip" data-placement="top" title="Status: {{$usuario->status}}"><i
              class="fas fa-circle"></i></div>
          <i class="fas fa-user-circle"></i> {{$usuario->nome}}
        </div>
      </div>
      <div class="margin-top-15 text-center department">
        @if ($select['userOccupations'][$usuario->user_occupations_id] != '- Select Required -')
          {{$usuario->departamento}} - {{$select['userOccupations'][$usuario->user_occupations_id]}}
        @else
          {{$usuario->departamento}}
        @endif
        @can('onlyUserAndITTeam', [App\Usuario::class, $usuario->id] )
          <br />
          <a class="margin-top-15 btn alert-danger" style=" display: inline-block;" href="{{ route('editar', $usuario->id) }}">
            <i class="fas fa-pencil-alt"></i> OLD EDIT
          </a> 
        @endcan
        @can('developers', App\Usuario::class)
          <a class="margin-top-15 btn alert-danger" href="{{ route('ITlogar', $usuario->id) }}"  style="text-decoration: none;"> Logar Com Esse Usuário  (Desenvolvimento) </a> 
        @endcan
      </div>
      @can('developers', App\Usuario::class)
        <div class="w-100 form-group">
            <div class="col-sm-offset-2 col-sm-10 text-right margin-top-15">
                
            </div>
        </div>
    @endcan
      <div class="col display-flex justify-content-center margin-top-15">
        <div class="userLevel">
          <span class="badge badge-secondary">
            <i class="far fa-user"></i> User level {{$usuario->setor}}
          </span>
        </div>
        <div class="login margin-left-10">
          <span class="badge badge-secondary">
            Login: {{$usuario->login}}
          </span>
        </div>
      </div>

      
      @can('onlyUserAndITTeam', [App\Usuario::class, $usuario->id] )
        <div class="col display-flex justify-content-end">
          <div class="btn btn-blue" data-toggle="modal" data-target="#modal" data-placement="top" title="Edit">
            <i class="fas fa-pencil-alt"></i> Alterar dados
          </div>
        </div>
      @endcan
      

      <div class="col display-flex justify-content-center margin-top-10">
        <div class="row col blue-container">
          <div class="col-lg-2 col-md-6 col-sm-12 align-self-center sepLine">
            <b><i class="fas fa-globe"></i> Location:</b>
            <p>{{$select['country'][$usuario->countries_id]}}</p>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-12 align-self-center sepLine">
            <b><i class="fas fa-briefcase"></i> Main Client:</b>
            <p>{{$select['clients'][$usuario->clients_id]}}</p>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-12 align-self-center">
            <p class="email">
              <i class="fas fa-envelope"></i> {{$usuario->email}}
            </p>
            <p class="phone">
              <i class="fas fa-phone"></i>
              @if ($usuario->phone_number != null && $usuario->phone_number != '')
                {{$usuario->phone_number}}
              @else
                -
              @endif
            </p>
          </div>
        </div>
      </div>

      <div class="col-12 sep-line-gray"></div>

      <div class="col justify-content-between">
        <div class="row">

          @if ($usuario->userClients != null && $usuario->userClients != '')
              @if ( (sizeof($usuario->userClients)) == 1)
                <div class="col-lg-12 col-md-12 display-flex justify-content-center margin-top-20">
                  <div class="row col gray-container flex-column">
                    <b class="titleBox"><i class="fas fa-handshake"></i> Clients:</b>
                    <div class="display-flex flex-column listInfo">    
                        @foreach ($usuario->userClients as $keyClients1)
                          <p>{{$keyClients1->type}} - {{$keyClients1->name}} - {{$keyClients1->CNPJ}}</p>
                        @endforeach
                    </div>
                  </div>
                </div>
                <div class="col-lg-12 col-md-12 display-flex justify-content-center margin-top-20">
              @else
                <div class="col-lg-5 col-md-12 display-flex justify-content-center margin-top-20">
                  <div class="row col gray-container flex-column">
                    <b class="titleBox"><i class="fas fa-handshake"></i> Clients:</b>
                    <div class="display-flex flex-column listInfo">    
                        @foreach ($usuario->userClients as $index=>$keyClients)
                          <p>{{$keyClients->type}} - {{$keyClients->name}} - {{$keyClients->CNPJ}}</p>
                          @if($index != sizeof($usuario->userClients) - 1)
                            <div class="sep-line-gray"></div>
                          @endif
                        @endforeach
                    </div>
                  </div>
                </div>
                <div class="col-lg-7 col-md-12 display-flex justify-content-center margin-top-20">
              @endif
          @else
            <div class="col-lg-12 col-md-12 display-flex justify-content-center margin-top-20">
          @endif

            <div class="row col gray-container flex-column">
              <b class="titleBox"><i class="fas fa-user-clock"></i> Access Log:</b>

              <div class="table-responsive" style="overflow:clip; border: none; margin-top: -33px">
                <table class="table-striped text-center" id="table" data-toggle="table" data-search="false"
                  data-detail-formatter="detailFormatter" data-show-footer="false" data-show-refresh="false"
                  data-click-to-select="false" data-show-fullscreen="false" data-toolbar="#toolbar"
                  data-show-toggle="false" data-show-export="false" data-export-data-type="all" 
                  data-query-params="queryParams" data-url="/accesslog/json?user={{$usuario->id}}"
                  data-show-columns="false" style="font-size: 1.2rem">
                  <thead>
                    <tr class="trSuperBlue">
                      <th class="text-center" data-field="routeName" data-sortable="true">Application</th>
                      <th class="text-center" data-field="dhEvent" data-formatter="dateTimeBrazilFormat" data-sortable="true">Event Time</th>
                    </tr>
                  </thead>
                </table>

                <script>
                  var $table = $('#table')
                  var $button = $('#button')
                
                  $(function() {
                      $table.bootstrapTable({
                        cache: false,
                        height: 360,
                        striped: true,
                        pagination: false,
                                    
                      });
                  })

                  function dateTimeBrazilFormat(value, row, index) {

                    if (value == null) return '';
                    let originalDate = value;
                    originalDate = new Date(originalDate);

                    var data_format_due = ((originalDate.getDate() > 9) ? originalDate.getDate() : ('0' + originalDate.getDate())) +
                        '/' + ((originalDate.getMonth() > 8) ? (originalDate.getMonth() + 1) : ('0' + (originalDate.getMonth() + 1))) +
                        '/' + originalDate.getFullYear();    


                    return [data_format_due + ' ' + originalDate.toLocaleTimeString()].join('')

                  }
                </script>
                @include('bibliotecas.bootstrapExport')
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col display-flex margin-top-20 flex-column">
        <b class="titleBox"><i class="fas fa-user-cog"></i> User Characteristics:</b>
        <div class="display-flex listBadges">
          @if (sizeof($usuario->userCharacteristics) > 0)
          @foreach ($usuario->userCharacteristics as $keyCharacteristics)
          <p class="badge badge-blue">{{$keyCharacteristics->id}} - {{$keyCharacteristics->description}}</p>
          @endforeach
          @else
          -
          @endif
        </div>
      </div>

      <div class="col display-flex margin-top-10 flex-column">
        <b class="titleBox"><i class="fas fa-users-cog"></i> Access group profiles:</b>
        <div class="display-flex listBadges">
          @if (sizeof($usuario->userAccessProfiles) > 0)
          @foreach ($usuario->userAccessProfiles as $keyAccessProfiles)
          <p class="badge badge-blue">{{$keyAccessProfiles->description}}</p>
          @endforeach
          @else
          -
          @endif
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-12 col-md-12 display-flex">
    <div class="folha-interna shadow folha-branca-contornada padding-15 margin-top-10 justify-content-center">
      <h3 class="titleMenu">MENU</h3>
      <div class="wrapTree">
        <div class="tree">
          <ul id="menuTree"> 
            @php 
              $sideMenu = app(App\Http\Controllers\UsuarioController::class)->menuLoadingDetailsForUser($usuario->id); 
              $menuList = json_decode($sideMenu, true);
            @endphp

            <script>
              // declarando variáveis
              let numOrdem;
              let objMenu = [];
              let objSubmenu = [];
            </script>         

            @foreach ($menuList as $index=>$keyuserMenu)
              <script>
                // criando objetos para seus dados serem "tratados" - ordenados e em seguida enviados para a tela.
                if("{{$keyuserMenu['status']}}" == 'Ativo'){
                  if("{{$keyuserMenu['tipoPrincipal']}}" == 'Y'){ // Se for menu principal:
                    if ("{{$keyuserMenu['nmMenu']}}" == "Home"){
                      numOrdem = 0; // deixando a Home em primeiro
                    } else{
                      numOrdem = "{{$keyuserMenu['mnOrdem']}}";
                    }
                    objMenu.push({
                      title: "{{$keyuserMenu['nmMenu']}}",
                      order: numOrdem,
                      index: "{{$index}}"
                    });
                  } else{ // Se for submenu:
                    objSubmenu.push({
                      title: "{{$keyuserMenu['nmMenu']}}",
                      belongsTo: "{{$keyuserMenu['belongsTo']}}",
                      order: "{{$keyuserMenu['mnOrdem']}}",
                      index: "{{$index}}"
                    });
                  }
                }
              </script>
            @endforeach
            <script>
              // ordenando o menu e submenu pelo valor de $keyuserMenu['mnOrdem']
              objMenu.sort((a,b) => a.order - b.order);
              objSubmenu.sort((a,b) => a.order - b.order);

              // montando o menu
              for(var j=0;j<objMenu.length;j++){      
                $('#menuTree').append(
                  '<li class="listaMenu">'+
                    '<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.18 6.84239H12.3947L10.4484 4.80786H4.60941C3.53893 4.80786 2.67282 5.7234 2.67282 6.84239L2.66309 19.0496C2.66309 20.1686 3.53893 21.0841 4.60941 21.0841H20.18C21.2505 21.0841 22.1263 20.1686 22.1263 19.0496V8.87692C22.1263 7.75793 21.2505 6.84239 20.18 6.84239ZM14.341 17.015H6.55573V14.9805H14.341V17.015ZM18.2337 12.946H6.55573V10.9115H18.2337V12.946Z" fill="#569DFA"/></svg>'+
                    '<b>'+objMenu[j].title+'</b>'+
                    '<ul class="sublista" id="sublista'+objMenu[j].index+'">'+
                      '<input type="hidden" name="menuName'+objMenu[j].index+'" id="menuName'+objMenu[j].index+'" value="'+objMenu[j].title+'">'+
                    '</ul>' 
                );
              }
              // montando o submenu
              for(var j=0;j<objSubmenu.length;j++){
                for(var x=0;x<objMenu.length;x++){
                  if(objSubmenu[j].belongsTo == objMenu[x].title){
                    $('#sublista'+objMenu[x].index+'').append(
                      '<li>' +
                        '<svg width="18" height="18" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3743 6.25694H12.589L10.6427 4.22241H4.80374C3.73327 4.22241 2.86715 5.13795 2.86715 6.25694L2.85742 18.4641C2.85742 19.5831 3.73327 20.4986 4.80374 20.4986H21.1237C21.7854 20.4986 22.3206 19.929 22.3206 19.2474V8.29147C22.3206 7.17248 21.4448 6.25694 20.3743 6.25694ZM20.3743 18.4641H4.80374V6.25694H9.83499L11.7813 8.29147H20.3743V18.4641ZM18.428 12.3605H6.75007V10.326H18.428V12.3605ZM14.5354 16.4296H6.75007V14.3951H14.5354V16.4296Z" fill="#90BBF4"/></svg>' +
                        '<b>'+objSubmenu[j].title+'</b>' +
                      '</li>'
                    );
                  }
                }
              }
            </script>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>

@include('usuarios.detalhes.style')
@include('usuarios.detalhes.modal')

@endSection