@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('Prettify/prettify.min.css') }}
@stop


@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-envelope-o"></i> E-Mail Marketing </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-8 col-md-offset-2">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Formulario <strong> {{ $Formulario->nombre }} </strong> </div>
			<div class="porlets-content">
				<div class="text-center">
					<div id="codigo_html">
						<div id="dv{{ $Formulario->token }}" style="margin: 0 auto;">
							<iframe id="{{ $Formulario->token }}" style="width: 100%;" src="{{ URL::route('SysWebEmailMarketingFormulario', array($Formulario->token)) }}" frameborder="0" scrolling="no"></iframe>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom" id="dvCambiarAncho">
				<form class="form-horizontal">
					<div class="row">
						<div class="col-xs-12 col-md-2" style="float: none; margin: 0 auto;">
							<div class="form-group">
								<label> Ancho del formulario </label>
								<div class="input-group">
									<input class="form-control" type="text" id="widthiFrame">
									<span class="input-group-addon">px</span>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div><!--/row end-->
<div class="col-md-12">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header" style="display: inline;"> Código para pegar formulario en tu sitio </h3>
				<button id="btnCopiar" type="button" class="btn btn-success btnCopiar" data-clipboard-target="#codigo_wordpress_pre"> <i class="fa fa-copy"></i> </button>
			</div>
			<div class="porlets-content">
<pre class="prettyprint linenums lang-html" id="codigo_wordpress_pre" style="">
&lt;div style="margin: 0px auto;"&gt;
	&lt;iframe id="{{ $Formulario->token }}" style="width: 100%;" src="{{ URL::route('SysWebEmailMarketingFormulario', array($Formulario->token)) }}" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;script src="{{ asset('iframe-resizer/iframeResizer.min.js') }}"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
	&lt;!--
	iFrameResize({log:false, checkOrigin:false}, document.getElementById("{{ $Formulario->token }}"));
//--&gt;&lt;/script&gt;
</pre>
			</div>
			<div class="bottom"> </div>
		</div>
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('Prettify/prettify.min.js') }}
{{ HTML::script('Prettify/run_prettify.min.js') }}
{{ HTML::script('iframe-resizer/iframeResizer.min.js') }}
{{ HTML::script('ClipboardJS/clipboard.min.js') }}
<script type="text/javascript">
	iFrameResize({log:false}, document.getElementById("{{ $Formulario->token }}"));
	function recibirDisenho(e){
		if(e.data.Disenho == "V"){
			$("#codigo_html").addClass("col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3");
		}
		else if(e.data.Disenho == "H"){
			$("#codigo_html").addClass("col-xs-12");
			$("#dv{{ $Formulario->token }}").css("margin", "0 auto");
		}
	}
	window.addEventListener("message", recibirDisenho, false);
	function algo(){
		var codigo_wordpress = '<div id="{{ $Formulario->token }}" style="margin: 0px auto; max-width: '+$(this).val()+'px;"> \n\t<iframe id="{{ $Formulario->token }}" style="width: 100%;" src="{{ URL::route('SysWebEmailMarketingFormulario', array($Formulario->token)) }}" frameborder="0" scrolling="no"><\iframe><\/div>\n<script src="{{ asset('iframe-resizer/iframeResizer.min.js') }}"><\/script>\n<script type="text/javascript"> \n\t<!-- \n\tiFrameResize({log:false, checkOrigin:false}, document.getElementById("{{ $Formulario->token }}")); \n//--> <\/script>';
	}
</script>
@stop

@section('JSOr')
var clipboard = new Clipboard(".btnCopiar");
clipboard.on("success", function(e) {
	$("#"+e.trigger.id).tooltip({trigger: "manual", title: "Copiado!"});
	$("#"+e.trigger.id).tooltip("show");
	$("#"+e.trigger.id).html('<i class="fa fa-check"></i>');
	setTimeout(function(){ $("#"+e.trigger.id).html('<i class="fa fa-copy"></i>'); $("#"+e.trigger.id).tooltip("destroy"); }, 1000);
});
clipboard.on("error", function(e) {
	var msj = "";
	if(/iPhone|iPad/i.test(navigator.userAgent)) {
		msj = "El navegador web no soporta la función de copiado, debes hacerlo manualmente";
	}
	else if (/Mac/i.test(navigator.userAgent)) {
		msj = "Presiona ⌘-C para copiar";
	}
	else {
		msj = "Presiona Ctrl-C para copiar";
	}
	$("#"+e.trigger.id).tooltip({trigger: "manual", title: msj});
	$("#"+e.trigger.id).tooltip("show");
	setTimeout(function(){ $("#"+e.trigger.id).tooltip("destroy"); }, 5000);
});
$("#widthiFrame").blur(function(){
	if($(this).val()!=""){
		$("#dv{{ $Formulario->token }}").css("max-width", $(this).val()+"px");
		/*var codigo_wordpress = '<div id="{{ $Formulario->token }}" style="margin: 0px auto; max-width: '+$(this).val()+'px;"> \n\t<iframe id="{{ $Formulario->token }}" style="width: 100%;" src="{{ URL::route('SysWebEmailMarketingFormulario', array($Formulario->token)) }}" frameborder="0" scrolling="no"><\iframe><\/div>\n<script src="{{ asset('iframe-resizer/iframeResizer.min.js') }}"><\/script>\n<script type="text/javascript"> \n\t<!-- \n\tiFrameResize({log:false, checkOrigin:false}, document.getElementById("{{ $Formulario->token }}")); \n//--> <\/script>';
		$("#btnCopiar").attr("data-clipboard-text", codigo_wordpress);*/
		var codigo_wordpress_pre = '&lt;div style="margin: 0px auto; max-width: '+$(this).val()+'px;"&gt; \n\t&lt;iframe id="{{ $Formulario->token }}" style="width: 100%;" src="{{ URL::route('SysWebEmailMarketingFormulario', array($Formulario->token)) }}" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt; \n&lt;/div&gt; \n&lt;script src="{{ asset('iframe-resizer/iframeResizer.min.js') }}"&gt;&lt;/script&gt; \n&lt;script type="text/javascript"&gt;\n\t&lt;!-- \n\tiFrameResize({log:false, checkOrigin:false}, document.getElementById("{{ $Formulario->token }}")); \n//--&gt;&lt;/script&gt;';
		$("#codigo_wordpress_pre").html(codigo_wordpress_pre).removeClass("prettyprinted");

	}
	else{
		$("#dv{{ $Formulario->token }}").css("max-width", "");
		/*var codigo_wordpress = '<div id="{{ $Formulario->token }}" style="margin: 0px auto;"> \n\t<iframe id="{{ $Formulario->token }}" style="width: 100%;" src="{{ URL::route('SysWebEmailMarketingFormulario', array($Formulario->token)) }}" frameborder="0" scrolling="no"><\iframe><\/div>\n<script src="{{ asset('iframe-resizer/iframeResizer.min.js') }}"><\/script>\n<script type="text/javascript"> \n\t<!-- \n\tiFrameResize({log:false, checkOrigin:false}, document.getElementById("{{ $Formulario->token }}")); \n//--> <\/script>';
		$("#btnCopiar").attr("data-clipboard-text", codigo_wordpress);*/
		var codigo_wordpress_pre = '&lt;div style="margin: 0px auto;"&gt; \n\t&lt;iframe id="{{ $Formulario->token }}" style="width: 100%;" src="{{ URL::route('SysWebEmailMarketingFormulario', array($Formulario->token)) }}" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt; \n&lt;/div&gt; \n&lt;script src="{{ asset('iframe-resizer/iframeResizer.min.js') }}"&gt;&lt;/script&gt; \n&lt;script type="text/javascript"&gt;\n\t&lt;!-- \n\tiFrameResize({log:false, checkOrigin:false}, document.getElementById("{{ $Formulario->token }}")); \n//--&gt;&lt;/script&gt;';
		$("#codigo_wordpress_pre").html(codigo_wordpress_pre).removeClass("prettyprinted");
	}
	PR.prettyPrint();
});
setTimeout(() => {
	var iFrameHeight = $("iframe#{{ $Formulario->token }}").css("height");
	iFrameHeight = iFrameHeight.replace("px", "");
	var nHeight = parseInt(iFrameHeight) + 25;
	$("iframe#{{ $Formulario->token }}").css("height", nHeight+"px");
}, 2000);
@if(Session::has('MensajeS'))
new PNotify({ title: "Realizado", text: "{{ Session::get('MensajeS') }}", type: "success" });
@endif
@if(Session::has('MensajeE'))
new PNotify({ title: "Realizado", text: "{{ Session::get('MensajeE') }}", type: "error" });
@endif
@stop