<section id="content" style="margin-top:10px;">

    <style>
        .letrita {

            font-size: 10px;
        }
    </style>

    <div class="barrita">
        <center><img src="<?= IMG_ADMIN; ?>spinner.gif"></center>
    </div>
    <div class="spinner" style="position:absolute;left:0%;right:0%;top:30%;display:none;">
        <center><img src="<?= IMG_ADMIN; ?>spinner.gif"></center>
    </div>
    <div class="container">
        <div class="row" id="myDIV" style="display:none;">
            <div class="col s3">
                <div class="card" v-bind:style="classObject">
                    <div class="card-content white lighten-2" style="height:181px; width: auto;">

                        <canvas id="regVsLlamCanvas"></canvas>
                    </div>
                    <div class="card-action grey lighten-3">
                        <div class="row">
                            <div class="col s8">
                                {{i18n.gettext("Registros Marcables")}}
                            </div>
                            <div class="col s4"><b>{{registros}}</b></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col s3">
                <div class="card" v-bind:style="classObject">
                    <div class="card-content white lighten-2" style="height:181px; width: auto;">
                        <div id="gauge" style="height: 140px; width:100%;"></div>
                    </div>
                    <div class="card-action grey lighten-3">
                        <div class="row">
                            <div class="col s8">
                                {{i18n.gettext("Nivel de Marcado")}}
                            </div>
                            <div class="col s4"><b>{{nivelMod()}}</b></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col s3">
                <div class="card" v-bind:style="classObject">
                    <div class="card-content white lighten-2" style="height:181px; width:auto;">

                        <canvas id="perdidasCanvas" style="z-depth-1"></canvas>

                    </div>
                    <div class="card-action grey lighten-3">
                        <div class="row">
                            <div class="col s6">
                                {{i18n.gettext("Perdidas")}}
                            </div>
                            <div class="col s6"><b>{{dejadas}}</b></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col s3 card-panel white" style="height:236px;" v-bind:style="classObject">
                <div class="collection">
                    <a class="collection-item black-text"><span class="badge">{{agentesPromMod()}}</span>{{i18n.gettext("Agentes en promedio")}}</a>
                    <a class="collection-item black-text"><span class="badge">{{filtro}}</span>{{i18n.gettext("Filtro")}}</a>
                    <a class="collection-item black-text"><span class="badge">{{hopper}}</span>{{i18n.gettext("Hopper")}}</a>
                    <a class="collection-item black-text"><span class="badge">{{registrosHopper}}</span>{{i18n.gettext("Registros en Hopper")}}</a>
                </div>
                <div class="row">
                    <div 
                        class="col s4 tooltipped" 
                        id="campanaRtrContainer" 
                        data-position="top" 
                        :data-tooltip="traducirFrase('Campañas')" 
                        style="margin-top: -0.5rem;" 
                    >
                        <!-- TODO: Retirar este select -->
                        <!-- <select id="campanaAgentes" class=" browser-default tooltipped" style=" margin-top:-5px; " data-position="top" :data-tooltip="traducirFrase('Campañas')">
                            <option value="-1" class="black-text">{{i18n.gettext("Todas las campañas")}}</option>
                        </select> -->
                        <multiselect-dialvox
                            :label='""'
                            v-model="campanasRtr"
                            :options="campaignsRtrSelect"
                            :filter="selectRtrCampaignFilter"
                            @changefilter="updateRtrCampaignFilter"
                            dropdown_id="rtr_campanas"
                            input_id="rtr_campanas_input"
                            dropdown_alignment="right"
                        ></multiselect-dialvox>
                    </div>
                    <div class="col s4">
                        <select id="grupoSelect" class=" browser-default tooltipped" style=" margin-top:-5px; " data-position="top" :data-tooltip="traducirFrase('Grupos')" onchange="grupoInicial=$('#grupoSelect').val();">
                            <option value="-1">{{i18n.gettext("Todos los grupos")}}</option>
                        </select>
                    </div>
                    <div class="col s4">
                        <select id="tiemposRecargar" class="browser-default tooltipped" style=" margin-top:-5px; " data-position="top" v-bind:data-tooltip="traducirFrase('Velocidad de recarga')" onchange="cambiaTiempo()">
                            <option value="-1">{{traducirFrase("Tiempo real")}}</option>
                            <option value="2">2s</option>
                            <option value="3">3s</option>
                            <option value="4">4s</option>
                            <option value="5" selected>5s</option>
                            <option value="10">10s</option>
                            <option value="20">20s</option>
                            <option value="30">30s</option>
                            <option value="60">1 min</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="col s12 tooltipped" data-position="top" id="tooltip1" :data-tooltip="traducirFrase('Agentes')">
                <div class="row">
                    <div class="col s2">
                        <div class="card grey lighten-4">
                            <div class="card-content valign-wrapper " style="height:60px;">
                                <span class="card-title">{{i18n.gettext("Logeados")}}
                                    &nbsp;<b>{{totales.agentes_total}}</b></span>
                            </div>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card teal accent-2">
                            <div class="card-content valign-wrapper " style="height:60px;">
                                <span class="card-title" style="font-size:22px;">{{i18n.gettext("En llamada")}} &nbsp;<b class="right">{{totales.agents_in_calls}}</b></span>
                            </div>

                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card light-blue lighten-4">
                            <div class="card-content valign-wrapper " style="height:60px;">
                                <span class="card-title">{{i18n.gettext("Disponible")}} &nbsp;<b class="right">{{totales.agents_waiting}}</b></span>
                            </div>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card orange lighten-4">
                            <div class="card-content valign-wrapper " style="height:60px;">
                                <span class="card-title">{{i18n.gettext("Pausados")}} &nbsp;<b class="right">{{totales.agents_paused}}</b></span>
                            </div>

                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card grey lighten-2">
                            <div class="card-content valign-wrapper " style="height:60px;">
                                <span class="card-title">{{i18n.gettext("Cortadas")}} &nbsp;<b class="right">{{totales.agents_in_dead_calls}}</b></span>
                            </div>

                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card red lighten-4">
                            <div class="card-content valign-wrapper " style="height:60px;">
                                <span class="card-title">{{i18n.gettext("Calificando")}} &nbsp;<b class="right">{{totales.agents_in_dispo}}</b></span>
                            </div>

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

            <div class="col s12 tooltipped" data-position="top" id="tooltip2" :data-tooltip="traducirFrase('Llamadas')">
                <div class="row">
                    <div class="col s2">
                        <div class="card deep-orange lighten-3">
                            <div class="card-content " style="height:60px;">
                                <span>{{i18n.gettext("Activas")}} <b class="right">{{totales.llamadasActivas}}</b></span>

                            </div>
                            <div class="card-action flow-text " id="one1" style="height:36px; padding-top:0px;">


                            </div>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card lime lighten-4">
                            <div class="card-content " style="height:60px;">
                                <span>{{i18n.gettext("Sonando")}} <b class="right">{{totales.llamadasSonando}}</b></span>
                            </div>
                            <div class="card-action flow-text " id="two2" style="height:36px; padding-top:0px;">

                            </div>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card deep-purple lighten-4">
                            <div class="card-content " style="height:60px;">
                                <span>{{i18n.gettext("Esperando salientes")}} <b class="right">{{totales.llamadasEsperandoPorAgentes -
                                        llamadasEntrantes.length}}</b></span>
                            </div>
                            <div class="card-action flow-text " id="four2" style="height:36px; padding-top:0px;">

                            </div>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card deep-purple lighten-4">
                            <div class="card-content " style="height:60px;">
                                <span>{{i18n.gettext("Esperando entrantes")}} <b class="right">{{llamadasEntrantes.length}}</b></span>
                            </div>
                            <div class="card-action flow-text " id="four3" style="height:36px; padding-top:0px;">

                            </div>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card pink lighten-4">
                            <div class="card-content " style="height:60px;">
                                <span>{{i18n.gettext("Entrantes")}} <b class="right">{{totales.llamadasEnIVR}}</b></span>
                            </div>
                            <div class="card-action flow-text " id="four4" style="height:36px; padding-top:0px;">

                            </div>
                        </div>
                    </div>
                    <div class="col s2">
                        <div class="card red lighten-4">
                            <div class="card-content " style="height:60px;">
                                <span>{{i18n.gettext("Salientes")}} <b class="right">{{totales.llamadasSalientes}}</b></span>
                            </div>
                            <div class="card-action flow-text " id="four5" style="height:36px; padding-top:0px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row z-depth-4 " id="myDIV2" style="margin-top:5px;">
                <div class="col s12">
                    <div>
                        <div class="row blue-grey lighten-5">
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Latencia")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Nombre")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Usuario")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Status")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Tiempo")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Campaña")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Llamadas")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Llamada actual")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Causa de pausa")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Tipo de llamada")}}</b>
                            </div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Tiempo de conexión")}}</b></div>
                            <div class="col s1" style="font-size: 12px;"><b>{{i18n.gettext("Opciones")}}</b></div>
                        </div>
                        <div class=" white" v-for="agente in agentes">
                            <div class="row " v-bind:style="{'background-color': agente.Color}">
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 0.8rem;background-color:rgba(255,255,255,.8)">
                                        <?php if (PING_WEB_ACTIVO) { ?>
                                            <img :src="parseInt(agente.latencia_dialvox) < 40 ? '<?= IMG; ?>wifi_3.svg' : parseInt(agente.latencia_dialvox) < 80 ? '<?= IMG; ?>wifi_3_1.svg' : parseInt(agente.latencia_dialvox) < 120 ? '<?= IMG; ?>wifi_2.svg' : parseInt(agente.latencia_dialvox) < 160 ? '<?= IMG; ?>wifi_2_1.svg' : parseInt(agente.latencia_dialvox) < 200 ? '<?= IMG; ?>wifi_1.svg' :'<?= IMG; ?>wifi_1_1.svg'" class="latencia_icono" style="background-color:rgba(255,255,255,.8);" width="22" />
                                    </span>
                                    <span style="font-size: 0.8rem;background-color:rgba(255,255,255,.8)">
                                        {{agente.latencia_dialvox}}&nbsp;&nbsp;</span>
                                <?php } ?>
                                <span style="font-size: 0.8rem;background-color:rgba(255,255,255,.8)">
                                    <img :src="parseInt(agente.latencia_telefonia) < 40 ? '<?= IMG; ?>ping_tel_4.png' : parseInt(agente.latencia_telefonia) < 80 ? '<?= IMG; ?>ping_tel_4.png' : parseInt(agente.latencia_telefonia) < 120 ? '<?= IMG; ?>ping_tel_3.png' : parseInt(agente.latencia_telefonia) < 160 ? '<?= IMG; ?>ping_tel_2.png' : parseInt(agente.latencia_telefonia) < 200 ? '<?= IMG; ?>ping_tel_2.png' :'<?= IMG; ?>ping_tel_2.png'" class="latencia_icono" style="background-color:rgba(255,255,255,.8);" width="17" />
                                </span>
                                <span style="font-size: 0.8rem;background-color:rgba(255,255,255,.8)">
                                    {{agente.latencia_telefonia}}</span>
                                </div>
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{agente.Nombre}}</span>
                                </div>

                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{agente.idUsuario}}</span>
                                </div>
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{agente.Status}}</span>
                                </div>
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{(Math.floor(agente.Tiempo/3600)<10?"0"+Math.floor(agente.Tiempo
                                            /3600):Math.floor(agente.Tiempo/3600))}}:{{(Math.floor((agente.Tiempo%3600)/60)
                                            <10?"0"+Math.floor((agente.Tiempo%3600)/60):Math.floor((agente.Tiempo%3600)/60))}}:{{((agente.Tiempo%3600)%60
                                            <10?"0"+(agente.Tiempo%3600)%60:(agente.Tiempo%3600)%60)}} </span>
                                </div>
                                <div class="col s1 tooltipped" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''" style="text-overflow: ellipsis;overflow:hidden;white-space:nowrap;" data-position="top" :data-tooltip=agente.Campana>
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8);">
                                        {{agente.Campana}}
                                    </span>
                                </div>
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{agente.Llamadas}}</span>

                                </div>
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{agente.TelefonoActual}}</span>

                                </div>
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{agente.CausaPausa}}</span>

                                </div>
                                <div class="col s1">
                                    <div v-if="agente.TipoLlamada == 'Entrada' && agente.Status==='En llamada'"> <i class="material-icons">call</i><i class="material-icons">call_received</i>
                                    </div>
                                    <div v-else-if="agente.TipoLlamada == 'Salida' &&  agente.Status==='En llamada'"> <i class="material-icons">call</i><i class="material-icons">call_made</i></div>
                                    <div v-else></div>
                                </div>
                                <div class="col s1" :class="agente.ayuda != 0 || agente.pausa ? 'animated heartBeat infinite':''">
                                    <span style="font-size: 12px;background-color:rgba(255,255,255,.8)">
                                        {{agente.tiempoConexion ?? '00:00:00'}}</span>
                                </div>
                                <div class="col s1">
                                    <a href="#" v-if="agente.requiereAprovacion" v-on:click="resuelvepausa(agente.idUsuario,agente.Campana,agente.CausaPausa);" class='tooltipped' data-position="top" data-tooltip="DESBLOQUEAR PAUSA">
                                        <i class="material-icons" style="font-size:1.2rem;">
                                            check
                                        </i>
                                    </a>
                                    <a href="#" v-if="agente.ayuda !== 0 || agente.pausa" v-on:click="stopLoop(agente.session_id, agente.idUsuario);" class='tooltipped' data-position="top" data-tooltip="SILENCIAR">
                                        <i style="font-size:1.2rem;" :class="agentSessionId === agente.idUsuario && agentReportAction === 'monitor' ? 'blue-grey-text material-icons':'material-icons'">
                                            volume_off
                                        </i>
                                    </a>
                                    <a href="#" v-on:click="stopLoop(agente.session_id, agente.idUsuario);iniciarMonitor(agente.Extension, agente.idUsuario)" class='tooltipped' data-position="top" data-tooltip="MONITOR">
                                        <i style="font-size:1.2rem;" :class="agentSessionId === agente.idUsuario && agentReportAction === 'monitor' ? 'blue-grey-text material-icons':'material-icons'">
                                            speaker
                                        </i>
                                    </a>

                                    <a href="#" v-on:click="stopLoop(agente.session_id, agente.idUsuario);iniciarBarge(agente.session_id, agente.idUsuario)" class='tooltipped' data-position="top" data-tooltip="BARGE">
                                        <i style="font-size:1.2rem;" :class="agentSessionId === agente.idUsuario && agentReportAction === 'barge' ? 'blue-grey-text material-icons':'material-icons'">
                                            mic
                                        </i>
                                    </a>
                                    <a href="#" v-on:click="stopLoop(agente.session_id, agente.idUsuario);iniciarHijack(agente.Extension, agente.idUsuario)" class='tooltipped' data-position="top" data-tooltip="HIJACK">
                                        <i style="font-size:1.2rem;" :class="agentSessionId === agente.idUsuario && agentReportAction === 'hijack' ? 'blue-grey-text material-icons':'material-icons'">
                                            record_voice_over
                                        </i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="agentes.length == 0 ">
                <div class="col s12">
                    <h3 class=" card-panel white black-text center">{{i18n.gettext("No hay más agentes por mostrar")}}
                    </h3>
                </div>
            </div>
            <div class="row" v-if="agentes.length == 0 ">
                <div class="barrita" style="position: absolute;right: 0%;left:0%;">
                    <center><img src="<?= IMG_ADMIN; ?>spinner.gif"></center>
                </div>
            </div>
        </div>
        <div class="row mt-4 card" v-if="llamadasEntrantes.length !== 0">
            <div class="row col s12 blue-grey lighten-5" style="padding: 0.5rem;">
                <div class="col s3">
                    Telefono
                </div>
                <div class="col s3">
                    Grupo de Entrada
                </div>
                <div class="col s3">
                    Tiempo en llamada
                </div>
                <div class="col s3">
                    Agente
                </div>
            </div>
            <div class="row col s12" :style="'padding: 0.5rem;background: rgba(3,155,229,'+calcularColorBackground(llamada.tiempo)+');color: '+calcularColorTexto(llamada.tiempo)+';'" v-for="llamada in llamadasEntrantes">
                <div class="col s3">
                    {{ llamada.Telefono }}
                </div>
                <div class="col s3">
                    {{ llamada.Grupo }}
                </div>
                <div class="col s3">
                    {{ calcularTimeToSec(llamada.tiempo) }}
                </div>
                <div class="col s3">
                    {{ llamada.AgentOnly }}
                </div>
            </div>
            <div class="row col s12" v-if="llamadasEntrantes.length === 0">
                <div class="col s12">
                    <h5 class="white black-text center">
                        No hay llamadas entrantes en espera
                    </h5>
                </div>
            </div>
        </div>
    </div>

</section>