{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content.extended')

{{-- Dashboard Manager --}}

<!-- <div class="btn-container mb-7 text-center">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-light-primary btn-view active" onClick="changeView('table')"><i class="fas fa-align-right fa-sm mb-1"></i>&nbsp;Tabelas</button>

        <button type="button" class="btn btn-light-primary btn-view" onClick="changeView('chart')"><i class="fas fa-chart-area fa-sm mb-1"></i>&nbsp;Gráficos</button>
    </div>
</div> -->


<div id="dash_container" class="d-none">
    <div class="fade show" id="tableDash">
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col">
                        @include($components_path.'.statsLigacoes', ['class' => 'card-stretch gutter-b scale-anim'])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include($components_path.'.agentsOnline', ['class' => 'card-stretch gutter-b scale-anim'])
                    </div>
                    <div class="col">
                        @include($components_path.'.ligacoesEmFila', ['class' => 'card-stretch gutter-b scale-anim'])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include($components_path.'.tempoMedioEspera', ['class' => 'card-stretch gutter-b scale-anim'])
                    </div>
                    <div class="col">
                        @include($components_path.'.tempoMedioAtend', ['class' => 'card-stretch gutter-b scale-anim'])
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                @include($components_path.'.filasTempoReal', ['class' => 'card-stretch gutter-b rounded-0 border scale-anim card_realTimeQueues'])
            </div>
            <div class="col-12 col-md-4">
                @include($components_path.'.agentesEmPausa', ['class' => 'card-stretch gutter-b rounded-0 border scale-anim card_pausedAgents'])
            </div>
        </div>

        <div class="row">
            <div class="col">
                @include($components_path.'.ligacoesTempoReal', ['class' => 'card-stretch gutter-b rounded-0 border card_realTimeCalls'])
            </div>
        </div>
    </div>

    <div id="chartDash">
        <div class="row fade show">
            <div class="col">
                <div class="card card-custom bg-white card-stretch gutter-b shadow scale-anim">
                    <div class="card-header mb-n4 border-0 d-flex align-items-top">
                        <div class="flex-column font-size-h4">
                            <h3 class="card-label pt-8 font-weight-bold mb-n4">
                                Chamadas totais
                            </h3>
                        </div>
                    </div>


                    <div class="card-body py-2 ">
                        <div class="chart-container" style="width: 100% !important;">
                            <div id="chart_totalCalls"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col flex-fill">
                <div class="card card-custom bg-white card-stretch gutter-b shadow scale-anim">
                    <div class="card-header mb-n4 border-0 d-flex align-items-top">
                        <div class="flex-column font-size-h4">
                            <h3 class="card-label pt-8 font-weight-bold">
                                Chamadas atendidas
                            </h3>
                        </div>
                    </div>


                    <div class="card-body py-2">
                        <div class="chart-container" style="width: 100% !important;">
                            <div id="chart_answeredCalls"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col flex-fill">
                <div class="card card-custom bg-white card-stretch gutter-b shadow scale-anim">
                    <div class="card-header mb-n4 border-0 d-flex align-items-top">
                        <div class="flex-column font-size-h4">
                            <h3 class="card-label pt-8 font-weight-bold">
                                Chamadas abandonadas
                            </h3>
                        </div>
                    </div>


                    <div class="card-body py-2">
                        <div class="chart-container" style="width: 100% !important;">
                            <div id="chart_abandonedCalls"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

// Pass time to refresh from Laravel .env to JS
var chartRefreshTime = "{{ env('CHART_REFRESH_TIME') }}";

</script>


<style>
    .disabled {
        pointer-events: none !important;
    }

    .apexcharts-tooltip {
        z-index: 999 !important;
    }
</style>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script src="{{ asset('js/pages/widgets.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/custom/gestor/dashboard/index.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/custom/includes/headerDashAgent.js') }}" type="text/javascript"></script>
@endsection