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

<?php echo HTML::style('DataTables/responsive.dataTables.min.css'); ?>

<?php echo HTML::style('gentemplate/css/min/editor.min.css?=v2.1.0'); ?>

<style type="text/css">
	.modal .modal-header {
		background-color: #363B3F !important;
	}
	.VistaPrevia .isloading-overlay{	
		width: 97% !important;
	}
	.VistaPrevia.modal-desktop .modal-lg {
		width: 980px !important;
	}
	.modal-desktop .modal-dialog iframe {
		width: 1024px;
		height: 628px;
		-webkit-transform: scale(0.66);
		-moz-transform: scale(0.66);
		-o-transform: scale(0.66);
		-ms-transform: scale(0.66);
		transform: scale(0.66);
		-webkit-transform-origin: 42% 25%;
		-moz-transform-origin: 42% 25%;
		-o-transform-origin: 42% 25%;
		-ms-transform-origin: 42% 25%;
		transform-origin: 42% 25%;
	}
	.modal-desktop .iframe-container{
		background: url(/SysWeb/SumeClientes/VistaPrevia/laptop.png) center center no-repeat !important;
		height: 600px;
	}
	<?php
		if( !isset($_GET['import']) ){
	?>
	.oculto {
		display: none !important;
	}
	<?php
		}
	?>
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('Contenido'); ?>
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-envelope-o"></i> E-Mail Marketing </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<?php /*
	<div class="col-md-12">
		<nav class="navbar navbar-inverse">
			<ul class="nav navbar-nav">
				<li><a href="<?php echo URL::to('templates'); ?>">Ver todos los Templates</a></li>
				<li><a href="<?php echo URL::to('templates/create'); ?>">Crear un Template</a>
			</ul>
		</nav>
	</div>
	*/ ?>
	<div class="col-md-12">
		<?php if(Session::has('message')): ?>
		<div class="alert alert-info"><?php echo Session::get('message'); ?></div>
		<?php endif; ?>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Plantillas de correo electrónico  </h3> </div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover" id="tblPlantillasCorreo">
						<thead>
							<tr>
								<th class="col-md-10"> Nombre de la plantilla </th>
								<th class="col-md-2 text-center"> Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<?php
				if( isset($_GET['import']) ){
			?>
			<div class="bottom">
				<?php /* HTML::linkRoute('SysWebEmailMarketingPlantillasCECAgregar', 'Crear', array(), array('class' => 'btn btn-primary')) */ ?>
				<button type="button" class="btn btn-info" id="btnImportarP" onclick="Importar()"> Importar Plantilla </button>
			</div>
			<?php
				}
			?>
		</div>
	</div>
</div><!--/row end-->
<?php $__env->stopSection(); ?>

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

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

<?php echo HTML::script('DataTables/dataTables.responsive.min.js'); ?>

<script type="text/javascript">
	function Eliminar(id){
		var id = id;
		var mensaje = '<div class="row"> \
			<div class="col-xs-12"> \
				<form id="frmEliminar"> \
					<h2> ¿Seguro que desea eliminar? </h2> \
					<input type="hidden" name="idPC" value="'+id+'"> \
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Eliminar plantilla",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar",
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger btn-lg btn-block",
				action: function(dialogItself){
					var modalBody = dialogItself.getModalBody();
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					var urlEliminar = $(".btnEl"+id).attr("href");
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						urlEliminar,
						modalBody.find("#frmEliminar").serialize(),
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnEliminar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								var table = $("#tblPlantillasCorreo").DataTable();
								table.ajax.reload(null, false);
							}
							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"
					);
				}
			}]
		});
	}
	function Clonar(id){
		var id = id;
		var mensaje = '<div class="row"> \
			<div class="col-xs-12"> \
				<form id="frmClonar"> \
					<h2> Nombre a asignar al clon </h2> \
					<input type="text" class="form-control" name="nombre"> \
					<span class="text-danger" id="errnombre"></span> \
					<input type="hidden" name="idPC" value="'+id+'"> \
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Clonar plantilla",
			type: BootstrapDialog.TYPE_INFO,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar",
			buttons: [{
				id: "btnClonar",
				label: "Clonar",
				cssClass: "btn-info btn-lg btn-block",
				action: function(dialogItself){
					var modalBody = dialogItself.getModalBody();
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					var urlClonar = $(".btnCl"+id).attr("href");
					$("#btnClonar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Clonando');
					$.post(
						urlClonar,
						modalBody.find("#frmClonar").serialize(),
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnClonar").prop("disabled", false).html("Clonar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								var table = $("#tblPlantillasCorreo").DataTable();
								table.ajax.reload(null, false);
							}
							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"
					);
				}
			}]
		});
	}
	function vistaPrevia(id, tipo){
		var id = id;
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<div class='viewports'>\
					<ul class='viewlist' >\
						<li id='liTi' class='480px resolucion' style=' title='Vista previa en teléfonos inteligentes'>\
							<i class='fa fa-mobile'></i>\
						</li>\
						<li id='liT' class='800px resolucion' style=' title='Vista previa tablets y iPads'>\
							<i class='fa fa-tablet'></i>\
						</li>\
						<li id='liC' class='1280px resolucion' style=' title='Vista previa computadoras'>\
							<i class='fa fa-laptop'></i>\
						</li>\
					</ul>\
				</div>\
				<div class='iframe-container'> \
					<iframe id='VistaPreviaIframe' src='#' name='VistaPreviaIframe'></iframe> \
				</div> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Vista previa",
			type: BootstrapDialog.TYPE_PRIMARY,
			size: BootstrapDialog.SIZE_WIDE,
			message: mensaje,
			draggable: true,
			cssClass: "VistaPrevia modal-desktop",
			onshown: function(dialogRefs){
				var ventana = dialogRefs.getModalBody();
				ventana.find(".iframe-container").isLoading({
					text:       "La vista previa está cargando...",
					position:   "overlay"
				});
				ventana.find('.glyphicon').removeClass("glyphicon-refresh glyphicon-spin").addClass("fa fa-spinner fa-pulse fa-fw i-cargador");
				var movil = false;
				var ruta = "<?php echo URL::route('SysWebEmailMarketingPlantillasCECVistaPrevia'); ?>";
				var iframe = ventana.find("#VistaPreviaIframe");
				var doc = ventana.find("#VistaPreviaIframe")[0].contentWindow.document;
				doc.open();
				doc.write("");
				doc.close();
				obtenerCodigoCE(id, ruta, ventana, movil);
				ventana.find(".resolucion").click(function (){
					var idR = $(this).attr("id");
					if(idR == "liC"){
						$(this).closest(".VistaPrevia").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-desktop");
					}
					else if(idR == "liTi"){
						$(this).closest(".VistaPrevia").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-movil portrait");
						movil = true;
					}
					else{
						$(this).closest(".VistaPrevia").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-tablet portrait");
						movil = true;
					}
					obtenerCodigoCE(id, ruta, ventana, movil);
					ventana.find("#VistaPreviaIframe").removeAttr("style");
				});
			},
			buttons: [{
				id: "btnCerrar",
				label: "Cerrar",
				cssClass: "btn-default",
				action: function(dialogItself){
					dialogItself.close();
				}
			}]
		});
	}
	function obtenerCodigoCE(id, ruta, obj, movil) {
		var id = id;
		var ruta = ruta;
		var obj = obj
		var movil = movil;
		var doc = obj.find("#VistaPreviaIframe")[0].contentWindow.document;
		doc.open();
		doc.write("");
		doc.close();
		$.post(
			ruta,
			{ idP: id, mobile:movil},
			function(data){
				$(".VistaPrevia").find(".iframe-container").isLoading( "hide" );
				if(data.success){
					var iframe = obj.find("#VistaPreviaIframe");
					var doc = iframe[0].contentWindow.document;
					doc.open();
					doc.write("<!DOCTYPE HTML>"+data.codigoHTML);
					doc.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"
		);
	}
	<?php
		if( isset($_GET['import']) ){
	?>
	function Importar(){
		var id = id;
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmImportarPlantilla' enctype='multipart/form-data'> \
					<div class='form-group'> \
						<label for='txtNombre'>Nombre a asignar</label> \
						<input type='text' class='form-control' id='txtNombre' name='txtNombre' placeholder='Nombre a asignar...'> \
						<span class='text-danger' id='errtxtNombre'></span> \
					</div> \
					<div class='form-group'> \
						<label for='flArchivo'>Archivo HTML</label> \
						<input type='file' id='flArchivo' name='flArchivo'> \
						<span class='text-danger' id='errflArchivo'></span> \
					</div> \
					<input type='hidden' name='hdnTipo' value='PCECN'> \
				</form> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Importar Plantilla de archivo HTML",
			type: BootstrapDialog.TYPE_DEFAULT,
			message: mensaje,
			draggable: true,
			cssClass: "ModalImportarPlantilla",
			buttons: [{
				id: "btnImportarPlantilla",
				label: "Importar",
				cssClass: "btn-default",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$.isLoading("hide"); NProgress.done();
					$("#btnImportarPlantilla").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Importando...');
					var formulario = $("#frmImportarPlantilla");
					var formData = new FormData(document.getElementById("frmImportarPlantilla"));
					$.ajax({
						type: "POST",
						url: "<?php echo URL::route('SysWebEmailMarketingPlantillasImportar', array()); ?>",
						data: formData,
						cache: false,
						contentType: false,
						processData: false,
						dataType: "json",
						timeout: 1800000,
						success: function(data){
							$("#btnImportarPlantilla").prop("disabled", false).html("Importar");
							if(data.success){
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
								var table = $("#tblPlantillasCorreo").DataTable();
								table.ajax.reload(null, false);
								dialogItself.close();
							}
							else{
								if(typeof data.MensajeError != "undefined"){ $("#Errs").html(data.MensajeError); $("#MensajeError").show(); }else{ $("#MensajeError").hide(); $("#Errs").html(""); }
								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){
							$("#btnImportarPlantilla").prop("disabled", false).html("Importar");
							new PNotify({ title: "Error", text: textStatus + " " + errorThrown, type: "error" });
						}
					});
				}
			}]
		});
	}
	function ReemplazarCodigo(tipo, idP){
		var id = id;
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmImportarPlantilla' enctype='multipart/form-data'> \
					<div class='form-group'> \
						<label for='flArchivo'>Archivo HTML</label> \
						<input type='file' id='flArchivo' name='flArchivo'> \
						<span class='text-danger' id='errflArchivo'></span> \
					</div> \
					<input type='hidden' name='hdnIdP' value='"+idP+"'> \
					<input type='hidden' name='hdnTipo' value='"+tipo+"'> \
				</form> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Reemplazar Plantilla de archivo HTML",
			type: BootstrapDialog.TYPE_DEFAULT,
			message: mensaje,
			draggable: true,
			cssClass: "ModalImportarPlantilla",
			buttons: [{
				id: "btnImportarPlantilla",
				label: "Reemplazar",
				cssClass: "btn-default",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$.isLoading("hide"); NProgress.done();
					$("#btnImportarPlantilla").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Reemplazando...');
					var formulario = $("#frmImportarPlantilla");
					var formData = new FormData(document.getElementById("frmImportarPlantilla"));
					$.ajax({
						type: "POST",
						url: "<?php echo URL::route('SysWebEmailMarketingPlantillasImportar', array()); ?>",
						data: formData,
						cache: false,
						contentType: false,
						processData: false,
						dataType: "json",
						timeout: 1800000,
						success: function(data){
							$("#btnImportarPlantilla").prop("disabled", false).html("Reemplazar");
							if(data.success){
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
								$(".porlets-content").find("table").each(function(e){
									var table = $(this).DataTable();
									table.ajax.reload(null, false);
								});
								dialogItself.close();
							}
							else{
								if(typeof data.MensajeError != "undefined"){ $("#Errs").html(data.MensajeError); $("#MensajeError").show(); }else{ $("#MensajeError").hide(); $("#Errs").html(""); }
								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){
							$("#btnImportarPlantilla").prop("disabled", false).html("Reemplazar");
							new PNotify({ title: "Error", text: textStatus + " " + errorThrown, type: "error" });
						}
					});
				}
			}]
		});
	}
	<?php
		}
	?>
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('JSOr'); ?>
$("#tblPlantillasCorreo").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "<?php echo URL::route('SysWebEmailMarketingPlantillasCEC'); ?>",
	columns: [
		{data: "nombre", name: "nombre"},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"}
	],
	"language": {
		"url": "<?php echo asset('DataTables/Spanish.json'); ?>"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
	},
	autoWidth: false,
	responsive: true,
	scrollCollapse: true,
});
<?php $__env->stopSection(); ?>
<?php echo $__env->make('BaseSistemaWeb', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>