<?php $__env->startSection('CSS'); ?>
<?php echo HTML::style('bootstrap-select/css/bootstrap-select.min.css'); ?>

<?php echo HTML::style('bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'); ?>

<?php echo HTML::style('WebPro/css/style-toggles.css'); ?>

<style>
	/*.tw-cursor {
		border-right: 2px solid #fff;
		display: initial;
		animation: blinkCursor 500ms steps(11) infinite normal;
	}
	@keyframes  blinkCursor{
		from {border-right-color: #fff;}
		to {border-right-color: #000;}
	}*/
	/* CLAUDE ----------------------- */
	/*#cursor {
		position: absolute;
		background-color: #000;
		width: 2px;
		height: 1.2em;
		animation: blink 0.7s infinite;
	}
	@keyframes  blink {
		50% { opacity: 0; }
	}*/
	#dvContenidoGenerado {
		font-size: 16px;
		line-height: 1.6;
		position: relative;
		margin-bottom: 20px;
	}
	.cursor {
		position: absolute;
		background-color: #000;
		width: 2px;
		height: 1.2em;
		animation: blink 0.7s infinite;
	}
	@keyframes  blink {
		50% { opacity: 0; }
	}
	/* -----------------------------  */
	.mdIA .modal-header {
		background-color: #363B3F !important;
	}

	.mdIA .modal-footer {
		margin-top: 0px !important;
	}
</style>
<?php /* HTML::style('ChatGPT-Typewriter/main.css') */ ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('Contenido'); ?>
<?php
	$confDeSegmentos = array();
	foreach($ContenidosIA as $indice => $ContenidoIA){
		//$confDeSegmentos[$indice]['id'] = $ContenidoIA->id;
		$confDeSegmentos[$ContenidoIA->id]['segmento'] = $ContenidoIA->segmento;
		$confDeSegmentos[$ContenidoIA->id]['nombre'] = $ContenidoIA->nombre;
		$confDeSegmentos[$ContenidoIA->id]['campos'] = json_decode($ContenidoIA->campos, true);
	}
	$idCliente = Cliente::select('id')->where('users_id', '=', Auth::user()->id)->first()->id;
	$zonaHoraria = Cliente::select('zona_horaria')->where('users_id', '=', Auth::user()->id)->first()->zona_horaria;
	$sqlContenidosGenerados = "SELECT
		COUNT(ciagxci.id) AS usadas
	FROM
		contenidos_ia_generados_x_clientes AS ciagxci
	WHERE
	
		ciagxci.clientes_id = $idCliente AND
		ciagxci.fechaGenerado
			BETWEEN
				CONCAT((LAST_DAY( (CONVERT_TZ(NOW(), @@session.time_zone, '$zonaHoraria')) - INTERVAL 1 MONTH) + INTERVAL 1 DAY),' 00:00:00')
				AND
				CONCAT((LAST_DAY( (CONVERT_TZ(NOW(), @@session.time_zone, '$zonaHoraria')) )), ' 23:49:00')
	;";
	$contGenerados = DB::select(DB::raw($sqlContenidosGenerados));
	$contGeneradosUsadas = $contGenerados[0]->usadas;
	$limiteContenido = (isset($_GET['scLimiteIA']))?$_GET['scLimiteIA']:50;
?>
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-magic"></i> Inteligencia Artificial </h2>
	</div>
</div>

<div class="row">
	<div class="col-md-5">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Genera un elemento para Marketing y Ventas </h3> </div>
			<div class="porlets-content">
				<?php echo Form::open(array('route' => 'SysWebIAMarketingYVentasGenerar', 'method' => 'post', 'class' => 'form-horizontal row-border', 'id' => 'frmGenerarIA', 'files' => true, 'target' => 'upload_iframe')); ?>

					<div class="form-group">
						<label class="col-sm-3-no control-label-no"> Nombre del contenido </label>
						<div class="col-sm-9-no">
							<input type="text" class="form-control" name="identificador" placeholder="Define un nombre a tu estrategia" required>
							<span class="text-danger" id="erridentificador"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3-no control-label-no"> Tipo de elemento </label>
						<div class="col-sm-9-no">
							<select class="form-control selectpicker" name="segmento" id="segmento" data-live-search="true" title="Seleccione un tipo de elemento">
								<?php foreach($ContenidosIA as $ContenidoIA): ?>
								<option value="<?php echo $ContenidoIA->id; ?>"><?php echo $ContenidoIA->nombre; ?></option>
								<?php endforeach; ?>
							</select>
							<span class="text-danger" id="errsegmento"></span>
						</div>
					</div>
					<div id="camposDelSegmento"></div>
					<div class="bottom">
						<?php echo Form::button('Generar', array('class' => 'btn btn-primary', 'id' => 'btnAgregar', 'type' => 'submit')); ?>

						<?php echo HTML::linkRoute('SysWebIAMarketingYVentas', 'Cancelar', array(), array('class' => 'btn btn-default', 'id' => 'btnCancelar')); ?>

					</div>
				<?php echo Form::close(); ?>

			</div>
		</div>
	</div>
	<div class="col-md-7">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Contenido generado </h3> </div>
			<div class="porlets-content">
				<div id="dvContenidoGenerado"><span id="cursor"></span></div>
			</div>
		</div>
	</div>
</div><!--/row end-->
<?php $__env->stopSection(); ?>

<?php $__env->startSection('JS'); ?>
<?php echo HTML::script('jQueryValidate/jquery.validate.min.js'); ?>

<?php echo HTML::script('jQueryValidate/additional-methods.min.js'); ?>

<?php echo HTML::script('jQueryValidate/messages_es.min.js'); ?>

<?php echo HTML::script('bootstrap-select/js/bootstrap-select.min.js'); ?>

<?php echo HTML::script('bootstrap-select/js/i18n/defaults-es_CL.min.js'); ?>

<?php echo HTML::script('bootstrap-datetimepicker/js/moment-with-locales.js'); ?>

<?php echo HTML::script('bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js'); ?>

<?php echo HTML::script('WebPro/plugins/toggle-switch/toggles.min.js'); ?>

<script type="text/javascript">
	var confDeSegmentos = <?php echo json_encode($confDeSegmentos, true); ?>;
	function armarConfDeSegmentos(idS){
		$("#camposDelSegmento").html("");
		//console.log( confDeSegmentos[idS] );
		var formGroup = '<div class="form-group"> \
			<label class="col-sm-3-no control-label-no">{%titulo%}</label> \
			<div class="col-sm-9-no"> \
				{%input%} \
				<span class="text-danger" id="err{%nombre%}"></span> \
			</div> \
		</div>';
		var text = '<input type="text" class="form-control" name="{%nombre%}" placeholder="{%placeholder%}" {%requerido%} data-depende-de="{%dependeDe%}" {%valorEspecifico%} data-longitud="{%longitud%}">';
		/*var dateTime = '<div class="input-group date" id="{%nombre%}"> \
			<input type="text" class="form-control" name="{%nombre%}" placeholder="{%placeholder%}" {%requerido%} data-depende-de="{%dependeDe%}" data-longitud="{%longitud%}"> \
			<span class="input-group-addon"> \
				<span class="glyphicon glyphicon-calendar"></span> \
			</span> \
		</div>';*/
		var dateTime = '<input type="text" class="form-control datetime" name="{%nombre%}" placeholder="{%placeholder%}" {%requerido%} data-depende-de="{%dependeDe%}" data-longitud="{%longitud%}">';
		var textArea = '<textarea class="form-control" rows="6" name="{%nombre%}" placeholder="{%placeholder%}" {%requerido%} data-depende-de="{%dependeDe%}" data-longitud="{%longitud%}" style="resize: vertical;"></textarea>';
		/*var checkBox = '<div class="checkbox"> \
			<label for="{%nombre%}"> \
				<input name="{%nombre%}" type="checkbox" value="1" id="{%nombre%}" {%requerido%} data-depende-de="{%dependeDe%}" data-longitud="{%longitud%}"> \
				<span class="custom-checkbox" style="margin-left: -25px;"></span> {%placeholder%} \
			</label> \
		</div>';*/
		var checkBox = '<div class="toggle toggle-success" data-input="{%nombre%}"></div> \
		<input name="{%nombre%}" type="hidden" value="1" id="{%nombre%}" {%requerido%} data-depende-de="{%dependeDe%}" data-longitud="{%longitud%}">';
		var select = '<select class="form-control selectpicker" name="{%nombre%}" id="{%nombre%}" title="{%placeholder%}" {%requerido%}>{%opciones%}</select>';
		$.each(confDeSegmentos[idS]["campos"], function(i, campo){
			var input = formGroup;
			if( campo.tipo == "text" ){
				input = input.replace("{%input%}", text);
			}
			else if( campo.tipo == "textarea" ){
				input = input.replace("{%input%}", textArea);
			}
			else if( campo.tipo == "datetime" ){
				input = input.replace("{%input%}", dateTime);
			}
			else if( campo.tipo == "checkbox" ){
				input = input.replace("{%input%}", checkBox);
			}
			else if( campo.tipo == "select" ){
				input = input.replace("{%input%}", select);
				var opciones = '';
				$.each(campo.opciones, function(i, opcion){
					opciones = opciones+'<option value="'+opcion+'">'+opcion+'</option>';
				});
				input = input.replace("{%opciones%}", opciones);
			}
			input = input.replace("{%titulo%}", campo.titulo);
			input = input.replace(/{%nombre%}/g, campo.nombre);
			input = input.replace("{%placeholder%}", campo.placeholder);
			input = input.replace("{%dependeDe%}", campo.dependeDe);
			input = input.replace("{%longitud%}", campo.longitud);
			if( "valorEspecifico" in campo ){
				input = input.replace("{%valorEspecifico%}", 'data-depende-de-valor="'+campo.valorEspecifico+'"');
			}
			else{
				input = input.replace("{%valorEspecifico%}", "");
			}
			if( parseInt(campo.obligatorio) == 1 ){
				input = input.replace("{%requerido%}", "required");
			}
			else{
				input = input.replace("{%requerido%}", "");
			}
			/*$("#camposDelSegmento").find("input, textarea").each(function(indice){
				//$(this).rules("remove");
				var input = $(this);
				var dependeDe = input.attr("data-depende-de");
				if( dependeDe != "" ){
					//$(this).prop("disabled", true);
					$("#camposDelSegmento").find('[name="'+dependeDe+'"]').click(function(e){
						if( $(this).is(":checked") ){
							input.prop("disabled", false);
						}
						else{
							input.prop("disabled", true);
						}
					});
				}
			});*/
			$("#camposDelSegmento").append(input);
		});
		//PROGRAMO LOS INPUTS TOGGLES -----------------------------------------------------------------------------------------------------
		$("#camposDelSegmento").find(".toggle").each(function(indice){
			var inputToogle = $(this);
			var inputHidden = inputToogle.find('[name="'+inputToogle.attr("data-input")+'"]');
			inputToogle.toggles({
				on: true,
				text: {
					on: "SI",
					off: "NO"
				}
			});
			inputToogle.on("click", function(e){
				if( inputToogle.find(".toggle-slide").hasClass("active") ){
					$("#camposDelSegmento").find('[data-depende-de="'+inputToogle.attr("data-input")+'"]').prop("disabled", false).val("");
					$("#camposDelSegmento").find('[name="'+inputToogle.attr("data-input")+'"]').val(1);
				}
				else{
					$("#camposDelSegmento").find('[data-depende-de="'+inputToogle.attr("data-input")+'"]').prop("disabled", true).val("");
					$("#camposDelSegmento").find('[name="'+inputToogle.attr("data-input")+'"]').val(0);
				}
			});
			inputToogle.trigger("click");
		});
		//---------------------------------------------------------------------------------------------------------------------------------
		//PROGRAMO LOS DATETIME PICKERS ------------------------------------------------------
		/*$("#camposDelSegmento").find(".datetime").each(function(indice){
			var inputDateTime = $(this);
			inputDateTime.datetimepicker();
		});*/
		//------------------------------------------------------------------------------------
		//PROGRAMO LOS SELECTPICKERS ---------------------------------------------------------
		$("#camposDelSegmento").find(".selectpicker").each(function(indice){
			var inputSelect = $(this);
			inputSelect.selectpicker();
			inputSelect.on("changed.bs.select", function(e, clickedIndex, isSelected, previousValue){
				var valorSeleccionado = inputSelect.selectpicker("val");
				$("#camposDelSegmento").find('[data-depende-de="'+inputSelect.attr("name")+'"]').each(function(indice){
					var inputDependeDe = $(this);
					if( inputDependeDe[0].hasAttribute("data-depende-de-valor") ){
						var valorDependeDe = inputDependeDe.attr("data-depende-de-valor");
						if( valorSeleccionado == valorDependeDe ){
							inputDependeDe.prop("disabled", false);
						}
						else{
							inputDependeDe.prop("disabled", true);
						}
					}
				});
			});
			inputSelect.trigger("change");
		});
		//------------------------------------------------------------------------------------
		//LLENO EL CONTEXTO CON LA INFORMACIÓN REGISTRADA ------------------------------------
		if( $("#camposDelSegmento").find('[name="contexto"]').length > 0 ){
			$.isLoading({ text: "Cargando..." }); NProgress.start();
			$.post(
				"<?php echo URL::route('SysWebIAConfigsGenerales'); ?>",
				{accion: "obtener"},
				function(data){
					$.isLoading("hide"); NProgress.done();
					if(data.success){
						$("#camposDelSegmento").find('[name="contexto"]').html( data.contextoIA );
					}
					else{
						if(data.mensaje != ""){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
					}
				},
				"json"
			);
		}
		//------------------------------------------------------------------------------------
	}
	function typeWriterEffect(text, targetNode, speed = 30) {
		const $container = $(targetNode);
		$container.empty().append('<span class="cursor"></span>');
		const $cursor = $container.find('.cursor');

		let currentIndex = 0;
		let currentHTML = '';

		function typeWriter() {
			if (currentIndex < text.length) {
				const char = text[currentIndex];
				currentHTML += char;

				// Actualizar el contenido y la posición del cursor
				$container.html(currentHTML + '<span class="cursor"></span>');
				updateCursorPosition();

				currentIndex++;

				//const delay = char === '>' ? 0 : Math.random() * 30 + 20;
				const delay = char === '>' ? 0 : Math.random() * speed + speed;
				setTimeout(typeWriter, delay);
			}
			else {
				// Eliminar el cursor cuando se termina de escribir
				setTimeout(() => {
					$container.find('.cursor').remove();
				}, 500); // Espera medio segundo antes de eliminar el cursor
			}
		}

		function updateCursorPosition() {
			const $lastElement = $container.find('*').last();
			const lastElementBottom = $lastElement.length ? $lastElement.position().top + $lastElement.height() : 0;
			const containerScrollTop = $container.scrollTop();

			$cursor.css({
				top: lastElementBottom - containerScrollTop,
				left: $container.width()
			});

			// Asegurar que el cursor esté siempre visible
			$container.scrollTop(lastElementBottom);
		}

		typeWriter();
	}
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('JSOr'); ?>
$("#frmGenerarIA").validate({
	lang: "es",
	errorPlacement: function(error, element) {
		var p = error.attr("id").indexOf("-error");
		var elemento = "err"+error.attr("id").substr(0, p);
		$("#"+elemento).html( error.html() );
	},
	success: function(error) {
		var p = error.attr("id").indexOf("-error");
		var elemento = "err"+error.attr("id").substr(0, p);
		$("#"+elemento).html("");
	},
	rules: {
		identificador: { required: true },
		segmento: { required: true }
	},
	messages: {
		identificador: { required: "Este campo es obligatorio" },
		segmento: { required: "Este campo es obligatorio" }
	},
	ignore: [],
	onkeyup: false,
	onfocusout: false,
	onclick: false
});
$("#segmento").on("changed.bs.select", function (e, clickedIndex, isSelected, previousValue){
	armarConfDeSegmentos( $(this).selectpicker("val") );
});
$("#frmGenerarIA").submit(function(e){
	e.preventDefault();
	var formulario = $("#frmGenerarIA");
	formulario.find("span.text-danger").html("");
	$(this).find("input").each(function(){
		$(this).val($(this).val().trim());
	});
	if( formulario.valid() ){
		var frmGenerarIA = new FormData(document.getElementById("frmGenerarIA"));
		var limiteContG = <?php echo $limiteContenido; ?>;
		var contGUsadas = <?php echo $contGeneradosUsadas; ?>;
		var contGDisponibles = limiteContG - contGUsadas;
		if( parseInt(contGDisponibles) < 1 ){
			var mensaje = "<p style='font-size: 16px;'> \
				Ya no tienes más generaciones disponibles, pero no te preocupes el primero de cada mes se reestablecen tus generaciones. \
			</p>";
		}
		else{
			var mensaje = "<p style='font-size: 16px;'> \
				Usarías 1 generación de las "+limiteContG+" generaciones mensuales que incluye tu membresía. <br><br> \
				Saldo de generaciones actual: <strong>"+contGDisponibles+" disponibles</strong> \
				<!-- Recuerda que tu membresía incluye "+limiteContG+" de las cuales ya has usado "+contGUsadas+" --> \
			</p>";
		}
		BootstrapDialog.show({
			title: "¿Confirmas la Generación de Contenido?",
			type: BootstrapDialog.TYPE_PRIMARY,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "mdAvatar mdIA",
			buttons: [{
				id: "btnConfirmar",
				label: "Si, confirmo su generación",
				cssClass: "btn-success btn-lg btn-block ",
				action: function(dialogItself){
					var vetanaA = dialogItself.getModalBody();
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnAgregar").html('<i class="fa fa-spinner fa-spin"></i> Cargando').prop("disabled", true);
					$("#btnConfirmar").html('<i class="fa fa-spinner fa-spin"></i> Cargando').prop("disabled", true);
					$.ajax({
						type: "POST",
						url: "<?php echo URL::route('SysWebIAGenerar', array('MarketingYVentas')); ?>",
						data: frmGenerarIA,
						cache: false,
						contentType: false,
						processData: false,
						dataType: "json",
						success: function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnAgregar").html("Generar");
							$("#btnCancelar").html("Regresar");
							if(data.success){
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
								typeWriterEffect(data.respuesta, "#dvContenidoGenerado", 5);
								dialogItself.close();
							}
							else{
								if(data.mensaje != ""){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								$.each(data.errMensajes, function(key, value){ if(value != ""){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
							}
						},
						error: function(jqXHR, textStatus, errorThrown){
							new PNotify({ title: "Error", text: textStatus + " " + errorThrown, type: "error" });
						}
					});
				}
			}],
			onshow: function(dialog){
				var ventana = dialog.getModal();
			},
			onshown: function(dialog){
				var ventana = dialog.getModal();
				ventana.addClass("fade");
				if( parseInt(contGDisponibles) < 1 ){
					ventana.find("#btnConfirmar").addClass("disabled").remove();
				}
			},
			onhide: function(dialog){
				var ventana = dialog.getModal();
				$(".modal-backdrop").css("opacity", "0");
			}
		});
	}
	else{
		$.isLoading("hide"); NProgress.done();
		$("#btnAgregar").html("Generar").prop("disabled", false);
		$.isLoading("hide"); NProgress.done();
	}
});
<?php $__env->stopSection(); ?>
<?php echo $__env->make('BaseSistemaWeb', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>