@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
<style type="text/css">
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
	.btnRadius{
		border-radius : 4px !important;
	}
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="icons-web-site" style="font-size: 30px !important;"></i> Sitio Web </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	{{--
	<div class="col-md-12">
		<nav class="navbar navbar-inverse">
			<ul class="nav navbar-nav">
				<li><a href="{{ URL::to('templates') }}">Ver todos los Templates</a></li>
				<li><a href="{{ URL::to('templates/create') }}">Crear un Template</a>
			</ul>
		</nav>
	</div>
	--}}
	<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">
					Usuarios del sitio web
					{{ HTML::linkRoute('SysWebSWebUsuariosAgregar', 'Agregar', array(), array('class' => 'btn btn-primary btnRadius')) }}
					<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>
					<div  class="pull-right">
						<a class=" tooltips" data-toggle="tooltip" data-original-title="Editar correos" target="_blank" href="{{ URL::route('SysWebSWebCorreosxUsuario') }}" style="color: rgba(0, 0, 0, 0.3); margin-right: 10px;">
							<i class="fa fa-envelope"> </i>
						</a>
					</div>
					<div  class="pull-right">
						<a class=" tooltips" data-toggle="tooltip" data-original-title="Cargar usuarios" href="javascript:CargarUsuarios()" style="color: rgba(0, 0, 0, 0.3); margin-right: 10px;">
							<i class="fa fa-upload"> </i>
						</a>
					</div>
				</h3>
			</div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover" id="tblUsuarios">
						<thead>
							<tr>
								<th class="col-md-4"> Nombre de usuario </th>
								<th class="col-md-4"> Correo electrónico </th>
								<th class="col-md-2"> Etiquetas </th>
								<th class="col-md-2 text-center"> Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div class="bottom">		
				{{ HTML::linkRoute('SysWebSWebUsuariosAgregar', 'Agregar', array(), array('class' => 'btn btn-primary')) }}
				{{ HTML::linkRoute('SysWebGClientesUsuariosSWAgregarPlantilla', 'Descargar plantilla', array(), array('class' => 'btn btn-success')) }}
			</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('bootstrap-select/js/bootstrap-select.min.js') }}
{{ HTML::script('bootstrap-select/js/i18n/defaults-es_CL.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="id" value="'+id+'"> \
				</form> \
			</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){
					NProgress.start();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						"{{ URL::route('SysWebSWebUsuariosEliminar') }}",
						{idUSW: id},
						function(data){
							NProgress.done();
							$("#btnEnviar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								//setTimeout( function(){ window.location.reload(); }, 3000 );
								var table = $("#tblUsuarios").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"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function CambiarContra(id){
		var id = id;
		var mensaje = '<div class="row"> \
			 <div class="col-xs-12"> \
				<form id="frmCambiarContrasenhaUSW"> \
					<div class="form-group"> \
						<label for="contrasenha">Contraseña</label> \
						<input type="text" class="form-control" id="contrasenha" name="contrasenha" placeholder="Nueva contraseña a asignar"> \
					</div> \
					<input type="hidden" name="idUSW" value="'+id+'"> \
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Cambiar contraseña del usuario",
			type: BootstrapDialog.TYPE_WARNING,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalEliminar mdAvatar",
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
			},
			buttons: [{
				id: "btnCambiarContra",
				label: "Cambiar Contraseña",
				cssClass: "btn-warning btn-block btn-lg",
				action: function(dialogItself){
					NProgress.start();
					$("#btnCambiarContra").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
					$.post(
						"{{ URL::route('SysWebSWebUsuariosCambiarContrasenha') }}",
						$("#frmCambiarContrasenhaUSW").serialize(),
						function(data){
							NProgress.done();
							$("#btnCambiarContra").prop("disabled", false).html("Cambiar contraseña");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								//setTimeout( function(){ window.location.reload(); }, 3000 );
								var table = $("#tblUsuarios").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"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function CambiarEstado(id){
		var id = id;
		var mensaje = '<div class="row"> \
			 <div class="col-xs-12"> \
				<form id="frmCambiarEstadoUSW"> \
					<h2> ¿Seguro que desea cambiar el estado del usuario? </h2> \
					<input type="hidden" name="idUSW" value="'+id+'"> \
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Cambiar estado del usuario",
			type: BootstrapDialog.TYPE_INFO,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar mdAvatar",
			closeByBackdrop: false,
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
			},
			buttons: [{
				id: "btnCambiarEstado",
				label: "Cambiar estado",
				cssClass: "btn-info btn-block btn-lg",
				action: function(dialogItself){
					NProgress.start();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando');
					$.post(
						"{{ URL::route('SysWebSWebUsuariosCambiarEstado') }}",
						$("#frmCambiarEstadoUSW").serialize(),
						function(data){
							NProgress.done();
							$("#btnCambiarEstado").prop("disabled", false).html("Cambiar estado");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								//setTimeout( function(){ window.location.reload(); }, 3000 );
								var table = $("#tblUsuarios").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"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function Actualizar(){
		var table = $("#tblUsuarios").DataTable();
		table.ajax.reload(null, false);
	}
	function CargarUsuarios() {
		var ruta = "{{ URL::route('SysWebGClientesUsuariosSWAgregarPlantilla') }}";
		var mensaje = '<div class="row"> \
			 <div class="col-xs-12"> \
				<form id="frmAgregar"> \
					<div class="form-group">\
						<label> Seleccione la plantilla de usuarios </label> \
						<input class="" id="archivocsv" name="archivocsv" type="file"> \
						<span id="errarchivocsv" class="text-danger"><span>\
					</div>\
					<div class="form-group"> \
						<label for="slEtiquetas"> Etiquetas a asignar </label> \
						<select class="form-control selectpicker" data-live-search="true" multiple data-selected-text-format="count" title="Seleccione las etiquetas a asociar..." id="etiquetas" name="etiquetas[]"> \
							<option value="0" disabled> Seleccione las etiquetas a asociar... </option> \
						</select> \
						<span class="text-danger" id="erretiquetas"> </span> \
						<div id="dvEtiquetas" style="padding-top: 10px;"></div> \
					</div>\
					<div class="alert alert-info" style="margin-bottom: 15px;"><b>Nota:</b> No se agregarán usuarios que ya esten registrados. Sin embargo se asignarán las etiquetas</div>\
					<a href="'+ruta+'" class="btn btn-success">Descargar plantilla</a>\
					<div class="alert alert-warning alert-errores" style="margin-bottom: 0px; margin-top: 15px; display: none;"></div>\
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Cargar usuarios",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalAgregar mdAvatar",
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
				var modal = dialogItself.getModalBody();
				var etiquetas = {{ $etiquetas }};
				var options = "";
				$.each(etiquetas,function(i, etiqueta) {
					options += '<option value="'+etiqueta.id+'">'+etiqueta.nombre+'</option>';
				})
				modal.find("#etiquetas").append(options);
				modal.find("#etiquetas").selectpicker();
			},
			buttons: [{
				id: "btnGuardar",
				label: "Guardar",
				cssClass: "btn-primary btn-block btn-lg",
				action: function(dialogItself){
					NProgress.start();
					$("#btnGuardar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Cargando');
					var frmImportar = new FormData(document.getElementById("frmAgregar"));
					$.ajax({
						type: "POST",
						url: "{{ URL::route('SysWebGClientesUsuariosAgregarImportar') }}",
						data: frmImportar,
						cache: false,
						contentType: false,
						processData: false,
						dataType: "json",
						timeout: 1800000,
						success: function(data){
							NProgress.done();
							$("#btnGuardar").prop("disabled", false).html("Guardar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								var table = $("#tblUsuarios").DataTable();
								table.ajax.reload(null, 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(""); } });
								$(".alert-errores").show("slow");
								$(".alert-errores").html(data.MensajeError);
							}
						},
						error: function(jqXHR, textStatus, errorThrown){
							$("input[type='submit']").prop("disabled", false);
							new PNotify({ title: "Error", text: textStatus + " " + errorThrown, type: "error" });
						}
					});
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
</script>
@stop

@section('JSOr')
var tabla = $("#tblUsuarios").DataTable({
	"processing": true,
	"serverSide": true,
	"pageLength": 10,
	"ordering": false,
	"searching": true,
	"ajax": "{{ URL::route('SysWebSWebUsuarios') }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [
		{data: "nombre_de_usuario", name: "nombre_de_usuario", "searchable": true},
		{data: "correo_electronico", name: "correo_electronico", "searchable": true},
		{data: "etiquetas", name: "etiquetas", "searchable": false, "orderable": false, "class": ""},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"},
	],
	"language": {
		"url": "{{ 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();
	},
	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