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

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

<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
	@media (max-width: 1400px){
		.dataTables_filter button{
			height: 30px;
		}
	}
	@media (max-width: 1340px){
		.div-groupinput{
			width: 200px !important;
		}
		.dataTables_filter button{
			height: 30px;
		}
	}
	@media (max-width: 1240px){
		.div-groupinput{
			width: 190px !important;
		}
		select[name="tblEtiquetas_length"]{
			width: auto !important;
			padding: 0 !important;
		}
		.dataTables_length label{
			font-size: 12.5px !important;
		}
	}
	@media (max-width: 1200px){
		.div-groupinput{
			width: 180px !important;
		}
	}
	@media (max-width: 1120px){
		.div-groupinput{
			width: 160px !important;
		}
	}
	@media (max-width: 1040px){
		.div-groupinput{
			width: 160px !important;
		}
	}
	.div-groupinput{
		min-height: auto !important;
		width: 240px;
	}
	.dataTables_filter{
		display: flex;
		justify-content: center;
	}
	.dataTables_filter button{
		margin-left: 0 !important;
		margin-right: 0 !important;
		opacity: 0.9;
	}
	.col-busqueda input[type=search]{
		min-height: auto !important;
		margin-left: 0 !important;
	}
	.div-groupinput .btn{
		padding: 6px 12px;
	}
</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">
	<div class="col-md-3">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">Etiquetas para segmentación de listas</h3>
			</div>
			<div class="porlets-content">
				<form id="frmAgegarEtiqueta">
					<div class="form-group mb-2">
						<label>Nombre de la etiqueta </label>
						<input type="text" name="etiqueta" id="etiqueta" class="form-control">
						<span class="text-danger" id="erretiqueta"></span>
					</div>
					<button type="submit" class="btn btn-primary">Agregar</button>
				</form>
				
			</div>
		</div>
	</div>
	<div class="col-md-9">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">
					Listado de etiquetas
					<div data-toggle="buttons" class="button-group pull-right">
						<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="tblEtiquetas">
					<thead>
						<tr>
							<th> Id</th>
							<th> Nombre</th>
							<th> Acciones</th>
						</tr>
					</thead>
				</table>
				</div>
			</div>
		</div>
	</div>
</div>
<?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'); ?>

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

<?php echo HTML::script('country-region-selector/crs.min.js'); ?>

<?php echo HTML::script('Alphanum/jquery.alphanum.min.js'); ?>


<script type="text/javascript">
	function Eliminar(id){
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmEliminar'> \
					<h2> ¿Seguro que desea eliminar? </h2> \
					<p> Si tienes está etiqueta ligada a alguna secuencia de seguimiento, formulario, página web o campaña, se eliminarán los métodos de captura o segmentaciones.</p> \
					<input type='hidden' name='idE' value='"+id+"'> \
				</form> \
				<span class='text-danger' id='erretiquetaEd' style='padding-left: 59px;'></span> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Eliminar registro",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalEliminar mdAvatar",
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
			},
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger btn-block btn-lg",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						"<?php echo URL::route('SysWebEmailMarketingEtiquetasEliminar'); ?>",
						{idE: id},
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnEliminar").prop("disabled", false).html("Eliminar");
							if(data.success){
								$("#tblEtiquetas").DataTable().ajax.reload(false, false);
								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"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
function Editar(id, etiqueta){
	BootstrapDialog.show({
		title: "Editar Etiqueta",
		type: BootstrapDialog.TYPE_WARNING,
		message: function(dialog) {
                var $content = $("<div class='row'> \
						<div class='col-xs-12'> \
							<form id='frmEtiquetaEditar'> \
								<div class='form-group'> \
									<label>Nombre de la etiqueta </label> \
									<input type='text' name='etiquetaEditar' value='"+etiqueta+"' id='etiquetaEditar' class='form-control'> \
									<input type='hidden' name='idE' value='"+id+"'> \
									<span class='text-danger' id='erretiquetaEd'></span> \
								</div> \
							</form> \
						</div> \
					</div>");
				$content.find("#etiquetaEditar").alphanum({
					allow: ".-_1234567890",
					disallow: "",
					allowSpace: true,
					allowNumeric: false,
					allowUpper: true,
					allowCaseless: false,
					allowOtherCharSets: false,
					forceLower: false
				});
                return $content;
            },
		closeByBackdrop: false,
		cssClass: "mdAvatar",
		onshown: function(dialogItself){
				$("body").addClass("modal-open");
		},
		onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
		},
        buttons: [{
            label: 'Editar',
			id: 'btnEditar',
            cssClass: 'btn-warning btn-block btn-lg',
            autospin: true,
                action: function(dialogRef){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnEditar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Editando');
					var nuevaEtiqueta = $("#etiquetaEditar").val();
					$.post(
						"<?php echo URL::route('SysWebEmailMarketingEtiquetasEditar'); ?>",
						{idE: id,
						etiquetaEditar: nuevaEtiqueta},
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnEditar").prop("disabled", false).html("Eliminar");
							if(data.success){
								$("#tblEtiquetas").DataTable().ajax.reload(false, false);
								dialogRef.close();
								if(data.mensaje != ''){ new PNotify({ title: "Exito", text: data.mensaje, type: "success" }); }
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#erretiquetaEd").html(value); } else{ $("#erretiquetaEd").html(""); } });
							}
						},
						"json"
					);
                }
            }]
        });
	}
	function Actualizar(){
		var table1 = $("#tblEtiquetas").DataTable();
		table1.ajax.reload(null, false);
	}
	function detectarAnchoVistas() {
		var anchoPantalla = window.innerWidth;
		if(anchoPantalla <= 1400){
			$(".col-busqueda").find("button").addClass("btn-sm");
			$(".col-paginacion").find("li").addClass("btn-sm");
			$(".col-busqueda").find("input").addClass("input-sm");
		}
		else{
			$(".col-busqueda").find("button").removeClass("btn-sm");
			$(".col-paginacion").find("li").removeClass("btn-sm");
			$(".col-busqueda").find("input").removeClass("input-sm");
		}
	}
	$(window).resize(function() {
		detectarAnchoVistas();
	});
</script>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('JSOr'); ?>
$('[name="etiqueta"]').alphanum({
		allow: ".-_1234567890",
		disallow: "",
		allowSpace: true,
		allowNumeric: false,
		allowUpper: true,
		allowCaseless: false,
		allowOtherCharSets: false,
		forceLower: false
});
		
var tablaEtiquetas =  $("#tblEtiquetas").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "<?php echo URL::route('SysWebEmailMarketingEtiquetas'); ?>",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [{data: 'id', name: 'id', "visible": false},
		{data: 'nombre', name: 'nombre'},
		{data: 'acciones', name: 'acciones', "searchable": false, "orderable": false, "class": "text-center"}
	],
	dom: "<'row'<'col-sm-3 col-mostrar'l><'col-sm-4 col-busqueda'f><'col-sm-5 col-paginacion'p>>" +
		"<'row'<'col-sm-12'tr>>" +
	"<'row'<'col-sm-5'i><'col-sm-7'p>>",
	"language": {
		"url": "<?php echo asset('DataTables/Spanish.json'); ?>"
	},
	"fnDrawCallback": function(oSettings){
		$(".tooltips").tooltip();
	},
	autoWidth: false,
	responsive: true,
	initComplete: function(){
		var input = $(".dataTables_filter input").unbind();
		$(".dataTables_filter").html('');
		var 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();
		});
		divInputGroup = $('<div class="input-group div-groupinput">'+
			'<div class="input-group-btn div-groupbutton">'+
			'</div>'+
		'</div>');
		$(".dataTables_filter").append(divInputGroup);
		$(".div-groupinput").prepend(input);
		$(".div-groupbutton").append($searchButton);
		$("body").tooltip({selector: "[data-toggle='tooltip']"});
		$("input[type=search]").attr("placeholder", "Buscar...");
		detectarAnchoVistas();
	}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
$("#frmAgegarEtiqueta").submit(function(e){
	e.preventDefault();
	$("#dvCeroEtiquetas").remove();
	$.post(
		"<?php echo URL::route('SysWebEmailMarketingEtiquetasAgregar'); ?>",
		$("#frmAgegarEtiqueta").serialize(),
		function(data){
			if(data.success){
				tablaEtiquetas.ajax.reload(false, 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(""); } });
			}
			$("#etiqueta").val("");
		},
		"json"
	);
});
<?php $__env->stopSection(); ?>
<?php echo $__env->make('BaseSistemaWeb', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>