@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('SysWeb/SumeClientes/Preloader.min.css') }}
{{-- LIBRERÍAS EXTERNAS NECESARIAS PARA SU EJECUCIÓN --}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
{{ HTML::style('SysWeb/SumeClientes/BootstrapMod.css') }}
{{ HTML::style('WebPro/bootstrap/bower_components/bootstrapcolorpicker/dist/css/bootstrap-colorpicker.min.css') }}
{{ HTML::style('bootstrap-colorpicker/css/bootstrap-colorpicker.min.css') }}
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
<link rel="stylesheet" href="https://fontastic.s3.amazonaws.com/mBcpKha37mryLvEf955bD9/icons.css">
{{ HTML::style('jQueryUI/Vader/jquery-ui.min.css') }}
{{ HTML::style('jQueryUI/Vader/jquery-ui.structure.min.css') }}
{{ HTML::style('jQueryUI/Vader/jquery-ui.theme.min.css') }}
{{ HTML::style('jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.css') }}
{{ HTML::style('bootstrap-slider/bootstrap-slider.min.css') }}
{{ HTML::style('VideoJS/video-js.css') }}
{{ HTML::script('VideoJS/videojs-ie8.min.js') }}
{{ HTML::style('image-picker/image-picker.css') }}
{{ HTML::style('WebPro/plugins/dropzone/dropzone.css') }}
{{-- HTML::style('SysWeb/SumeClientes/bootstrap-all-min.css') --}}
{{ HTML::style('SysWeb/SumeClientes/BootstrapMod.css?=v0.1.59') }}
{{ HTML::style('SysWeb/SumeClientes/bootstrap-custom-breakpoint.css?=v0.1.59') }}
{{ HTML::style('SysWeb/SumeClientes/EditorDeFormularios.min.css?=v0.1.27') }}
{{ HTML::style('jsSocials/jssocials-all.min.css') }}
{{ HTML::style('jQuery-Loading/jquery.loading.min.css') }}
{{ HTML::style('bootstrap-treeview/bootstrap-treeview.min.css') }}
{{ HTML::style('TouchSpin/jquery.bootstrap-touchspin.min.css') }}
{{-- HTML::style('jresize/css/global.css') --}}
{{ HTML::style('SysWeb/SumeClientes/Testimonios/testimonios.css?=v0.1.59') }}
{{ HTML::style('SysWeb/SumeClientes/TextoImagen/textoimagen.css?=v0.1.59') }}
{{ HTML::style('gentemplate/css/boton-accion.css?=v0.1.59') }}
{{ HTML::style('Intl-Tel-Input/17.0.3/css/intlTelInput.min.css') }}
{{-- GALERIA --}}
{{ HTML::style("JQueryMediaBoxes/plugin/components/Magnific Popup/magnific-popup.css") }}
{{ HTML::style("JQueryMediaBoxes/plugin/components/Fancybox/jquery.fancybox.min.css") }}
{{ HTML::style("JQueryMediaBoxes/plugin/css/mediaBoxes.css") }}
{{-- GENTEMPLATES --}}
{{-- HTML::style('gentemplate/css/app.css') --}}
{{ HTML::style('gentemplate/css/app.min.css?=v0.1.59') }}
{{-- HTML::style('gentemplate/css/edit.css?v='.date('H:i:s')) --}}
{{ HTML::style('gentemplate/css/edit.min.css?=v0.1.59') }}
{{-- HTML::style('gentemplate/css/editor.css?v='.date('H:i:s')) --}}
{{ HTML::style('gentemplate/css/min/editor.min.css?=v0.1.59') }}
<!-- FUENTES GENÉRICAS -->
{{-- HTML::style('SysWeb/SumeClientes/Fonts/Fuentes.css') --}}
{{ HTML::style('SysWeb/SumeClientes/Fonts/Fuentes.min.css?=v0.1.59') }}
<link id="Adamia" href="https://fonts.googleapis.com/css?family=Adamina" rel="stylesheet" type="text/css">
<link id="DancingScript" href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">
<link id="DroidSans" href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">
<link id="JustAnotherHand" href="https://fonts.googleapis.com/css?family=Just+Another+Hand" rel="stylesheet" type="text/css">
<link id="LobsterTwo" href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">
<link id="Montserrat" href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link id="NixieOne" href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet" type="text/css">
<link id="OpenSans" href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link id="Oswald" href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link id="Pacifico" href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link id="ShadowsIntoLightTwo" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet" type="text/css">
<link id="TheGirlNextDoor" href="https://fonts.googleapis.com/css?family=The+Girl+Next+Door" rel="stylesheet" type="text/css">
<link id="BubblegumSans" href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet" type="text/css">
<link id="LondrinaSolid" href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet" type="text/css">
<link id="RockSalt" href="//fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css">
<link id="Dosis" href="//fonts.googleapis.com/css?family=Dosis" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/ezdz@0.4.3/src/jquery.ezdz.css">
<link href="https://fonts.googleapis.com/css?family=Acme|Anton|Archivo+Narrow|Arimo|Asap|Bangers|Cabin|Fira+Sans|Indie+Flower|Josefin+Sans|Lato|Luckiest+Guy|Monoton|Nanum+Gothic|Nunito|Orbitron|PT+Sans|Permanent+Marker|Poiret+One|Poppins|Raleway|Roboto|Rubik|Source+Sans+Pro|Ubuntu" rel="stylesheet">
<style>
#modalCrearElemento .check-post label::before, .check-post label::after {
 margin-top: 7px;
}
</style>
@stop

@section('Contenido')
<div id="errCompatibilidad"></div>
<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">
															@include('GenTemplate.variables-ocultas')
			<div class="porlets-content" id="Resizer">
				<div class="viewports" style="">
					<ul class="viewlist" style="">
						<li id="liTi" class="480px" style="" title="Vista previa en teléfonos inteligentes" onclick="veriFrame('TI')">
							<i class="fa fa-mobile"></i>
						</li>
						<li id="liT" class="800px" style="" title="Vista previa tablets y iPads" onclick="veriFrame('T')">
							<i class="fa fa-tablet"></i>
						</li>
						<li id="liC" class="1280px" style="" title="Vista previa computadoras" onclick="veriFrame('C')">
							<i class="fa fa-laptop"></i>
						</li>

						<li class="btnGuardaryContinuar notexto" style="" title="Guardar y continuar">
							<i class="fa fa-check-square-o"></i>
						</li>
						<li class="btnGuardar notexto" style="" title="Guardar y cerrar">
							<i class="fa fa-floppy-o"></i>
						</li>
						<li class="btnCerrarEditor" style="" title="Cerrar el editor" onclick="location.href='{{ URL::route('SysWebPAterrizajePlantillaxCliente') }}'">
							<i class="fa fa-times"></i>
						</li>
					</ul>
					<div style="clear:both;"></div>
				</div>
				<div id="printable" class="main-sortable">
					{{ $PlantillaxCliente->contenido_html }}
				</div>
			</div>
		</div>
		
	</div>
</div><!--/row end-->

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalMobil" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
				<h4 id="myModalLabel" class="modal-title"> Vista previa en teléfono inteligente </h4>
			</div>
			<div class="modal-body">
				<div id="dvContenedoriFrame"  class="iframe-container" style="/*text-align: center;*/">
					<iframe id="iFCodigoHTML" src="#" name="iFCodigoHTML"></iframe>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" type="button" id="btnRotariFrame"> Rotar </button>
			</div>
		</div>
	</div>
</div>

@stop

@section('GenTemplate')
@include('GenTemplate.cajas-de-herramientas')
@stop

@section('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">
	/* VARIABLES NECESARIAS PARA */
	var paleta = new Array();
	var edicion = true;
	var clipboardElement = "";
	var tipoClipboard = "";
	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"
		}
	];
</script>
{{ HTML::script('SysWeb/SumeClientes/Preloader.min.js?=v0.1.59') }}
{{-- LIBRERÍAS EXTERNAS NECESARIAS PARA SU EJECUCIÓN --}}
<script type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyA_RJ3RLP-n_eyjN1jXzEkLNt3vcwBxEEY"></script>
{{ HTML::script('GMaps/gmaps.min.js') }}
{{ HTML::script('bootstrap-datetimepicker/js/moment-with-locales.js') }}
{{-- HTML::script('jQueryUI/NT/jquery-ui.min.js') --}}
{{ HTML::script('jQueryUI/Vader/jquery-ui.min.js') }}
{{ HTML::script('jQueryUI/i18n/datepicker-es.js') }}
{{ HTML::script('VideoJS/video.min.js') }}
{{ HTML::script('VideoJS/Youtube.min.js') }}
{{ HTML::script('YTPlayer/jquery.mb.YTPlayer.min.js') }}
{{-- HTML::script('VideoJS/Vimeo.js') --}}
{{-- HTML::script('jresize/js/jresize.js') --}}
{{ HTML::script('bootstrap-slider/bootstrap-slider.min.js') }}
{{ HTML::script('bootstrap-colorpicker/js/bootstrap-colorpicker.min.js') }}
{{ HTML::script('jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js') }}
{{ HTML::script('jquery-ui-timepicker-addon/jquery-ui-timepicker-es.js') }}
{{ HTML::script('bootstrap-treeview/bootstrap-treeview.min.js') }}
{{ HTML::script('jQueryValidate/jquery.validate.min.js') }}
{{ HTML::script('jQueryValidate/additional-methods.min.js') }}
{{ HTML::script('jQueryValidate/jquery.validationEngine-es.js') }}
{{ HTML::script('ClockDown/jquery.responsive_countdown.min.js') }}
{{ HTML::script('WebPro/plugins/dropzone/dropzone.min.js') }}
{{ HTML::script('image-picker/image-picker.min.js') }}
{{ HTML::script('jsSocials/jssocials.min.js') }}
{{ HTML::script('jQuery-Loading/jquery.loading.min.js') }}
{{ HTML::script('jquery-browser-plugin/jquery.browser.min.js') }}
{{ HTML::script('twbsPagination/jquery.twbsPagination.min.js') }}
{{ HTML::script('bootstrap-number-input/bootstrap-number-input.js') }}
{{ HTML::script('TouchSpin/jquery.bootstrap-touchspin.min.js') }}
{{ HTML::script('jQueryMatchHeight/jquery.matchHeight-min.js') }}
{{ HTML::script('Intl-Tel-Input/17.0.3/js/intlTelInput-jquery17-0-16.min.js') }}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ezdz@0.4.3/src/jquery.ezdz.js"></script>
{{-- GALERIA --}}
{{ HTML::script("JQueryMediaBoxes/plugin/components/Isotope/jquery.isotope.min.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/components/imagesLoaded/jquery.imagesLoaded.min.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/components/Transit/jquery.transit.min.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/components/jQuery Easing/jquery.easing.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/components/Waypoints/waypoints.min.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/components/Modernizr/modernizr.custom.min.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/components/Magnific Popup/jquery.magnific-popup.min.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/js/jquery.mediaBoxes.dropdown.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/js/jquery.mediaBoxes.js") }}
{{ HTML::script("JQueryMediaBoxes/plugin/components/Fancybox/jquery.fancybox.min.js") }}
{{ HTML::script('jQuery-Text-Counter/textcounter.min.js') }}
{{ HTML::script('Alphanum/jquery.alphanum.min.js') }}
<!-- GenTemplate -->
{{ HTML::script('gentemplate/js/timezones.js?=v0.1.59') }}
{{ HTML::script('UnderscoreJS/underscore-min.js') }}
{{ HTML::script('Spectrum/spectrum.min.js') }}
{{ HTML::script('Spectrum/jquery.spectrum-es.min.js') }}
<script type="text/javascript"> $.widget.bridge("uitooltip", $.ui.tooltip); </script>
{{ HTML::script('gentemplate/js/fonts.js?=v0.1.59') }}
{{-- HTML::script('gentemplate/js/editor.js?v='.date('H:i:s')) --}}
{{ HTML::script('gentemplate/js/min/editor.min.js?=v0.1.59') }}
{{-- HTML::script('gentemplate/js/inicializadorEditor.js?='.date('H:i:s')) --}}
{{ HTML::script('gentemplate/js/min/inicializadorEditor.min.js?=v0.1.59') }}
<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",
				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"
					);
				}
			}]
		});
	}
	function EliminarArchivoBiblioteca(id){
		var id = id;
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmEliminarArchivo'> \
					<h2> Asegurate que ninguna de tus otras plantillas esté utilizando este documento pues al eliminarlo de tu biblioteca dejará de descargarse en todos los lugares donde lo hayas vinculado. </h2> \
					<input type='hidden' name='id' value='"+id+"'> \
					<input type='hidden' name='accion' value='eliminar'> \
				</form> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Eliminar archivo 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('SysWebPAterrizajeBibliotecaArchivosClientes', array(Cliente::select('id')->where('users_id', '=', Auth::user()->id)->first()->id)) }}",
						$("#frmEliminarArchivo").serialize(),
						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){
											$(".dvArchivo"+id).remove();
										}
										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 veriFrame(dispositivo){
		$.isLoading({ text: "Cargando..." }); NProgress.start();
		var dispositivo = dispositivo;
		if(dispositivo == 'TI'){
			var boton = $("#liTi");
			var mobile = true;
		}
		else if(dispositivo == 'T'){
			var boton = $("#liT");
			var mobile = true;
		}
		else if(dispositivo == 'C'){
			var boton = $("#liC");
			var mobile;
		}
		var texto = boton.html();
		boton.html('<i class="fa fa-spinner fa-spin" style="font-size: 24px;"></i>');
		generarHTML();
		$.post(
			"{{ URL::route('SysWebPAterrizajePlantillaxClienteVeriFrame', array($PlantillaxCliente->id)) }}",
			{ codigoHTML:$("#codigo_html").val(), mobile:mobile },
			function(data){
				boton.html( texto );
				$.isLoading("hide"); NProgress.done();
				if(data.success){
					var iframe = $("#iFCodigoHTML");
					var doc = iframe[0].contentWindow.document;
					doc.open();
					//doc.write("<!DOCTYPE HTML>"+unescape(data.codigoHTML));
					doc.write("<!DOCTYPE HTML>"+data.codigoHTML);
					doc.close();
					if(dispositivo == 'TI'){
						$("#modalMobil").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-movil portrait");
						$("#modalMobil").find(".modal-footer").show();
					}
					else if(dispositivo == 'T'){
						$("#modalMobil").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-tablet portrait");
						$("#modalMobil").find(".modal-footer").show();
					}
					else if(dispositivo == 'C'){
						$("#modalMobil").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-desktop");
						$("#modalMobil").find(".modal-footer").hide();
					}
					$("#modalMobil").modal("show");
				}
				else{
					if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
				}
				$("#modalMobil").on("hidden.bs.modal", function(e){
					var iframe = $("#iFCodigoHTML");
					var doc = iframe[0].contentWindow.document;
					doc.open();
					doc.write("");
					doc.close();
				});
			},
			"json"
		);
		generarMenus($("#printable"), 0);
	}