<style>

</style>
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jquery-3.2.1.min.js"></script>
<div id="mainTwo" v-cloak>
	<modal-dialvox medium v-model="ingroupsModal" disabled :cancel="traducirFrase('Guardar y Cerrar')" @closed="saveIngroups">
		<?php include "modals" . DIRECTORY_SEPARATOR . "ingroups.php"; ?>
	</modal-dialvox>
	<modal-dialvox medium v-model="targets.assoc" disabled :cancel="traducirFrase('Cerrar')">
		<?php include "modals" . DIRECTORY_SEPARATOR . "polls.php"; ?>
	</modal-dialvox>
	<modal-dialvox medium v-model="xfersModal" disabled :cancel="traducirFrase('Guardar y Cerrar')" @closed="saveXfers">
		<?php include "modals" . DIRECTORY_SEPARATOR . "xfers.php"; ?>
	</modal-dialvox>
	<modal-dialvox small v-model="datesModal" :cancel="traducirFrase('Cancelar')" :send="traducirFrase('Descargar')" @submit="downloadFiles">
		<?php include "modals" . DIRECTORY_SEPARATOR . "dates.php"; ?>
	</modal-dialvox>
	<modal-dialvox :large="true" v-model="framesModal" :cancel="traducirFrase('Cerrar')" disabled>
		<?php include "modals" . DIRECTORY_SEPARATOR . "frames.php"; ?>
	</modal-dialvox>
	<!-- Modal para relacion de usuarios con campañas -->
	<?php include "modals" . DIRECTORY_SEPARATOR . "users.php"; ?>
	<div class="row container" style="margin-top: 70px;">
		<div id="barritaAlt">
			<center><img src="<?= IMG_ADMIN; ?>spinner.gif"></center>
			<span class="caption">{{traducirFrase("Espera un momento")}}</span>
		</div>
		<component :is="componenteActivo" :d="dataTable" :swipe-component="swipeComponent" :data-buffer="dataBuffer" :renderModCamp="renderModCamp" :activa-campana="activaCampana" :delete-campana="deleteCampana" :abre-modal2="abreModal2" :duplicar-campana="duplicarCampana" :abre-modal3="abreModal3" :abre-modal4="abreModal4" :abre-modal-pausa="abreModalPausa" :translate="translate" :modal-mensajes="modalMensajes" :id-campana="idCampana" :abrir-modal-frames="abrirModalFrames" @ingroups="showIngroups" @xfers="showXfers" @dates="showDates" @users="openUsersModal" @polls="assoc"></component>
	</div>
	<div class="card-panel white modal " style="height: 97%; max-height:90%; overflow-y:scroll; width:100%; margin-top:-20px;" id="formuModal">
		<div id="spinnerFormuModal" style="display: none; margin: 5rem auto 0rem auto; text-align: center;">
			<center><img src="<?= IMG_ADMIN; ?>spinner.gif"></center>
			<span class="caption">{{traducirFrase("Espera un momento")}}</span>
		</div>
		<div class="container" id="newMain">
			<div class="row">
				<div class="col s8 offset-s2 input-field">
					<h5 id="tituloModal">{{i18n.gettext("Crear campaña")}}</h5>
				</div>
				<input type="hidden" id="idCampana" value="0" />
				<div class="col s3">
					<label class="active" for='nombre_campana'>{{i18n.gettext("Nombre de campaña")}}</label>
					<div class="row">
						<div class="col s11">
							<input class='validate' minlength=6 maxlength=40 type="text" id="nombre_campana" required='required' />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Este es el nombre de la campaña (debe tener entre 6 y 40 caracteres).')" data-position="top">info</i>
						</div>
					</div>
					<label class="active" for='descripcion_campana'>{{i18n.gettext("Descripcion de campaña")}}</label>
					<div class="row">
						<div class="col s11">
							<input type='text' id="descripcion_campana" class="validate">
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Este campo sirve para describir brevemente a la campaña.')" data-position="top">info</i>
						</div>
					</div>
					<label for="orden_lista" class='active'>{{i18n.gettext("Orden de lista")}}</label>
					<div class="row">
						<div class="col s11">
							<select class='browser-default' id="orden_lista">
								<option value="DOWN" selected='selected'>DOWN</option>
								<option value="UP">UP</option>
								<option value="RANDOM">{{i18n.gettext("ALEATORIO")}}</option>
								<option value="DOWN PHONE">DOWN PHONE</option>
								<option value="UP PHONE">UP PHONE</option>
								<option value="DOWN LAST NAME">DOWN LAST NAME</option>
								<option value="UP LAST NAME">UP LAST NAME</option>
								<option value="DOWN COUNT">DOWN COUNT</option>
								<option value="UP COUNT">UP COUNT</option>
								<option value="DOWN LAST CALL TIME">DOWN LAST CALL TIME</option>
								<option value="UP LAST CALL TIME">UP LAST CALL TIME</option>
								<option value="DOWN RANK">DOWN RANK</option>
								<option value="UP RANK">UP RANK</option>
								<option value="DOWN OWNER">DOWN OWNER</option>
								<option value="UP OWNER">UP OWNER</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('En este campo, se establece el orden de marcado de los registros de la lista.<br>DOWN: De arriba hacia abajo.<br>UP: De abajo hacia arriba.<br>UP PHONE: Ordena por el numero de telefono de mayor a menor.<br>DOWN PHONE: Ordena por el numero de telefono de menor a mayor.<br>UP LAST NAME: Ordena por apellidos de la Z a la A.<br>DOWN LAST NAME: Ordena por apellidos de la A a la Z.<br>UP COUNT: Ordena por el registro mas marcado al menos marcado.<br>DOWN COUNT: Ordena por el registro menos marcado al mas marcado.<br>DOWN COUNT 2nd NEW: Ordena por el registro menos marcado, intercalando registros nuevos.<br>DOWN COUNT 3nd NEW: Ordena por el registro menos marcado, intercalando registros nuevos cada 2 registros marcados.<br>DOWN COUNT 4th NEW: Ordena por el registro menos marcado, intercalando registros nuevos cada 3 registros marcados.<br>RANDOM: Ordena aleatoriamente los registros.<br>UP LAST CALL TIME: Ordena por la hora en la zona horaria del registro de mas temprano a mas tarde.<br>DOWN LAST CALL TIME: Ordena por la hora en la zona horaria del registro de mas tarde a mas temprano.<br>UP RANK: Ordena por la mayor calificacion.<br>DOWN RANK: Ordena por la menor calificacion.<br>UP OWNER: Ordena alfabeticamente el dueño de la Z a la A.<br>DOWN OWNER: Ordena alfabeticamente el dueño de la A a la Z.<br>UP TIMEZONE: Ordena por la zona horaria del registro de este a oeste.<br>DOWN TIMEZONE: Ordena por la zona horaria del registro de oeste a este.')" data-position="top">info</i>
						</div>
					</div>

					<label class="active" for='web_form'>{{i18n.gettext("Ventana web")}}</label>
					<div class="row">
						<div class="col s11">
							<input class='validate' type="text" id="web_form" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Aqui se establece la URL del CRM.<br>Para personalizar la cadena GET del URL se debe empezar con la palabra VAR y posteriormente la dirección URL que se utilizara.<br>Para las variables GET se debe poner --A--Nombre_del_Campo--B--.')" data-position="top">info</i>
						</div>
					</div>
					<label class="active" for='web_form_address_two'>{{i18n.gettext("Ventana web")}} {{i18n.gettext("no.2")}}</label>
					<div class="row">
						<div class="col s11">
							<input class='validate' type="text" id="web_form_address_two" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Aqui se establece la URL del segundo CRM, Con las mismas caracteristicas del Web Form.')" data-position="top">info</i>
						</div>
					</div>
					<div class="row">
						<div class="col s11">
							<div class="switch">
								<div>{{i18n.gettext("¿Permitir que el agente trabaje con varias pestañas?")}}</div><br>
								<label for='pestanas' class='active'>
									{{i18n.gettext("No")}}
									<input type="checkbox" class="" id='pestanas'>
									<span class="lever  "></span>
									{{i18n.gettext("Si")}}
								</label>
							</div>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Esta opcion le permite al agente trabajar con multiples pestañas o solo una.')" data-position="top">info</i>
						</div>
					</div>
					<div class="row">
						<div class="col s11">
							<p>
								<label for="allow_blending">
									<input type="checkbox" id="allow_blending" :disabled="campanaMetodo == 'MANUAL' || campanaMetodo == 'BLASTER'">
									<span id="allow_bleding">{{traducirFrase("Habilitar blending")}}</span>
								</label>
							</p>
						</div>
						<div class="col s1">

						</div>
					</div>
				</div>
				<div class="col s3">
					<label class='active' for='metodo_marcado'>{{i18n.gettext("Tiempo de calificación del agente")}}</label>
					<div class="row">
						<div class="col s11">
							<input class='validate' type="number" step='1' value='30' min="0" id="tiempoDispo" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Es el tiempo maximo en segundos que el agente tendra para calificar una llamada.')" data-position="top">info</i>
						</div>
					</div>
					<label class='active' for='metodo_marcado'>{{i18n.gettext("Tiempo de selección de pausa del agente (Segundos)")}}</label>
					<div class="row">
						<div class="col s11">
							<input class='validate' type="number" step='1' v-model="tiempoSeleccionPausa"/>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Es el tiempo que tendrá el agente para seleccionar su pausa, antes de regresar a disponible si no selecciona. Con el valor 0 se desactiva el tiempo límite.')" data-position="top">info</i>
						</div>
					</div>
					<label class='active' for='metodo_marcado'>{{i18n.gettext("Método de marcado")}}</label>
					<div class="row">
						<div class="col s11">
							<select id="metodo_marcado" class='browser-default' onchange='analiza()' v-model="campanaMetodo">
								<option value='MANUAL' id='MANUAL' selected='selected'>{{i18n.gettext("SALIENTE - MANUAL")}}</option>
								<option value='RATIO' id='RATIO'>{{i18n.gettext("PROGRESIVO")}}</option>
								<option value='ADAPT_AVERAGE' id='ADAPT_AVERAGE'>{{i18n.gettext("PREDICTIVO PROMEDIO")}}</option>
								<option value='ADAPT_HARD_LIMIT' id='ADAPT_HARD_LIMIT'>{{i18n.gettext("PREDICTIVO ESTRICTO")}}</option>
								<option value='ADAPT_TAPERED' id='ADAPT_TAPERED'>{{i18n.gettext("PREDICTIVO CONICO")}}</option>
								<option value='INBOUND_MAN' id='INBOUND_MAN'>{{i18n.gettext("ENTRADA - MANUAL")}}</option>
								<option value='INBOUND_MAN_AUTOPAUSA' id='INBOUND_MAN_AUTOPAUSA' data-autopausa>{{i18n.gettext("ENTRADA - ASISTIDO")}}</option>
								<option value='BLASTER' id='BLASTER'>BLASTER</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Aqui se elige el metodo de marcacion:<br>MANUAL: El agente solicita manualmente la siguiente llamada<br>PROGRESIVO: La marcación de la siguiente llamada se hace automaticamente hasta que el agente queda disponible<br>PREDICTIVO PROMEDIO: El sistema calcula automaticamente en que momento se debe realizar la siguiente llamada.<br>PREDICTIVO ESTRICTO: El sistema  llamara predictivamente hasta llegar al limite de intensidad de llamadas abandonadas y no marcara agresivamente hasta que se estabilice<br>PREDICTIVO TAPERED: El sistema se volvera mas estricto con forme llama<br>ENTRADA: El sistema calcula automaticamente en que momento se debe realizar la siguiente llamada. <br> ENTRADA AUTOPAUSA: El agente debe contestar manualmente las llamadas entrantes.<br>BLENDING: Llamadas manuales con llamadas de entrada <br>Lo anterior dependiendo de la cantidad de agentes logueados, la configuracion del nivel de abandono y de la intensidad de marcado.')" data-position="top">info</i>
						</div>
					</div>

					<div class="row">
						<div class="col s12">
							<label class="active" for='maximo_intensidad'>{{i18n.gettext("Máximo de la intensidad de marcado")}} [0, {{maximoPermitido}}]</label>
						</div>
						<div class="input-field col s11">
							<input class='validate' type="number" step='0.01' min="0" :max="maximoPermitido" v-model='maximoInt' value="0" id="maximo_intensidad" v-bind:disabled='banderaMan' onchange="cambiaAguja()" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Es el maximo de lineas telefonicas que el sistema marcara por agente. La intensidad de marcado automatico esta limitada por este campo.')" data-position="top">info</i>
						</div>
					</div>
					<label class="active" for='intensidad_marcado'>{{i18n.gettext("Intensidad de marcado automático")}} [0-{{maximoInt}}]</label>
					<div class="row">
						<div class="input-field col s11">
							<input class='validate' v-bind:disabled='banderaMan' type="number" step='0.01' v-model="gaugeVal" min="0" :max="maximoInt" onchange="cambiaAguja()" onkeypress="cambiaAguja()" onpr id="intensidad_marcado" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Establece el numero de lineas que el sistema debe utilizar por cada agente activo.')" data-position="top">info</i>
						</div>
					</div>
					<button class="btn left" v-on:click="minus" v-bind:disabled='banderaMan'><i class="material-icons">exposure_neg_1</i></button><button v-bind:disabled='banderaMan' class="btn right" v-on:click="plus"><i class="material-icons">exposure_plus_1</i></button>
					<canvas id="foo"></canvas>

				</div>
				<div class="col s3">
					<div class="row">
						<div class="col s9 valign-wrapper">
							<label class="active " for='intensidad_llamadas'>{{i18n.gettext("Intensidad de llamadas abandonadas")}} <br>[0-100]</label>
						</div>
						<div class="col s2">
							<input class='validate' type="number" step='0.01' v-bind:disabled='banderaMan' v-model="percentage" min="0" max="100" id="intensidad_llamadas" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Este campo es el porcentaje maximo de llamadas abandonadas en una campaña predictiva.')" data-position="top">info</i>
						</div>
					</div>
					<div class="row">
						<div class="col s2 ">
							<button class="btn" v-on:click="minPer()" v-bind:disabled='banderaMan'><i class="material-icons">exposure_neg_1</i></button>
						</div>
						<div class="col s8 ">
							<div class="progress grey lighten-2" style="margin-left: 10px;">
								<div class="determinate" v-bind:style="{width: percentage + '%'}" style="background-image: linear-gradient(to right, rgb(82, 255, 52) , rgb(255, 31, 31));"></div>
							</div>
						</div>
						<div class="col s2">
							<button class="btn" v-on:click="plusPer()" v-bind:disabled='banderaMan'><i class="material-icons">exposure_plus_1</i></button>
						</div>
					</div>

					<div class="row">
						<div class="col s9">
							<label class="active" for='objetivo_intensidad'>{{i18n.gettext("Objetivo de la intensidad de marcado")}} <br>[-40 - 40]</label>
						</div>
						<div class="col s2">
							<input class='validate' type="number" step='1' v-model="objetivo" v-bind:disabled='banderaMan' min="-40" max="40" id="objetivo_intensidad" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:disabled='banderaMan' v-bind:data-tooltip="translate('Este campo orienta el objetivo de cuantos agentes deben de estar esperando llamadas o cuantas llamadas deben estar esperando por agentes.')" data-position="top">info</i>
						</div>
					</div>
					<div class="row">
						<div class="col s2">
							<button class="btn" v-on:click="(objetivo>-40)?(objetivo--):(objetivo)" v-bind:disabled='banderaMan'>
								<i class="material-icons">person</i>
							</button>
						</div>
						<div class="col s8 ">
							<input type="range" v-model="objetivo" min="-40" max="40" v-bind:disabled='banderaMan' style="margin-left: 10px;" />
						</div>
						<div class="col s2 ">
							<button class="btn" v-on:click="(objetivo<40)?(objetivo++):(objetivo)" v-bind:disabled='banderaMan'>
								<i class="material-icons">phone_in_talk</i>
							</button>
						</div>
					</div>
					<div class="row">
						<div class="col s9"><label for='intensidad_algoritmo'>{{i18n.gettext("Intensidad de velocidad de cambio")}} <br> [-40 - 40]</label></div>
						<div class="col s2">
							<input class='validate' type="number" step='1' v-model="intensidad" min="-40" max="40" v-bind:disabled='banderaMan' id="intensidad_algoritmo" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Este campo ajusta la intensidad del algoritmo de predicción. Cuanto mayor sea la intensidad de la prediccion cambiara mas rapido la intensidad de marcado.')" data-position="top">info</i>
						</div>
					</div>
					<div class="row">
						<div class="col s2 ">
							<a class="btn" v-on:click="(intensidad>-40)?(intensidad--):(intensidad)" v-bind:disabled='banderaMan'><i class="material-icons">exposure_neg_1</i></a>
						</div>
						<div class="col s8 ">
							<div class="progress grey lighten-2" style="margin-left: 10px;">
								<div class="determinate" v-bind:style="{width: (50+(intensidad*1.25))+'%'}" style="background-image: linear-gradient(to right, rgb(82, 255, 52) , rgb(255, 31, 31));"></div>
							</div>
						</div>
						<div class="col s2">
							<a class="btn" v-on:click="(intensidad<40)?(intensidad++):(intensidad)" v-bind:disabled='banderaMan'><i class="material-icons">exposure_plus_1</i></a>

						</div>
					</div>
					<!-- Configuracion extra para campanas, agregado
						grupo de transferencia y grabar audios
					 -->
					<label class='active' for='metodo_marcado'>
						{{i18n.gettext("Grupo de transferencia por default")}}
					</label>
					<div class="row">
						<div class="col s11">
							<select id="grupo_transferencia_default" class='browser-default' v-model="default_xfer">
								<option value='---NONE---' selected='selected'>
									{{i18n.gettext("Ninguno")}}
								</option>
								<option v-for="inbound in inboundsCampaign" :value='inbound.id'>
									{{inbound.Nombre}}
								</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Selecciona el grupo de transferencia por defecto que tendra la campaña al hacer una transferencia')" data-position="top">info</i>
						</div>
					</div>
					<label class='active' for='metodo_marcado'>
						{{i18n.gettext("Modo de grabacion")}}
					</label>
					<div class="row">
						<div class="col s11">
							<select class='browser-default' v-model="RECORDLlamada">
								<option value='ALLCALLS'>
									{{traducirFrase("Grabar todo")}}
								</option>
								<option value='NEVER'>
									{{traducirFrase("Nunca grabar")}}
								</option>
								<option value='ONDEMAND'>
									{{traducirFrase("Grabar bajo demanda")}}
								</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Modo de grabacion: grabar todo grabara las llamadas desde que se le pasa al agente, nunca graba no graba ninguna llamada, grabar bajo demanda grabara las llamadas solo cuando el agente haga clic en el boton de grabar')" data-position="top">info</i>
						</div>
					</div>
					<label class='active' for='list_por_defecto' v-if="editandoCampana && campanaMetodo !== 'BLASTER'">
						{{i18n.gettext("Lista de marcado por defecto")}}
					</label>
					<div class="row" v-if="editandoCampana && campanaMetodo !== 'BLASTER'">
						<div class="col s11">
							<select class='browser-default' v-model="list_id_campaign">
								<option v-for="item in selectListas" :key="item.value" :value="item.value">
									{{ item.label }}
								</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Lista de marcado por defecto.')" data-position="top">info</i>
						</div>
					</div>
					<!-- Configuracion extra para campanas -->
				</div>
				<div class="col s3">



					<label for='tamaño_auto' class='active'>{{i18n.gettext("Tamaño automático de cola de marcado")}}</label>
					<div class="row">
						<div class="col s11">
							<select class='browser-default' id="tamaño_auto" v-bind:disabled='banderaMan' onchange='analizax2()'>
								<option value="N" selected='selected'>{{i18n.gettext("No")}}</option>
								<option value="Y">{{i18n.gettext("Si")}}</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Esta opcion cuando esta activa, determina automaticamente el tamaño de la cola de marcado.')" data-position="top">info</i>
						</div>
					</div>

					<div class="row">
						<div class="col s9"><label class="active" for='tamaño_cola'>{{i18n.gettext("Tamaño de cola de marcado")}} <br> [1-1000]</label></div>
						<div class="col s2">
							<input class='validate' style="margin-left: 10px;" type="number" step='1' v-model="cola" min="1" max="1000" v-bind:disabled='(banderaMan || !banderaAuto)' id="tamaño_cola" />
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Es el numero de llamadas que estan listas para marcar inmediatamente de manera simultanea.')" data-position="top">info</i>
						</div>
					</div>
					<div class="row">
						<div class="col s2 ">
							<a class="btn" v-on:click="(cola>0)?(cola--):(cola)" v-bind:disabled='(banderaMan || !banderaAuto)'><i class="material-icons">exposure_neg_1</i></a>
						</div>
						<div class="col s8 ">
							<input type="range" v-model="cola" min="1" max="1000" v-bind:disabled='(banderaMan || !banderaAuto)' style="margin-left: 10px;" />
						</div>
						<div class="col s2"> <a class="btn" v-on:click="(cola<1000)?(cola++):(cola)" v-bind:disabled='(banderaMan || !banderaAuto)'><i class="material-icons">exposure_plus_1</i></a>
						</div>
					</div>

					<label for="activa" for='activa'>{{i18n.gettext("Activa")}}</label>
					<div class="row">
						<div class="col s11">
							<select id="activa" class='browser-default' :disabled="banderaMan && campanaMetodo == 'BLASTER'">
								<option value="Y" selected='selected'>{{i18n.gettext("Si")}}</option>
								<option value="N">{{i18n.gettext("No")}}</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Aqui se establece si la campaña esta activa o inactiva. Si esta inactiva, ningun agente podra acceder a ella.')" data-position="top">info</i>
						</div>
					</div>
					<div class="row">
						<div class="col s11">
							<label>{{i18n.gettext("Carrier")}}</label>
							<select id='carrier' class='browser-default'>
								<option v-for='carrier in carriers' v-bind:value='carrier.id'>{{carrier.nombre}}</option>
							</select>
						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Este es el carrier que se utilizara en esta campaña')" data-position="top">info</i>
						</div>
					</div>
					<!-- Selector de DID para campaña  ====== -->
					<div class="row">
						<div class="col s12">
							<label for="did-campana">{{traducirFrase("DID de Campaña")}}</label>
							<select id="did-campana" v-model="campaignCID" class="browser-default">
								<option :value="null" disabled selected>{{traducirFrase("Selecciona un DID")}}</option>
								<option :value="'0000000000'" selected>{{traducirFrase("Ninguno")}}</option>
								<option v-for="did in selectDids" :key="did.value" :value="did.value">
									{{ did.label }}
								</option>
							</select>
						</div>
					</div>
					<!-- =================================== -->
					<div class="row">
						<div class="col s11">
							<label>{{i18n.gettext("¿Desea activar el sonido?")}}</label> <br> <br>
							<div class="switch ">

								<label for='allow_beep' class='active'>
									{{i18n.gettext("No")}}
									<input type="checkbox" class="" id='allow_beep' v-on:change='getAllow_beep()' :disabled="banderaMan && campanaMetodo == 'BLASTER'">
									<span class="lever "></span>
									{{i18n.gettext("Si")}}
								</label>
							</div>

						</div>
						<div class="col s1">
							<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Esta opcion habilita el uso de un sonido para avisar que el agente lleva mucho tiempo en la llamada')" data-position="top">info</i>
						</div>

					</div>
					<div class="row">
						<div class="col s11">
							<label>{{i18n.gettext("Tiempo en segundos para que suene el sonido")}}</label>
							<input type="number" id='time_beep' min='40' max='6000' value="0" :disabled="banderaMan && campanaMetodo == 'BLASTER'">
						</div>
					</div>
					<!--<div class="col s1">
								<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Es el tiempo en el que el agente escuchara un sonido avisandole del tiempo')"
								data-position="top">info</i>
						</div>-->
					<div class="col s11">
						<label>{{i18n.gettext("Tiempo en segundos para que se repita el sonido")}}</label>
						<input type="number" id='time_repeat' min='1' max='6000' value="0" :disabled="banderaMan && campanaMetodo == 'BLASTER'">
					</div>
				</div>
				<div class="col s12">
					<label for="ListasNegras" class='active'>{{i18n.gettext("Lista negra")}}</label>
					<select id='ListasNegras' class='browser-default'>
					</select>
				</div>
				<div class="col s12">
					<label for="DEAD" class='active'>{{i18n.gettext("Tiempo en segundos de la llamada en el estado error")}}</label>
					<select id='DEAD' class='browser-default'>
						<option value="0">{{traducirFrase("El sistema no cuelga la llamada")}} </option>
						<option value="1">1s</option>
						<option value="2">2s</option>
						<option value="3">3s</option>
						<option value="4">4s</option>
						<option value="5">5s</option>
						<option value="6">6s</option>
						<option value="7">7s</option>
						<option value="8">8s</option>
						<option value="9">9s</option>
						<option value="10">10s</option>
						<option value="11">11s</option>
						<option value="12">12s</option>
						<option value="13">13s</option>
						<option value="14">14s</option>
						<option value="15">15s</option>
						<option value="16">16s</option>
						<option value="17">17s</option>
						<option value="18">18s</option>
						<option value="19">19s</option>
						<option value="20">20s</option>
						<option value="30">30s</option>
						<option value="45">45s</option>
						<option value="60">60s</option>
						<option value="90">90s</option>
						<option value="120">120s</option>
						<option value="180">180s</option>
						<option value="240">240s</option>
						<option value="300">300s</option>
					</select>
				</div>
				<div class="col s12 grey lighten-5" style="display: flex; flex-direction: column; gap: 0.2rem; margin-top: 1.5rem;padding-top: 1rem; border-radius: 0.6rem;" v-if="campanaMetodo === 'INBOUND_MAN_AUTOPAUSA'">
					<h6 class="teal-text text-darken-3">{{traducirFrase("ENTRADA ASISTIDO - Configuración adicional")}}</h6>
					<div style="padding: 0.5rem 1rem;display: flex; gap: 1rem; justify-content: center; align-items: center;">
						<div class="input-field" style="flex: 1;">
							<label for="" class="active">{{traducirFrase("Tono de llamada entrante")}}</label>
							<select name="" id="" class="browser-default" v-model="autopausaTono">
								<option :value="''" disabled selected>
									{{traducirFrase("Selecciona un tono")}}
								</option>
								<option value="1">
									Tono 1
								</option>
								<option value="2">
									Tono 2
								</option>
								<option value="3">
									Tono 3
								</option>
								<option value="4">
									Tono 4
								</option>
							</select>
							<span class="helper-text">
								{{traducirFrase("Con el entrante asistido habilitado, las llamadas en cola emitirán una alerta sonora.")}}
							</span>
						</div>
						<div style="flex: 1;">
							<label class='active'>{{i18n.gettext("Volumen")}}</label>
							<p class="range-field">
								<input type="range" id="test5" min="0" max="100" v-model="autopausaVolumen" />
							</p>
						</div>
						<button class="btn wave-effect waves-light btn-small teal-text white" @click="autopausaProbarTono()">
							<i class="material-icons right">volume_up</i>
							{{traducirFrase("Escuchar")}}
						</button>
					</div>

					<div style="padding: 0.5rem 1rem;display: flex; gap: 1rem; justify-content: center; align-items: flex-start;">
						<div class="input-field" style="flex: 1;">
							<label for="" class="active">{{traducirFrase("Metodo de distribución")}}</label>
							<select name="" id="" class="browser-default" v-model="autopausaMetodo">
								<option :value="''" disabled selected>
									{{traducirFrase("Selecciona un metodo")}}
								</option>
								<option value="none">
									Ninguno (Sonará a todos)
								</option>
								<option value="menor_llamadas">
									Menos llamadas
								</option>
								<option value="mayor_tiempo">
									Más tiempo esperando
								</option>
							</select>
							<span class="helper-text">
								{{traducirFrase("Selecciona de qué manera será distribuida la llamada a los agentes, cada método indica a quién timbrará primero.")}}
							</span>
						</div>
						<div class="input-field" style="flex: 1;">
							<label class='active'>{{i18n.gettext("Tiempo de timbrado (segundos)")}}</label>
							<input type="number" max="100" v-model="autopausaTiempo" />
							<span class="helper-text">
								{{traducirFrase("Tiempo que se timbrará al agente cuando hay una llamada entrante. Este tiempo no aplica cuando no se seleccionó ningún tipo de distribución. Valores iguales o menores a cero harán que solo se timbre al primer agente seleccionado.")}}
							</span>
						</div>
					</div>
				</div>
			</div>
			<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?>
				<div class="row">
					<div class="col s11">
						<label>Permitir WhatsApp</label> <br> <br>
						<div class="switch">

							<label>
								No
								<input type="checkbox" id='allow_wa' :disabled="banderaMan && campanaMetodo == 'BLASTER'">
								<span class="lever"></span>
								Si
							</label>


						</div>

						<div class="col s1">
							<i class="material-icons tooltipped" data-tooltip="Indica si está activo el agente tiene la ventana de WhatsApp abierta" data-position="top">info</i>
						</div>
					</div>
				</div>
			<?php } ?>

			<div class="col s3" :hidden="!banderaMan || campanaMetodo != 'BLASTER'">
				<div class="row">
					<div class="input-field col s11">
						<label class="active" for="audio_campana_blaster">Audio</label>
						<select id="audio_campana_blaster" class="browser-default" required>
							<option v-for="i in audios" :value="''+i.id">{{i.Nombre}}</option>
						</select>
					</div>
					<div class="col s1">
						<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Este es el audio que la campaña reproducira')" data-position="top">info</i>
					</div>
				</div>
				<div class="row">
					<div class="input-field col s11">
						<input type='text' id="lineas_campana_blaster" class="validate">
						<label for='lineas_campana_blaster'>{{i18n.gettext("Numero de lineas a usar")}}</label>
					</div>
					<div class="col s1">
						<i class="material-icons tooltipped" v-bind:data-tooltip="translate('Estas son las lineas que usara la campaña para marcar')" data-position="top">info</i>
					</div>
				</div>
			</div>

			<center>
				<img src="<?= IMG_ADMIN; ?>spinner.gif" width="150" height="150" style="display: none; margin-top: 2rem;" id="spinnerEditar">
				<?php if (NEED_WA && $_SESSION['allow_waCli']) { ?><button class=" btn waves-effect waves-light" v-on:click="abreWA" type='button' id='waConfigureButton'>Configurar campaña de whatsapp
						<i class="material-icons right">settings_phone</i>
					</button> <br> <br><?php } ?>
				<button class="modal-close btn waves-effect waves-light" onclick="continua()" type='button' id='CancelarCampa'>{{i18n.gettext("Cancelar")}}
					<i class="material-icons right">cancel</i>
				</button>
				<button class=" btn waves-effect waves-light" id='CrearCampa' onClick="decide()" type='button' :disabled="disabledSaveCampaign">Crear
					<i class="material-icons right">send</i>
				</button>
				<br><br>
			</center>

		</div>


	</div>
	<br>
	<?php include_once "modals" . DIRECTORY_SEPARATOR . "csv.php"; ?>
	<?php include_once "modals" . DIRECTORY_SEPARATOR . "crm.php"; ?>
	<div id="modalConfiguracionWa" class="modal">
		<div class="modal-content">
			<h5>Configuración de campaña para Whatsapp</h5>
			<div class="row">
				<div class="col s6 input-field">
					<div class="row">
						<div class="col s12">
							<input type='hidden' id="idcampana_wa">
							<input type='hidden' id="idmensaje_wa">
							<label class="active" for="wa_nombreCamp">Nombre</label>
							<input type="text" id="wa_nombreCamp" placeholder="Nombre de la campaña">
						</div>
						<div class="col s12">
							<label class="active" for="wa_grupoTelefonos">Grupo de telefonos</label>
							<select class="browser-default" id="wa_grupoTelefonos">
								<option>Default</option>
							</select>
						</div>
						<div class="col s12">
							<label class="active" for="wa_listaNegra">Lista Negra</label>
							<select class="browser-default" id="wa_listaNegra">
								<option>Default</option>
							</select>
						</div>
						<div class="col s12">
							<label class="active" for="wa_modoChat">Modo de chat</label>
							<select class="browser-default" id="wa_modoChat">
								<option value="0">Modo distribuido</option>
								<option value="1">Modo permanente</option>
							</select>
						</div>
						<div class="col s12">
							<label class="active" for="wa_tiempoChat">Inactividad de agentes (minutos)</label>
							<input type="number" min="1" id="wa_tiempoChat">
						</div>
					</div>

				</div>
				<div class="col s6 input-field">
					<div class="row">
						<div class="col s12">
							<label class="active" for="pickDate">Fecha</label>
							<input type="text" id="fechaWA" autocomplete="off" start-date="new Date()" class=" datepicker-here" data-range="true" data-multiple-dates-separator=" - " data-date-format="yyyy-mm-dd" data-language="es" class="datepicker-here" id="pickDate" />
						</div>
						<div class="col s12">
							<label class="active" for="wa_horaI">Hora de inicio</label>
							<input type="time" name="" id="wa_horaI">
						</div>
						<div class="col s12">
							<label class="active" for="wa_horaF">Hora de fin</label>
							<input type="time" name="" id="wa_horaF">
						</div>

						<div class="col s12">
							<label class="active" for="wa_limiteChat">Limite de chats por agente</label>
							<input type="number" min="1" id="wa_limiteChat">
						</div>
					</div>

				</div>
			</div>
			<div class="row">
				<div class="col s12">
					<center>
						<span>Mensaje de autorespuesta</span>
						<label>
							<div class="switch">
								<label>
									<input type="checkbox" id='autoRespuesta'>
									<span class="lever"></span>
								</label>
							</div>
						</label>
						<div class="col s12">
							<div class="form-group">
								<label class="active" for="mensaje_wa">Mensaje</label>
								<textarea id="mensaje_wa" cols="30" rows="10" class="form-control"></textarea>
							</div>
						</div>
					</center>
				</div>
			</div>
			<div class="row">
				<div class="col s12">
					<center>
						<span>Respuesta de llamada</span>
						<label>
							<div class="switch">
								<label>
									<input type="checkbox" id='autoresLlam_wa'>
									<span class="lever"></span>
								</label>
							</div>
						</label>
						<div class="col s12">
							<div class="form-group">
								<label class="active" for="mensajeLlam_wa">Mensaje</label>
								<textarea id="mensajeLlam_wa" cols="30" rows="10" class="form-control"></textarea>
							</div>
						</div>
					</center>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<center>
				<button class="modal-close btn waves-effect waves-light" type='button' onclick="borrarWA()">Cancelar
					<i class="material-icons right">cancel</i>
				</button>
				<button class="modal-close btn waves-effect waves-light" type='button'>Aceptar
					<i class="material-icons right">send</i>
				</button>
			</center>
		</div>
	</div>

</div>




<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<br>
<br>
<br>
<?php require_once UTILS_PATH . 'footer.php'; ?>

<!-- END FOOTER -->
<!-- ================================================
    Scripts
    ================================================ -->
<!-- jQuery Library -->

<!--materialize js-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- chartjs -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>chartjs/chart.min.js"></script>
<!-- sparkline -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>sparkline/jquery.sparkline.min.js"></script>
<!-- google map api -->
<script type="text/javascript" src="<?= JS_ADMIN; ?>maps.js"></script>
<!--jvectormap-->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/vectormap-script.js"></script>
<!--google map-->

<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>plugins.js"></script>
<!--card-advanced.js - Page specific JS-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>scripts/dashboard-analytics.js"></script>
<!--custom-script.js - Add your own theme custom JS
    <script type="text/javascript" src="<?= JS_ADMIN; ?>custom-script.js"></script>-->
<script src="<?= JS_ADMIN; ?>vue.js"></script>
<script src="<?= JS_ADMIN; ?>Chart.min.js"></script>
<script src="<?= JS_ADMIN; ?>gauge.min.js"></script>
<script src="<?= JS_ADMIN; ?>raphael.js"></script>
<script src="<?= JS_ADMIN; ?>justgage.js"></script>
<script src="<?= JS_ADMIN; ?>datepicker.js"></script>
<script src="<?= JS_ADMIN; ?>i18n/datepicker.es.js"></script>
<script src="<?= JS_ADMIN; ?>i18n/datepicker.en.js"></script>
<script src="<?= LIB_JS; ?>sweetalert2.js" type="text/javascript"></script>
<?php include UTILS_PATH . "requests.php"; ?>
<?php include UTILS_PATH . "components" . DIRECTORY_SEPARATOR . "table.component.php"; ?>
<?php include UTILS_PATH . "components" . DIRECTORY_SEPARATOR . "modal.component.php"; ?>
<?php include UTILS_PATH . "components" . DIRECTORY_SEPARATOR . "pagination.component.php"; ?>
<?php require_once "script.php"; ?>

<script>
	$(document).ready(function() {
		var today = new Date();
		var dd = today.getDate();
		var mm = today.getMonth() + 1; //January is 0!
		var yyyy = today.getFullYear();
		if (dd < 10) {
			dd = '0' + dd;
		}
		if (mm < 10) {
			mm = '0' + mm;
		}
		var today = yyyy + '-' + mm + '-' + dd;
		$('#downloadDateCampaign').val(today + " - " + today);

	});
</script>

</body>

<!-- Mirrored from pixinvent.com/materialize-material-design-admin-template/html/horizontal-menu/ by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 07 Aug 2018 16:55:15 GMT -->

</html>