<?php $Cliente = (Auth::user()->tipo == 'EC')?Cliente::find(Empleado::select('clientes_id AS id')->where('users_id', '=', Auth::id())->first()->id):Cliente::find(Cliente::select('id')->where('users_id', '=', Auth::id())->first()->id); ?>
<input type="hidden" id="cid" value="<?php echo $Cliente->id; ?>">
<input type="hidden" id="rutabibliotecascliente" value="<?php echo URL::route('SysWebPAterrizajeBibliotecaImagenesClientes', array('')); ?>/">
<input type="hidden" id="hdnRutaImagenes" value="<?php echo URL::route('SysWebPAterrizajeGenTemplateImagenes'); ?>">
<input type="hidden" id="rutabibliotecasc" value="<?php echo URL::route('SysWebPAterrizajeBibliotecaImagenesSC'); ?>">
<script type="text/javascript">
	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 btn-lg btn-block",
				action: function(dialogItself){
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
					$.post(
						"<?php echo URL::route('SysWebPAterrizajeBibliotecaImagenesClientesEliminar', array($Cliente->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"
					);
				}
			}]
		});
	}
	function ventanaDeBiblioteca(botonParaAbrir, hiddenDeRuta, limiteDeTamanhos, soloSubir, soloPropias){
		//botonParaAbrir = Botón para abrir la ventana de la biblioteca de imagen.
		//hiddenDeRuta = Input Hidden que servirá para insertar la ruta y pormedio de trigger change realizar lo necesario con la imagen.
		//limiteDeTamanhos = Si el valor es 0 entonces se tomarán en cuenta las medidas separadas por X
		//soloSubir= Deshabilita la opción de poner rutas de imágenes
		//soloPropias = No muestra la barra de listado de imagenes
		//PREPARO LA VALIDACIÓN DE TAMAÑOS ------------
		var dataLDT = "";
		var mensajeMedidas = "";
		var hayLimiteDeTamanhos = false;
		if( limiteDeTamanhos != 0 ){
			hayLimiteDeTamanhos = true;
			var tamanhos = limiteDeTamanhos.split("X");
			var dataLDT = limiteDeTamanhos;
			mensajeMedidas = "<li> Las imagenes deben tener las medidas: "+limiteDeTamanhos+" px </li>";
		}
		//---------------------------------------------
		//OCULTAR LISTADO DE BIBLIOTECAS -----------------------------
		var listadoDeBibliotecas = "";
		var sinListadoDeBibliotecas = 'col-md-8';
		if( soloPropias == false ){
			listadoDeBibliotecas = '<div class="col-xs-12 col-md-2"> \
				<div id="tree" class="treeview"></div> \
			</div>';
			sinListadoDeBibliotecas = 'col-md-6';
		}
		//------------------------------------------------------------
		//OCULTAR IMAGEN DE IMAGEN EXTERNA -------------
		var ocultarRutaImagenExterna = "";
		if( soloSubir ){
			ocultarRutaImagenExterna = 'display: none;';
		}
		//----------------------------------------------
		botonParaAbrir.click(function(e){
			var boton = $(this);
			var mensaje = '<div class="col-md-12"> \
				<div class="row"> \
					'+listadoDeBibliotecas+' \
					<div class="col-xs-12 '+sinListadoDeBibliotecas+'" data-limiteDeTamanhos="'+dataLDT+'"> \
						<label> Selecciona una imagen de la biblioteca de imagenes </label> \
						<div style="height: 465px; overflow: auto;" id="Biblioteca"> \
							<select id="slBiblioteca" style="visibility: hidden;"></select> \
						</div> \
					</div> \
					<div class="col-xs-12 col-md-4"> \
						<div class="row"> \
							<div class="col-md-12"> \
								<label> Ó Sube tu imagen (Esta se almacenará en tu biblioteca y podras utilizarla cuantas veces quieras) </label> \
								<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" role="alert"> \
									<ul> \
										<li> Las imagenes no deben tener un tamaño mayor a 1MB </li> \
										<li> Solo aceptamos imágenes en formato JPG, PNG y GIF </li> \
										'+mensajeMedidas+' \
									</ul> \
								</div> \
							</div> \
							<div class="col-md-12" style="/*padding-top: 5px;*/"> \
								<div class="form-group" style="'+ocultarRutaImagenExterna+'"> \
									<label> Ó escriba la ruta de la imagen </label> \
									<input type="text" class="form-control" id="txtImagen"></input> \
								</div> \
								<div class="form-group"> \
									<button type="button" class="btn btn-primary btn-block btn-lg" id="btnCrearImagen"> Usar imagen </button> \
								</div> \
							</div> \
						</div> \
					</div> \
				</div> \
			</div>';
			BootstrapDialog.show({
				title: "Biblioteca de imagenes",
				type: BootstrapDialog.TYPE_DEFAULT,
				message: mensaje,
				draggable: true,
				cssClass: "ModalBiblioteca mdAvatar",
				onshown: function(dialogRef){
					$("body").addClass("modal-open");
					var modalBody = dialogRef.getModalBody();
					//CONFIGURACIÓN DEL MENÚ IZQUIERDO DE BIBLIOTECA ----------------------
					if($.ezdz.isBrowserCompatible() === false){
						console.log('No ezdz for this browser. Standard input file only.');
					}
					else{
						var validador = {
							maxSize: 1000000
						};
						if( hayLimiteDeTamanhos ){
							validador.width = parseInt(tamanhos[0]);
							validador.height = parseInt(tamanhos[1]);
						}
						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: validador
						});
					}
					//---------------------------------------------------------------------
					//ARMADO DE BIBLIOTECA DE IMÁGENES CARGADAS POR EL CLIENTE ----------------------------------------------------------------------------------------------------------------------------------------------
					$.get(
						$("#rutabibliotecascliente").val()+$("#cid").val(),
						function(data){
							if(data.success){
								modalBody.find("#slBiblioteca").html("").append('<option value=""></option>');
								$.each(data.biblioteca, function(index, val){
									modalBody.find("#slBiblioteca").append("<option data-img-src='"+val.ruta+"' value='"+val.id+"'>");
								});
								modalBody.find("#slBiblioteca").imagepicker({
									hide_select: true,
									show_label: true
								});
								var i = 0;
								modalBody.find(".image_picker_selector").find("div.thumbnail").each(function(){
									$(this).prepend('<a class="text-danger" href="javascript:EliminarImagenBiblioteca('+data.biblioteca[i].id+')" title="Eliminar imágen de biblioteca"> <i class="fa fa-trash"> </i> </a>');
									i = i + 1;
								});
								modalBody.find(".image_picker_selector").find("[title]").each(function(){
									$(this).tooltip();
								});
								//OCULTO LAS IMÁGENES QUE NO CUMPLAN CON LAS CONDICIONES DE LOS TAMAÑOS --------------------
								if( hayLimiteDeTamanhos ){
									modalBody.find(".image_picker_selector").find(".thumbnail").find("img").each(function(){
										var nodo = $(this);
										var img = new Image();
										img.src = nodo.attr("src");
										img.onload = function(e){
											var alto = parseInt( img.height );
											var ancho = parseInt( img.width );
											if( alto == parseInt(tamanhos[0]) && ancho == parseInt(tamanhos[1]) ){
												nodo.closest("li").removeClass("hide");
											}
											else{
												nodo.closest("li").addClass("hide");
											}
										};
									});
								}
								//------------------------------------------------------------------------------------------
							}
							else{
								modalBody.find("#slBiblioteca").hide();
								modalBody.find("#Biblioteca").append('<div id="dvWrBiblioteca" class="alert alert-warning" role="alert"> Aún no tienes ningúna imágen almacenada en tu biblioteca </div>');
							}
						},
						"json"
					);
					//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
					modalBody.find("#btnCrearImagen").click(function(e){
						$.isLoading({ text: "Cargando..." }); NProgress.start();
						modalBody.find("#btnCrearImagen").html('<i class="fa fa-spinner fa-spin"></i> Cargando').prop("disabled", true);
						if(modalBody.find("#flImagen").val() != ""){
							var formData = new FormData();
							formData.append("file", modalBody.find("#flImagen")[0].files[0]);
							$.ajax({
								type: "POST",
								url: "<?php echo URL::route('SysWebPAterrizajeGenTemplateImagenes'); ?>",
								data: formData,
								cache: false,
								contentType: false,
								processData: false,
								dataType: "json",
								success: function(data){
									var urlImg = data.imagen;
									hiddenDeRuta.val(urlImg).trigger("change");
									modalBody.find("#btnCrearImagen").prop("disabled", false).html('<i class="fa fa-upload"></i> Subir imagen');
									$.isLoading("hide"); NProgress.done();
									dialogRef.close();
								},
								error: function(jqXHR, textStatus, errorThrown){
									modalBody.find("#errGenerico").html("Ha ocurrido algún error inesperado, por favor vuelve a intentarlo...");
									$.isLoading("hide"); NProgress.done();
									modalBody.find("#btnCrearImagen").prop("disabled", false).html('<i class="fa fa-upload"></i> Subir imagen');
								}
							});
						}
						else if( modalBody.find("#txtImagen").val() == "" && modalBody.find("#slBiblioteca").val() == ""){
							$.isLoading("hide"); NProgress.done();
							new PNotify({ title: "Error", text: "Debes seleccionar una imágen de la biblioteca, subir una imágen o ingresar la ruta de la imágen que deseas almacenar", type: "error" });
						}
						else{
							if( modalBody.find("#txtImagen").val() != "" ){
								var value = modalBody.find("#txtImagen").val();
							}
							else{
								var value = modalBody.find("#slBiblioteca option:selected").attr("data-img-src");
							}
							var img = new Image();
							img.src = value;
							img.onload = function(){
								if(img.height != 0){
									var insertarImagen = true;
									//VALIDACIÓN DE TAMAÑOS DE LA IMAGEN ------------------------------------------------------------------------------------------------
									if( hayLimiteDeTamanhos ){
										var alto = parseInt( img.height );
										var ancho = parseInt( img.width );
										if( alto == parseInt(tamanhos[0]) && ancho == parseInt(tamanhos[1]) ){
											insertarImagen = true;
										}
										else{
											insertarImagen = false;
											new PNotify({ title: "Error", text: "La imágen no pudo ser cargada, porqué no tiene las medidas adecuadas", type: "error" });
											modalBody.find("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
											dialogRef.close();
											$.isLoading("hide"); NProgress.done();
										}
									}
									//-----------------------------------------------------------------------------------------------------------------------------------
									if( insertarImagen ){
										boton.attr("src", value);
										if( boton[0].hasAttribute("data-hdn") ){
											var eliminar = false;
											if( $("#"+boton.attr("data-hdn")).length == 1 ){
												if( $("#"+boton.attr("data-hdn")).attr("name") == "fotografia_extra[]" ){
													eliminar = true;
												}
											}
											else{
												eliminar = true;
											}
											if( eliminar ){
												$("#"+boton.attr("data-hdn")).remove();
												var numero = boton.attr("data-hdn").replace( /^\D+/g, "");
												boton.after('<input type="hidden" name="fotografia_extra[]" id="hdnFotografia'+numero+'">');
											}
											$("#"+boton.attr("data-hdn")).val(value);
										}
										else{
											hiddenDeRuta.val(value).trigger("change");
										}
										modalBody.find("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
										dialogRef.close();
										$.isLoading("hide"); NProgress.done();
									}
								}
								else{
									new PNotify({ title: "Error", text: "La imágen no pudo ser cargada, por favor vuelve a intentarlo", type: "error" });
									modalBody.find("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
									dialogRef.close();
									$.isLoading("hide"); NProgress.done();
								}
							};
							img.onerror = function(){
								new PNotify({ title: "Error", text: "La imágen no pudo ser cargada, por favor vuelve a intentarlo", type: "error" });
								modalBody.find("#btnCrearImagen").html("Usar imágen").prop("disabled", false);
								dialogRef.close();
								$.isLoading("hide"); NProgress.done();
							};
						}
					});
					if( soloPropias == false ){
						treeViewDeBiblioteca( modalBody );
					}
				},
				onhidden: function(dialogRef){
					$("body").removeClass("modal-open");
					var modalBody = dialogRef.getModalBody();
				}
			});
		});
	}
	function treeViewDeBiblioteca(ventanaDeBiblioteca){
		var treeviewData = [
			{
				text: "Biblioteca Sume Clientes",
				filtro: "BiblioSume",
				nodes: [
					{
						text: "Flechas",
						filtro: "Flechas",
						nodes: [
							{ text: "Animadas", filtro: "Flechas Animadas" },
							{ text: "No animadas", filtro: "Flechas No Animadas" }
						]
					},
					{
						text: "Iconos",
						filtro: "Iconos",
						nodes: [
							{ text: "Set 1", filtro: "Iconos Set 1" },
							{ text: "Set 2", filtro: "Iconos Set 2" },
							{ text: "Set 3", filtro: "Iconos Set 3" },
							{ text: "Set 4", filtro: "Iconos Set 4" },
							{ text: "Set 5", filtro: "Iconos Set 5" },
							{ text: "Set 6", filtro: "Iconos Set 6" },
							{ text: "Set 7", filtro: "Iconos Set 7" },
							{ text: "Set 8", filtro: "Iconos Set 8" }
						]
					},
					{ text: "Imagenes de fondo", filtro: "Fondos" }
				]
			},
			{
				text: "Biblioteca Personal",
				filtro: "BiblioPersonal",
				state: { selected: true },
			},
			{
				text: "Biblioteca de PixaBay",
				filtro: "PixaBay"
			}
		];
		//PREPARO LA VALIDACIÓN DE TAMAÑOS ------------------------------------------------------------------------------
		var hayLimiteDeTamanhos = false;
		if( ventanaDeBiblioteca.find('[data-limiteDeTamanhos]').length == 1 ){
			if( ventanaDeBiblioteca.find('[data-limiteDeTamanhos]').attr("data-limiteDeTamanhos") != "" ){
				hayLimiteDeTamanhos = true;
				var limiteDeTamanhos = ventanaDeBiblioteca.find('[data-limiteDeTamanhos]').attr("data-limiteDeTamanhos");
				var tamanhos = limiteDeTamanhos.split("X");
			}
		}
		//---------------------------------------------------------------------------------------------------------------
		ventanaDeBiblioteca.find("#tree").treeview({
			data: treeviewData,
			onNodeSelected: function(event, data) {
				ventanaDeBiblioteca.find("#dvWrBiblioteca").remove();
				ventanaDeBiblioteca.find("#errBusquedaPixaBay").remove();
				$("#txtBusquedaPixaBay").val("");
				if( data.filtro == "BiblioPersonal" ){
					$(".dvPixaBay").hide("slow");
					$.get(
						$("#rutabibliotecascliente").val()+$("#cid").val(),
						function(data){
							if(data.success){
								ventanaDeBiblioteca.find("#slBiblioteca").html("").append('<option value=""></option>');
								$.each(data.biblioteca, function(index, val) {
									ventanaDeBiblioteca.find("#slBiblioteca").append("<option data-img-src='"+val.ruta+"' value='"+val.id+"'>");
								});
								ventanaDeBiblioteca.find("#slBiblioteca").imagepicker({
									hide_select: true,
									show_label: true
								});
								var i = 0;
								ventanaDeBiblioteca.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;
								});
								ventanaDeBiblioteca.find(".image_picker_selector").find("[title]").each(function(){
									$(this).tooltip();
								});
								//OCULTO LAS IMÁGENES QUE NO CUMPLAN CON LAS CONDICIONES DE LOS TAMAÑOS ------------------------------
								if( hayLimiteDeTamanhos ){
									ventanaDeBiblioteca.find(".image_picker_selector").find(".thumbnail").find("img").each(function(){
										var nodo = $(this);
										var img = new Image();
										img.src = nodo.attr("src");
										img.onload = function(e){
											var alto = parseInt( img.height );
											var ancho = parseInt( img.width );
											if( alto == parseInt(tamanhos[0]) && ancho == parseInt(tamanhos[1]) ){
												nodo.closest("li").removeClass("hide");
											}
											else{
												nodo.closest("li").addClass("hide");
											}
										};
									});
								}
								//----------------------------------------------------------------------------------------------------
							}
							else{
								ventanaDeBiblioteca.find("#slBiblioteca").hide();
								ventanaDeBiblioteca.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"
					);
				}
				else if( data.filtro == "PixaBay" ){
					ventanaDeBiblioteca.find(".dvPixaBay").show("slow");
					ventanaDeBiblioteca.find("#slBiblioteca").html("").append('<option value=""></option>');
					ventanaDeBiblioteca.find("#slBiblioteca").imagepicker({
						hide_select: true,
						show_label: true
					});
					ventanaDeBiblioteca.find("#PaginacionPixaBay").twbsPagination("destroy");
				}
				else{
					ventanaDeBiblioteca.find(".dvPixaBay").hide("slow");
					$.post(
						$("#rutabibliotecasc").val(),
						{filtro: data.filtro},
						function(data){
							if(data.success){
								ventanaDeBiblioteca.find("#slBiblioteca").html("").append('<option value=""></option>');
								$.each(data.biblioteca, function(index, val) {
									ventanaDeBiblioteca.find("#slBiblioteca").append("<option data-img-src='"+val.ruta+"' value='"+val.id+"'>");
								});
								ventanaDeBiblioteca.find("#slBiblioteca").imagepicker({
									hide_select: true,
									show_label: true
								});
							}
							else{
								ventanaDeBiblioteca.find("#slBiblioteca").hide();
							}
						},
						"json"
					);
				}
			}
		});
		$.get(
			$("#rutabibliotecascliente").val()+$("#cid").val(),
			function(data){
				if(data.success){
					ventanaDeBiblioteca.find("#slBiblioteca").html("").append('<option value=""></option>');
					$.each(data.biblioteca, function(index, val) {
						ventanaDeBiblioteca.find("#slBiblioteca").append("<option data-img-src='"+val.ruta+"' value='"+val.id+"'>");
					});
					ventanaDeBiblioteca.find("#slBiblioteca").imagepicker({
						hide_select: true,
						show_label: true
					});
					var i = 0;
					ventanaDeBiblioteca.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;
					});
					ventanaDeBiblioteca.find(".image_picker_selector").find("[title]").each(function(){
						$(this).tooltip();
					});
					//OCULTO LAS IMÁGENES QUE NO CUMPLAN CON LAS CONDICIONES DE LOS TAMAÑOS ------------------------------
					if( hayLimiteDeTamanhos ){
						ventanaDeBiblioteca.find(".image_picker_selector").find(".thumbnail").find("img").each(function(){
							var nodo = $(this);
							var img = new Image();
							img.src = nodo.attr("src");
							img.onload = function(e){
								var alto = parseInt( img.height );
								var ancho = parseInt( img.width );
								if( alto == parseInt(tamanhos[0]) && ancho == parseInt(tamanhos[1]) ){
									nodo.closest("li").removeClass("hide");
								}
								else{
									nodo.closest("li").addClass("hide");
								}
							};
						});
					}
					//----------------------------------------------------------------------------------------------------
				}
				else{
					ventanaDeBiblioteca.find("#slBiblioteca").hide();
					ventanaDeBiblioteca.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"
		);
	}
</script>