<?php include UTILS_PATH."requests.php"?>
<?php include "scripts".DIRECTORY_SEPARATOR."vue.components.php"?>
<script>
	function dIni(date){
		return date.slice(0,10);
	}
	function dEnd(date){
		return date.slice(13,23);
	}
	var a = document.getElementById('idioma');
              if(a.value == "es"){
                <?php if (defined("BANDERA_ES")) {?>
					document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-<?php echo BANDERA_ES; ?>"></span>&nbsp;';
				<?php } else {?>
					document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-mx"></span>&nbsp;';
				<?php }?>

              }else{

                document.getElementById('banderaPais').innerHTML = '<span class="flag-icon flag-icon-um"></span>&nbsp;';

              }
	var app2 = new Vue({
		el: '#modalConfiguracionWa',
		data:{
			selected:'',
			seen:true
		}
	});
	var app = new Vue({
		el: '#main',
		data: {
			databuffer: {},
			flagRecargar: true,
			pagina: 1,
			tiempoConversacion:0,
			metodoCobro:0,
			i18n : i18n,
			selected:'',
            modalReporte: false,
            reporteCliente: {
                cliente: '',
                archived: false
            }, 
			loading: true,
			//Variables para la asosiación de Voces
			voces: [],
			id_cliente: '', 
			id_voz: '',
			vocesAsociadas: [],
			assocVoz: '', 
			headerAssoc: [
				{ label: traducirFrase('Nombre'), key: 'nombre' },
			],
			optionsAssoc: [
				{
					action: 'delete',
					tooltip: traducirFrase('Quitar voz'),
					icon: 'delete',
				},
			],
			voz: '',
			//Variables para los modales
			targets: {
				assoc: false,
				omnicanalidad: false,
				secciones: false,
			},
			// Variables para las encuestas 
			switchesPoll : "",
			omnicanalidadPresets: [
				{
					label: 'Whatsapp Manager',
					url: 'https://envios.whatsappmanager.com.mx',
					userField: 'usuario',
					passwordField: 'password',
					userValue: '',
					passwordValue: '',
					loginURL: 'https://envios.whatsappmanager.com.mx/Login/login',
					redirectURL: 'https://envios.whatsappmanager.com.mx/Dashboard',
					icon: 'chat_bubble',
				},
				{
					label: 'SMS Manager',
					url: 'https://corto.smsmanager.com.mx',
					userField: 'username',
					passwordField: 'password',
					userValue: '',
					passwordValue: '',
					loginURL: 'https://corto.smsmanager.com.mx/SMSManagerCorto/Template/inicio/inicio.jsp',
					redirectURL: 'https://corto.smsmanager.com.mx/SMSManagerCorto/Usuario/inicio/dashboard.jsp',
					icon: 'message',
				},
				{
					label: 'Blaster Manager',
					url: 'https://blaster.sisvox.mx/BlasterManager/Publico/inicio/inicio.jsp',
					userField: 'username',
					passwordField: 'password',
					userValue: '',
					passwordValue: '',
					loginURL: 'https://blaster.sisvox.mx/BlasterManager/Template/inicio/inicio.jsp',
					redirectURL: 'https://blaster.sisvox.mx/BlasterManager/Usuario/inicio/dashboard.jsp',
					icon: 'contact_phone',
				}
			],
			configOmnicanalidad: [],
			configSecciones: [],
			loadingSections: false,
		},
		mounted: function () {
			var bla;
			$("#escondeme").hide();
			$('.tooltipped').tooltip();
			$('.datepicker').css('z-index',10000);
			function cambiarAOscuro() {

				for (let i = 0; i < bla.length; i++) {
					bla[i].classList.remove('white');
					bla[i].classList.add('grey');
					bla[i].classList.add('lighten-1');
					bla[i].style.filter = 'invert(100%)';
				}
			}

			if (localStorage.getItem('background') == "black") {
				bla = document.getElementsByClassName('card-panel')
				bla = Array.prototype.slice.call(bla)
				cambiarAOscuro();
			}
			$("#escondeme").hide();
			$(".modal").modal();
		},
		methods: {
            descargarReporte: function() {

                const datesValues = $("#fechaReporteCliente").val().split(" - ");
                let strDate = "";
				let url = `clientes/getDialReport?archived=${this.reporteCliente.archived ? 1 : 0 }&cliente=${this.reporteCliente.cliente}`;

				if (datesValues[0])
					strDate += `&fechaIni=${datesValues[0]}`;

				if (datesValues[1])
					strDate += `&fechaFin=${datesValues[1]}`;

				url += strDate;
				window.location.href = url;
                this.modalReporte = false;

            },
            abrirModalReporte: function(cliente) {
                $('.datepicker').css('z-index',10000);
                this.reporteCliente = {
                    cliente: cliente,
                    archived: false
                };
                this.modalReporte = true;
            },
			nivelMod: function () {
				return parseFloat(this.nivel).toFixed(2);
			},
			translate(texto){
				if(i18n) return i18n.gettext(texto)
			},
			cambiaP: function(){
				app.metodoCobro=1;
				console.log(app.metodoCobro)
			},
			cambioQ: function(){
				app.metodoCobro=0;
				console.log(app.metodoCobro)
			},
			parseMembers: function (json) {
				var arr = [];
				for (var key in json) {
					if (json.hasOwnProperty(key)) {
						var val = json[key];
						arr.push(val);
					}
				}
				arr.pop();
				return arr;
			},
			takePosseion: function (usuario) {
				$.ajax({
					url: "/<?=RUTA_MAESTRA;?>/index.php/usuarios/tomarUsuario",
					type: "POST",
					data: {
						usuario: usuario,
						campana: ""
					},
					dataType: "text",
					success: function (result) {
						var resp = JSON.parse(result);
						if (resp.Estado == "ok") {
							window.location.replace("/<?=RUTA_MAESTRA;?>");
						} else {
							M.toast({
								html: resp.Descripcion
							});
						}
					},
					error: function (data) {
						M.toast({
							'html': traducirFrase('Error al tomar el usuario')
						});
					}
				});
			},abreWA:function()
			{
				<?php if (NEED_WA) {?>
				try{
					var Prueba=document.getElementById("allow_wa");
					console.log(Prueba,Prueba.checked)
					if(Prueba.checked)
					{
						$("#modalConfiguracionWa").modal("open");
						app2.seen=false
					}
				}
				catch(err)
				{
					console.log(err);
				}
				<?php }?>
			},
			abreModal: function () {
				$("#password").show();
				$("#titulo").html(i18n.gettext("Crear Cliente"));
				$("#nombre").val("");
				$("#CrearCampa").html(i18n.gettext("Crear Cliente"));
				$("#nombre").attr("disabled",false);
				$('.datepicker').css('z-index',10000);
				document.getElementById("CrearCampa").onclick = creaNuevo;
				$("#formuModal").modal("open");
				$('.datepicker').css('z-index',9999);
				var bla;
				$(".hidThis").show();
				function cambiarAOscuro() {

					for (let i = 0; i < bla.length; i++) {
						bla[i].classList.remove('white');
						bla[i].classList.add('grey');
						bla[i].classList.add('lighten-1');
						bla[i].style.filter = 'invert(100%)';
					}
				}

				if (localStorage.getItem('background') == "black") {
					bla = document.getElementsByClassName('card-panel')
					bla = Array.prototype.slice.call(bla)
					cambiarAOscuro();
				}
				$("#escondeme").hide();
			},
			editar:function(id)
			{
				$.ajax({
					url: "/<?=RUTA_MAESTRA;?>/index.php/Clientes/getClientDetail",
					type: "POST",
					data: {
						nombre: id
					},
					dataType: "text",
					error: function (data) {
						console.log(data);
					},
					success:function(response)
					{
						var res=JSON.parse(response);
						if(res.Estado==='ok')
						{
							$("#titulo").html(i18n.gettext("Editar cliente"));

							$("#CrearCampa").html(i18n.gettext("Editar cliente"));
							document.getElementById("CrearCampa").onclick = editarCliente;
							$("#nombre").attr("disabled",true);
							$("#password").hide();
							$("#nombre").val(res.Cliente.idClient);
							$("#limite").val(res.Cliente.limit_number)
                            document.getElementById("allowTelevox").checked=res.Cliente.allowTelevox==1;
							document.getElementById("allowGlobalList").checked=res.Cliente.allowGlobalList==1;
							document.getElementById("allowACD").checked=res.Cliente.allowACD==1;
							document.getElementById("allowInboundsReports").checked=res.Cliente.allowInboundsReports==1;
							document.getElementById("allowChat").checked=res.Cliente.allow_chat==1;
							document.getElementById("allowEncuestas").checked=res.Cliente.allowEncuestas==1;
							document.getElementById("allowFiles").checked=res.Cliente.allowFiles==1;
							document.getElementById("allowTTS").checked=res.Cliente.allowTTS==1;

							<?php if (NEED_WA) {?>
							let allow_wa=res.Cliente.allow_wa==1;
							document.getElementById("allow_wa").checked=allow_wa;
							if(allow_wa)
							{
								$("#UsuarioWA").val(res.Cliente.user_wa)
								$("#passwordWA").val(res.Cliente.pass_wa)
								$("#ObjectIdWA").val(res.Cliente.idclient_wa)
							}
							<?php }?>
							$("#formuModal").modal("open");
							$(".hidThis").hide();
							var bla;

							function cambiarAOscuro() {

								for (let i = 0; i < bla.length; i++) {
									bla[i].classList.remove('white');
									bla[i].classList.add('grey');
									bla[i].classList.add('lighten-1');
									bla[i].style.filter = 'invert(100%)';
								}
							}

							if (localStorage.getItem('background') == "black") {
								bla = document.getElementsByClassName('card-panel')
								bla = Array.prototype.slice.call(bla)
								cambiarAOscuro();
							}
							$("#escondeme").hide();
							document.getElementById("CrearCampa").onclick=editarCliente;
						}
						else
						{
							M.toast({
								'html': res.Descripcion
							});
						}
					}
				}
				);
			},
			recargar: function () {
				if (this.flagRecargar) {
					this.flagRecargar = false;
					var pagina = 1;
					if (app != null) {
						pagina = app.pagina;
					}
					$.ajax({
						url: "clientes/getClients",
						type: "POST",
						data: {
							pagina: pagina
						},
						dataType: "text",
						error: function (data) {
							console.log(data);
						},
						success: function (response) {
							$('.barrita').hide();
							app.flagRecargar = true;
							$("#botonCrear").show();
							var res = JSON.parse(response);
							if (res.Estado == 'ok') {
								app.databuffer = res;
								$("#paginacion").html("");
								var Anterior = res.Cuenta;
								res.Cuenta /= 10;
								res.Cuenta = Math.floor(res.Cuenta);
								if (Anterior % 10 != 0) {
									res.Cuenta++;
								}
								if (pagina == 1) {
									$("#paginacion").append(
										"<li class='disabled'><a href='#!'><i class='material-icons'>chevron_left</i></a></li>");
								} else {
									$("#paginacion").append("<li class='waves-effect'><a href='javascript:cambiaPagina(" + (pagina - 1) +
										")'><i class='material-icons'>chevron_left</i></a></li>");
								}
								for (var i = 0; i < res.Cuenta; i++) {
									if (pagina == (i + 1)) {
										$("#paginacion").append("<li class='active blue lighten-2 '><a href='javascript:cambiaPagina(" + (i + 1) +
											")'>" + (i + 1) + "</a></li>");
									} else {
										$("#paginacion").append("<li class='waves-effect'><a href='javascript:cambiaPagina(" + (i + 1) + ")'>" +
											(i +
												1) + "</a></li>");
									}
								}
								if (pagina == res.Cuenta || res.Cuenta == 0) {
									$("#paginacion").append(
										"<li class='disabled'><a href='#!'><i class='material-icons'>chevron_right</i></a></li>");
								} else {
									$("#paginacion").append("<li class='waves-effect'><a href='javascript:cambiaPagina(" + (pagina + 1) +
										")'><i class='material-icons'>chevron_right</i></a></li>");
								}
								setTimeout(() => {
									$('.tooltipped').tooltip();
								}, 1000);
							} else {
								M.toast({
									'html': res.Descripcion
								});
							}
						}
					});
				}
				var bla;

				function cambiarAOscuro() {

					for (let i = 0; i < bla.length; i++) {
						bla[i].classList.remove('white');
						bla[i].classList.add('grey');
						bla[i].classList.add('lighten-1');
						bla[i].style.filter = 'invert(100%)';
					}
				}

				if (localStorage.getItem('background') == "black") {
					bla = document.getElementsByClassName('card-panel')
					bla = Array.prototype.slice.call(bla)
					cambiarAOscuro();
				}
				$("#escondeme").hide();
			},
			activaCampana: function (id) {
				Swal.fire({
					type: 'warning',
					title: 'Desactivar cliente',
					text: '¿Desea desactivar al cliente: ' + id + '?\nEsto hara que ningun usuario del cliente logre iniciar sesión',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: 'Si',
					cancelButtonText: "Cancelar",
					preConfirm: () => {
						M.toast({
							'html': traducirFrase('Modificando cliente, porfavor espere.')
						});
						$.ajax({
							url: "clientes/changeClientStatus",
							type: "POST",
							data: {
								nombre: id
							},
							dataType: "text",
							success: function (response) {
								try {
									var res = JSON.parse(response);
								} catch (e) {
									M.toast({
										'html': traducirFrase('Error al modificar cliente')
									});
									return console.error(e);

								}
								if (res.Estado == 'ok') {
									M.toast({
										'html': traducirFrase('Cliente modificado')
									});

								} else {
									M.toast({
										'html': res.Descripcion
									});
								}
							}
						});
					}
				});

			},
			assoc($evt){
				let self = this;
				gen_rpost('Voz/getVozSelect' , {})
					.then((res)=>{
						gen_rpost('Clientes/getVocesByClient' , {
							cliente: $evt,
						})
							.then((resAssoc) => {
								self.id_cliente = $evt;
								self.voces = res.Registros.map((v) => {
									return {
										value: v.id_voz,
										label: v.nombre,
									};
								});
								self.vocesAsociadas = resAssoc.Registros;
								self.toggle('assoc' , true);
							})
							.catch((err) => console.log(err));
					})
					.catch((err) => console.log(err));
			},
			addAssoc(){
				let self = this;
				handled_rpost(`Clientes/assocVozCliente`, {
					cliente: this.id_cliente,
					id_voz: this.voz,
				})
					.then((res) => {
						self.assocVoz = '';
						self.assoc({
							cliente: self.id_cliente,
						});
					})
					.catch((err) => console.log(err));
			},
			deleteAssoc($event) {
				console.log($event.id_voz);
				let self = this;
				conf_rpost(
					'Clientes/disassocVozCliente',
					{
						cliente: self.id_cliente,
						id_voz: $event.id_voz,
					},
					traducirFrase(
						'Continuar esta accion eliminara la voz al cliente seleccionado'
					)
				)
					.then((result) => {
						self.assoc({
							id_voz: self.voz,
						});
					})
					.catch((err) => {
						console.log(err);
					});
			},
			toggle(target, value) {
				if (target == 'add') {
					this.one = {
						nombre: '',
						id_voz: '',
					};
				}
				app.targets[target] = value ? value : !app.targets[target];
			},
			// INICIO: Para omnicanalidad y seccion de otros
			sectionsBuildBody(body, omnicanalidad) {
				const b = Object.assign({
					cliente: this.id_cliente
				}, body);
				if (omnicanalidad) {
					b["omnicanalidad"] = true;
				}
				return b;
			},
			getSections(handler, omnicanalidad) {
				const self = this;
				this.loadingSections = true;
				gen_rpost('Clientes/getClientSections' , this.sectionsBuildBody({}, omnicanalidad))
					.then((res) => {
						self.loadingSections = false;
						handler(res)
					})
					.catch((err) => console.log(err));
			},
			omnicanalidad($evt) {
				let self = this;
				self.id_cliente = $evt;
				this.getSections((res) => {
					self.configOmnicanalidad = res.Sections.map(({
						Id, 
						Label, 
						URL, 
						UserField, 
						PasswordField, 
						UserValue, 
						PasswordValue, 
						LoginURL, 
						RedirectURL, 
						Icon
					}) => {
						return {
							id: Id,
							label: Label,
							url: URL,
							userField: UserField,
							passwordField: PasswordField,
							userValue: UserValue,
							passwordValue: PasswordValue,
							loginURL: LoginURL,
							redirectURL: RedirectURL,
							icon: Icon,
							isEditing: false,
							isNew: false,
						}
					})
					self.toggle('omnicanalidad' , true);
					$('.dropdown-trigger').dropdown();
				}, true)
			},
			secciones($evt){
				let self = this;
				self.id_cliente = $evt;
				this.getSections((res) => {
					self.configSecciones = res.Sections.map(({
						Id, 
						Label, 
						URL, 
						Script,
						Icon
					}) => {
						return {
							id: Id,
							label: Label,
							url: URL,
							script: Script,
							icon: Icon,
							isEditing: false,
							isNew: false,
						}
					})
					self.toggle('secciones' , true);
				})
			},
			addSection(omnicanalidad, preset) {
				if (omnicanalidad) {
					this.configOmnicanalidad.push(Object.assign({
						id: "",
						label: "",
						url: "",
						userField: "",
						passwordField: "",
						userValue: "",
						passwordValue: "",
						loginURL: "",
						redirectURL: "",
						icon: "",
						isEditing: true,
						isNew: true,
						__old: null,
					}, preset ? preset : {}));
				} else {
					this.configSecciones.push({
						id: "",
						label: "",
						url: "",
						script: "",
						icon: "",
						isEditing: true,
						isNew: true,
						__old: null,
					});
				}
			},
			deleteUnsavedSections(omnicanalidad) {
				if (omnicanalidad) {
					this.configOmnicanalidad = this.configOmnicanalidad.filter(v => !v.isNew)
				} else {
					this.configSecciones = this.configSecciones.filter(v => !v.isNew)
				}
			},
			saveSection(section, omnicanalidad) {
				const self = this;
				handled_rpost(
					'Clientes/' + (section.isNew ? "addSection" : "updateSection") , 
					this.sectionsBuildBody(section, omnicanalidad)
				)
					.then((res) => {
						if (omnicanalidad) {
							self.omnicanalidad(self.id_cliente);
						} else {
							self.secciones(self.id_cliente);
						}
					})
					.catch((err) => console.log(err));
			},
			deleteSection(section, omnicanalidad) {
				const self = this;
				conf_rpost(
					'Clientes/deleteSection' , 
					this.sectionsBuildBody(section, omnicanalidad),
					traducirFrase("Esto eliminará la configuración seleccionada")
				)
					.then((res) => {
						if (omnicanalidad) {
							self.omnicanalidad(self.id_cliente);
						} else {
							self.secciones(self.id_cliente);
						}
					})
					.catch((err) => console.log(err));
			},
			closeSections() {
				this.targets.omnicanalidad = false;
				this.targets.secciones = false;
				this.configOmnicanalidad = [];
				this.configSecciones = [];
			},
			// FIN: Para omnicanalidad y seccion de otros
		},
		created: function () {
			M.toast({
				html: traducirFrase("Cargando datos, por favor espere")+"."
			});
			var bla;

			function cambiarAOscuro() {

				for (let i = 0; i < bla.length; i++) {
					bla[i].classList.remove('white');
					bla[i].classList.add('grey');
					bla[i].classList.add('lighten-1');
					bla[i].style.filter = 'invert(100%)';
				}
			}

			if (localStorage.getItem('background') == "black") {
				bla = document.getElementsByClassName('card-panel')
				bla = Array.prototype.slice.call(bla)
				cambiarAOscuro();
			}
			$("#escondeme").hide();

			this.recargar();
		},
		computed: {
			classObject: function () {
				if ( localStorage.getItem('background') == 'white') {
					return {};
				} else {
					return {
						filter: 'invert(85%)'
					};
				}
			}, 
			validForm() {
				return this.one.nombre !== '' && this.one.id_voz !== '';
			},
		}, 
		watch: {
			updated() {
				$('.tooltipped').tooltip();
			}
		},
	});

	setInterval(function () {
		app.recargar();
	}, 3000);

	function creaNuevo() {
		var parametros = {
			nombre: $("#nombre").val(),
			password: $("#password").val(),
			limite:$("#limite").val(),
			allowTelevox:document.getElementById("allowTelevox").checked?"1":"0",
			allowGlobalList:document.getElementById("allowGlobalList").checked?"1":"0",
			allowACD:document.getElementById("allowACD").checked?"1":"0",
			allowInboundsReports:document.getElementById("allowInboundsReports").checked?"1":"0",
			allow_chat:document.getElementById("allowChat").checked?"1":"0",
			allowEncuestas:document.getElementById("allowEncuestas").checked?"1":"0",
			allowFiles:document.getElementById("allowFiles").checked?"1":"0",
			allowTTS:document.getElementById("allowTTS").checked?"1":"0",
			<?php if (NEED_WA) {?>
			allow_wa:document.getElementById("allow_wa").checked?"1":"0",
			usuarioWA:$("#UsuarioWA").val(),
			passwordWA:$("#passwordWA").val(),
			objectId:$("#ObjectIdWA").val()
			<?php }?>
		}
		$.ajax({
			url: "clientes/addClient",
			type: "POST",
			data: parametros,
			dataType: "text",
			error: function (data) {
				console.log(data);
			},
			success: function (response) {
				var res = JSON.parse(response);
				if (res.Estado == 'ok') {
					$("#formuModal").modal("close");

					app.recargar();
					Swal.fire({
						title: 'Cliente creado',
						html: '<b>Usuario:</b>' + res.Usuario + '<br>' + '<b>Password:</b>' + res.Password,
						type: 'success'
					});
				} else {
					M.toast({
						'html': res.Descripcion
					});
				}
			}
		});
	}
	function editarCliente()
	{
		var parametros = {
			nombre: $("#nombre").val(),
			limite:$("#limite").val(),
			password:$("#password").val(),
			allowTelevox:document.getElementById("allowTelevox").checked?"1":"0",
			allowGlobalList:document.getElementById("allowGlobalList").checked?"1":"0",
			allowACD:document.getElementById("allowACD").checked?"1":"0",
			allowInboundsReports:document.getElementById("allowInboundsReports").checked?"1":"0",
			allow_chat:document.getElementById("allowChat").checked?"1":"0",
			allowEncuestas:document.getElementById("allowEncuestas").checked?"1":"0",
			allowFiles:document.getElementById("allowFiles").checked?"1":"0",
			allowTTS:document.getElementById("allowTTS").checked?"1":"0",

			<?php if (NEED_WA) {?>
			allow_wa:document.getElementById("allow_wa").checked?"1":"0",
			usuarioWA:$("#UsuarioWA").val(),
			passwordWA:$("#passwordWA").val(),
			objectId:$("#ObjectIdWA").val()
			<?php }?>
		}
		$.ajax({
			url: "clientes/editClient",
			type: "POST",
			data: parametros,
			dataType: "text",
			error: function (data) {
				console.log(data);
			},
			success: function (response) {
				var res = JSON.parse(response);
				if (res.Estado == 'ok') {
					$("#formuModal").modal("close");

					app.recargar();
					M.toast({
						'html': traducirFrase("Cliente editado")
					});
				} else {
					M.toast({
						'html': res.Descripcion
					});
				}
			}
		});
	}
	function cambiaPagina(num) {
		app.pagina = num;
		app.recargar();
	}

</script>