@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}
{{ HTML::style('TouchSpin/jquery.bootstrap-touchspin.min.css') }}
{{ HTML::style('gentemplate/css/min/editor.min.css?=v2.1.0') }}
{{ HTML::style('jquery-ezdz/jquery.ezdz.min.css') }}
{{-- HTML::style('emojionearea/dist/emojionearea.min.css') --}}
<style type="text/css">
	.pointer{ cursor:pointer; }
	.Separacion{ display: inline-block; padding: 1px; }
</style>
{{ HTML::style('image-picker/image-picker.css') }}
<style type="text/css">
	.image_picker_image{ height: 260px !important; width: 200px !important; }
</style>
{{ HTML::style('WebPro/plugins/dropzone/dropzone.css') }}
{{ HTML::style('image-picker/image-picker.css') }}
<style type="text/css">
	.img-biblioteca { height: 100px; }
	.image_picker_image { height: 100px !important; width: 119px !important; }
	.ModalBiblioteca .modal-dialog { width: 75%; }
	.ModalBiblioteca .modal-dialog .modal-footer { display: unset !important; border-top: unset !important; }
	/*.image_picker_image { object-fit: contain; }*/
	.text-count-wrapper-t { display: none; }
	.text-count-wrapper-d { display: none; }
	.modal-backdrop { z-index: 1040 !important; }
	.ModalBiblioteca { z-index: 99999 !important; }
	.image_picker_image {
		height: 100px !important;
		width: 119px !important;
		object-fit: contain;
	}
	.color-head-modal .modal-header { 
		background-color: #363b3f !important; 
	}
	.modal .modal-body{
		padding-bottom: 0px;
	}
	.panel-title>a {
		color: inherit;
		font-size: 25px;
		font-weight: bold;
		display:block;
	}
	.basic-wizard ul.nav li a {
		color: white;
		background-color: #687174;
		cursor: default;
		opacity: unset;
	}
	.basic-wizard ul.nav li:not(.active) a:hover {
		background-color: #687174;
		opacity: unset !important;
	}
	.basic-wizard ul.nav li.active a {
		cursor: default;
		opacity: unset;
	}
	/*.basic-wizard .next.disabled a {
		display: none !important;
	}
	.basic-wizard .next.disabled button {
		display: block !important;
	}*/
	.caption {
		text-align: center;
	}
	.caption h3 {
		font-weight: bold;
		font-size: 20px;
		word-break: break-word;
	}
	.caption button {
		display: inline-block;
		width: 135px;
		margin-bottom: 3px;
	}
	.caption a {
		display: inline-block;
		width: 135px;
		margin-bottom: 3px;
	}
	.mdAvatar .modal-footer {
		margin-top: 0px;
	}
	.modal-tablet.portrait iframe{
		width: 600px;
		margin-left: 15px;
	}
	.modal-tablet.portrait .iframe-container {
		background: url(/SysWeb/SumeClientes/VistaPrevia/portatil.png) center center no-repeat;
	}
	.modal-desktop .modal-dialog iframe{
		border: 0px solid transparent;
		width: 1340px;
	}
	.ezdz-dropzone {
		width: 60px !important;
		height: 50px !important;
		display: inline-block;
		margin-right: 3%;
		border: 3px dotted #787878 !important;
	}
	.ezdz-dropzone div {
		/*line-height: 526%;*/
		padding-top: 6%;
		font: bold 34px arial !important;
		color: #787878;
	}
	.VistaPrevia .modal-header {
		background-color: #363b3f !important;
	}
	.VistaPrevia  .modal-header .close {
		color: #ff3b3b;
		text-shadow: 0 1px 0 #9f0000;
		opacity: 1;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
	.panel-title > a{
		width: 75%;
		display: inline-block;
	}
	
	.basic-wizard .estructura>ul.nav>li{
		background: #888888;
		color: #333;
		cursor: pointer;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header{
		background-color:#363B3F;
	}
	.basic-wizard .estructura>ul.nav>li:hover{
		background: #c0c0c0 !important;
		color: #333;
	}
	.basic-wizard .estructura>ul.nav>li>a{
		background: inherit;
		display: inline-block;
		color: inherit;
		border: unset;
		padding: 7px 12px;
	}
	.ls-page{
		margin-left: 15px;
		margin-bottom: 0px;
	}
	.paginas{
		margin-top: 10px;
	}
	.indicador {
		/*font-size: 25px;*/
		margin-right: 5px;
		font-weight: bold;
	}
	.estructura .panel-title > a.collapsed .indicador{
		transform: rotate(180deg);
		moz-transition: all 600ms ease-out;
		-webkit-transition: all 600ms ease-out;
		-o-transition: all 600ms ease-out;
		transition: all 600ms ease-out;
	}
	.estructura .panel-title > a{
		text-decoration: unset;
		font-size: inherit;
		vertical-align: middle;
	}
	.txt-m{
		margin-left: 5px;
	}
	.ls-resumen{
		margin-bottom: 0px;
	}
	.acciones .btn{
		padding: 3px 8px;
	}
	[contenteditable="true"].txt{
		padding: 5px;
	}
	.list-group-item{
		padding: 12px 15px;
		padding-right: 15px;
		border-bottom: 1px solid #ddd;
	}
	.list-group-item span:not(:last-child) {
		vertical-align: middle;
	}
	.txt-m {
		width: 79%;
    	display: inline-block;
	}
	@media (min-width: 768px){
		.modal-dialog {
			width: 600px;
			margin: 30px auto;
		}
	}
	input[type="checkbox"]:checked + .custom-checkbox,
	input[type="radio"]:checked + .custom-radio{
		background-color: #F5F8FC;
		border-radius: 2px;
		display: inline-block;
		font-weight: 400;
		line-height: 13px;
		margin-right: 3px;
		position: relative;
	}
	input[type="checkbox"]:checked + .custom-checkbox:before{
		line-height: 14px;
	}
	input[type="checkbox"]:checked + div + .custom-checkbox{
		margin-right: 3px;
	}
	input[type="checkbox"] + div + .custom-checkbox:before,
	input[type="radio"] + .custom-radio:before{
		border: 1px solid #CCC;
		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
		content: " ";
		display: inline-block;
		font-family: fontAwesome;
		font-size: 12px;
		height: 17px;
		width: 17px;
		text-align: center;
		vertical-align: middle;
	}
	input[type="checkbox"]:checked + div + .custom-checkbox:before{
		border-color: rgba(0,0,0,0.2);
		color: #7A7A7A;
		content: "";
		font-size: 11px;
		text-shadow: 0 1px #fff;
	}
	input[type="checkbox"] + div + .custom-checkbox:before,
	input[type="radio"] + div + .custom-radio:before {
		border: 1px solid #CCC;
		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
		content: " ";
		display: inline-block;
		font-family: fontAwesome;
		font-size: 12px;
		height: 17px;
		width: 17px;
		text-align: center;
		vertical-align: middle;
	}
	.acciones .tooltip{
		font-weight: normal;
	}
	input[type="radio"]:checked + .custom-radio:before{
		font-size: 35px;
	}
	#errrdSecciones{
		display: block;
		padding-left: 20px;
	}
	.name{
		font-size: 18px;
	}
</style>
@stop


@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-users"></i>  Gestión de prospectos </h2>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Estructura de contenido digital </h3> </div>
			<div class="porlets-content">
				{{ Form::open(array('route' => array('SysWebGClientesProductosListadoDePaginasAgregar'), 'method' => 'post', 'class' => 'form-horizontal row-border', 'id' => 'frmAgregar')) }}
					<div id="progressWizard" class="basic-wizard dvConfCorreoSecuencia">
					<ul class="nav nav-pills nav-justified">
						<li>
							<a href="#ptab1" data-toggle="tab"> Estructura de contenido digital
							</a>
						</li>
						<li>
							<a href="#ptab2" data-toggle="tab"> Selección de tema para contenido digital
							</a>
						</li>
					</ul>
					<div class="tab-content">
						<div class="progress progress-striped">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
						<div class="tab-pane active" id="ptab1">
							<div class="form-group">
								<div class="alert alert-info text-center" style="font-size: 16px;">
									<strong> PASO 1:</strong> Crea la estructura de tu contenido digital agregando desde aquí los modulos. Puedes crear los modulos que necesites
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label"> ¿Deseas crear las páginas con las secciones del tema para contenido digital? </label>
								<div class="col-sm-5">
									<label class="radio-inline">
										<input type="radio" value="1" id="rdSeccionesSi" name="rdSecciones">
										<span class="custom-radio"></span>
										Si
										<span class="tooltips fa fa-info-circle" title="Se cargarán las secciones (encabezado y pie de página) del tema de contenido digital que selecciones en el siguiente paso"></span>
									</label>
									<label class="radio-inline">
										<input type="radio" value="0" id="rdSeccionesNo"  name="rdSecciones">
										<span class="custom-radio"></span>
										No
										<span class="tooltips fa fa-info-circle" title="Se cargarán las secciones (encabezado y pie de página) genericas de tu sitio web"></span>
									</label>
									<span class="text-danger" id="errrdSecciones"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label"> Nombre del contenido digital </label>
								<div class="col-sm-5">
									<label class="control-label name">{{ $producto->nombre }}</label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label"> Nombre del módulo </label>
								<div class="col-sm-5">
									<div class="input-group">
										<input class="form-control" placeholder="" name="nombre" type="text" value="">
										<span class="input-group-btn"><button type="button" class="btn btn-primary add_modulos"><span class="fa fa-plus"></span></button></span>
									</div>
									<span class="text-danger" id="errnombre"> </span>
									<input type="hidden" name="estruc">
									<span class="text-danger" id="errestruc" style="font-size: 16px"></span>
								</div>
							</div>
							<div class="form-group est" style="display: none;">
								<label class="col-sm-3 control-label"> Estructura para el contenido </label>
								<div class="col-sm-4">
									<div class="estructura">
										<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
											<!--div class="panel panel-default" id="panel_0">
												<div class="panel-heading" role="tab" id="headingOne">
													<h4 class="panel-title">
														<a role="button" data-toggle="collapse" data-parent="#accordion" href="#modulo_0" aria-expanded="true" aria-controls="collapseOne" class="collapsed">
															<span class="fa fa-angle-down indicador"></span>
															<span class="txt">Modulo 1</span>
												  		</a>
														  <span class="acciones text-right">
															<button type="button" class="btn btn-warning editar tooltips" title="Editar título">
																<span class="fa fa-pencil-square-o"></span>
															</button>
															<button type="button" class="btn btn-success agregar tooltips" title="Agregar páginas">
																<span class="fa fa-plus"></span>
															</button>
															<button type="button" class="btn btn-danger eliminar tooltips" title="Eliminar">
																<span class="fa fa-trash"></span>
															</button>
														</span>
													</h4>
											  	</div>
											 	<div id="modulo_0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
													<div class="panel-body">
												  		<ul class="list-group ls-resumen">
															<li class="list-group-item">
																<span class="icn-m fa fa-file-o"></span> 
																<span class="txt-m">Resumen de modulo</span>
																<span class="acciones">
																	<label>
																		<input type="checkbox" name="chActiva" id="chActiva" class="" checked value="1">
																		<span class="custom-checkbox tooltips" title="Activar"></span>
																	</label>
																	<button type="button" class="btn btn-warning editar tooltips" title="Editar título">
																		<span class="fa fa-pencil-square-o"></span>
																	</button>
																</span>
															</li>
														</ul>
													</div>
											  	</div>
											</div -->
										</div>
										<ul class="nav list-group hide">
											<li class="list-group-item">
												<a href="" class="titulo">Modulo 1</a>
												<div class="acciones pull-right">
													<button type="button" class="btn btn-warning">
														<span class="fa fa-pencil-square-o"></span>
													</button>
													<button type="button" class="btn btn-success">
														<span class="fa fa-plus"></span>
													</button>
													<button type="button" class="btn btn-danger">
														<span class="fa fa-trash"></span>
													</button>
												</div>
												<div class="paginas">
													<ul class="list-group ls-page">
														<li class="list-group-item">Resumen de modulo</li>
													</ul>
												</div>
											</li>
											<li class="list-group-item">
												<a href="" class="titulo">Modulo 2</a>
												<div class="acciones pull-right">
													<button type="button" class="btn btn-warning">
														<span class="fa fa-pencil-square-o"></span>
													</button>
													<button type="button" class="btn btn-success">
														<span class="fa fa-plus"></span>
													</button>
													<button type="button" class="btn btn-danger">
														<span class="fa fa-trash"></span>
													</button>
												</div>
											</li>
											<li class="list-group-item">
												<a href="" class="titulo">Modulo 3</a>
												<div class="acciones pull-right">
													<button type="button" class="btn btn-warning">
														<span class="fa fa-pencil-square-o"></span>
													</button>
													<button type="button" class="btn btn-success">
														<span class="fa fa-plus"></span>
													</button>
													<button type="button" class="btn btn-danger">
														<span class="fa fa-trash"></span>
													</button>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
												<div class="tab-pane" id="ptab2">
							<input type="hidden" name="plantillaDeCorreo" value="">
							<span class="text-danger" id="errplantillaDeCorreo"> </span>
							<!--<div class="row">-->
							<h3> Selecciona el tema para tu contenido digital</h3>
								@foreach ($Temas as $tema)
								@if( $tema->activo )
								<div class="panel panel-default">
									<div class="panel-heading">
										<h4 class="panel-title">
											<a class="collapsed" data-toggle="collapse" data-parent="#CrearPlantilla" href="#plantillaV_{{ $tema->id }}">
												<i class="fa fa-angle-right"></i> {{ $tema->nombre }}
											</a>
											<span class="pull-right">
												<div class="rdio rdio-default">
													<input type="radio" name="rdTema" id="rdTema" value=""  data-idT="{{ $tema->id }}" data-nombre="">
													<label for="rdTema"></label>
												</div>
											</span>
										</h4>
									</div>
									<div id="plantillaV_{{ $tema->id }}" class="panel-collapse collapse">
										<div class="panel-body" id="plantV">
											<div class="row">