@extends('usuarios.funcionarios.master.layout2')
{{-- @extends('usuarios.funcionarios.admin.menu') --}}
{{-- @extends('usuarios.funcionarios.usuario.menu') --}}

@section('conteudo')
<script src="{{asset('js/jquery.dataTables.min.js') }}"></script>
<nav class="navbar navbar-expand-lg   navbar-dark bg-success" aria-label="Main navigation">
  <div class="container-fluid">


    <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">


      </ul>

    </div>
  </div>
</nav>
<nav class="w-100 d-none overflow-auto">
    {{ $idUser=Auth::id() }}
    {{ $devicesAllowed=\App\Models\Dispositivo::where('user_id',$idUser)->where('estado','permitido')->get()}}
    {{ $devicesBloqued=\App\Models\Dispositivo::where('user_id',$idUser)->where('estado','barrado')->get()}}
    {{ $devicesPend=\App\Models\Dispositivo::where('user_id',$idUser)->where('estado','solicitado')->get()}}
    {{ $devicesToSolicit=\App\Models\Dispositivo::where('user_id',$idUser)->where('estado','null')->get()}}
    {{ $all=0 }}
    {{ $permitidos=0 }}
    {{ $barrados=0 }}
    {{ $porSolicitar=0 }}
    {{ $pendentes=0 }}
    @foreach($devicesAllowed as  $devAl)
        {{ $permitidos++ }}
    @endforeach
    {{ $all+=$permitidos }}
    @foreach($devicesBloqued as  $devAl)
    {{ $barrados++ }}
    @endforeach
    {{ $all+=$barrados }}
    @foreach($devicesToSolicit as  $devAl)
    {{ $porSolicitar++ }}
    @endforeach
    {{ $all+=$porSolicitar }}
    @foreach($devicesPend as  $devAl)
    {{ $pendentes++ }}
    @endforeach
    {{ $all+=$pendentes }}

</nav>
<div class="nav-scroller  bg-light shadow-sm">
  <nav class="nav nav-underline " aria-label="Secondary navigation">
    <a class="nav-link btn btn-light shadow-sm border btn-sm m-3" href="">
        Todos
        <span class="badge bg-light text-dark rounded-pill align-text-bottom">{{ $all }}</span>
    </a>
    <a class="nav-link btn btn-light shadow-sm border btn-sm m-3" href="">
    Permitidos
    <span class="badge bg-light text-dark rounded-pill align-text-bottom">{{ $permitidos }}</span>
    </a>
    <a class="nav-link btn btn-light shadow-sm border btn-sm m-3" href="">
        Pendentes
        <span class="badge bg-light text-dark rounded-pill align-text-bottom">{{ $pendentes }}</span>
    </a>
    <a class="nav-link btn btn-light shadow-sm border btn-sm m-3" href="">
      Por solicitar
      <span class="badge bg-light text-dark rounded-pill align-text-bottom">{{ $porSolicitar }}</span>
    </a>
    <a class="nav-link btn btn-light shadow-sm border btn-sm m-3" href="">
      Barrados
      <span class="badge bg-light text-dark rounded-pill align-text-bottom">{{ $barrados }}</span>
    </a>
  </nav>
</div>

<main class="container p-2">
  <div class="d-flex  bg-success align-items-center p-3 my-3 rounded shadow-sm">
    {{-- <img src="{{ asset('img/logo.png') }}" class="mr-4" width="80" alt="LOGO GESTDOC"> --}}
    <div class=" text-white ">
      <h1 class="h6 mb-0 ml-3   ">LISTA DE DISPOSITIVOS </h1>

    </div>
  </div>

  <div class="my-3 p-3 bg-success rounded shadow ">
    <h6 class="border-bottom text-white pb-2 mb-0">PERMITIDOS</h6>
    <br>
    <div class="list-group">
        <nav class="col-12 table-responsive">
            <table class="table  table-striped table-hover" id="permitidos">
                <thead>

                    <tr class="danger text-white">
                     <th>Id</th>
                      <th>SO</th>
                      <th>Versão</th>
                      <th>Browser</th>
                      <th>Versão do browser</th>
                      {{-- <th>Mais</th> --}}

                  </tr>

               </thead>
                <tfoot></tfoot>
            </table>
        </nav>
    </div>
    <br>
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">

            {{-- {{ $devicesAllowed->links() }} --}}
        </ul>
      </nav>
    <small class="d-block text-end mt-3">
        {{-- <a href=" " class="btn btn-sm btn-outline-success "><i class="fa fa-eye"></i> Ver todos</a> --}}
      </small>
  </div>
  <div class="my-3 p-3 bg-warning text-white rounded shadow ">
    <h6 class="border-bottom pb-2 mb-0">PENDENTES</h6>
    <br>

    <div class="list-group">
        <nav class="col-12 table-responsive">
            <table class="table  table-striped table-hover" id="pendentes">
                <thead>

                    <tr class="danger text-white">
                     <th>Id</th>
                      <th>SO</th>
                      <th>Versão</th>
                      <th>Browser</th>
                      <th>Versão do browser</th>
                      {{-- <th>Mais</th> --}}

                  </tr>

               </thead>
                <tfoot></tfoot>
            </table>
        </nav>
    </div>
  </div>
  <div class="my-3 p-3 bg-info rounded shadow-sm">
    <h6 class="border-bottom pb-2 mb-0">POR SOLICITAR</h6>
    <br>

    <div class="list-group">
        <nav class="col-12 table-responsive">
            <table class="table  table-striped table-hover" id="porsolicitar">
                <thead>

                    <tr class="danger text-white">
                     <th>Id</th>
                      <th>SO</th>
                      <th>Versão</th>
                      <th>Browser</th>
                      <th>Versão do browser</th>
                      <th>Solicitar</th>
                      {{-- <th>Mais</th> --}}

                  </tr>

               </thead>
                <tfoot></tfoot>
            </table>
        </nav>
    </div>
  </div>

  <div class="my-3 p-3 bg-danger text-white rounded shadow ">
    <h6 class="border-bottom pb-2 mb-0">BARRADOS</h6>
    <br>
    <div class="list-group   ">
        <nav class="col-12 table-responsive">
            <table class="table  table-striped table-hover" id="barrados">
                <thead>

                    <tr class="danger text-white">
                     <th>Id</th>
                      <th>SO</th>
                      <th>Versão</th>
                      <th>Browser</th>
                      <th>Versão do browser</th>

                  </tr>

               </thead>
                <tfoot></tfoot>
            </table>
        </nav>
    </div>
  </div>
</main>

<script type="text/javascript">
    $(function() {

        $('#permitidos').DataTable({

            processing: false,
            serverSide: false,
            ajax: '{{ url('usuario/dispositivos/showdevicespermitidos') }}',
            columns: [
                    { data: 'id', name: 'id' },
                    { data: 'plataform', name: 'plataform' },
                    { data: 'versaoPlataform', name: 'versaoPlataform' },
                    { data: 'browser', name: 'browser' },
                    { data: 'versaoBrowser', name: 'versaoBrowser' },

                ],


        });
         $('#barrados').DataTable({

            processing: false,
            serverSide: false,
            ajax: '{{ url('usuario/dispositivos/showdevicesbarrados') }}',
            columns: [
                    { data: 'id', name: 'id' },
                    { data: 'plataform', name: 'plataform' },
                    { data: 'versaoPlataform', name: 'versaoPlataform' },
                    { data: 'browser', name: 'browser' },
                    { data: 'versaoBrowser', name: 'versaoBrowser' },

                ],


        });
         $('#porsolicitar').DataTable({

            processing: false,
            serverSide: false,
            ajax: '{{ url('usuario/dispositivos/showdevicesporsolicitar') }}',
            columns: [
                    { data: 'id', name: 'id' },
                    { data: 'plataform', name: 'plataform' },
                    { data: 'versaoPlataform', name: 'versaoPlataform' },
                    { data: 'browser', name: 'browser' },
                    { data: 'versaoBrowser', name: 'versaoBrowser' },
                    { data: 'solicitar', name: 'solicitar' },

                ],


        });
         $('#pendentes').DataTable({

            processing: false,
            serverSide: false,
            ajax: '{{ url('usuario/dispositivos/showdevicespendentes') }}',
            columns: [
                    { data: 'id', name: 'id' },
                    { data: 'plataform', name: 'plataform' },
                    { data: 'versaoPlataform', name: 'versaoPlataform' },
                    { data: 'browser', name: 'browser' },
                    { data: 'versaoBrowser', name: 'versaoBrowser' },

                ],


        });
    });
  </script>
@endsection