@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('image-picker/image-picker.css') }}
<style type="text/css">
	.image_picker_image{ height: 260px !important; width: 200px !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;
	}
	.activo{
		background-color: #efefef;
		border: 3px solid #5cb85c !important;
	}
	.modal-body {
    	padding-bottom: 5px;
	}
	.panel-title>a {
		color: inherit;
		font-size: 25px;
		font-weight: bold;
		display:block;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="icon-sc-landingpageicon"></i> Páginas de captura </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-12">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Crear nueva página de captura </h3> </div>
			<div class="porlets-content">
				<h3 class="content-header" style="margin-left: -4px;">Selecciona el tipo de plantilla</h3> 
								<br>
				{{ Form::open(array('route' => 'SysWebPAterrizajePlantillaxClienteGuardar', 'method' => 'post', 'class' => 'form-horizontal row-border', 'id' => 'frmAgregar', 'files' => true)) }}
					<div class="margin-updown">
						{{-- MACRO REALIZADO POR KEVIN MORÁN PUEDE UBICARSE EN /app/start/global.php AL FINAL DEL DOCUMENTO POR SI NECESITA MODIFICARSE --}}
						<div class="row">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="collapsed" data-toggle="collapse" data-parent="#CrearPlantilla" href="#plantillaC">
											<i class="fa fa-angle-right"></i> Captura o Contacto
										</a>
									</h4>
								</div>
								<div id="plantillaC" class="panel-collapse collapse">
									<div class="panel-body" id="plantC">
										<div class="row">
											@foreach($PlantillasC as $Plantilla)
												<div class="col-sm-4 col-md-3">
													<div class="thumbnail" style="margin-bottom: 20px; border: 2px solid #363B3F; background-color: #f2f2f2;">
														<div class="caption">
															<h3 style="height: 67px;"> {{$Plantilla->nombre }} </h3>
														</div>
														<img src="{{ asset('SysWeb/PaginasAterrizaje/Plantillas/Imagenes/'.$Plantilla->imagen).$fecha }}" class="thumbnail" style="border: 3px solid #ddd;">
														<div class="caption">
															<p style="text-align: left; height: 70px;"> {{ $Plantilla->descripcion }} </p>
														</div>
														<div class="caption">
															<button type="button" class="btn btn-success btnSelectionP tooltips" data-idP="{{ $Plantilla->id }}" id="btnSelectionP" data-toggle="tooltip" data-original-title="Seleccionar" data-nombre="{{ $Plantilla->nombre }}">
																<!--Seleccionar-->
																<i class="fa fa-check"></i>
															</button>
															<a href="{{ $Plantilla->ruta }}" class="btn btn-primary tooltips @if($Plantilla->ruta == '') disabled @endif" target="_blank" id="btnVisualP" data-toggle="tooltip" data-original-title="Previsualizar">
																<!--Previsualizar-->
																<i class="fa fa-eye"></i>
															</a>
														</div>
													</div>
												</div>
												@endforeach
											<div class="col-md-2"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="collapsed" data-toggle="collapse" data-parent="#CrearPlantilla" href="#plantillaR">
											<i class="fa fa-angle-right"></i> Relacional 
										</a>
									</h4>
								</div>
								<div id="plantillaR" class="panel-collapse collapse">
									<div class="panel-body" id="plantR">
										<div class="row">
											@foreach($PlantillasR as $Plantilla)
												<div class="col-sm-4 col-md-3">
													<div class="thumbnail" style="margin-bottom: 20px; border: 2px solid #363B3F; background-color: #f2f2f2;">
														<div class="caption">
															<h3 style="height: 67px;"> {{$Plantilla->nombre }} </h3>
														</div>
														<img src="{{ asset('SysWeb/PaginasAterrizaje/Plantillas/Imagenes/'.$Plantilla->imagen).$fecha }}" class="thumbnail" style="border: 3px solid #ddd;">
														<div class="caption">
															<p style="text-align: left; height: 70px;"> {{ $Plantilla->descripcion }} </p>
														</div>
														<div class="caption">
															<button type="button" class="btn btn-success btnSelectionP tooltips" data-idP="{{ $Plantilla->id }}" id="btnSelectionP" data-toggle="tooltip" data-original-title="Seleccionar" data-nombre="{{ $Plantilla->nombre }}">
																<!--Seleccionar-->
																<i class="fa fa-check"></i>
															</button>
															<a href="{{ $Plantilla->ruta }}" class="btn btn-primary tooltips @if($Plantilla->ruta == '') disabled @endif" target="_blank" id="btnVisualP" data-toggle="tooltip" data-original-title="Previsualizar">
																<!--Previsualizar-->
																<i class="fa fa-eye"></i>
															</a>
														</div>
													</div>
												</div>
											@endforeach
											<div class="col-md-2"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="collapsed" data-toggle="collapse" data-parent="#CrearPlantilla" href="#plantillaV">
											<i class="fa fa-angle-right"></i> Venta
										</a>
									</h4>
								</div>
								<div id="plantillaV" class="panel-collapse collapse">
									<div class="panel-body" id="plantV">
										<div class="row">
											@foreach($PlantillasV as $Plantilla)
												<div class="col-sm-4 col-md-3">
													<div class="thumbnail" style="margin-bottom: 20px; border: 2px solid #363B3F; background-color: #f2f2f2;">
														<div class="caption">
															<h3 style="height: 67px;"> {{$Plantilla->nombre }} </h3>
														</div>
														<img src="{{ asset('SysWeb/PaginasAterrizaje/Plantillas/Imagenes/'.$Plantilla->imagen).$fecha }}" class="thumbnail" style="border: 3px solid #ddd;">
														<div class="caption">
															<p style="text-align: left; height: 70px;"> {{ $Plantilla->descripcion }} </p>
														</div>
														<div class="caption">
															<button type="button" class="btn btn-success btnSelectionP tooltips" data-idP="{{ $Plantilla->id }}" id="btnSelectionP" data-toggle="tooltip" data-original-title="Seleccionar" data-nombre="{{ $Plantilla->nombre }}">
																<!--Seleccionar-->
																<i class="fa fa-check"></i>
															</button>
															<a href="{{ $Plantilla->ruta }}" class="btn btn-primary tooltips @if($Plantilla->ruta == '') disabled @endif" target="_blank" id="btnVisualP" data-toggle="tooltip" data-original-title="Previsualizar">
																<!--Previsualizar-->
																<i class="fa fa-eye"></i>
															</a>
														</div>
													</div>
												</div>
											@endforeach
											<div class="col-md-2"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="collapsed" data-toggle="collapse" data-parent="#CrearPlantilla" href="#plantillaU">
											<i class="fa fa-angle-right"></i> Upsell
										</a>
									</h4>
								</div>
								<div id="plantillaU" class="panel-collapse collapse">
									<div class="panel-body" id="plantU">
										<div class="row">
											@foreach($PlantillasU as $Plantilla)
												<div class="col-sm-4 col-md-3">
													<div class="thumbnail" style="margin-bottom: 20px; border: 2px solid #363B3F; background-color: #f2f2f2;">
														<div class="caption">
															<h3 style="height: 67px;"> {{$Plantilla->nombre }} </h3>
														</div>
														<img src="{{ asset('SysWeb/PaginasAterrizaje/Plantillas/Imagenes/'.$Plantilla->imagen).$fecha }}" class="thumbnail" style="border: 3px solid #ddd;">
														<div class="caption">
															<p style="text-align: left; height: 70px;"> {{ $Plantilla->descripcion }} </p>
														</div>
														<div class="caption">
															<button type="button" class="btn btn-success btnSelectionP tooltips" data-idP="{{ $Plantilla->id }}" id="btnSelectionP" data-toggle="tooltip" data-original-title="Seleccionar" data-nombre="{{ $Plantilla->nombre }}">
																<!--Seleccionar-->
																<i class="fa fa-check"></i>
															</button>
															<a href="{{ $Plantilla->ruta }}" class="btn btn-primary tooltips @if($Plantilla->ruta == '') disabled @endif" target="_blank" id="btnVisualP" data-toggle="tooltip" data-original-title="Previsualizar">
																<!--Previsualizar-->
																<i class="fa fa-eye"></i>
															</a>
														</div>
													</div>
												</div>
											@endforeach
											<div class="col-md-2"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						
						<div class="row">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="collapsed" data-toggle="collapse" data-parent="#CrearPlantilla" href="#plantillaA">
											<i class="fa fa-angle-right"></i> Agradecimiento 
										</a>
									</h4>
								</div>
								<div id="plantillaA" class="panel-collapse collapse">
									<div class="panel-body" id="plantA">
										<div class="row">
											@foreach($PlantillasA as $Plantilla)
												<div class="col-sm-4 col-md-3">
													<div class="thumbnail" style="margin-bottom: 20px; border: 2px solid #363B3F; background-color: #f2f2f2;">
														<div class="caption">
															<h3 style="height: 67px;"> {{$Plantilla->nombre }} </h3>
														</div>
														<img src="{{ asset('SysWeb/PaginasAterrizaje/Plantillas/Imagenes/'.$Plantilla->imagen).$fecha }}" class="thumbnail" style="border: 3px solid #ddd;">
														<div class="caption">
															<p style="text-align: left; height: 70px;"> {{ $Plantilla->descripcion }} </p>
														</div>
														<div class="caption">
															<button type="button" class="btn btn-success btnSelectionP tooltips" data-idP="{{ $Plantilla->id }}" id="btnSelectionP" data-toggle="tooltip" data-original-title="Seleccionar" data-nombre="{{ $Plantilla->nombre }}">
																<!--Seleccionar-->
																<i class="fa fa-check"></i>
															</button>
															<a href="{{ $Plantilla->ruta }}" class="btn btn-primary tooltips @if($Plantilla->ruta == '') disabled @endif" target="_blank" id="btnVisualP" data-toggle="tooltip" data-original-title="Previsualizar">
																<!--Previsualizar-->
																<i class="fa fa-eye"></i>
															</a>
														</div>
													</div>
												</div>
											@endforeach
											<div class="col-md-2"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a class="collapsed" data-toggle="collapse" data-parent="#CrearPlantilla" href="#plantillaL">
											<i class="fa fa-angle-right"></i> Legales
										</a>
									</h4>
								</div>
								<div id="plantillaL" class="panel-collapse collapse">
									<div class="panel-body" id="plantL">
										<div class="row">
											@foreach($PlantillasL as $Plantilla)
												<div class="col-sm-4 col-md-3">
													<div class="thumbnail" style="margin-bottom: 20px; border: 2px solid #363B3F; background-color: #f2f2f2;">
														<div class="caption">
															<h3 style="height: 67px;"> {{$Plantilla->nombre }} </h3>
														</div>
														<img src="{{ asset('SysWeb/PaginasAterrizaje/Plantillas/Imagenes/'.$Plantilla->imagen).$fecha }}" class="thumbnail" style="border: 3px solid #ddd;">
														<div class="caption">
															<p style="text-align: left; height: 70px;"> {{ $Plantilla->descripcion }} </p>
														</div>
														<div class="caption">
															<button type="button" class="btn btn-success btnSelectionP tooltips" data-idP="{{ $Plantilla->id }}" id="btnSelectionP" data-toggle="tooltip" data-original-title="Seleccionar" data-nombre="{{ $Plantilla->nombre }}">
																<!--Seleccionar-->
																<i class="fa fa-check"></i>
															</button>
															<a href="{{ $Plantilla->ruta }}" class="btn btn-primary tooltips @if($Plantilla->ruta == '') disabled @endif" target="_blank" id="btnVisualP" data-toggle="tooltip" data-original-title="Previsualizar">
																<!--Previsualizar-->
																<i class="fa fa-eye"></i>
															</a>
														</div>
													</div>
												</div>
											@endforeach
											<div class="col-md-2"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				{{ Form::close() }}
		</div>
		
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('image-picker/image-picker.min.js') }}
@stop

@section('JSOr')
$("select").imagepicker({ hide_select : true, show_label  : true });
$(".btnSelectionP").click(function(){
	var titulo = $(this).attr("data-nombre");
	var id = $(this).attr("data-idP");
	var mensaje = '<form action="#" id="frmNombrePlantilla"> \
		<div class="form-group"> \
			<label> ¿Qué nombre deseas asignarle a tu página? </label> \
			<input type="text" class="form-control" placeholder="Nombre de la página" name="nombre"></input> \
			<span class="text-danger" id="errnombre"> </span> \
		</div> \
		<input type="hidden" name="plantillas_id" value="'+id+'"> \
	</form>';
	BootstrapDialog.show({
		cssClass: "mdAvatar",
		title: titulo,
		message: mensaje,
		closeByBackdrop: false,
		draggable: true,
		buttons: [{
			id: "btnAgrgarP",
			label: "Agregar",
			cssClass: "btn-success btn-block btn-lg", 
			action: function(dialogItself){
				$("#btnAgrgarP").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
				$.isLoading({ text: "Cargando..." }); NProgress.start();
				$.post(
					"{{ URL::route('SysWebPAterrizajePlantillaxClienteGuardar') }}",
					$("#frmNombrePlantilla").serialize(),
					function(data){
						$.isLoading("hide"); NProgress.done();
						$("#btnAgrgarP").prop("disabled", false).html("Agregar");
						if(data.success){
							new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
							setTimeout( function(){ window.location.href = data.ruta; }, 3000 );
						}
						else{
							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"
				);
			}
		}]
	});
});
@stop