@extends('BaseSistemaWeb')

@section('CSS')
<style type="text/css">
	@media screen and (max-width: 1505px) {
		.block-web .header > h3{
			width: 54% !important;
		}
	}
	@media screen and (max-width: 1350px) {
		.step a span {
			font-size: 13px;
		}
	}
	@media screen and (max-width: 1265px) {
		.step a span {
			font-size: 12px;
		}
		.block-web .header > h3,
		.block-web .header > span {
			font-size: 17px !important;
		}
		.block-web .header h3 > .btn,
		.block-web .header .dvVer .control-label > a{
			font-size: 13px !important;
			padding: 5px 10px;
		}
	}
	@media screen and (max-width: 1220px) {
		.block-web .header > h3{
			width: 53% !important;
		}
	}
	@media screen and (max-width: 1205px) {
		.step a span {
			font-size: 11px;
		}
	}
	@media screen and (max-width: 1190px) {
		.block-web .header > h3,
		.block-web .header > span {
			font-size: 15px !important;
		}
	}
	@media screen and (max-width: 1160px) {
		.block-web .header > h3,
		.block-web .header > span {
		}
	}
	@media screen and (max-width: 1150px) {
		.step a span {
			font-size: 10px;
		}
	}
	@media screen and (max-width: 1135px) {
		.block-web .header > h3,
		.block-web .header > span {
			font-size: 14px !important;
		}
		.block-web .header > h3{
			width: 52% !important;
		}
		.block-web .header h3 > .btn,
		.block-web .header .dvVer .control-label > a{
			font-size: 12px !important;
			padding: 4px 8px;
		}
	}
	@media screen and (max-width: 1120px) {
		.block-web .header > h3,
		.block-web .header > span {
		}
	}
	@media screen and (max-width: 1095px) {
		.block-web .header > h3{
			width: 51% !important;
		}
	}
	@media screen and (max-width: 1090px) {
		.step a span {
			font-size: 9px;
		}
		input[type=search] {
			width: 125px !important;
		}
		.dataTables_filter {
			margin-left: 20px !important;
		}
	}
	@media screen and (max-width: 1045px) {
		.step a span {
			font-size: 8.5px;
		}
		.block-web .header > h3{
			width: 50% !important;
		}
	}
	@media screen and (max-width: 1025px) {
		.block-web .header > h3,
		.block-web .header > span {
			font-size: 13px !important;
		}
	}
    .caption .btn{
        display:inline-block;
        width:135px;
        margin-bottom: 3px;
	}
	.image_picker_image {
		object-fit: contain;
	}
	.image_picker_image {
		height: 100px !important;
		width: 119px !important;
	}
	#ptab2{
		min-height: 300px
	}
	.toggle-danger .toggle-slide .toggle-off, .toggle-danger .toggle-select .toggle-on{
		background: none repeat scroll 0 0 #D9534F;
		color: #FFFFFF;
	}
	.toggle-danger .toggle-slide{
		border-color: #D43F3A;
	}
	.popover>.arrow{	
		border-width: 11px;
		left: 44%;
		top: -12%;
		font-size: 30px;
		color: white;
	}
	.popover{
		max-width: 400px;
	}
	.bootstrap-datetimepicker-widget {
		position: fixed;
	}
	.block-web .nav-tabs > li.active > a, .block-web .nav-tabs > li.active > a:hover, .block-web .nav-tabs > li.active > a:focus{
		background-color: #FFF !important;
	}
	.step.paginas{
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		background-color: #687174;
		margin: 1px;
	}
	.step.paginas a{
		text-align: center;
		font-size: 16px;
		font-weight: 400;
	}
	.final{
		width: 38%;
		background-color: #687174;
		padding: 10px;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		pointer-events: none;
	}
	.error-text-min{
		display: none;
	}
	#frmAgregarPaginasN .tooltip.top {
		width:175px !important;
	}
	.md_disenho  .modal-dialog {
		width: 1000px;
	}
	input[type="radio"]:checked + .custom-radio:before{
		font-size: 37px ;
	}
	.radio-inline label{
		font-weight: 400;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
		.oculto {
		display: none !important;
	}
		textarea{
		resize: vertical;
	}
	.slSecciones {
		text-align: left !important;
	}
	.slSecciones .dropdown-menu > li > a:hover {
		background-color: #efefef;
	}
	.tab-content{
		overflow: unset;
	}
</style>
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('DataTables/select.dataTables.min.css') }}
{{ HTML::style('DataTables/buttons.dataTables.min.css') }}
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
{{ HTML::style('WebPro/plugins/dropzone/dropzone.css') }}
{{-- HTML::style('WebPro/css/style.css') --}}
{{ HTML::style('image-picker/image-picker.css') }}
{{ HTML::style('SysWeb/SumeClientes/Paginas.css') }}
{{ HTML::style('gentemplate/css/min/editor.min.css?=v0.1.31') }}
{{-- HTML::style('gentemplate/css/editor.css?=v0.1.31') --}}
{{ HTML::style('TouchSpin/jquery.bootstrap-touchspin.min.css') }}
{{ HTML::style('Webui-Popover/jquery.webui-popover.min.css') }}
{{ HTML::style('WebPro/css/style-toggles.css') }}
<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
</style>
<style type="text/css" class="init">

	table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.order-column tbody > tr.selected > .sorting_1, table.dataTable.order-column tbody > tr.selected > .sorting_2, table.dataTable.order-column tbody > tr.selected > .sorting_3, table.dataTable.order-column tbody > tr > .selected, table.dataTable.display tbody > tr.selected > .sorting_1, table.dataTable.display tbody > tr.selected > .sorting_2, table.dataTable.display tbody > tr.selected > .sorting_3, table.dataTable.display tbody > tr > .selected {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover, table.dataTable.display tbody > tr > .selected:hover {
		background-color: #E9E9E9;
	}
	table.dataTable.display tbody > tr.selected:hover > .sorting_1, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1 {
		background-color: #E9E9E9;
	}
	.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
		background-color: #E9E9E9;
	}
	.bootstrap-dialog.type-primary .modal-header {
		background-color: #363b3f;
	}
	.ModalBiblioteca .modal-content .modal-body{
		height:600px;
	}
	.ModalInicial.size-normal .modal-content{
		width: 50%;
		display: block;
		margin: auto;
	}
	.ModalAgregarPost.size-normal .modal-content{
		width: 50%;
		display: block;
		margin: auto;
	}
	.ModalPublicar.size-normal .modal-content{
		width: 50%;
		display: block;
		margin: auto;
	}
	.ModalDesPublicar.size-normal .modal-content{
		width: 50%;
		display: block;
		margin: auto;
	}
	.paginas{
		width: 15%;
	}
	.viewlist li{
		width: 9%;
	}
	.iframe-container{
		margin-top: 15px;
	}
	.dark-theme .navbar-nav li {
		border-left: 1px solid #454a4e !important; 
		display: inline-block ;
		width: initial !important;
	}
	.nav>li>a {
		position: relative !important;
		display: block !important;
		padding: 10px 15px !important;
	}
	.navbar-nav li a {
		padding-bottom: 10px !important;
		padding-top: 10px !important;
		line-height: unset !important;
	}
	.ModalInicial   .bootstrap-dialog-title{
		font-size: 27px !important;
		display: block !important;
    	text-align: center !important;
	}
	@media (max-width: 767px){
		.hidden-xs  a {
			display: none !important;
		}
	}
	@media (max-width: 450px) { 
		.ModalBiblioteca .modal-content .modal-body { 
			height: auto; 
		} 
	}
	
	@media (max-width: 800px) { 
		.ModalBiblioteca .modal-content .modal-body { 
			height: auto; 
		}
		.block-web ul.divSW > li.active > a, .block-web ul.divSW > li.active > a:hover, .block-web ul.divSW > li.active > a:focus{
			background-color: transparent !important;
			box-shadow: unset;
		}
		ul.divSW li.final{
			display: none;
		}
		ul.divSW li.paginas span {
			display: none;
		}
		ul.divSW li:first-child span::before{
			content: "\e913";
		}
		ul.divSW li.paginas a:not(.stepOne) {
			display: inline-block;
			font: normal normal normal 14px/1 FontAwesome;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		ul.divSW li.paginas {
			font-family: 'icomoon' !important;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}
		ul.divSW li.active{
			background-color: #fff !important;
		}
		ul.divSW li.active a{
			background-color: transparent !important;
		}
		ul.divSW {
			width: 100%;
			display: flex;
			justify-content: center;
		}
		ul.divSW li:first-child a::before{
			content: "\e913";
			font-size: 25px;
		}
		ul.divSW li:nth-child(2) a::before{
			content: "\f0db";
			font-size: 25px;
		}
		ul.divSW li:nth-child(3) a::before{
			content: "\f0f6";
			font-size: 25px;
		}
		ul.divSW li:nth-child(4) a::before{
			content: "\f290";
			font-size: 25px;
		}
		ul.divSW li:nth-child(5) a::before{
			content: "\f24e";
			font-size: 25px;
		}
		ul.divSW  li>a{
			padding: unset !important;
		}
		h3.content-header{
			display: flex !important;
			flex-direction: row;
			align-items: center;
			width: 100% !important;
		}
		.dvVer{
			width: 36% !important;
		}
	}
	.checkbox label::before{
		display: none;
	}
	.ModalConfiguracion .bootstrap-dialog-close-button{
		display: block !important;
	}
	.VistaPrevia .isloading-wrapper{
		display: inline-block;
		top: 70px !important;
		background-color: #000;
		font-size: 30px;
		text-transform: uppercase;
		padding: 185px 63px 186px 63px;
		margin-left: -50px;
		font-weight: 500;
		border-radius: 2px !important;
	}
	.toggle-danger .toggle-slide .toggle-off, .toggle-danger .toggle-select .toggle-on{
		background: none repeat scroll 0 0 #D43F3A !important;
    	color: #FFFFFF;
	}
	.toggle-danger .toggle-slide .toggle-blob{
		background: none repeat scroll 0 0 #FFFFFF;
    	border-right: 1px solid #D43F3A !important;
	}
	.text-count-message{
		display: none !important;
	}
	.block-web .nav-tabs > li{
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	}
	.btnRadius {
		border-radius: 4px !important;
	}
</style>
@stop

@section('Contenido')

<div class="row">
	<div class="col-md-12">
		<h2><i class="icons-web-site" style="font-size: 30px !important;"></i> Sitio Web </h2>
	</div><!--/col-md-12-->
</div><!--/row-->
<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header" style="display: inline-block; width: 60%;">
										Listado Páginas de sitio web: &nbsp; 
					&nbsp;&nbsp; <button type="button" class="btn btn-primary  addPagina btnRadius"  onclick="AgregarPostYPaginas('pagina')"> Agregar </button>
					<button type="button" class="btn btn-primary hide addPost btnRadius" onclick="AgregarPostYPaginas()"> Agregar </button>
				</h3>
				<div class="form-group text-left dvVer" style="display: inline-block; margin-bottom: 5px; vertical-align: middle; margin-left:3px; width: 17%;">
					<div class="control-label">
						<a href="{{ $dominio }}" target="_blank" class="btn btn-success" style="width: 80%; border-radius: 3px;"> Ver sitio <i class="fa  fa-external-link" aria-hidden="true" style="padding-left: 5px;"></i></a>
					</div>
				</div>
				<div class="form-group text-left" style="display: inline-block;  margin-bottom: 5px; vertical-align: middle; margin-left:3px;">
					<div class="control-label">
						<div id="toggle_online"class="toggle toggle-success"></div>
					</div>
				</div>
				<span class="txt-online" style="font-weight: 300; font-size:18px; margin-left: 10px;"> </span>
			</div>
			<div class="porlets-content">
				<div class="tab-container">
					<ul class="nav nav-tabs divSW" style="background-color: unset;">
						<li class="step active paginas">
							<a  href="#ptab1" class="stepOne" data-toggle="tab"><span> Páginas </span> </a>
						</li>
						<li class="step paginas">
							<a  href="#ptab3" data-toggle="tab"><span> Páginas Agregadas </span></a>
						</li>
						<li class="step paginas">
							<a  href="#ptab2" data-toggle="tab"><span> Entradas para blog </span></a>
						</li>
						@if( count($ConfTienda) > 0 )
						<li class="step paginas">
							<a  href="#ptab4" data-toggle="tab"><span> Páginas de Tienda </span></a>
						</li>
						@endif
						<li class="step paginas">
							<a  href="#ptab5" data-toggle="tab"><span> Páginas legales</span></a>
						</li>
						<li class="final" style="width: {{ $width }};">
							<a  href="#ptab2" data-toggle="tab"><span></span></a>
						</li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="ptab1">
							@if(!$Configuraciones->texto_instruccion)
								<div class="alert alert-info mensaje-info alert-dismissable ">
									<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
									<h4 class="text-center" style="font-weight:500">Estas son las páginas de tu sitio, desde aquí puedes editarlas y configurarlas.<br>
										Para mas información mira el video con el icono de ayuda  " <span class="fa fa-question" ></span> "  que se encuentra en la parte superior de la página <br><br>
										Si quieres que te ayudemos en la creación de tu sitio haz clic en el botón de abajo para mas información
									</h4>
									<div class="text-center">
										<a href="https://sumeclientes.com/te-hacemos-tu-sitio/" target="_blank" class="btn btn-success"> MAS INFORMACIóN</a>
									</div>
								</div>
							@endif
							@if(count($plantillas) > 0)
								<div class="alert alert-success actualizacion-paginas alert-dismissable ">
									<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
									<h4 class="text-center" style="font-weight:500; margin-bottom:0px;">Tu tema tiene nuevas páginas haz clic en <a href='#' onclick="AgregarPaginasNuevas()" class='tooltips agregar-pagina' data-toggle='tooltip' title='Agregar' > Agregar </a> para añadirlas 
									</h4>
								</div>
							@endif
							<div class="table-responsive">
								<table class="table table-striped-old table-bordered table-hover display" id="tblPaginasxCliente" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th></th>
											<th class="all" data-priority="1" style="width: 5%;"> Activo </th>
											<th class="all" data-priority="1" style="width: 25%;"> Nombre </th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Encabezado </th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Pie de página </th>
											<th class="min-tablet-l text-center" data-priority="2" style="width: 15%;"> Acciones </th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<div class="tab-pane" id="ptab2">
							<div class="table-responsive">
								<table class="table table-striped-old table-bordered table-hover display" id="tblPostxPlantilla" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th></th>
											<th class="all">Activo </th>
											<th class="all" data-priority="1" style="width: 22%;"> Nombre </th>
											<th class="min-tablet-l text-center">Encabezado</th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Barra lateral </th>
											<th class="min-tablet-l text-center">Pie de página</th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 12%;"> Fecha de publicación </th>
											<!--th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Fecha de modificación </th-->
											<th class="min-tablet-l text-center" data-priority="2" style="width: 20%;"> Acciones </th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<div class="tab-pane" id="ptab3">
							<div class="table-responsive">
								<table class="table table-striped-old table-bordered table-hover display" id="tblPaginasxClienteClon" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th></th>
											<th class="all" data-priority="1" style="width: 5%;"> Activo </th>
											<th class="all" data-priority="1" style="width: 25%;"> Nombre </th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Encabezado </th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Pie de página </th>
											<th class="min-tablet-l text-center" data-priority="2" style="width: 15%;"> Acciones </th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<div class="tab-pane" id="ptab4">
							<div class="table-responsive">
								<table class="table table-striped-old table-bordered table-hover display" id="tblPaginasxClienteTienda" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th></th>
											<th class="all" data-priority="1" style="width: 5%;"> Activo </th>
											<th class="all" data-priority="1" style="width: 25%;"> Nombre </th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Encabezado </th>
											<th class="min-tablet-l text-center" data-priority="1" style="width: 15%;"> Pie de página </th>
											<th class="min-tablet-l text-center" data-priority="2" style="width: 15%;"> Acciones </th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<div class="tab-pane" id="ptab5">
							<div class="table-responsive">
								<table class="table table-striped-old table-bordered table-hover display" id="tblLegales" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th></th>
											<th class="all">Activo </th>
											<th class="all" data-priority="1" style="width: 22%;"> Nombre </th>
											<th class="min-tablet-l text-center">Encabezado</th>
											<th class="min-tablet-l text-center">Pie de página</th>
											<th class="min-tablet-l text-center" data-priority="2" style="width: 20%;"> Acciones </th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
					</div>
				<div>
			</div>
			<div class="bottom">
				<button type="button" class="btn btn-primary hide addPost" onclick="AgregarPostYPaginas()"> Agregar </button>
				<button type="button" class="btn btn-primary  addPagina" onclick="AgregarPostYPaginas('pagina')"> Agregar </button>
				<button type="button" style="display: none;" class="btn btn-danger" id="btnEliminarSeleccionados"> Eliminar seleccionados </button>
							</div>
			<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('')) }}/">
			<input type="hidden" id="hdnRutaImagenes" value="{{ URL::route('SysWebPAterrizajeGenTemplateImagenes') }}"> 
		</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('DataTables/dataTables.select.min.js') }}
{{ HTML::script('DataTables/dataTables.buttons.min.js') }}
{{ HTML::script('bootstrap-select/js/bootstrap-select.min.js') }}
{{ HTML::script('WebPro/plugins/dropzone/dropzone.min.js') }}
{{ HTML::script('image-picker/image-picker.min.js') }}
{{ HTML::script('TouchSpin/jquery.bootstrap-touchspin.min.js') }}
{{ HTML::script('WebPro/plugins/toggle-switch/toggles.min.js') }}
{{ HTML::script('bootstrap-datetimepicker/js/moment-with-locales.js') }}
{{ HTML::script('bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}
{{ HTML::script('isLoading-jQuery/jquery.isloading.min.js') }}
{{ HTML::script('StringToSlug/speakingurl.min.js') }}
{{ HTML::script('StringToSlug/jquery.stringtoslug.min.js') }}
{{ HTML::script('jQuery-Text-Counter/textcounter.min.js') }}
<script type="text/javascript">
	function barraProgreso(elemento){
		var contadorWrapper = (elemento=="T")?$(".text-count-wrapper-t"):$(".text-count-wrapper-d");
		var barra = (elemento=="T")?$("#progresoTitle"):$("#progresoDescripcion");
		//var total = (elemento=="T")?60:160;
		var total = (elemento=="T")?60:250;
		//var porcentaje = (elemento=="T")?(40*100)/total:(120*100)/total;
		var porcentaje = (elemento=="T")?(40*100)/total:(80*100)/total;
		var letrasEscritas = parseInt( contadorWrapper.find(".text-count").html() );
		var color = "progress-bar-danger";
		var porcentajeEscrito = 100;
		if( letrasEscritas <= total ){
			porcentajeEscrito = (letrasEscritas*100)/total;
			color = (porcentajeEscrito < porcentaje)?"progress-bar-warning":"progress-bar-success";
		}
		barra.removeClass("progress-bar-success progress-bar-warning progress-bar-danger").addClass(color).css("width", porcentajeEscrito+"%");
		
	}
</script>
<script type="text/javascript">
	function Eliminar(id, tipo){
		var id = id;
		var tipo = tipo;
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmEliminar'> \
					<h2> ¿Seguro que desea eliminar? </h2> \
						<input type='hidden' name='idWeb' 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('SysWebSWebEliminarPostPlantilla') }}",
						{ idWeb: id, tipo: tipo },
						function(data){
							NProgress.done();
							$("#btnEliminar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "!Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								if(tipo == "pagina" || tipo == "paginaClon"){
									var table = $("#tblPaginasxCliente").DataTable();
									table.ajax.reload(null, false);
									var tableClon = $("#tblPaginasxClienteClon").DataTable();
									tableClon.ajax.reload(null, false);
								}
								else{
									var table = $("#tblPostxPlantilla").DataTable();
									table.ajax.reload(null, false);
								}
							}
							else{
								NProgress.done();
								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 vistaPrevia(id, tipo){
		var id = id;
		var tipo = tipo;
		if(tipo ==  "post"){
			var idheader = $("#tblPostxPlantilla tr#"+id+" td:nth-child(4)").find("#lsHeader").val();
			var idfooter = $("#tblPostxPlantilla tr#"+id+" td:nth-child(6)").find("#lsFooter").val();
			var idsidebar = $("#tblPostxPlantilla tr#"+id+" td:nth-child(5)").find("#lsSidebar").val();
			var fecha_publicacion = $("#tblPostxPlantilla tr#"+id+" td:nth-child(7)").find("#fecha_p"+id).val();
		}
		else if(tipo == "paginaClon"){
			var idheader = $("#tblPaginasxClienteClon tr#"+id+" td:nth-child(4)").find("#lsHeader").val();
			var idfooter = $("#tblPaginasxClienteClon tr#"+id+" td:nth-child(5)").find("#lsFooter").val();
		}
		else{
			var idheader = $("#tblPaginasxCliente tr#"+id+" td:nth-child(4)").find("#lsHeader").val();
			var idfooter = $("#tblPaginasxCliente tr#"+id+" td:nth-child(5)").find("#lsFooter").val();
		}
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<div class='viewports'>\
					<ul class='viewlist' >\
						<li id='liTi' class='480px' style=' title='Vista previa en teléfonos inteligentes'>\
							<i class='fa fa-mobile'></i>\
						</li>\
						<li id='liT' class='800px' style=' title='Vista previa tablets y iPads'>\
							<i class='fa fa-tablet'></i>\
						</li>\
						<li id='liC' class='1280px' style=' title='Vista previa computadoras'>\
							<i class='fa fa-laptop'></i>\
						</li>\
					</ul>\
				</div>\
				<div class='iframe-container'> \
					<iframe id='VistaPreviaIframe' src='#' name='VistaPreviaIframe'></iframe> \
				</div> \
			</div> \
		</div>";
		BootstrapDialog.show({
		title: "Vista previa",
		type: BootstrapDialog.TYPE_PRIMARY,
		size: BootstrapDialog.SIZE_WIDE,
		message: mensaje,
		draggable: true,
		cssClass: "VistaPrevia modal-desktop",
		onshown: function(dialogRefs){
			dialogRefs.getModalBody().find(".iframe-container").isLoading({
                text:       "La vista previa está cargando...",
                position:   "overlay"
			});
			dialogRefs.getModalBody().find('.glyphicon').removeClass("glyphicon-refresh glyphicon-spin").addClass("fa fa-spinner fa-pulse fa-fw i-cargador")
			var ruta = "{{ URL::route('SysWebSWebPaginasxClienteVerIframe') }}";
			var obj = dialogRefs.getModalBody();
			if(tipo == "post"){
				dialogRefs.getModalBody().find("#btnGuardar").addClass("hide");
			}else{
				dialogRefs.getModalBody().find("#btnGuardar").removeClass("hide");
			}
			var iframe = obj.find("#VistaPreviaIframe");
			var doc = obj.find("#VistaPreviaIframe")[0].contentWindow.document;
			doc.open();
			doc.write("");
			doc.close();
			ObtenerComplementosVistaPrevia(id, ruta, idheader, idfooter, idsidebar, tipo, obj, null)
			dialogRefs.getModalBody().find("#liC").click(function (){
				$(this).closest(".VistaPrevia").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-desktop");
				dialogRefs.getModalBody().find("#VistaPreviaIframe").removeAttr("style");
				ObtenerComplementosVistaPrevia(id, ruta, idheader, idfooter, idsidebar, tipo, obj, null)
			})
			dialogRefs.getModalBody().find("#liTi").click(function (){
				$(this).closest(".VistaPrevia").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-movil portrait");
				ObtenerComplementosVistaPrevia(id, ruta, idheader, idfooter, idsidebar, tipo, obj, true)
				dialogRefs.getModalBody().find("#VistaPreviaIframe").removeAttr("style");
			})
			dialogRefs.getModalBody().find("#liT").click(function (){
				$(this).closest(".VistaPrevia").removeClass("modal-movil modal-tablet modal-desktop portrait").addClass("modal-tablet portrait");
				dialogRefs.getModalBody().find("#VistaPreviaIframe").css("margin-left","-1%");
				ObtenerComplementosVistaPrevia(id, ruta, idheader, idfooter, idsidebar, tipo, obj, true)
			})
		},
		buttons: [{
			id: "btnCerrar",
			label: "Cerrar",
			cssClass: "btn-default",
			action: function(dialogItself){
				dialogItself.close();
			}
		}]
		});
	}
	function Configuarcion(id, tipo, publicar, msj){
		var id = id;
		var tipo = tipo;
		var publicar = publicar;
		var html_sidebar = "";
		var html_msj = '<div class="form-group">\
			<div class="alert alert-danger mensaje-info alert-dismissable ">\
				<h4 class="text-center" style="font-weight:500; margin-bottom: 0;">'+msj+'</h4>\
			</div>\
		</div>';
		var msj = (msj == undefined)?"":html_msj;
		var nombreInicial = "";
		if(tipo == "post"){
			nombreInicial = $("#tblPostxPlantilla tr#"+id+" td:nth-child(3)").text();
		}
		else if(tipo == "PagClon"){
			nombreInicial = $("#tblPaginasxClienteClon tr#"+id+" td:nth-child(3)").text();
		}
		else{
			if(tipo == "paginaTienda"){
				tipo = null;
				nombreInicial = $("#tblPaginasxClienteTienda tr#"+id+" td:nth-child(3)").text(); 
			}
			else{
				if($("#ptab5.active").length > 0){
					nombreInicial = $("#tblLegales tr#"+id+" td:nth-child(3)").text(); 
				}
				else{
					nombreInicial = $("#tblPaginasxCliente tr#"+id+" td:nth-child(3)").text(); 
				}
			}
		}
		if(tipo == "post"){
			var tituloC = "Configuración de Entrada";
			var cont = 0;
			@if($EntradaSlugs == "")
				var html_slug = '<input name="url" type="text" id="txtUrl" class="form-control"  value="" style="padding-left: 1px !important;font-family: Open Sans,sans-serif; font-size: 15px;padding-top: 4px !important;">';
			@else
				@foreach ($EntradaSlugs as $entrada)
				var idE = '{{ $entrada->id }}';
				if(id == idE){
					cont++;
					var html_slug = '<input name="url" type="text" id="txtUrl" class="form-control"  value="{{ $entrada->slug }}" style="padding-left: 1px !important;font-family: Open Sans,sans-serif; font-size: 15px;padding-top: 3px !important;">';
				}
				else{
					if(cont == 0){
						var html_slug = '<input name="url" type="text" id="txtUrl" class="form-control"  value="" style="padding-left: 1px !important;font-family: Open Sans,sans-serif; font-size: 15px;padding-top: 4px !important;">';
					}
				}
				@endforeach
			@endif
			var html_fijo = '<div class="form-group">\
				<label class="col-sm-3 control-label"> Fijar entrada </label>\
				<div class="col-sm-9">\
					<div class="checkbox">\
						<label for="fijo">\
						<input name="fijo" type="checkbox" value="1" id="fijo"> \
						<span class="custom-checkbox" style="margin-left: -25px;"></span> Mantener post fijo en la página.\
						</label>\
					</div>\
					<span class="text-danger" id="errfijo"> </span>\
				</div>\
			</div>';
		}
		else{
			var tituloC = "Configuración de Página";
			html_fijo = "";
			var cont = 0;
			@if($PaginaSlugs == "")
				var html_slug = '<input name="url" type="text" id="txtUrl" class="form-control"  value="" style="padding-left: 1px !important;font-family: Open Sans,sans-serif; font-size: 15px;padding-top: 4px !important;">';
			@else
				@foreach ($PaginaSlugs as $pagina)
				var idP = '{{ $pagina->id }}';
				if(id == idP){
					cont++;
					var html_slug = '<input name="url" type="text" id="txtUrl" class="form-control"  value="{{ $pagina->slug }}" style="padding-left: 1px !important;font-family: Open Sans,sans-serif; font-size: 15px;padding-top: 3px !important;">';
				}
				else{
					if(cont == 0){
						var html_slug = '<input name="url" type="text" id="txtUrl" class="form-control"  value="" style="padding-left: 1px !important;font-family: Open Sans,sans-serif; font-size: 15px;padding-top: 4px !important;">';
					}
				}
				@endforeach
			@endif
			if($("#tblPaginasxCliente tr#"+id+" td:nth-child(3)").text() == "Blog"){
				html_sidebar = '<div class="form-group">\
					<label class="col-sm-3 control-label">\
						Barra lateral del blog\
					</label>\
					<div class="col-sm-9">\
						<select class="selectpicker form-control" name="sidebar" id="sidebar">\
							<option value=""> Ninguno </option>\
								@foreach ($sidebars as $sidebar) \
									<option value="{{ $sidebar->id }}" @if(count($idSidebar) > 0) @if($idSidebar[0]->seccion_sidebar_id == $sidebar->id) selected @endif @endif> {{ $sidebar->nombre }} </option>\
								@endforeach \
						</select>\
					</div>\
				</div>'
			}
		}
		var mensaje = '<div class="row"> \
			<div class="col-xs-12"> \
				<form class="form-horizontal row-border" id="frmConfiguracion"> \
					'+msj+'\
					<div class="form-group">\
						<label class="col-sm-3 control-label text-right">Título</label>\
						<div class="col-sm-9">\
							<input type="text" class="form-control" value="" name="tituloP" id="tituloP">\
							<span class="text-danger" id="errtituloP"></span>\
							<input type="hidden" name="idConf" id="idConf" value="'+id+'" class="form-control">\
							<input type="hidden" name="tipoC" id="tipoC" value="'+tipo+'" class="form-control">\
							<input type="hidden" name="publicar" id="publicar" value="'+publicar+'" class="form-control">\
							<div class="progress" style="margin-top: 5px;">\
								<div id="progresoTitle" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">\
									<span class="sr-only">0% de progreso</span>\
								</div>\
							</div>\
						</div>\
					</div>\
					<div class="form-group">\
						<label class="col-sm-3 control-label text-right">Descripción</label>\
						<div class="col-sm-9">\
							<textarea class="form-control" rows="4" name="descripcionP" id="descripcionP"></textarea>\
							<span class="text-danger" id="errdescripcionP"></span>\
							<div class="progress" style="margin-top: 5px;">\
								<div id="progresoDescripcion" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">\
									<span class="sr-only">0% de progreso</span>\
								</div>\
							</div>\
						</div>\
					</div>\
					<div class="form-group">\
						<label class="col-sm-3 control-label text-right">Palabras clave</label>\
						<div class="col-sm-9">\
							<input type="text" class="form-control" value="" name="keywordP" id="keywordP">\
						</div>\
					</div>\
					<div class="form-group">\
						<label class="col-sm-3 control-label"> Imágen destacada </label>\
						<div class="col-sm-9">\