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

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

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

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

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

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

<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } .ModalReiniciar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } .ModalReiniciar .modal-dialog { width: 450px; } }
	.ModalReiniciar .modal-footer { text-align: center; }	
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
	table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.order-column tbody > tr.selected > .sorting_1, table.dataTable.order-column tbody > tr.selected > .sorting_2, table.dataTable.order-column tbody > tr.selected > .sorting_3, table.dataTable.order-column tbody > tr > .selected, table.dataTable.display tbody > tr.selected > .sorting_1, table.dataTable.display tbody > tr.selected > .sorting_2, table.dataTable.display tbody > tr.selected > .sorting_3, table.dataTable.display tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover > .sorting_1, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1 {
		background-color: #E9E9E9;
	}
	.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
		background-color: #E9E9E9;
	}
	.form-inline .form-control.bootstrap-select {
		display: inline-block;
		width: auto;
	}
	.checkbox-inline {
		font-weight: bold;
	}
</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">
					Suscriptores de la lista <strong> <?php echo $ListaEmail->nombre; ?> </strong>
					<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">
				<form id="frmFiltroFechas" class="form-inline" style="padding-bottom: 15px;">
					<div class="form-group">
						<label for="FiltroFechas" style="padding-top: 10px;"> Suscritos en: </label>
						<input id="FiltroFechas" type="text" name="filtrofechas" value="" readonly>
					</div>
					<div class="form-group">
						<label>Filtro de estado: </label>
						<select name="slEstados" id="slEstados" class="form-control selectpicker">
							<option value="T" selected>Ambos</option>
							<option value="S">Suscrito</option>
							<option value="D">Desuscrito</option>
						</select>
					</div>
					<div class="form-group">
						<label class="checkbox-inline">
							<input type="checkbox" id="chEtiquetas" value="1" name="chEtiquetas">
							Filtrar por tiquetas <span class="custom-checkbox"></span> 
						</label>
					</div>
					<div class="form-group">
						<?php /* <label>Filtro de etiquetas: </label> */ ?>
						<select name="slEtiquetas" id="slEtiquetas" class="form-control selectpicker" multiple data-selected-text-format="count" title="Sel. etiquetas" disabled>
							<?php foreach( $Etiquetas as $Etiqueta ): ?>
							<option value="<?php echo $Etiqueta->id; ?>"><?php echo $Etiqueta->nombre; ?></option>
							<?php endforeach; ?>
						</select>
					</div>
					<button type="submit" class="btn btn-primary"> Filtrar </button>
					<button id="btnLimpiar" type="button" class="btn btn-default"> Limpiar </button>
				</form>
				<div class="table-responsive">
					<table class="table table-striped-old table-bordered table-hover display" id="tblSuscriptores">
						<thead>
							<tr>
								<th class=""></th>
								<th class="all"> Suscriptor </th>
								<th class="min-tablet-l col-md-2"> Acciones </th>
								<th> correo_electronico </th>
								<th> Fuente suscripción </th>
								<th> Fecha de creación </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div class="bottom">
				<?php echo HTML::linkRoute('SysWebEmailMarketingListasSubscriptoresAgregarSubscriptor', 'Agregar', array($ListaEmail->id), array('class' => 'btn btn-primary')); ?>

				<button type="button" style="display: none;" class="btn btn-danger" id="btnEliminarSeleccionados"> Eliminar seleccionados </button>
				<?php echo HTML::linkRoute('SysWebEmailMarketingListasSubscriptores', 'Regresar', array(), array('class' => 'btn btn-default')); ?>

			</div>
		</div>
	</div>
</div><!--/row end-->
<?php $__env->stopSection(); ?>

<?php $__env->startSection('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('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('DataTables/dataTables.select.min.js'); ?>

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

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

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

<script type="text/javascript">
	function Info(id){
		var id = id;
		if( $("#Info"+id).hasClass("in") ){
			$("#Campos"+id).html("");
			$("#Etiquetas"+id).html("");
			//$("#tblSubscriptor"+id).DataTable().destroy();
		}
		else{
			$("#CargandoCampos"+id).show();
			$("#CargandoEtiquetas"+id).show();
			$.post(
				"<?php echo URL::route('SysWebEmailMarketingListasSubscriptoresVerCampos', array($ListaEmail->id)); ?>",
				{ idS:id, idL:<?php echo $ListaEmail->id; ?> },
				function(data){
					if(data.success){
						$("#CargandoCampos"+id).hide();
						$("#CargandoEtiquetas"+id).hide();
						if( data.SuscriptorCampoValor.length > 0 ){
							var Campos = '<dl>';
							for(i=0;i<data.SuscriptorCampoValor.length;i++){
								if(data.SuscriptorCampoValor[i].value == ''){ Valor = '&nbsp;'; } else{ Valor = data.SuscriptorCampoValor[i].value; }
								if(data.SuscriptorCampoValor[i].nombre == 'Texto'){
									Campos += '<dt>'+data.SuscriptorCampoValor[i].nombre+'</dt><dd>'+Valor+' <a href="javascript:LeerTexto('+id+');">[Más]</a> </dd>';
								}
								else{
									Campos += '<dt>'+data.SuscriptorCampoValor[i].nombre+'</dt><dd>'+Valor+'</dd>';
								}
							}
							Campos += '</dl>';
							$("#Campos"+id).html(Campos);
						}
						if( data.EtiquetasxSuscriptor.length > 0 ){
							$.each(
								data.EtiquetasxSuscriptor,
								function(key, value){
									$("#Etiquetas"+id).append('<span class="label label-info">'+value.nombre+'</span> &nbsp;');
								}
							);
						}
						else{
							$("#Etiquetas"+id).html('<div class="alert alert-warning"> El suscriptor no tiene ningúna etiqueta asignada </div>');
						}
					}
					else{
						if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
					}
				},
				"json"
			);

			if(!$.fn.DataTable.isDataTable("#tblSubscriptor"+id)){
				$("#tblSubscriptor"+id).DataTable({
					"processing": true,
					"serverSide": true,
					"iDisplayLength": 5,
					"aLengthMenu": [[5], [5]],
					"ajax": "<?php echo URL::route('SysWebEmailMarketingListasSubscriptoresVerActividad', array('idS')); ?>".replace("idS", id),
					columns: [
						{data: "asunto", name: "asunto", "searchable": true, "orderable": true},
						{data: "fecha_enviado", name: "fecha_enviado", "searchable": false, "orderable": false},
						{data: "fecha_abierto", name: "fecha_abierto", "searchable": false, "orderable": false},
						{data: "fecha_clic", name: "fecha_clic", "searchable": false, "orderable": false}
					],
					"language": {
						"url": "<?php echo asset('DataTables/Spanish.json'); ?>"
					},
					"fnDrawCallback": function( oSettings ) {
						$(".tooltips").tooltip();
					},
					autoWidth: false,
					responsive: true
				});
			}
			else{
				$("#tblSubscriptor"+id).DataTable().ajax.reload(null, false);
			}
		}
	}
	function Eliminar(id){
		var id = id;
		var idL = <?php echo $ListaEmail->id; ?>;
		var mensaje = "<div class='row'> \
							<div class='col-xs-12'> \
								<form id='frmEliminar'> \
									<h2> ¿Seguro que desea eliminar? </h2> \
									<input type='hidden' name='idL' value='"+idL+"'> \
									<input type='hidden' name='idS' value='"+id+"'> \
								</form> \
							</div> \
						</div>";
		BootstrapDialog.show({
			title: "Eliminar registro",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar",
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger",
				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('SysWebEmailMarketingListasSubscriptoresSuscriptorEliminar'); ?>",
						{idS:id,idL:idL},
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnEnviar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								tabla.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 ReiniciarSecuencia(idS, idL){
		var idS = idS;
		var idL = idL;
		var mensaje = "<div class='row'> \
							<div class='col-xs-12'> \
								<form id='frmReiniciarSecuenciaSeguimiento'> \
									<strong> ¿Seguro que desea reiniciar la secuencia de seguimiento del suscriptor? </strong> \
									<p> \
										Al hacerlo se eliminará el historial de actividad (Abiertos, clics, rebotes y quejas) actual de suscriptor, alterando las estadisticas pues se reiniciará el registro de la actividad de dicho suscriptor \
									</p> \
									<input type='hidden' name='idS' value='"+idS+"'> \
									<input type='hidden' name='idL' value='"+idL+"'> \
								</form> \
							</div> \
						</div>";
		BootstrapDialog.show({
			title: "<strong> Reiniciar secuencas de seguimiento </strong>",
			type: BootstrapDialog.TYPE_WARNING,
			message: mensaje,
			draggable: true,
			cssClass: "ModalReiniciar",
			buttons: [{
				id: "btnReiniciar",
				label: "Reiniciar",
				cssClass: "btn-warning",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnReiniciar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Reiniciando...');
					$.post(
						"<?php echo URL::route('SysWebEmailMarketingListasSubscriptoresSuscriptorReiniciar'); ?>",
						$("#frmReiniciarSecuenciaSeguimiento").serialize(),
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnReiniciar").prop("disabled", false).html("Reiniciar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								tabla.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 LeerTexto(id){
		var id = id;
		$.post(
			"<?php echo URL::route('SysWebEmailMarketingListasSubscriptoresVerCamposTexto', array($ListaEmail->id)); ?>",
			{ idS:id },
			function(data){
				if(data.success){
					var mensaje = "<div class='row'> \
							<div class='col-xs-12'> \
								<p> "+data.texto+" </p> \
							</div> \
						</div>";
					BootstrapDialog.show({
						title: "Texto de suscriptor",
						type: BootstrapDialog.TYPE_INFO,
						message: mensaje,
						draggable: true,
						cssClass: "mdAvatar"
					});
				}
				else{
					if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
				}
			},
			"json"
		);
	}
	var tabla;
	function Actualizar(){
		tabla.ajax.reload(null, false);
	}
	function actualizarTblS(id){
		var tablaS = $("#tblSubscriptor"+id).DataTable();
		tablaS.ajax.reload(null, false);
	}
</script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('JSOr'); ?>
$("#FiltroFechas").daterangepicker({
	"ranges": {
		"Hoy": [moment(), moment()],
		"Ayer": [moment().subtract(1, "days"), moment().subtract(1, "days")],
		"Últimos 7 días": [moment().subtract(6, "days"), moment()],
		"Últimos 30 días": [moment().subtract(29, "days"), moment()],
		"Este mes": [moment().startOf("month"), moment().endOf("month")],
		"Último mes": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
	},
	"alwaysShowCalendars": true,
	locale: {
		format: "DD/MM/YYYY"
	},
	autoUpdateInput: false,
	"startDate": moment(),
	"endDate": moment()
},function(start, end, label){
	console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
$("#FiltroFechas").on("apply.daterangepicker", function(ev, picker){ $(this).val(picker.startDate.format("DD/MM/YYYY") + " - " + picker.endDate.format("DD/MM/YYYY")); });
$("#FiltroFechas").on("cancel.daterangepicker", function(ev, picker){ $(this).val(""); });
$("#frmFiltroFechas").submit(function(e){
	e.preventDefault();
	tabla.ajax.reload(null, false);
});
$("#btnLimpiar").click(function(e){
	e.preventDefault();
	$("#FiltroFechas").val("");
	tabla.ajax.reload(null, false);
});
tabla = $("#tblSuscriptores").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": {
		url: "<?php echo URL::route('SysWebEmailMarketingListasSubscriptoresVer', array($ListaEmail->id)); ?>",
		data: function(d){
			d.filtrofechas = $("#FiltroFechas").val();
			d.estado = $("#slEstados").val();
			if( $("#chEtiquetas").is(":checked") ){
				d.etiquetas = $("#slEtiquetas").val();
			}
		}
	},
	columns: [
		{data: null, defaultContent: "", "searchable": false, "orderable": false},
		{data: "suscriptor", name: "suscriptor", "searchable": false, "orderable": false},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"},
		{data: "correo_electronico", name: "correo_electronico", "visible": false, "orderable": false},
		{data: "fuente_subscripcion", name: "fuente_subscripcion", "visible": false, "orderable": false},
		{data: "fecha_creacion", name: "fecha_creacion", "visible": false, "orderable": false}
	],
	"language": {
		"url": "<?php echo asset('DataTables/Spanish.json'); ?>",
		select: {
			rows: {
				_: "Tienes seleccionada %d filas",
				0: "De clic sobre la fila para seleccionarla",
				1: "Solo tiene 1 fila seleccionada"
			}
		}
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		$(".table-responsive").find("[title]").tooltip();
		var seleccionados = tabla.rows({ selected: true }).count();
		if( seleccionados > 0 ){
			$("#btnEliminarSeleccionados").show();
		}
	},
	autoWidth: false,
	responsive: {
		"details": {
			"type": "column",
			"target": 0
		}
	},
	columnDefs: [{
		"data": null,
		"defaultContent": "",
		"className": "control",
		"orderable": false,
		"width": "9%",
		"targets": 0
	}],
	select: {
		style: "multi",
		selector: "td:not(.control)"
	},
	dom: "Blfrtip",
	buttons: [
		{
			text: "<i class='fa fa-check-square-o' data-toggle='tooltip' data-original-title='Seleccionar todos los elementos'> </i>",
			action: function(){
				tabla.rows().select();
			},
			titleAttr: "Seleccionar todos los elementos"
		},
		{
			text: "<i class='fa fa-square-o' data-toggle='tooltip' data-original-title='Deseleccionar'> </i>",
			action: function(){
				tabla.rows().deselect();
			},
			titleAttr: "Deseleccionar todos los elementos seleccionados"
		}
	],
	<?php if( isset($_GET['correo']) ): ?>
		<?php $correoElectronico = $_GET['correo']; ?>
	"oSearch": {"sSearch": "<?php echo $correoElectronico; ?>"},
	<?php endif; ?>
	order: [[ 1, "asc" ]]
}).on("select", function (e, dt, type, indexes){
	var seleccionados = tabla.rows({ selected: true }).count();
	if( seleccionados > 0 ){
		$("#btnEliminarSeleccionados").show();
	}
	else{
		$("#btnEliminarSeleccionados").hide();
	}
}).on("deselect", function(e, dt, type, indexes){
	var seleccionados = tabla.rows({ selected: true }).count();
	if( seleccionados > 0 ){
		$("#btnEliminarSeleccionados").show();
	}
	else{
		$("#btnEliminarSeleccionados").hide();
	}
}).on("page.dt", function(e){
	$("#btnEliminarSeleccionados").hide();
});
$("#btnEliminarSeleccionados").click(function(e){
	var mensaje = "<div class='row'> \
						<div class='col-xs-12'> \
							<form id='frmEliminar'> \
								<h2> ¿Seguro que desea eliminar los registros seleccionados? </h2> \
							</form> \
						</div> \
					</div>";
	BootstrapDialog.show({
		title: "Eliminar registro",
		type: BootstrapDialog.TYPE_DANGER,
		message: mensaje,
		draggable: true,
		cssClass: "ModalEliminar",
		buttons: [{
			id: "btnEliminar",
			label: "Eliminar",
			cssClass: "btn-danger",
			action: function(dialogItself){
				$.isLoading({ text: "Cargando..." }); NProgress.start();
				var ids = new Array();
				$("#tblSuscriptores").find(".selected").each(function(e){ ids.push($(this).find(".hdnid").val()); });
				$("#btnEliminarSeleccionados").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
				$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
				var idL = <?php echo $ListaEmail->id; ?>;
				$.post(
					"<?php echo URL::route('SysWebEmailMarketingListasSubscriptoresSuscriptorEliminar'); ?>",
					{ idS: ids, idL: idL },
					function(data){
						$.isLoading("hide"); NProgress.done();
						$("#btnEliminarSeleccionados").prop("disabled", false).html("Eliminar seleccionados").hide();
						$("#btnEliminar").prop("disabled", false).html("Eliminar");
						if(data.success){
							new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
							dialogItself.close();
							tabla.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"
				);
			}
		}]
	});
});
$("#chEtiquetas").click(function(e){
	var checkbox = $(this);
	var select = $("#slEtiquetas");
	var activo = ( checkbox.is(":checked") )?false:true;
	select.prop("disabled", activo);
	select.selectpicker("refresh");
	if( activo ){
		select.selectpicker("deselectAll");
	}
});
<?php if(Session::has('MensajeS')): ?>
new PNotify({ title: "Realizado", text: "<?php echo Session::get('MensajeS'); ?>", type: "success" });
<?php endif; ?>
<?php if(Session::has('MensajeE')): ?>
new PNotify({ title: "Realizado", text: "<?php echo Session::get('MensajeE'); ?>", type: "error" });
<?php endif; ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('BaseSistemaWeb', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>