<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.79.0">
    <title>GESTDOC - MEUS DISPOSITIVOS</title>
    <link rel="stylesheet" href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css') }}">
    <link rel="stylesheet" href="{{ asset('https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('https://unpkg.com/aos@2.3.1/dist/aos.css') }}">
    <link rel="stylesheet" href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css') }}">
    <script src="{{ asset('https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js') }}"></script>
    <script src="{{ asset('https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js') }}" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <link  href="{{ asset('https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css') }}" rel="stylesheet">


    <!-- Bootstrap core CSS -->

    <meta name="theme-color" content="#7952b3">


    <script type="text/javascript" src="https://me.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=IgjvMWp2F9PKvS8zr4LOAB2LW5ITjpPhHxJ36mJYxoxVd-r9XWplVm4wBMmhuT27cflIwNrSh9uWNumbyrw3RD5OhpCU0iPSysz2_2TobiQ" charset="UTF-8"></script>



    <!-- Custom styles for this template -->
    <link href="offcanvas.css" rel="stylesheet">
  </head>
  <body class="bg-light">

<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">
        <li class="nav-item active">
          <a class="nav-link" aria-current="page" href="{{ route('us.me') }}"> <i class="fa fa-angle-left"></i> Voltar</a>
        </li>


      </ul>

    </div>
  </div>
</nav>
<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>

  </body>
</html>
