@extends('layouts.master')
@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.datatables.fixedColumns')
@include('plugins.highcharts.default')
@include('plugins.highcharts.export')
@include('plugins.highcharts.themes.dark-unica')
@include('plugins.moment')
@include('plugins.datepicker')
@include('plugins.daterangepicker')
@include('plugins.highcharts.more')
@include('access.resumo.style')
@include('access.resumo.filters.script')
@include('access.resumo.script')
@include('access.options-filters.index')


@section('browser-title', 'Controle de Acessos - Resumo')

@push('page-summary-filter')
    <div class="d-flex align-items-center font-12">
        <i class="fas fa-building fa-fw"></i>
        <small>Empresa: <span id="companies_filter_description">-</span></small>
    </div>
@endpush

@section('content')
    <div class="row">
        <div class="col-12 col-sm-8">
            @stack('page-summary-filter')
        </div>
        <div class="col-12 col-sm-4 align-items-end d-flex flex- flex-row-reverse">
            @include('layouts.partials.update-page')
        </div>
        <div class="col-5">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <table id="table-comparativo-tempo-logado-empresa"
                    class="table table-sm table-striped table-hover m-b-0 w-100" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Empresa</th>
                            <th class="text-center">Usuários Logados</th>
                            <th class="text-center">Tempo Logado</th>
                            <th class="text-center">% Tempo Logado</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="col-7">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-comparativo-tempo-logado-empresa" style="height: 250px"></div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-5">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <table id="table-comparativo-tempo-logado-user" class="table table-sm table-striped table-hover m-b-0 w-100"
                    cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Usuário</th>
                            <th class="text-center">Acessos</th>
                            <th class="text-center">Tempo Logado</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="col-7">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-comparativo-tempo-logado-user" style="height: 300px"></div>
            </div>
        </div>
    </div>
@endsection