@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('image-picker/image-picker.css') }}
{{ HTML::style('jquery-ezdz/jquery.ezdz.min.css') }}
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
<style type="text/css">
	/*@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }*/
	/* EZDZ PARA AVATAR */
	.ModalImgB .ezdz-dropzone {
		width: 100% !important;
		height: 300px !important;
		border-style: solid !important;
		border-width: 5px !important;
	}

	.ModalImgB .ezdz-dropzone>div {
		padding-top: 8% !important;
	}

	.ModalImgB .ezdz-dropzone i.fa-cloud-upload {
		font-size: 110px !important;
		display: block !important;
	}

	.ModalImgB .ezdz-dropzone span.spFlITitulo {
		display: block !important;
		margin: 0 auto !important;
		font-size: 24px !important;
		background: transparent !important;
		color: #989898 !important;
		font-weight: bold !important;
	}

	.ModalImgB .ezdz-dropzone span.spFlITexto {
		display: block !important;
		margin: 0 auto !important;
		font-size: 18px !important;
		background: transparent !important;
		color: #989898 !important;
		font-weight: bold !important;
	}

	.ModalImgB .ezdz-dropzone.ezdz-reject span.spFlITexto,
	.ModalImgB .ezdz-dropzone.ezdz-reject span.spFlITitulo {
		color: #8b0000 !important;
	}
	.ModalImgB .ezdz-dropzone img {
		max-width: 300px;
		max-height: 215px;
	}
	.ModalImgB #frmImagen {
		padding: 0px 25px;
	}
	.color-head-modal .modal-header {
		background-color: #363b3f !important;	
	}
	.ModalAgregarA #frmBanner img{
		cursor: pointer;
	}
	.image_picker_image {
		height: 100px!important;
		width: 119px!important;
		object-fit: contain !important;
	}
	
	.imgSlider {
		max-height: 300px;
		overflow: auto;
	}
	.step {
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		background-color: #687174;
		overflow: hidden;
	}
	#frmBanner .nav {
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
/* EZDZ PARA AVATAR*/
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-shopping-cart"></i> Gestión de ventas en línea </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<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">
					Listado de campañas de descuentos
					<a href="{{ URL::route('SysWebVentasCampanhasAgregar') }}" class="btn btn-primary"  style="border-radius: 3px;"> Agregar </a>
					<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="tblCampanhasDePromo">
						<thead>
							<tr>
								<th class=""> Nombre de la campaña </th>
								<th class=""> Tipo de campaña </th>
								<th style="" class=""> Acciones </th>
							</tr>
						</thead>
						</table>
				</div>
			</div>
			<div class="bottom">
				<a href="{{ URL::route('SysWebVentasCampanhasAgregar') }}" class="btn btn-primary"> Agregar </a>
				<input type="hidden" id="cid" value="{{ Cliente::select('id')->where('users_id', '=', Auth::user()->id)->first()->id }}">
				<input type="hidden" id="rutabibliotecascliente" value="{{ URL::route('SysWebPAterrizajeBibliotecaImagenesClientes', array('')) }}/">
			</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('image-picker/image-picker.min.js') }}
{{ HTML::script('jquery-ezdz/jquery.ezdz.min.js') }}
{{ HTML::script('bootstrap-select/js/bootstrap-select.min.js') }}
{{ HTML::script('bootstrap-number-input/bootstrap-number-input.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 el atributo? </h2> \
					<p> \
						Si lo haces se eliminará automáticamente de los productos y variaciones asignados y tus clientes no podrán seleccionar el atrubuto en ningúno de ellos \
						<!-- Si lo haces todos los productos y sus variaciones vinculados serán eliminados y tus clientes no podrán seleccionar este atributo en ningun produco --> \
					</p> \
					<input type="hidden" name="idA" 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('SysWebVentasAtributosEliminar', array()) }}",
						$("#frmEliminar").serialize(),
						function(data){
							NProgress.done();
							$("#btnEliminar").html("Guardar").prop("disabled", false);
							if(data.success){
								dialogItself.close();
								var table = $("#tblAtributosAgregar").DataTable();
								table.ajax.reload(null, false);
								new PNotify({ title: "Realizado", 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 != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
							}
						},
						"json"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function Actualizar(){
		var tabla = $("#tblCampanhasDePromo").DataTable();
		tabla.ajax.reload(null, false);
	}
	function Clonar(id){
		var id = id;
		$.isLoading({ text: "Cargando..." }); NProgress.start();
		$.post(
			"{{ URL::route('SysWebEmailMarketingCampanhasClonar') }}",
			{idC:id},
			function(data){
				$.isLoading("hide"); NProgress.done();
				if(data.success){
					new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
					Actualizar();
					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"
		);
	}
	function AgregarArte(id){
		var option = '{{ $option }}';
		var id = id;
		var appendNumber = 0;
		var htmlV = '<div class="row" id="cuerpoBibliotecaImagen"> \
			<form id="frmBanner" method=""> \
				<div class="tab-container"> \
					<ul class="nav nav-tabs"> \
						<li class="step"><a href="#ArteLeft" data-toggle="tab">Publicidad lateral</a></li> \
						<li class="step"><a href="#ArteTop" data-toggle="tab">Publicidad superior</a></li> \
					</ul> \
					<div class="tab-content"> \
						<div class="tab-pane active" id="ArteLeft"> \
							<div class="col-md-12" style="padding: 0px;"> \
								<fieldset> \
									<div class="form-group"> \
										<div class="col-md-6"> \
											<legend style="width: 98%;">Imagen de publicidad lateral:</legend> \
										</div> \
										<div class="col-md-6"> \
											<legend style="width: 98%;">Configuración de publidad en camapaña</legend> \
										</div> \
										<div class="col-md-5" style="margin-top: 20px;">\
											<img src="/SysWeb/SumeClientes/400x400-producto.png" class="img-responsive banner-left">\
										</div> \
										<div class="col-md-6" style="margin-top: 15px;"> \
											<div class="form-group"> \
												<label>opciones de imagen</label> \
												<select id="slRemplazo" class="form-control" name="slRemplazo" title="Seleccione una opcion"> \
													<option value="RE">Reemplazar imagenes</option>\
													<option value="AD">Adicionar imagenes</option>\
												</select> \
											</div> \
										</div> \
										<input type="hidden" class="form-control img_route_lf" name="imgRoute_left" value=""> \
									</div> \
								</fieldset> \
							</div> \
						</div> \
						<div class="tab-pane"  id="ArteTop"> \
							<div class="col-md-12" style="padding: 0px;"> \
								<fieldset> \
									<div class="form-group"> \
										<div class="col-md-7"> \
											<legend>Imagen de publicidad superior:</legend> \
										</div> \
										<div class="col-md-12" style="margin-top: 20px;"> <img src="/SysWeb/SumeClientes/700x400-banner.png" class="img-responsive banner-top" style="height: 250px;"> </div> \
										<input type="hidden" class="form-control img_route_tp" name="imgRoute-top" value=""> \
									</div> \
								</fieldset> \
							</div> \
							<div class="col-md-6" style="margin-top: 15px;"> \
								<div class="form-group slideImg"> \
									<label>Numero de imagenes publicidad superior</label> \
									<input id="numImgSl" type="number" style="margin-bottom: 0;" class="form-control"  value="0"  min="0" max="6"></input> \
									<span id="errtxtSlider" class="text-danger" style="position: relative; margin-bottom: 10px;"></span> \
								</div> \
							</div> \
							<div class="col-md-6" style="margin-top: 15px;"> \
								<div class="form-group"> \
									<label>Seleccione una categoria</label> \
									<select id="slCateSl" class="form-control" name="categorias[]" title="Seleccione una categoria" multiple> \
										'+option+'\
									</select> \
								</div> \
							</div> \
							<div class="col-md-12"> \
								<div class="row imgSlider" > \
								</div> \
							</div>	 \
						</div> \
					</div> \
				</div> \
				<input type="hidden" value="'+id+'" name="camapaha_id"> \
				<!-- div class="col-md-3" style="margin-top: 15px;"> \
					<div class="form-group"> \
						<label>Efectos de transición</label> \
						<select id="slEfectosSl" class="form-control" title="Seleccione una opción"> \
							<option value="fade"> Fade </option> \
							<option value="slide"> Slide </option> \
						</select> \
					</div> \
				</div --> \
			</form> \
		</div>';
		BootstrapDialog.show({
			title: "Agregar artes de campaña",
			type: BootstrapDialog.TYPE_PRIMARY,
			size: BootstrapDialog.SIZE_WIDE,
			message: htmlV,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalAgregarA color-head-modal",
			onshow: function(dialog){
				$("body").addClass("modal-open");
				var ventana = dialog.getModal();
				ventana.find("#slRemplazo").selectpicker();
				$.post(
					"{{ URL::route('SysWebVentasArtesxCampanha', array()) }}",
					{tipoC: 'consultar', campanha_id: id},
					function(data){
						var valor = 0;
						if(data.ArteNum != "" || data.ArteNum != undefined){
							valor = data.ArteNum;
						}
						ventana.find("#numImgSl").val(valor);
						ventana.find("#slRemplazo").selectpicker("val", data.accion);
						ventana.find("#slRemplazo").selectpicker("refresh");
						ventana.find("#slCateSl").selectpicker("refresh");
						if(data.Categoria.length){
							ventana.find("#slCateSl").selectpicker("val", data.Categoria);
						}
						else{
							ventana.find("#slCateSl").selectpicker("val", "np");
						}
						ventana.find("#slCateSl").change(function(){
							var valor = $(this).val();
							if(valor != null){
								if(valor[0] == "np"){
									ventana.find("#slCateSl").selectpicker("val", "np");
									ventana.find("#slCateSl").selectpicker("refresh");
								}
							}
						});
						var numeroElementos = $(".imgSlide").length;
						$.each(data.rutas, function(i, ruta){
							if(ruta.tipo == "SL"){
								if( (i+1) > numeroElementos ){
									appendNumber++;
									var img = "<div class='col-xs-4 col-md-6 columna-silder imgsl_"+appendNumber+"' style='margin-bottom: 15px;'> \
											<i class='fa fa-times-circle btnEliminarG' id='delete_"+appendNumber+"' style='position: absolute;left: 6%;top: 5%;z-index: 999; color: #d8221c; cursor: pointer;font-size: 17px;'></i>\
											<img  id='image" + appendNumber + "' class='img-reponsive imgSlide img' style='width: 100%; height: 250px;' src='"+ruta.ruta+"' alt=''> \
											<input type='hidden' class='imgSlTop' name='imgRoute[]' value='"+ruta.ruta+"'> \
									</div>";
									$(".imgSlider").append(img);
									ventana.find("#image"+appendNumber).click(function(){
										var nodoImg = $(this);
										var mensaje = '<div class="row"> \
											<div class="col-xs-12"> \
												<div class="ImageneSlider">\
													<div class="row"> \
														<div class="col-xs-12 col-md-7"> \
															<label>Selecciona una imagen de la biblioteca de imagenes</label> \
															<div class="form-group dvPixaBay" style="display: none;"> \
																<div class="input-group"> \
																	<input type="text" id="txtBusquedaPixaBay" class="form-control" placeholder="Escriba su busqueda acá..." style="margin-bottom: 0px;"> \
																	<span class="input-group-btn"> \
																		<button id="btnBuscarPixaBay" class="btn btn-default" type="button" title="Buscar" data-procesando="0"> \
																			<i class="fa fa-search"></i> \
																		</button> \
																	</span> \
																</div> \
																<span class="text-danger" id="errtxtBusquedaPixaBay"></span> \
															</div> \
															<div id="Biblioteca" style="height: 611px; overflow: auto;"> \
																<select id="slBiblioteca"> </select> \
															</div> \
															<div id="PaginacionPixaBay" class="dvPixaBay" style="display: none;"></div> \
															<input type="hidden" id="hdnTotalPagina" value="0"> \
														</div> \
														<div class="col-xs-12 col-md-5"> \
															<form id="frmImagen"> \
																<div class="row"> \
																	<div class="col-md-12"> \
																		<input type="file" name="flImagen" id="flImagen" accept="image/png, image/jpeg, image/gif"> \
																		<span id="errflImagen" class="text-danger"></span> \
																	</div> \
																	<div class="col-md-12" style="padding-top: 10px;"> \
																		<div class="alert alert-warning"> \
																			<ul> \
																				<li> Las imagenes no deben tener un tamaño mayor a 1MB </li> \
																				<li> Solo aceptamos imagenes en formato JPG, PNG y GIF </li> \
																			</ul> \
																		</div> \
																	</div> \
																	<div class="col-md-12"> \
																		<div class="form-group"> \
																			<input type="hidden" name="hdnImagen" value=""> \
																			<button type="button" class="btn btn-primary btn-block btn-lg" id="btnCrearImagen"><i class="fa fa-upload"></i> Subir imagen </button> \
																			<span id="errGenerico" class="text-danger"></span> \
																		</div> \
																	</div> \
																</div> \
															</form> \
														</div> \
													</div>\
												</div> \
											</div> \
										</div> ';
										BootstrapDialog.show({
											title: "Imagenes para slider",
											type: BootstrapDialog.TYPE_PRIMARY,
											size: BootstrapDialog.SIZE_WIDE,
											message: mensaje,
											draggable: true,
											//closable: false,
											cssClass: "CrearSlider modalCambiarImagenBGI color-head-modal ModalImgB",
											onshown: function(dialog){
												var ventanaSlider = dialog.getModalBody();
												//armarBiblioteca(true, ventanaSlider.find(".ImageneSlider"), 0);
												cargarImagenesBibliotecaPersonal(ventanaSlider);
												if($.ezdz.isBrowserCompatible() === false){
													console.log('No ezdz for this browser. Standard input file only.');
												}
												else{
													var valiJson = {
														maxWidth: 1600,
														maxHeight: 500,
													}
													ventanaSlider.find("#flImagen").ezdz({
														text: '<i class="fa fa-cloud-upload"></i> \
														<span class="spFlITitulo">Suelte el archivo a subir</span> \
														<span class="spFlITexto">o haga clic aquí</span>',
														validators: valiJson,
														accept: function(file) {
															ventanaSlider.find("#errflImagen").html("");
														},
														reject: function(file, errors) {
															if (errors.maxWidth || errors.maxHeight) {
																ventanaSlider.find("#errflImagen").html("La imagenno cumple con el tamaño indicado");
															}
														}
													});
												}
												ventanaSlider.find("#btnCrearImagen").on("click", function(){
													ventanaSlider.find("#errGenerico").html("");
													NProgress.start();
													ventanaSlider.find("#btnCrearImagen").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
													if( ventanaSlider.find("#txtImagen").val() == "" && ventanaSlider.find("#slBiblioteca").val() == "" && ventanaSlider.find("#flImagen").val() == "" ){
														ventanaSlider.find("#errGenerico").html("Debes seleccionar una imagen de la biblioteca, subir una imagen o ingresar la ruta de la imagen que deseas almacenar");
														NProgress.done();
														ventanaSlider.find("#btnCrearImagen").html("Usar imagen").prop("disabled", false);
													}
													else{
														if(ventanaSlider.find("#flImagen").val() != "" ){
																var formData = new FormData();
																formData.append("file", ventanaSlider.find("#flImagen")[0].files[0]);
																$.ajax({
																	type: "POST",
																	url: $("#hdnRutaImagenes").val(),
																	data: formData,
																	cache: false,
																	contentType: false,
																	processData: false,
																	dataType: "json",
																	success: function(data){
																		var url = data.imagen;
																		nodoImg.attr("src", url);
																		nodoImg.next().val(url);
																		NProgress.done();
																		ventanaSlider.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
																		dialog.close();
																	},
																	error: function(jqXHR, textStatus, errorThrown){
																		ventanaSlider.find("#errGenerico").html("Ha ocurrido algún error inesperado, por favor vuelve a intentarlo...");
																		NProgress.done();
																		ventanaSlider.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
																	}
																});
														}
														else{
															var url = ventanaSlider.find("#slBiblioteca option:selected").attr("data-img-src");
															nodoImg.attr("src", url);
															nodoImg.next().val(url);
															NProgress.done();
															ventanaSlider.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
															dialog.close();
														}
													}
												});
											}
										});
									});
									ventana.find("#delete_"+appendNumber).click(function(){	
										if(confirm("Esta seguro de que desea eliminar este elemento")){
											$(this).closest(".columna-silder").remove();
											ventana.find("#numImgSl").val(ventana.find(".columna-silder").length);
											ventana.find(".columna-silder").each(function(index){
												$(this).attr("id", "imgsl_"+(index+1));
												$(this).find(".imgSlide").attr("id", "image"+(index+1));
												$(this).find(".btnEliminarG").attr("id", "delete_"+(index+1));
												$(this).find(".titulo-slider").attr("id", "titulo-slider"+(index+1));
												$(this).find(".text-slider").attr("id", "text-slider"+(index+1));
											});
										}
									});
								}
								else{
									--appendNumber
									$(".imgsl_"+numeroElementos).remove();
								}
							}
							else{
								$('.banner-left').attr("src", ruta.ruta);
								$('.img_route_lf').val(ruta.ruta);
							}
						});
					},
					"json"
				);
			},
			onshown: function(dialog){
				var ventana = dialog.getModal();
				ventana.find("#slCateSl").selectpicker("refresh");
				ventana.find("#slEfectosSl").selectpicker();
				ventana.find("#numImgSl").bootstrapNumber({
					min: 0,
					max: 6,
				});
				//var appendNumber = 0;
				ventana.find(".slideImg").find(".btn").click(function(){
					var agregar = true;
					ventana.find(".imgSlider").find("img").each(function(){
						if($(this).attr("src").indexOf("SumeClientes") > -1){
							agregar = false;
						}
					})
					if(agregar){
						var valorSlider = $("#numImgSl").val();
						var btnDerecho = $(".input-group").find(".btn-default:last");
						var btnIzquierdo = $(".input-group").find(".btn-default:first");
						var numeroElementos = $(".imgSlide").length;
						(valorSlider == 6)?btnDerecho.prop("disabled", true):btnDerecho.prop("disabled", false);
						(valorSlider == 0)?btnIzquierdo.prop("disabled", true):btnIzquierdo.prop("disabled", false);
						if( valorSlider > numeroElementos ){
							appendNumber++;
							var img = "<div class='col-xs-4 col-md-6 columna-silder imgsl_"+appendNumber+"' style='margin-bottom: 15px;'> \
									<i class='fa fa-times-circle btnEliminarG' id='delete_"+appendNumber+"' style='position: absolute;left: 6%;top: 5%;z-index: 999; color: #d8221c; cursor: pointer;font-size: 17px;'></i>\
									<img  id='image" + appendNumber + "' class='img-reponsive imgSlide img' style='width: 100%; height: 250px;' src='/SysWeb/SumeClientes/placeholder.png' alt=''> \
									<input type='hidden' class='imgSlTop' name='imgRoute[]' value=''> \
							</div>";
							$(".imgSlider").append(img);
							ventana.find("#image"+appendNumber).click(function(){
								var nodoImg = $(this);
								var mensaje = '<div class="row"> \
									<div class="col-xs-12"> \
										<div class="ImageneSlider">\
											<div class="row"> \
												<div class="col-xs-12 col-md-7"> \
													<label>Selecciona una imagen de la biblioteca de imagenes</label> \
													<div class="form-group dvPixaBay" style="display: none;"> \
														<div class="input-group"> \
															<input type="text" id="txtBusquedaPixaBay" class="form-control" placeholder="Escriba su busqueda acá..." style="margin-bottom: 0px;"> \
															<span class="input-group-btn"> \
																<button id="btnBuscarPixaBay" class="btn btn-default" type="button" title="Buscar" data-procesando="0"> \
																	<i class="fa fa-search"></i> \
																</button> \
															</span> \
														</div> \
														<span class="text-danger" id="errtxtBusquedaPixaBay"></span> \
													</div> \
													<div id="Biblioteca" style="height: 611px; overflow: auto;"> \
														<select id="slBiblioteca"> </select> \
													</div> \
													<div id="PaginacionPixaBay" class="dvPixaBay" style="display: none;"></div> \
													<input type="hidden" id="hdnTotalPagina" value="0"> \
												</div> \
												<div class="col-xs-12 col-md-5"> \
													<form id="frmImagen"> \
														<div class="row"> \
															<div class="col-md-12"> \
																<input type="file" name="flImagen" id="flImagen" accept="image/png, image/jpeg, image/gif"> \
																<span id="errflImagen" class="text-danger"></span> \
															</div> \
															<div class="col-md-12" style="padding-top: 10px;"> \
																<div class="alert alert-warning"> \
																	<ul> \
																		<li> Las imagenes no deben tener un tamaño mayor a 1MB </li> \
																		<li> Solo aceptamos imagenes en formato JPG, PNG y GIF </li> \
																	</ul> \
																</div> \
															</div> \
															<div class="col-md-12"> \
																<div class="form-group"> \
																	<input type="hidden" name="hdnImagen" value=""> \
																	<button type="button" class="btn btn-primary btn-block btn-lg" id="btnCrearImagen"><i class="fa fa-upload"></i> Subir imagen </button> \
																	<span id="errGenerico" class="text-danger"></span> \
																</div> \
															</div> \
														</div> \
													</form> \
												</div> \
											</div>\
										</div> \
									</div> \
								</div> ';
								BootstrapDialog.show({
									title: "Imagenes para slider",
									type: BootstrapDialog.TYPE_PRIMARY,
									size: BootstrapDialog.SIZE_WIDE,
									message: mensaje,
									draggable: true,
									//closable: false,
									cssClass: "CrearSlider modalCambiarImagenBGI color-head-modal ModalImgB",
									onshown: function(dialog){
										var ventanaSlider = dialog.getModalBody();
										//armarBiblioteca(true, ventanaSlider.find(".ImageneSlider"), 0);
										cargarImagenesBibliotecaPersonal(ventanaSlider);
										if($.ezdz.isBrowserCompatible() === false){
											console.log('No ezdz for this browser. Standard input file only.');
										}
										else{
											var valiJson = {
												maxWidth: 1600,
												maxHeight: 500,
											}
											ventanaSlider.find("#flImagen").ezdz({
												text: '<i class="fa fa-cloud-upload"></i> \
												<span class="spFlITitulo">Suelte el archivo a subir</span> \
												<span class="spFlITexto">o haga clic aquí</span>',
												validators: valiJson,
												accept: function(file) {
													ventanaSlider.find("#errflImagen").html("");
												},
												reject: function(file, errors) {
													if (errors.maxWidth || errors.maxHeight) {
														ventanaSlider.find("#errflImagen").html("La imagenno cumple con el tamaño indicado");
													}
												}
											});
										}
										ventanaSlider.find("#btnCrearImagen").on("click", function(){
											ventanaSlider.find("#errGenerico").html("");
											NProgress.start();
											ventanaSlider.find("#btnCrearImagen").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
											if( ventanaSlider.find("#txtImagen").val() == "" && ventanaSlider.find("#slBiblioteca").val() == "" && ventanaSlider.find("#flImagen").val() == "" ){
												ventanaSlider.find("#errGenerico").html("Debes seleccionar una imagen de la biblioteca, subir una imagen o ingresar la ruta de la imagen que deseas almacenar");
												NProgress.done();
												ventanaSlider.find("#btnCrearImagen").html("Usar imagen").prop("disabled", false);
											}
											else{
												if(ventanaSlider.find("#flImagen").val() != "" ){
													var formData = new FormData();
													formData.append("file", ventanaSlider.find("#flImagen")[0].files[0]);
													$.ajax({
														type: "POST",
														url: "{{ URL::route('SysWebPAterrizajeGenTemplateImagenes') }}",
														data: formData,
														cache: false,
														contentType: false,
														processData: false,
														dataType: "json",
														success: function(data){
															var url = data.imagen;
															nodoImg.attr("src", url);
															nodoImg.next().val(url);
															NProgress.done();
															ventanaSlider.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
															ventana.find(".slideImg").removeClass("desactivado");
															dialog.close();
														},
														error: function(jqXHR, textStatus, errorThrown){
															ventanaSlider.find("#errGenerico").html("Ha ocurrido algún error inesperado, por favor vuelve a intentarlo...");
															NProgress.done();
															ventanaSlider.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
															ventana.find(".slideImg").removeClass("desactivado");
														}
													});
												}
												else{
													var url = ventanaSlider.find("#slBiblioteca option:selected").attr("data-img-src");
													nodoImg.attr("src", url);
													nodoImg.next().val(url);
													NProgress.done();
													ventanaSlider.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
													ventana.find(".slideImg").removeClass("desactivado");
													dialog.close();
												}
											}
										});
									}
								});
							});
							ventana.find("#delete_"+appendNumber).click(function(){	
								if(confirm("Esta seguro de que desea eliminar este elemento")){
									$(this).closest(".columna-silder").remove();
									ventana.find("#numImgSl").val(ventana.find(".columna-silder").length);
									ventana.find(".columna-silder").each(function(index){
										$(this).attr("id", "imgsl_"+(index+1));
										$(this).find(".imgSlide").attr("id", "image"+(index+1));
										$(this).find(".btnEliminarG").attr("id", "delete_"+(index+1));
										$(this).find(".titulo-slider").attr("id", "titulo-slider"+(index+1));
										$(this).find(".text-slider").attr("id", "text-slider"+(index+1));
									});
									ventana.find(".slideImg").removeClass("desactivado");
								}
							});
							ventana.find(".slideImg").addClass("desactivado");
						}
						else{
							--appendNumber
							$(".imgsl_"+numeroElementos).remove();
						}
					}
				});
				ventana.find(".banner-left").on("click", function(){
					var nodo = $(this);
					var htmlAvatar = '<div class="row"> \
						<div class="col-xs-12 col-md-7"> \
							<label>Selecciona una imagen de la biblioteca de imagenes</label> \
							<div class="form-group dvPixaBay" style="display: none;"> \
								<div class="input-group"> \
									<input type="text" id="txtBusquedaPixaBay" class="form-control" placeholder="Escriba su busqueda acá..." style="margin-bottom: 0px;"> \
									<span class="input-group-btn"> \
										<button id="btnBuscarPixaBay" class="btn btn-default" type="button" title="Buscar" data-procesando="0"> \
											<i class="fa fa-search"></i> \
										</button> \
									</span> \
								</div> \
								<span class="text-danger" id="errtxtBusquedaPixaBay"></span> \
							</div> \
							<div id="Biblioteca" style="height: 611px; overflow: auto;"> \
								<select id="slBiblioteca"> </select> \
							</div> \
							<div id="PaginacionPixaBay" class="dvPixaBay" style="display: none;"></div> \
							<input type="hidden" id="hdnTotalPagina" value="0"> \
						</div> \
						<div class="col-xs-12 col-md-5"> \
							<form id="frmImagen"> \
								<div class="row"> \
									<div class="col-md-12"> \
										<input type="file" name="flImagen" id="flImagen" accept="image/png, image/jpeg, image/gif"> \
										<span id="errflImagen" class="text-danger"></span> \
									</div> \
									<div class="col-md-12" style="padding-top: 10px;"> \
										<div class="alert alert-warning"> \
											<ul> \
												<li> Las imagenes no deben tener un tamaño mayor a 1MB </li> \
												<li> Solo aceptamos imagenes en formato JPG, PNG y GIF </li> \
											</ul> \
										</div> \
									</div> \
									<div class="col-md-12"> \
										<div class="form-group"> \
											<input type="hidden" name="hdnImagen" value=""> \
											<button type="button" class="btn btn-primary btn-block btn-lg" id="btnCrearImagen"><i class="fa fa-upload"></i> Subir imagen </button> \
											<span id="errGenerico" class="text-danger"></span> \
										</div> \
									</div> \
								</div> \
							</form> \
						</div> \
					</div>';
					BootstrapDialog.show({
						title: "Artes de campaña",
						type: BootstrapDialog.TYPE_DEFAULT,
						size: BootstrapDialog.SIZE_WIDE,
						message: htmlAvatar,
						draggable: true,
						closeByBackdrop: false,
						cssClass: "ModalImgB color-head-modal",
						onshow: function(dialogRef) {
							var modalBody = dialogRef.getModalBody();
							cargarImagenesBibliotecaPersonal(modalBody);
							if($.ezdz.isBrowserCompatible() === false){
								console.log('No ezdz for this browser. Standard input file only.');
							}
							else{
								if(nodo.hasClass("banner-top")){
									var valiJson = {
										maxWidth: 1600,
										maxHeight: 500,
									}
								}
								else {
									var valiJson = {
										maxWidth: 400,
										maxHeight: 400,
									}
								}
								modalBody.find("#flImagen").ezdz({
									text: '<i class="fa fa-cloud-upload"></i> \
									<span class="spFlITitulo">Suelte el archivo a subir</span> \
									<span class="spFlITexto">o haga clic aquí</span>',
									validators: valiJson,
									accept: function(file) {
										modalBody.find("#errflImagen").html("");
									},
									reject: function(file, errors) {
										if (errors.maxWidth || errors.maxHeight) {
											modalBody.find("#errflImagen").html("La imagenno cumple con el tamaño indicado");
										}
									}
								});
							}
						},
						onshown: function(dialogRef) {
							var modalBody = dialogRef.getModalBody();
							modalBody.find("#btnCrearImagen").on("click", function(){
								NProgress.start();
								if(modalBody.find("#flImagen").val() != ""){
									var formData = new FormData();
									formData.append("file", modalBody.find("#flImagen")[0].files[0]);
									$.ajax({
										type: "POST",
										url: "{{ URL::route('SysWebPAterrizajeGenTemplateImagenes') }}",
										data: formData,
										cache: false,
										contentType: false,
										processData: false,
										dataType: "json",
										success: function(data){
											NProgress.done();
											modalBody.find("#btnCrearImagen").prop("disabled", false).html('<i class="fa fa-upload"></i> Subir imagen');
											modalBody.find("#frmImagen").find(".ezdz-dropzone > div").html('<i class="fa fa-cloud-upload"></i><span class="spFlITitulo">Suelte el archivo a subir</span><span class="spFlITexto">o haga clic aquí</span>');
											modalBody.find("#frmImagen").find("flImagen").val("");
											urlIcono = data.imagen;
											(nodo.hasClass("banner-top"))?ventana.find(".banner-top").attr("src", urlIcono):ventana.find(".banner-left").attr("src", urlIcono);
											(nodo.hasClass("banner-top"))?ventana.find(".img_route_tp").val(urlIcono):ventana.find(".img_route_tp").val(urlIcono);
											modalBody.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
											dialogRef.close();
										},
										error: function(jqXHR, textStatus, errorThrown){
											modalBody.find("#errGenerico").html("Ha ocurrido algún error inesperado, por favor vuelve a intentarlo...");
											NProgress.done();
											modalBody.find("#btnCrearImagen").prop("disabled", false).html('<i class="fa fa-upload"></i> Subir imagen');
										}
									});
								}
								else{
									//SI EL USUARIO SELECCIONÓ UNA IMÁGEN DE SU PROPIA BIBLIOTECA
									var urlIcono = modalBody.find("#slBiblioteca option:selected").attr("data-img-src");
									(nodo.hasClass("banner-top"))?ventana.find(".banner-top").attr("src", urlIcono):ventana.find(".banner-left").attr("src", urlIcono);
									(nodo.hasClass("banner-top"))?ventana.find(".img_route_lf").val(urlIcono):ventana.find(".img_route_lf").val(urlIcono);
									NProgress.done();
									modalBody.find("#btnCrearImagen").prop("disabled", false).html("Usar imagen");
									dialogRef.close();
								}
							});
						},
					});
				});
			},
			buttons: [{
				id: "btnAgregarA",
				label: "Guardar",
				cssClass: "btn-primary btn-block btn-lg",
				action: function(dialogItself){
					var images = [];
					var verificar = true;
					$(".imgSlTop").each(function(){
						if(images.indexOf($(this).val()) == -1){
							$(this).next().remove();
							images.push($(this).val());
						}
						else{
							$(this).next().remove();
							$(this).after('<span class="text-danger">Ya existe una imagen igual esta</span>');
							verificar = false;
						}
					});
					var agregar = true;
					$(".imgSlider").find("img").each(function(){
						if($(this).attr("src").indexOf("SumeClientes") > -1){
							agregar = false;
						}
					});
					if(verificar && agregar){
						NProgress.start();
						$("#btnAgregarA").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
						$("#frmBanner").append('<input type="hidden" name="tipoC" class="guardarap" value="guardar">');
						$.post(
							"{{ URL::route('SysWebVentasArtesxCampanha', array()) }}",
							$("#frmBanner").serialize(),
							function(data){
								NProgress.done();
								$("#btnEliminar").html("Guardar").prop("disabled", false);
								$("#frmBanner").find(".guardarap").remove();
								if(data.success){
									dialogItself.close();
									new PNotify({ title: "Realizado", 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 != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
								}
							},
							"json"
						);
					}
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function cargarImagenesBibliotecaPersonal(ubicacion){
		$.get(
			$("#rutabibliotecascliente").val()+$("#cid").val(),
			function(data){
				if(data.success){
					ubicacion.find("#slBiblioteca").html("").append('<option value=""></option>');
					$.each(data.biblioteca, function(index, val) {
						ubicacion.find("#slBiblioteca").append("<option data-img-src='"+val.ruta+"' value='"+val.id+"'>");
					});
					ubicacion.find("#slBiblioteca").imagepicker({
						hide_select:true, 
						show_label:true
					});
					var i = 0;
					ubicacion.find(".image_picker_selector").find("div.thumbnail").each(function(){
						$(this).prepend('<a class="text-danger" href="javascript:EliminarImagenBiblioteca('+data.biblioteca[i].id+')" title="Eliminar imagen de biblioteca"> <i class="fa fa-trash"> </i> </a>');
						i = i + 1;
					});
					ubicacion.find(".image_picker_selector").find("[title]").each(function(){
						$(this).tooltip();
					});
					$(".agregarIcono").find("#Biblioteca").find(".thumbnail").find("img").each(function(){
						$(this).removeClass("image_picker_image");
						if($(this).width() > 64){
							$(this).closest("li").addClass("hide");
						}
						else{
							$(this).closest("li").removeClass("hide");
						}
						$(this).addClass("image_picker_image");
					});
					ubicacion.find("#Biblioteca").find(".thumbnail").find("img").each(function(){
						$(this).removeClass("image_picker_image");
						if(ubicacion.closest(".modal").hasClass("ModalCambiarImgSB")){
							if($(this).width() != 400 && $(this).height() != 400){
								$(this).closest("li").addClass("hide");
							}
							else{
								$(this).closest("li").removeClass("hide");
							}
						}
						else if(ubicacion.closest(".modal").hasClass("ModalCambiarImgB")){
							if($(this).width() != 1600 && $(this).height() != 500){
								$(this).closest("li").addClass("hide");
							}
							else{
								$(this).closest("li").removeClass("hide");
							}
						}
						$(this).addClass("image_picker_image");
					})
				}
				else{
					ubicacion.find("#slBiblioteca").hide();
					ubicacion.find(".thumbnails").remove();
					ubicacion.find("#Biblioteca").append('<div id="dvWrBiblioteca" class="alert alert-warning" role="alert"> Aún no tienes ningúna imagen almacenada en tu biblioteca </div>');
				}
			},
			"json"
		);
	}
	function EliminarImagenBiblioteca(id){
		var id = id;
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmEliminar'> \
					<h2> Asegurate que ninguna de tus otras plantillas esté utilizando esta imágen pues al eliminarla de tu biblioteca dejará de mostrarse en todos los lugares donde hayas utilizado esta imágen. </h2> \
				</form> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Eliminar imágen de biblioteca",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar",
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger",
				action: function(dialogItself){
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
					$.post(
						"{{ URL::route('SysWebPAterrizajeBibliotecaImagenesClientesEliminar', array(Cliente::select('id')->where('users_id', '=', Auth::user()->id)->first()->id)) }}",
						{id:id},
						function(data){
							dialogItself.close();
							$("#btnEliminar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
								$.get(
									$("#rutabibliotecascliente").val()+$("#cid").val(),
									function(data){
										if(data.success){
											$("#slBiblioteca").html("");
											$("#slBiblioteca").append('<option value=""></option>');
											$.each(data.biblioteca, function(index, val) {
												$("#slBiblioteca").append("<option data-img-src='"+val.ruta+"' value='"+val.id+"'>");
											});
											$("#slBiblioteca").imagepicker({ hide_select : true, show_label  : true });
											var i = 0;
											$("#Biblioteca").find("div.thumbnail").each(function(){
												$(this).prepend('<a href="javascript:EliminarImagenBiblioteca('+data.biblioteca[i].id+')"> <span class="text-danger" style="text-align: center;margin: 0 auto;"> <i class="fa fa-trash"> </i> </span> </a>');
												i = i + 1;
											});
											$("#Biblioteca").find("[title]").each(function(){ $(this).tooltip(); });
										}
										else{
											$("#slBiblioteca").hide();
											$("#Biblioteca").css("height", "");
											$("#Biblioteca").append('<div class="alert alert-warning" role="alert"> Aún no tienes ningúna imágen almacenada en tu biblioteca </div>');
										}
									},
									"json"
								);
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
							}
						},
						"json"
					);
				}
			}]
		});
	}
</script>
@stop

@section('JSOr')
$("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) { $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); });
$("#tblCampanhasDePromo").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebVentasCampanhas') }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [
		{data: "nombre", name: "nombre"},
		{data: "tipo", name: "tipo", "searchable": false},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
	},
	autoWidth: false,
	responsive: true,
	//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);
	}
});
@if(Session::has('EliminarMensajeS'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeS') }}", type: "success" });
@endif
@if(Session::has('EliminarMensajeE'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeE') }}", type: "error" });
@endif
@stop