<?php
$username = $_SESSION["Usuario"];
$password = $_SESSION["Password"];
$campana = $_SESSION["Campana"];
$phone = $_SESSION["extension"];
$phonep = $_SESSION["pass_ext"];
$dial_method = $_SESSION["dial_method"];
$url = "https://" . SERVER_IP . "/" . DIRECTORIO_AGC . "/vicidial.php?VD_login=$username&VD_campaign=$campana&phone_login=$phone&phone_pass=$phonep&VD_pass=$password#";
?>

<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- Page Content -->
<!--chat estilo-->

<style>
	/* Button used to open the chat form - fixed at the bottom of the page */
	.open-button {
		background-color: #555;
		color: white;
		padding: 16px 20px;
		border: none;
		cursor: pointer;
		opacity: 0.8;
		position: fixed;
		bottom: 75px;
		right: 28px;
		width: 280px;
	}

	/* The popup chat - hidden by default */
	.chat-popup {
		display: none;
		position: fixed;
		bottom: 0;
		right: 15px;
		border: 3px solid #f1f1f1;
		z-index: 9;
	}

	/* Add styles to the form container */
	.form-container {
		max-width: 300px;
		padding: 10px;
		background-color: white;
	}

	/* Full-width textarea */
	.form-container .textareaEsp {
		width: 100%;
		padding: 15px;
		margin: 5px 0 22px 0;
		border: none;
		background: #f1f1f1;
		resize: none;
		min-height: 200px;
	}

	.form-container .textareaMensaje {
		width: 100%;
		padding: 15px;
		margin: 5px 0 22px 0;
		border: none;
		background: #f1f1f1;
		resize: none;
		min-height: 40px;
	}

	/* When the textarea gets focus, do something */
	.form-container .textareaMensaje:focus {
		background-color: #ddd;
		outline: none;
	}

	/* Set a style for the submit/send button */
	.form-container .btn {
		background-color: #4CAF50;
		color: white;
		border: none;
		cursor: pointer;
		width: 100%;
		margin-bottom: 10px;
		opacity: 0.8;
	}

	/* Add a red background color to the cancel button */
	.form-container .cancel {
		background-color: red;
	}

	/* Add some hover effects to buttons */
	.form-container .btn:hover,
	.open-button:hover {
		opacity: 1;
	}


	/* Estilos para el historial de llamadas */

	.hl-contenedor {
		position: absolute;
		width: 400px;
		max-height: 20vh;
		overflow: auto;
		background-color: white;
		z-index: 10000;
		border: solid 1px rgba(0, 0, 0, 0.05);
		box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
	}

	.hl-titulo {
		display: flex;
		flex-direction: row;
		padding: 0.5rem 0.7rem;
		font-size: 0.7;
	}

	.hl-titulo>#titulo {
		flex-grow: 1;
	}

	/* Estilos para el historial de llamadas */
</style>

<!--chat estilo-->
<style>
	.ifrLeft {
		height: 500px;
	}

	.ifrRight {
		height: 500px;
	}

	.frameBox {
		padding-left: 40px;
	}

	.btnCerrarCont {
		color: rgb(25, 152, 255);
		position: absolute;
		left: 95%;
		z-index: 100;
	}

	#snackbar {
		visibility: hidden;
		min-width: 250px;
		margin-left: -125px;
		background-color: #333;
		color: #fff;
		text-align: center;
		border-radius: 2px;
		padding: 16px;
		position: fixed;
		z-index: 1;
		left: 50%;
		bottom: 30px;
	}

	#snackbar.show {
		visibility: visible;
		-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
		animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}

	@-webkit-keyframes fadein {
		from {
			bottom: 0;
			opacity: 0;
		}

		to {
			bottom: 30px;
			opacity: 1;
		}
	}

	@-webkit-keyframes fadeout {
		from {
			bottom: 30px;
			opacity: 1;
		}

		to {
			bottom: 0;
			opacity: 0;
		}
	}
</style>
<div class="spinner" style="width: 100vw; height: 100vh;">
	<div class="p-3">
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<div class="progress">
			<div class="progress-bar-hidden progress-bar progress-bar-striped" role="progressbar" style="width: 0%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
	</div>
</div>
<div class="wraper bg-white main-hidden-content" style="opacity: 0;">
	<iframe src="<?= $url; ?>" id="my_iframe" width="0" height="0" allow="microphone"></iframe>
	<ul class="nav nav-tabs nav-fill" id='barraNav'>
	</ul>
	<div class="container">

		<!-- Page Heading -->
		<h1 class="my-4">
		</h1>

		<div class="d-flex flex-row" style="margin-top:-20px;">


			<div class="portfolio-item barra_phone">
				<div class="row">
					<div class="col-lg-12 col-sm-12 portfolio-item">
						<div class="card h-30 sombra dv-canales">
							<div class="card-body centrar">
								<h4 class="card-title">
									<a href="#"><?php echo lang("controles"); ?></a>
								</h4>
								<div style="text-align: center;">
									<a class="btn" onclick="playAgente()" id="btnPlay">
										<i class="fas fa-play-circle controles"></i>
									</a>
									<a class="btn" onclick="pausaAgente()" id="btnPause">
										<i class="fas fa-pause-circle controles"></i>
									</a>
									<a class="btn" style='display:none;' id="btnStop" onclick="nextDialMan()">
										<i class="fas fa-chevron-circle-right controles "></i>
									</a>
									<a class="btn" onclick="grabaMaster()" id="btnRecord">
										<i class="fas fa-dot-circle controles"></i>
									</a>
								</div>
								<div class="row">
									<div class="dropdown row mx-3">
										<div class="col-12" id="vue-historial">
											<a href="#" class="row col sm-12 my-1 mx-auto btn btn-sm btn-block btn-primary dropdown-toggle py-1" style="font-size: 0.8rem;" @click="abrirHistorial">
												<?php echo lang("historialLlamadas"); ?>
											</a>
											<div class="hl-contenedor" v-if="mostrarHistorial">
												<div class="hl-titulo">
													<div id="titulo">
														<?php echo lang("llamadasSesion"); ?>
													</div>
													<div>
														<a href="#" @click="ocultarHistorial">
															<i class="fas fa-times"></i>
														</a>
													</div>
												</div>
												<div class="row mx-0 px-3 py-1">
													<ul class="col-12 list-group" v-if="llamadas.length > 0">
														<li class="list-group item" v-for="llamada in llamadasReverse">
															<div class="row">
																<div class="col-12 py-2">
																	{{llamada.fecha.toLocaleTimeString()}} - {{llamada.telefono}}{{llamada.tipo ? " - " + llamada.tipo : ""}}
																</div>
																<div class="col-12">
																	<audio controls v-if="llamada.URL" style="width: 100%">
																		<source :src="llamada.URL" />
																	</audio>
																	<span v-else class="px-2">
																		<?php echo lang("sinGrabacion"); ?>
																	</span>
																</div>
															</div>

														</li>
													</ul>
													<p v-else class="font-weight-bold text-secondary">
														<?php echo lang("sinLlamadas"); ?>
													</p>
												</div>
											</div>
										</div>
										<div class="col-12">
											<button class="btn btn-sm btn-block btn-primary dropdown-toggle" type="button" id="channel-control-dropdown-button" aria-haspopup="true" aria-expanded="true">
												Audio
											</button>
										</div>
										<div class="dropdown-menu" id="channel-control-dropdown-container" aria-labelledby="channel-control-dropdown-button" style="min-width: 20vw;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row" id="hideThis">
					<div class="col-sm-12 row justify-content-end">
						<div class="col-sm-1" onclick="$('#hideThis').hide()" style="cursor: pointer;">
							<i class="fas fa-times text-secondary"></i>
						</div>
					</div>
					<div class="col-lg-12 col-sm-12 portfolio-item">
						<p><?php echo lang("notasReporte"); ?></p>
						<textarea id="notasLogs"></textarea>
						<button type="button" onclick="sendLogs()"><?php echo lang("enviarReporte"); ?></button>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-12 col-sm-12 portfolio-item">
						<div class="card h-30 phone_card">
							<div class="card-body">
								<div class="phone-wraper centrar">
									<div class="phone">
										<div class="phone-container">
											<div class="phone-status-bar">
												<span id="estado-telefono" style="position: absolute;font-size: 0.8rem; font-weight: bold; top: 1.4rem;"></span>
												<div class="spacer" id="reloj">00:00:00</div>
												<div class="a-white" id="encuestaSender">
													<a onclick="mandarEncuesta()" class="unvistedlink" href="#">
														<i class="fas fa-poll-h fa-sm a-white"></i>
													</a>
												</div>
												<div class="a-white" id="dtmfSender">
													<a onclick="mandaVariosDTMF()" class="unvistedlink" href="#">
														<i class="fas fa-sort-numeric-down fa-sm a-white"></i>
													</a>
												</div>
												<div class="phone-status" id="avisoEstado"></div>
											</div>
											<div class="flex j-center">
												<span class="phone-calling" id="phone-calling-label" style="text-align:center;"></span>
											</div>
											<form style="width: 100%" onsubmit="llama();return false;">
												<div class="phone-dialer-container">
													<div class="phone-dialer">
														<div class="spacer">
															<input class="validate phone-entrada" type="tel" onkeyup="return validaNum(event)" autocomplete="off" id="pantalla" />
														</div>
														<div>
															<button class="btn btn-default phone-eraser" onclick="return borra()" type="button">
																<i class="fas fa-backspace phone-eraser"></i>
															</button>
														</div>
													</div>
													<div class="phone-time" id="tiempoLlamada">10:00:21</div>
												</div>
											</form>
											<div class="phone-pad">
												<div class="phone-pad-row">
													<a class="btn btn-border phone-tecla" onclick="pon(1)">
														1
													</a>
													<a class="btn btn-border phone-tecla" onclick="pon(2)">2<br /><span class="phone-tecla-letters">ABC</span></a>
													<a class="btn btn-border phone-tecla" onclick="pon(3)">3<br /><span class="phone-tecla-letters">DEF</span></a>
												</div>
												<div class="phone-pad-row">
													<a class="btn btn-border phone-tecla" onclick="pon(4)">4<br /><span class="phone-tecla-letters">GHI</span></a>
													<a class="btn btn-border phone-tecla" onclick="pon(5)">5<br /><span class="phone-tecla-letters">JKL</span></a>
													<a class="btn btn-border phone-tecla" onclick="pon(6)">6<br /><span class="phone-tecla-letters">MNO</span></a>
												</div>
												<div class="phone-pad-row">
													<a class="btn btn-border phone-tecla" onclick="pon(7)">7<br /><span class="phone-tecla-letters">PQRS</span></a>
													<a class="btn btn-border phone-tecla" onclick="pon(8)">8<br /><span class="phone-tecla-letters">TUV</span></a>
													<a class="btn btn-border phone-tecla" onclick="pon(9)">9<br /><span class="phone-tecla-letters">WXYZ</span></a>
												</div>
												<div class="phone-pad-row">
													<a class="btn btn-border phone-tecla" onclick="pon(12)">*<br /><span class="phone-tecla-letters">&nbsp;</span></a>
													<a class="btn btn-border phone-tecla" onclick="pon(0)">0<br /><span class="phone-tecla-letters">&nbsp;</span></a>
													<a class="btn btn-border phone-tecla" onclick="pon(11)">#<br /><span class="phone-tecla-letters">&nbsp;</span></a>
												</div>
												<div class="phone-pad-row">
													<a id="btntrans1" class="btn btn-primary phone-tecla" onclick="controlTrans(2);">
														<i class="fas fa-arrows-alt-h"></i>
													</a>
													<a id="btnllama" class="btn btn-success phone-tecla" onclick="return llama()">
														<i class="fas fa-phone"></i>
													</a>
													<a id="btntrans2" class="btn btn-warning phone-tecla" onclick="controlTrans(1)">
														<i class="fas fa-exchange-alt"></i>
													</a>
												</div>
												<div class="phone-pad-row">
													<a id="btnesperao" title='<?php echo lang("espera"); ?>' class="btn btn-info phone-tecla" onclick="espera()">
														<i class="fas fa-phone-square"></i>
													</a>
													<a id="btncuelga" title='<?php echo lang("colgar"); ?>' class="btn btn-danger phone-tecla" onclick="decideTransferenciaColgado()">
														<i class="fas fa-phone-slash"></i>
													</a>
													<a id="btnotro" title='<?php echo lang("volverMarcar"); ?>' class="btn btn-secondary phone-tecla" onclick="redial()">
														<i class="fas fa-undo"></i>
													</a>
													<a id="btntransfer" title='<?php echo lang("transferir"); ?>' class="btn btn-secondary phone-tecla" onclick="transferirModales()" style="display: none;">
														<i class="fas fa-user-friends"></i>
													</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>



			</div>
			<div class="col sm-10">
				<ul class="nav nav-tabs" id="tabVentanas" role="tablist">
				</ul>
				<div class="tab-content" id="tabContentVentanas">
				</div>
			</div>
			<!--<div class="col-lg-6 col-sm-6 portfolio-item softphone-container" style='z-index:9999999999999;'>
					<div class="card h-100 sombra">

						<div class="card-body">
							<h4 class="card-title">
								<a href="#">SoftPhone</a>
							</h4>
							<p class="card-text">Aquí cargara el iframe del softphone.</p>
							<iframe src="<?= $url; ?>" id="my_iframe" width="640" height="480" allow="microphone"></iframe>
						</div>
					</div>
			</div>-->



		</div>
		<!-- /.row -->


	</div>


	<div id="calif" style='display:none;' class="overlay">
		<div class="popup" id="popup">
			<div class="content">
				<div id="weekly-earning" class="card">
					<div class="card-body" style="height: 550px">
						<div class="center-align">
							<form method="post" action="" onsubmit="enviaCalificacion(); return false;">
								<div class="form-group">

									<h5 class="text-center"><?php echo lang("Calificar"); ?></h5>
									<p id='TiempoCal'></p>
									<div id="callback" style='display:none;'>
										<div class='row'>
											<div class='col-sm-6'>
												<label for="cbDate"><?php echo lang("fechaVolverLlamar"); ?></label>
												<input type="date" id="cbDate" class="form-control">
											</div>
											<div class='col-sm-6'>
												<label for="cbTime"><?php echo lang("horaVolverLlamar"); ?></label>
												<input type="time" id="cbTime" class="form-control">
											</div>
										</div>
										<div class='row'>
											<div class='col-sm-6'>
												<label for="cbComments"><?php echo lang("comentariosCallback"); ?></label>
												<textarea id="cbComments" class="form-control"></textarea>
											</div>
											<div class='col-sm-6'>
												<label for="cbTipo"><?php echo lang("tipoCallback"); ?></label>
												<select id="cbTipo" class="form-control">
													<option selected value="ANYONE"><?php echo lang("callbackCualquiera"); ?>
													</option>
													<option selected value="USERONLY"><?php echo lang("callbackYo"); ?>
													</option>
												</select>
											</div>
										</div>
									</div>
									<label class="text-muted"><?php echo lang("calificacion"); ?>:</label>
									<div class="">
										<ul class="list-group ">
											<div class="row" id="codigosCalif"></div>
										</ul>
									</div>

									<!-- <select id="calificacionSelect" onchange="buscaCB()" required="required" class="form-control"><br>
									</select> -->
									<ul></ul>

									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<div class="input-group-text">
												<input type="checkbox" id='PausaCal'>
											</div>
										</div>
										<input id="ponerpausa" type="text" class="form-control" disabled value="<?php echo lang("pausaCalificar"); ?>">
									</div>
									<div class="row">
										<div class='col-sm-6'>
											<label for="comentario"><?php echo lang("comentarios"); ?></label>
											<textarea id="comentario" class="form-control"></textarea>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>



			</div>
		</div>
	</div>
	<div id="snackbar"><b style="font-size:24px;"><?php echo lang("aviso"); ?></b>
		<ul>
			<li id='ListaAlert'></li>
		</ul>
	</div>
	<div id="codPausa" style='display:none; width: 100%; height: 100vh; position: absolute; top: 0px; left: 0px; z-index: 100000; background: #000000aa; display: flex; justify-content: center; align-items: center;' class="overlay">
		<div id="popup" style="position: fixed;margin: 70px 10px 70px auto;padding: 0px 20px 20px 20px;border-radius: 5px;width: 30vw;">
			<div class="content">
				<div id="weekly-earning" class="card">
					<div class="card-body" style="height: 550px">
						<div class="center-align ">
							<form method="post" action="" onsubmit="enviaPausa(); return false;">
								<div class="form-group">
									<h3 class="text-center"><?php echo lang("codigosPausa"); ?></h3>
									<label><?php echo lang("codigoPausa"); ?></label><br>
									<ul class="list-group">
										<div class="row" id="codigosPausa"></div>
									</ul>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<?php if ($_SESSION["allow_chat"] == 1) { ?>
		<div id="chats">
			<button class="open-button" onclick="openForm()">Chat</button>
			<div class="chat-popup" id="myForm">
				<form v-on:submit.prevent="" class="form-container">
					<div class=" col s4">
						<label for="chatSel">Sala de chat:</label>
						<select id="chatSel" v-modal="salaActiva">
							<option v-for="(value,key) in Array.from(listaSalasActivas)" v-bind:value="key">{{ value }}
							</option>
						</select>
					</div>
					<textarea class="textareaEsp" readonly id="conver"></textarea>

					<textarea class="textareaMensaje" placeholder="escribe mensaje..." id="mensaje"></textarea>
					<div class="row">
						<div class="col s6">
							<button type="button" class="btn">Enviar</button>
						</div>
						<div class="col s6">
							<button type="button" class="btn cancel" onclick="closeForm()">Cerrar</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	<?php } ?>
</div>

<form onsubmit="return false;" autocomplete="off">
	<div id="modalTiempoLimitePausa" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">
						<?php echo lang("limitePausa"); ?>
					</h5>
				</div>
				<div class="modal-body">
					<!-- Probando con campos falsos para enganar a chrome -->
					<input type="text" id="username" name="username" style="display:none">
					<input type="password" id="password" name="password" style="display:none">
					<!-- Probando con campos falsos para enganar a chrome -->
					<p class="text-primary">
						<?php echo lang("ingresaSupervisor"); ?>
					</p>
					<div class="form-group">
						<label><?php echo lang("usuario"); ?></label>
						<input id="usuarioSupervisorPausa" class="form-control" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly', 'readonly');" type="text">
					</div>
					<div class="form-group">
						<label><?php echo lang("password"); ?></label>
						<input id="passwordSupervisorPausa" class="form-control" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly', 'readonly');" type="password">
					</div>
					<p class="text-danger" id="mensajeErrorTiempoLimitePausa"></p>
				</div>
				<div class="modal-footer">
					<button id="iniciarSupervisor" type="button" class="btn btn-primary p-1">
						<?php echo lang("acceder"); ?>
					</button>
				</div>
			</div>
		</div>
	</div>
</form>

<!-- // INICIO - Modal nuevo canal -->
<div class="modal fade" id="nuevoCanal_modal" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">
					<?php echo lang("agregarLlamada"); ?>
				</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="nuevoCanal_telefono"><?php echo lang("telefono"); ?></label>
					<input type="text" class="form-control" id="nuevoCanal_telefono">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo lang("cerrar"); ?></button>
				<button type="button" class="btn btn-primary" onclick="marcaManualNuevoCanal()"><?php echo lang("marcar"); ?></button>
			</div>
		</div>
	</div>
</div>
<!-- // FIN - Modal nuevo canal -->

<!-- INICIO - Modal transferencia a agentes 
/**
 * .modal-transferencia-contenedor Contenedor de todo lo de transferencias a agente
 * #modal-transferencia-grupos Select de los grupos de agente
 * .modal-transferencia-contenedor-agente Contendor del listado de botones de agentes
 * #modal-transferencia-mensaje Mensaje para cualquiera de las dos transferencias
 * .modal-transferencia Modal para las transferencias a grupos o agentes
 */ 
-->
<div class="modal fade modal-transferencia-agente" tabindex="-1">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">
					<?php echo lang("transferenciaAgenteTitulo"); ?>
				</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body modal-transferencia-contenedor">
				<div class="form-group">
					<label for="nuevoCanal_telefono"><?php echo lang("gruposAgente"); ?></label>
					<select name="grupos" id="modal-transferencia-grupos" class="form-control"></select>
				</div>
				<p id="modal-transferencia-mensaje" class="text-center text-primary mb-2 mt-2">
					Haz clic en el agente para transferir la llamada
				</p>
				<div class="modal-transferencia-contenedor-agentes" style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px;"></div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary p-2" data-dismiss="modal"><?php echo lang("cerrar"); ?></button>
			</div>
		</div>
	</div>
</div>
<!-- FIN - Modal transferencia a agentes -->







<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START CONTENT -->
<script>

</script>
<section id="content">
	<!--start container-->
	<div class="container">

		<!--yearly & weekly revenue chart start-->
		<div id="sales-chart">
			<div class="row">
			</div>
		</div>
		<!--yearly & weekly revenue chart end-->
</section>
</div>
<!-- END WRAPPER -->
</div>
<!-- END MAIN -->