{{-- Scripts Section --}}
@section('scripts')
<script src="{{ asset('js/pages/widgets.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/custom/dashboard-min/index.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/pages/crud/darkmode/darkMode.bundle.js') }}" type="text/javascript"></script>
@endsection

{{-- Styles Section --}}
@section('styles')
<link href="{{ asset('css/pages/crud/darkmode/darkMode.bundle.css') }}" rel="stylesheet" type="text/css" />
@endsection

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

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


<style>
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }



    .btn-icon i {
        color: inherit !important;
    }

    .fa-xs {
        font-size: 0.6em !important;
    }

    #queue-list::before,
    #queue-list::after {
        background: linear-gradient(to right, #eef0f8 0%, #eef0f800 50%);
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
        pointer-events: none;
    }

    #queue-list::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    #queue-list::before {
        left: 0;
        top: 0;
    }

    .inner-item {
        background-color: #fff;
    }

    .queue-item {
        /* transition: ease 100ms transform; */
        cursor: default;
    }

    .sliding-animation {
        animation: scroll 30s linear infinite;
        flex-direction: row;
        --item-count: 1;
    }

    .sliding-animation.stop-slider {
        animation-play-state: paused;
    }

    /* .sliding-animation.stop-slider .queue-item:hover {
        transform: scale(1.08);
    } */

    @keyframes scroll {
        0% {
            transform: translateX(100%)
        }

        100% {
            transform: translateX(-100%)
        }
    }

    .overlay {
        z-index: 1;
        padding: 0;
        border: none;
        background: rgba(68, 68, 68, 0.5);
    }

    .pe-none [data-toggle="modal"] {
        pointer-events: none !important;
    }

    .no-icon span.symbol,
    .no-icon div.img-fluid {
        display: none !important;
    }

    a.disabled {
        /* Make the disabled links grayish*/
        opacity: 0.5;
        /* And disable the pointer events */
        pointer-events: none;
    }

    td,
    th {
        font-size: 140% !important;
        font-weight: 500 !important;
        letter-spacing: 0.8px !important;
    }

    .font-xxl span.text-primary {
        font-size: 140% !important;
        font-weight: 500 !important;
        letter-spacing: 0.8px !important;
    }

    #kt_body .tv-mode span :not(i),
    #kt_body .tv-mode h1,
    #kt_body .tv-mode h2,
    #kt_body .tv-mode h3,
    #kt_body .tv-mode h4,
    #kt_body .tv-mode h5,
    #kt_body .tv-mode h6 {
        font-size: 120% !important;
        font-weight: 500 !important;
        letter-spacing: 0.8px !important;
    }


    .font-xxl .font-size-h1 {
        font-size: 3.5rem !important;
    }

    .font-xxl .font-size-h1,
    .font-xxl .percentage-text {
        font-size: 1.5rem;
    }

    .dataTables_empty {
        font-weight: 400 !important;
        color: gray !important;
    }

    .symbol.symbol-20 .symbol-label {
        color: #000 !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 140% !important;
        margin-left: 0.5rem;
    }

    .dataTables_wrapper>div:first-child,
    .dataTables_wrapper>div:last-child {
        display: none !important;
    }

    #darkSwitch.toggle {
        --size: 2rem;
        appearance: none;
        outline: none;
        cursor: pointer;
        width: var(--size);
        height: var(--size);
        box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
        border-radius: 999px;
        color: #6c6c84;
        transition: all 500ms !important;
    }

    #darkSwitch.toggle:checked {
        --ray-size: calc(var(--size) * -0.4);
        --offset-orthogonal: calc(var(--size) * 0.65);
        --offset-diagonal: calc(var(--size) * 0.45);
        transform: scale(0.75);
        color: #fa0;
        box-shadow: inset 0 0 0 var(--size),
            calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
            var(--offset-orthogonal) 0 0 var(--ray-size),
            0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
            0 var(--offset-orthogonal) 0 var(--ray-size),
            calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
            var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
            calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
            var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
    }

    .toggle {
        z-index: 1;
    }

    .toggle:checked~.background {
        --bg: white;
    }

    /* DARK MODE DEBUG */



    /* DARK MODE -- TODO: PASS TO SCSS LATER */

</style>

{{-- Dashboard Manager --}}

{{-- Info --}}
<div class="row d-flex align-items-center flex-wrap mr-1 mt-6 w-100 px-10">

    <div class="col" id="queue-list" style="overflow: hidden;">
        <div class="row mx-auto h-100 carousel-queues sliding-animation align-content-start" style="flex-flow: nowrap;">

            <!-- Rendered on AJAX::headerDashAgent -->

        </div>
    </div>

</div>


<div class="row w-100 pl-15 pr-10 mt-6">
    <div class="col-auto d-flex flex-center" aria-hidden="true">
        <input class="toggle" type="checkbox" id="darkSwitch">
    </div>
    <div class="col-auto d-flex flex-center" aria-hidden="true">
        <button id="lgpd" class="btn btn-icon btn-light-primary ARIA-DAVI" data-container="body" data-toggle="popover"  data-placement="top" data-content="Mostrar dados sensíveis" aria-label="Mostrar dados sensíveis"  role="button">
            <i class="fas fa-sm fa-eye"></i>
        </button>
    </div>
    <div class="col-1 d-flex align-items-center"  aria-hidden="true">
        <select class="form-controller-solid js-example-placeholder-single time" >
            <option>20s</option>
            <option selected>40s</option>
            <option>60s</option>
        </select>
    </div>
    <div class="col d-flex flex-center">
        <span class="h2 mb-0 d-flex">
            <!-- <span class="opacity-50 mr-5 d-flex align-self-center" style="font-size: 16px;">Fila Atual:&nbsp;</span> -->
            <a href="#" class="prev-queue mb-2" aria-hidden="true"><i class="fas fa-xs fa-chevron-left px-3"></i></a>
            <span class="currQueue text-center mx-5 d-flex flex-center font-size-h1" style="width: 300px">Carregando...</span>
            <a href="#" class="next-queue mb-2" aria-hidden="true"><i class="fas fa-xs fa-chevron-right px-3"></i></a>
        </span>
    </div>

    <div class="col">
        <div class="card card-custom bg-white">
            <div class="card-body py-1 px-10">

                <div class="d-flex flex-row flex-fill align-items-center justify-content-between font-size-h6 ARIA-answeredCalls" aria-label ="Ligações Atendidas" role="img">
                    <small class="font-weight-bold text-primary font-size-h2" aria-hidden="true" >Lig. Atendidas</small>

                    <div class="d-flex align-items-center" aria-hidden="true">
                        <span class="font-size-h1 font-weight-bold pr-2 answeredCalls countUp" style="font-size: 3rem !important;"></span>
                        <div class="d-flex flex-column text-right">
                            <span class="font-weight-normal font-size-h3 percentageAnswered-text percentage-text ff-roboto text-success pr-4" style=""></span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="col pr-0">
        <div class="card card-custom bg-white">
            <div class="card-body py-1 px-10">

                <div class="d-flex flex-row flex-fill align-items-center justify-content-between font-size-h6 ARIA-abandonedCalls" aria-label ="Ligações Abandonadas" role="img">

                    <small class="font-weight-bold text-primary font-size-h2" aria-hidden="true" aria-label ="Ligações Abandonadas" role="img">Lig. Abandonadas</small>

                    <div class="d-flex align-items-center" aria-hidden="true">
                        <span class="font-size-h1 font-weight-bold pr-2 abandonedCalls countUp" style="font-size: 3rem !important;"></span>
                        <div class="d-flex flex-column text-right">
                            <span class="font-weight-normal font-size-h3 percentageAbandoned-text percentage-text ff-roboto text-success pr-4" style=""></span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mx-auto w-100 px-10 mt-4 tv-mode" style="height: calc(100vh - 210px);overflow: hidden;">
    <div class="col-4 h-100">
        <div class="row h-100">
            <div class="col-auto px-0 d-flex flex-column h-100">
                <div class="col p-0 h-100">

                    <div class="col">
                        <div class="card card-custom card-stretch gutter-b scale-anim no-icon border-10 mb-4">
                            {{-- Body --}}
                            <div class="card-body d-flex align-items-center p-5" aria-keyshortcuts="control+shift+1">
                                <div class="d-flex align-items-center justify-content-between flex-grow-1 ARIA-totalCalls" aria-label ="Ligações Totais" role="img">
                                    <div class="d-flex flex-column text-left flex-fill font-size-h6"  aria-hidden="true">
                                        <span class="font-weight-bold font-size-h1 totalCalls countUp">
                                            <div class="spinner py-4"></div>
                                        </span>
                                        <small class="font-weight-bold text-primary font-size-h4" >Lig. Totais</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="col">
                        <div class="card card-custom card-stretch gutter-b scale-anim no-icon border-10 mb-4">
                            {{-- Body --}}
                            <div class="card-body d-flex align-items-center p-5">
                                <div class="d-flex align-items-center justify-content-between flex-grow-1 ARIA-answeredSLA"   aria-label ="Atendimento SLA" role="img">
                                    <div aria-hidden="true" class="d-flex flex-column text-left flex-fill font-size-h6">
                                        <span class="font-weight-bold font-size-h1 answeredSLA countUp">
                                            <div class="spinner py-4"></div>
                                        </span>
                                        <small class="font-weight-bold text-primary font-size-h4" >Atend. SLA</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <div class="col">
                        <div class="card card-custom card-stretch gutter-b scale-anim no-icon border-10 shadow mb-4 keep-colors" style="background-color: #103B76;">
                            {{-- Body --}}
                            <div class="card-body d-flex align-items-center p-5">
                                <div class="d-flex align-items-center justify-content-between flex-grow-1 ARIA-tme"  aria-label ="Tempo médio de espera" role="img">
                                    <div aria-hidden="true" class="d-flex flex-column text-left flex-fill font-size-h6">
                                        <span class="font-weight-bold text-white font-size-h1 tme countUp">
                                            <div class="spinner py-4"></div>
                                        </span>
                                        <small aria-hidden="true" class="font-weight-bold text-white font-size-h4">TME</small>
                                    </div>
                                    <span class="symbol symbol-50 d-none d-xxl-block">
                                        <img src="{{ asset('img/icon/tme.png') }}" alt="Tempo médio espera" draggable="false">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card card-custom card-stretch gutter-b scale-anim no-icon border-10 shadow mb-4 keep-colors" style="background-color: #3066A5;">
                            {{-- Body --}}
                            <div class="card-body d-flex align-items-center p-5">
                                <div class="d-flex align-items-center justify-content-between flex-grow-1 ARIA-tma"  aria-label ="Tempo médio de atendimento" role="img">
                                    <div aria-hidden="true" class="d-flex flex-column text-left flex-fill font-size-h6">
                                        <span class="font-weight-bold text-white font-size-h1 tma countUp">
                                            <div class="spinner py-4"></div>
                                        </span>
                                        <small class="font-weight-bold text-white font-size-h4">TMA</small>
                                    </div>
                                    <span class="symbol symbol-50 d-none d-xxl-block">
                                        <img src="{{ asset('img/icon/tma.png') }}" alt="Tempo médio de atendimento" draggable="false">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col position-absolute bottom-0" style="max-width: 170px;">
                        <div class="col-auto mt-auto">
                            <img src="{{ asset('/img/layout/logos/ezvoice-dual.svg') }}" alt="" class="whiteOnDark img-fluid" style="width: 134px;">
                        </div>

                        <div class="col-auto mt-5">
                            <img src="{{ asset('img/layout/logos/'.env('APP_ENV_LOCALE').'.png') }}" alt="" style="width: 134px;" class="img-fluid">
                        </div>
                    </div>


                </div>

            </div>

            <div class="col h-100" style="flex: 0 0 auto;width: 100%;max-width: calc(100% - 163px);">
                <div class="card card-custom bg-white card-stretch gutter-b rounded border scale-anim mb-0 h-100 card_pausedAgents shadow-none">

                    {{-- Header --}}
                    <div class="card-header border-0 d-flex align-items-center">
                        <div class="flex-column font-size-h4">
                            <h3 class="card-label pt-8 font-weight-bold ARIA-Header-pausedAgents" aria-label="Tabela Agentes em Pausa"  role="img">
                                Agentes em Pausa
                                <div class="symbol symbol-light symbol-20 ml-2" aria-hidden="true">
                                    <span id="agentsCounter" class="symbol-label font-size-h6">
                                        <div class="spinner spinner-sm" style="position: absolute;transform: scale(0.8) translateX(-8px);"></div>
                                    </span>
                                </div>
                            </h3>
                        </div>
                    </div>

                    {{-- Body --}}
                    <div class="card-body p-0 clear-card">
                        <table id="table_pausedAgents" class="table-striped ARIA-tb-pausedAgens"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-md-4 col-sm-12 h-100">
        <div class="card card-custom bg-white card-stretch gutter-b rounded border scale-anim mb-0 h-100 card_realTimeQueues shadow-none">

            {{-- Header --}}
            <div class="card-header border-0 d-flex align-items-top">
                <div class="flex-column font-size-h4">
                    <h3 class="card-label pt-8 font-weight-bold ARIA-Header-RealTime" aria-label="Tabela Filas em Tempo Real" role="img">
                        Filas em Tempo Real
                        <div class="symbol symbol-light symbol-20 ml-2" aria-hidden="true">
                            <span id="queuesCounter" class="symbol-label font-size-h6">
                                <div class="spinner spinner-sm" style="position: absolute;transform: scale(0.8) translateX(-8px);"></div>
                            </span>
                        </div>
                    </h3>
                </div>
            </div>

            {{-- Body --}}
            <div class="card-body p-0 clear-card">
                <table id="table_realTimeQueues" class="table-striped pageResize ARIA-tb-realTimeQueues"></table>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-12 h-100">
        <div class="card card-custom bg-white card-stretch gutter-b rounded border scale-anim mb-0 h-100 shadow-none card_AgentsOnline">

            <div class="card-header border-0 d-flex align-items-center">
                <div class="flex-column font-size-h4">
                    <h3 class="card-label pt-8 font-weight-bold ARIA-Header-agentsOnline" aria-label="Tabela Agentes Online" role="img">
                        Agentes Online
                        <div class="symbol symbol-light symbol-20 ml-2" aria-hidden="true">
                            <span id="agentsOnlineCounter" class="symbol-label font-size-h6">
                                <div class="spinner spinner-sm" style="position: absolute;transform: scale(0.8) translateX(-8px);"></div>
                            </span>
                        </div>
                    </h3>
                </div>
            </div>

            <div class="card-body p-0 clear-card">
                <table id="table_agentsOnline" class="table-striped ARIA-tb-agentsOnline"></table>
            </div>
        </div>

    </div>
</div>

<!-- <div class="row mx-auto w-100 px-10 tv-mode">
    <div class="col">
        @include($components_path.'.ligacoesTempoReal', ['class' => 'card-stretch gutter-b rounded border card_realTimeCalls'])
    </div>
</div> -->

<ul class="d-none queues" aria-hidden="true">
    @foreach($queues as $key=> $queue)
    <li data-queueId="{{$queue->id}}" data-queueName="{{$queue->name}}"></li>
    @endforeach
</ul>


@endsection