@extends('layout.padrao')
@section('content')
@include('Intranet.menu')

<div class="col col-12 margin-bottom-30 ajusteMobile">
  <div class="col margin-bottom-30">
    <h2>
      Análise TI
    </h2>
  </div>
  <div class="w-100"></div>

  <div class="row col bg-light-dash padding-15 radius-5">
    <div class="col-sm-12 col-md-8 col-lg-5 col-dash-big">
      <div class="row">
        <div class="col margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Usuários, Empresas Cadastradas e Aplicações</b></br>
          <div id="usersChart" class="text-webkit-center"></div>
        </div>
        <div class="w-100"></div>
        <div class="col margin-10 border-gray radius-5 bg-white">
          <div class="table-responsive" style="margin-top: -40px; height: 648px; width: 103.1%; margin-left: -12px; margin-bottom: -10px;">
            <table class="table-striped text-center" id="table" data-toggle="table" data-search="false"
              data-detail-formatter="detailFormatter" data-page-list="[100, 200, 300, 400, all]"
              data-show-footer="false" data-show-pagination-switch="false" data-show-refresh="false"
              data-click-to-select="true" data-locale="en-US" data-show-fullscreen="false" data-pagination="false"
              data-toolbar="#toolbar" data-show-toggle="false" data-show-export="false" data-export-data-type="all"
              data-query-params="queryParams" data-url="/analysisTable" data-show-columns="false" style="height: 594px; font-size: 1.7rem;">
              <thead>
                <tr class="trSuperBlue">
                  <th data-field="type" class="centralizedObject" data-sortable="true">Categoria</th>
                  <th data-field="value1" class="centralizedObject" data-sortable="true">2020</th>
                  <th data-field="value2" class="centralizedObject" data-sortable="true">2021</th>
                  <th data-field="value3" class="centralizedObject" data-sortable="true">2022</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
        <div class="w-100"></div>
        <div class="col margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Tráfego de páginas Visitadas</b> </br>
          <div id="trafegoPagChart" class="text-webkit-center"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-4 col-dash-big">
      <div class="row">
        <div class="col margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Loading</b></br>
          <div id="loadingChart" class="text-webkit-center"></div>
        </div>
        <div class="w-100"></div>
        <div class="col margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Anexos - Arquivos Salvos no Sistema</b></br>
          <div id="anexosChart" class="text-webkit-center"></div>
        </div>
        <div class="w-100"></div>
        <div class="col margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Cargoo Integrações</b></br>
          <div id="ciChart" class="text-webkit-center"></div>
        </div>
        <div class="w-100"></div>
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="row chartBoxes">
            <div class="col-12 radius-5 padding-15">
              <div class="boxInside boxInside1">
                <div class="details">
                  <h3>347.381</h3>
                  <h4>Processamento de registros por dia (tabelas de logs)</h4>
                </div>
                <div id="procRegChart"></div>
              </div>
            </div>
            <div class="w-100"></div>
            <div class="col-6 radius-5 padding-15">
              <div class="boxInside boxInside2">
                <div class="details">
                  <h3>414.699</h3>
                  <h4>Envio de Emails</h4>
                </div>
                <div id="envEmailChart"></div>
              </div>
            </div>
            <div class="col-6 radius-5 padding-15">
              <div class="boxInside boxInside3">
                <div class="details">
                  <h3>15.506</h3>
                  <h4>Média mensal de envio de Emails</h4>
                </div>
                <div id="medEnvEmailChart"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-100"></div>
        <div class="col margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Tamanho do Storage</b></br>
          <div id="storageChart" class="text-webkit-center"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-3 col-dash-small">
      <div class="row">
        <div class="col-12 col-dash-middle margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Criação e Cancelamento de DN</b> </br>
          <div id="createCancelDnChart" class="text-webkit-center"></div>
        </div>
        <div class="col-12 col-dash-middle margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Integrações</b></br>
          <div id="integrationsChart" class="text-webkit-center"></div>
        </div>
        <div class="col-12 col-dash-time margin-10 border-gray radius-5 padding-15 bg-white">
          <div class="row">
            <div class="col">
              <b class="font-h-dash">Tempo médio de tarefas</b>
            </div>
            <div class="w-100"></div>
            <div class="col-4">
              <div id="time2020Chart"></div>
            </div>
            <div class="col-4">
              <div id="time2021Chart"></div>
            </div>
            <div class="col-4">
              <div id="time2022Chart"></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-dash-middle margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Tamanho do Banco de Dados</b></br>
          <div id="bdChart" class="text-webkit-center"></div>
        </div>
        <div class="col-12 col-dash-middle margin-10 border-gray radius-5 padding-15 bg-white">
          <b class="font-h-dash">Arquivos Aplicações</b></br>
          <div id="arqAppChart" class="text-webkit-center"></div>
        </div>
      </div>
    </div>
  </div>
</div>

@include('bibliotecas.apexcharts')
@include('Intranet.style')
@include('Intranet.analiseTI.style')
@include('Intranet.analiseTI.script')
@include('bibliotecas.bootstrapTable2')

@endSection