@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('DataTables/select.dataTables.min.css') }}
{{ HTML::style('DataTables/buttons.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; } }
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="icon-sc-landingpageicon"></i> E-Mail Marketing </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">
					Historial de Importación de Suscriptores por Archivo de Excel
					<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-old table-bordered table-hover display" id="tblRegistrosImportacion" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th class="all"> Id </th>
								<th class="min-tablet-l">Lista</th>
								<th class="min-tablet-l">Tipo</th>
								<th class="min-tablet-l">Verificados</th>
								<th class="min-tablet-l">Estado</th>
								<th class="min-tablet-l">Inicio</th>
								<th class="min-tablet-l">Finalización</th>
								<th class="min-tablet-l">Job ID </th>
								<th class="min-tablet-l">Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{-- HTML::script('DataTables/dataTables.responsive.min.js') --}}
{{-- HTML::script('DataTables/dataTables.select.min.js') --}}
{{-- HTML::script('DataTables/dataTables.buttons.min.js') --}}
{{ HTML::script('Alphanum/jquery.alphanum.min.js') }}
<script type="text/javascript">
	function Actualizar(){
		var table1 = $("#tblRegistrosImportacion").DataTable();
		table1.ajax.reload(null, false);
	}

	function continuarImportacionMasiva() {

		const rutaImportacion = "{{ route('SysWebContinuarImportacionMasiva', array($cid)) }}";

		const textos = [
			"No cierre esta pestaña...",
			"Espere, por favor...",
			"Esto puede demorar...",
			"Seguimos trabajando...",
			"Gracias por su paciencia..."
		];

		let textoActual = 0;
		let preloaderInterval;

		$.isLoading({
			text: textos[textoActual]
		});
		NProgress.start();

		preloaderInterval = setInterval(() => {
			textoActual = (textoActual + 1) % textos.length;
			$.isLoading("hide");
			$.isLoading({ text: textos[textoActual] });
		}, 2500);

		$.post(
			rutaImportacion,
			function(data) {
				console.log("Deteniendo Preloader...");
				clearInterval(preloaderInterval);
				$.isLoading("hide");
				NProgress.done();

				console.log(data);
				if (data.success) {
					new PNotify({ title: "Importación Masiva", text:data.message, type: "success" });
					Actualizar();
				} else {
					new PNotify({ title: "Importación Masiva", text: data.message, type: "error" });
				}
				console.log(data.message);
			},
			"json"
	);
}

</script>
@stop

@section('JSOr')
@if (Session::has('message'))
new PNotify({ title: "¡Felicidades!", text: "{{ Session::get('message') }}", type: "success" });
@endif
var tabla = $("#tblRegistrosImportacion").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebEmailMarketingHistorialImportacionSuscriptores') }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [
		{data: "id", name: "id", "visible": true, "orderable": false},
		{data: "nombre_lista", name: "nombre_lista", "searchable": false, "orderable": false},
		{data: "tipo_lista", name: "tipo_lista", "searchable": false, "orderable": false},
		{data: "numero_registros", name: "numero_registros", "searchable": false, "orderable": false},
		{data: "estado", name: "estado", "searchable": false, "orderable": true},
		{data: "fecha_inicio", name: "fecha_inicio", "searchable": false, "orderable": true},
		{data: "fecha_fin", name: "fecha_fin", "searchable": false, "orderable": true, visible: false},
		{data: "nbJobId", name: "nbJobId", "searchable": false, "orderable": false, visible: false},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"},
		],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		$(".table-responsive").find("[title]").tooltip();
	},
	autoWidth: false,
	responsive: {
		"details": {
			"type": "column",
			"target": 0
		}
	},
	columnDefs: [{
		"data": null,
		"defaultContent": "",
		"className": "control",
		"orderable": false,
		"width": "35%",
		"targets": 1
	},
	{
		"data": null,
		"defaultContent": "",
		"className": "control",
		"orderable": false,
		"width": "10%",
		"targets": [2,3,4,5,6,7]
	},
	{
		"data": null,
		"defaultContent": "",
		"className": "control",
		"orderable": false,
		"width": "15%",
		"targets": 8
	}],
	order: [[ 0, "asc" ]],
	searching: false
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
@stop