@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
<style type="text/css">
	.mdAvatar .modal-dialog .modal-content .modal-header {
		background-color: #363B3F;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header .bootstrap-dialog-title {
		font-size: 18px;
		font-weight: bold;
	}
	.mdAvatar .modal-dialog .modal-body .bootstrap-dialog-message {
		font-size: 15px;
	}
	.mdAvatar .modal-dialog .modal-footer {
		margin-top: 0px;
	}
	.btnRadius{
		border-radius : 4px !important;
	}
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-magic"></i> Inteligencia Artificial </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<div class="col-md-12">
		@if (Session::has('message'))
		<div class="alert alert-info">{{ Session::get('message') }}</div>
		@endif
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> 
			<h3 class="content-header">
				Elementos de Marketing y Ventas
				<div data-toggle="buttons" class="button-group pull-right">
					<a class="refresh tooltips" data-toggle="tooltip" data-original-title="Configuraciones Generales" onclick="ConfigsGenerales()" href="javascript:ConfigsGenerales()" style="color: rgba(0, 0, 0, 0.3)">
						<i class="fa fa-cog"> </i>
					</a>
					<a class="refresh tooltips" data-toggle="tooltip" data-original-title="Generar contenido" onclick="Agregar()" href="javascript:Agregar()" style="color: rgba(0, 0, 0, 0.3)">
						<i class="fa fa-plus"> </i>
					</a>
					<a class="refresh tooltips" data-toggle="tooltip" data-original-title="Actualizar registros" onclick="Actualizar()" href="javascript:Actualizar()" style="color: rgba(0, 0, 0, 0.3)">
						<i class="fa fa-repeat"> </i>
					</a>
				</div>
			</h3>
			</div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover" id="tblIAMktYVentas">
						<thead>
							<tr>
								<th class="col-md-2"> Nombre </th>
								<th class="col-md-2"> Tipo </th>
								<th class="col-md-6"> Contenido generado </th>
								<th class="col-md-2"> Fecha </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div class="bottom">
				{{ HTML::linkRoute('SysWebIAMarketingYVentasGenerar', 'Generar', array(), array('class' => 'btn btn-primary')) }}
			</div>
		</div>
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('bootstrap-select/js/bootstrap-select.min.js') }}
{{ HTML::script('bootstrap-select/js/i18n/defaults-es_CL.min.js') }}
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('DataTables/dataTables.responsive.min.js') }}
<script type="text/javascript">
	function ConfigsGenerales(){
		var mensaje = '<form id="frmConfGenerales"> \
			<div class="form-group"> \
				<label class="col-sm-3-no control-label-no">Contexto de tu empresa</label> \
				<div class="col-sm-9-no"> \
					<textarea class="form-control" rows="12" name="contexto" placeholder="Escribe una descripción con un máximo de 1024 caracteres de tu empresa" required style="resize: vertical;"></textarea> \
					<span class="text-danger" id="errcontexto"></span> \
				</div> \
			</div> \
			<input type="hidden" value="guardar" name="accion"> \
		</form>';
		BootstrapDialog.show({
			title: "Configuraciones generales",
			type: BootstrapDialog.TYPE_SUCCESS,
			size: BootstrapDialog.SIZE_NORMAL,
			message: mensaje,
			draggable: true,
			closable: true,
			closeByBackdrop: false,
			cssClass: "mdAvatar",
			buttons: [{
				id: "btnGuardar",
				label: "Guardar",
				cssClass: "btn-primary btn-block btn-lg",
				action: function(dialogItself){
					var modalBody = dialogItself.getModalBody();
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					modalBody.find("#btnGuardar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Guardando');
					$.post(
						"{{ URL::route('SysWebIAConfigsGenerales') }}",
						modalBody.find("#frmConfGenerales").serialize(),
						function(data){
							$.isLoading("hide"); NProgress.done();
							modalBody.find("#btnGuardar").prop("disabled", false).html("Guardar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								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(""); } });
							}
						},
						"json"
					);
				}
			}],
			onshown: function(dialogItself){
				$.isLoading({ text: "Cargando..." }); NProgress.start();
				$("body").addClass("modal-open");
				var modalBody = dialogItself.getModalBody();
				$.post(
					"{{ URL::route('SysWebIAConfigsGenerales') }}",
					{accion: "obtener"},
					function(data){
						$.isLoading("hide"); NProgress.done();
						if(data.success){
							modalBody.find('[name="contexto"]').html( data.contextoIA );
						}
						else{
							if(data.mensaje != ""){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
						}
					},
					"json"
				);
			},
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
				$.isLoading("hide"); NProgress.done();
			}
		});
	}
	function Actualizar(){
		var table = $("#tblIAMktYVentas").DataTable();
		table.ajax.reload(null, false);
	}
	function Agregar(){
		window.location.href = "{{ URL::route('SysWebIAMarketingYVentasGenerar') }}";
	}
	function VerContenido(id){
		var mensaje = $("#dvCIA"+id).html();
		BootstrapDialog.show({
			title: "Contenido generado con IA",
			type: BootstrapDialog.TYPE_SUCCESS,
			size: BootstrapDialog.SIZE_WIDE,
			message: "",
			draggable: true,
			closable: true,
			closeByBackdrop: false,
			cssClass: "mdAvatar",
			onshown: function(dialogItself){
				//$.isLoading({ text: "Cargando..." }); NProgress.start();
				$("body").addClass("modal-open");
				var modalBody = dialogItself.getModalBody();
				modalBody.append( mensaje );
			},
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
</script>
@stop

@section('JSOr')
var tabla = $("#tblIAMktYVentas").DataTable({
	"processing": true,
	"serverSide": true,
	"pageLength": 10,
	"ordering": true,
	"searching": true,
	"ajax": "{{ URL::route('SysWebIAMarketingYVentas') }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [
		{data: "identificador", name: "identificador", "searchable": true},
		{data: "nombre", name: "nombre", "searchable": false},
		{data: "contenidoGenerado", name: "contenidoGenerado", "searchable": false, "orderable": false},
		{data: "fechaGenerado", name: "fechaGenerado", "searchable": false}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		$(".table-responsive").find("[title]").tooltip();
	},
	"order": [[ 2, "desc" ]],
	autoWidth: false,
	responsive: {
		"details": {
			"type": "column",
			"target": 0
		}
	},
	//initComplete: function(){
	//	var input = $(".dataTables_filter input").unbind(),
	//	self = this.api(),
	//	$searchButton = $('<button class="btn btn-primary tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Buscar">').html('<i class="fa fa-search"></i>').click(function(){
	//		self.search(input.val().trim()).draw();
	//	}),
	//	$clearButton = $('<button class="btn btn-default tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Limpiar">').html('<i class="fa fa-paint-brush"></i>').click(function(){
	//		input.val('');
	//		$searchButton.click(); 
	//	});
	//	$(".dataTables_filter").append($searchButton, $clearButton);
	//	$("body").tooltip({selector: "[data-toggle='tooltip']"});
	//}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
@stop