@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.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('SysWeb/SumeClientes/Paginas.min.css') }}
{{ HTML::style('gentemplate/css/min/editor.min.css?=v0.1.48') }}
{{-- HTML::style('gentemplate/css/editor.css?=v0.1.31') --}}
<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">
	/*tr td:first-child {
		text-align: center;
	}
	tr td:first-child:before {
		content: "\f096";
		font-family: FontAwesome;
	}
	tr.selected td:first-child:before {
		content: "\f046";
	}
	table.dataTable tr.DTTT_selected.odd{
		background-color: #E9E9E9;
	}
	table.dataTable tr.DTTT_selected.odd td.sorting_1{
		background-color: inherit;
	}
	table.dataTable tr.DTTT_selected.even{
		background-color: #E9E9E9;
	}
	table.dataTable tr.DTTT_selected.even td.sorting_1{
		background-color: inherit;
	}
	.table-striped > tbody > tr:nth-child(2n+1) > td{
		background-color: inherit;
	}
	div.DTTT_container{
		margin-bottom: unset;
	}*/
	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;
	}
	.VistaPrevia .isloading-overlay{	
		width: 97% !important;
	}
	.VistaPrevia.modal-desktop .modal-lg {
		width: 980px !important;
	}
	.modal-desktop .modal-dialog iframe {
		width: 1024px;
		height: 628px;
		-webkit-transform: scale(0.66);
		-moz-transform: scale(0.66);
		-o-transform: scale(0.66);
		-ms-transform: scale(0.66);
		transform: scale(0.66);
		-webkit-transform-origin: 42% 25%;
		-moz-transform-origin: 42% 25%;
		-o-transform-origin: 42% 25%;
		-ms-transform-origin: 42% 25%;
		transform-origin: 42% 25%;
	}
	.modal-desktop .iframe-container{
		background: url(/SysWeb/SumeClientes/VistaPrevia/laptop.png) center center no-repeat !important;
		height: 600px;
	}
		.oculto {
		display: none !important;
	}
		.ModalNombre .modal-dialog  	{
		width: 600px;
   		margin: 30px auto;
	}
	.step.paginas {
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		margin: 1px;
		overflow: hidden;
	}
	.step.paginas:not(.active) {
		background-color: #687174;
	}
	.block-web .nav-tabs > li{
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	}
	.block-web .nav-tabs > li.active > a:focus,
	.block-web .nav-tabs > li.active > a:hover{
		color: #ffffff !important;
		background-color: #687174 !important;
	}
	.block-web .nav-tabs > li.active > a:focus,
	.block-web .nav-tabs > li.active > a:active{
		color: #687174 !important;
		background-color: #ffffff !important;
	}
	.tab-container li.paginas a {
		padding: 10px 10px;
	} 
	@media (max-width: 600px) {
		.tab-container li.paginas a {
			font-size: 18px;
			padding: 5px 0px;
			text-align: center;
		} 
	}
	.dataTables_paginate{
		display: block !important;
	}
</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">
		<div class="block-web">
			<div class="header"> <h3> Listado de ventanas hola creadas {{ HTML::linkRoute('SysWebPAterrizajeVentanasEmergentesAgregar', 'Agregar', array(), array('class' => 'btn btn-primary')) }}</h3> </div>
			<div class="porlets-content">
				<div class="tab-container">
					<div class="table-responsive">
						<table class="table table-striped-old table-bordered table-hover display" id="tblVentanasEmergentes" cellspacing="0" width="100%">
							<thead>
								<tr>
									<th></th>
									<th class="all" data-priority="1"> Nombre </th>
									<th class="min-tablet-l" data-priority="2" style="width: 35%;"> Acciones </th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
			<div class="bottom">
				{{ HTML::linkRoute('SysWebPAterrizajeVentanasEmergentesAgregar', 'Agregar', array(), array('class' => 'btn btn-primary')) }}
				<button type="button" style="display: none;" class="btn btn-danger" id="btnEliminarSeleccionados"> Eliminar seleccionados </button>
							</div>
		</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') }}
<script type="text/javascript">
	function Eliminar(id){
		var id = id;
		var mensaje = "<div class='row'> \
							<div class='col-xs-12'> \
								<form id='frmEliminar'> \
									<h2> ¿Seguro que desea eliminar? </h2> \
									<input type='hidden' name='idP' value='"+id+"'> \
								</form> \
							</div> \
						</div>";
		BootstrapDialog.show({
			title: "Eliminar registro",
			type: BootstrapDialog.TYPE_DANGER,
			message: mensaje,
			draggable: true,
			cssClass: "ModalEliminar",
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$.isLoading("hide"); NProgress.done();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						"{{ URL::route('SysWebPAterrizajeVentanasEmergentesEliminar') }}",
						{ idVE: id },
						function(data){
							$("#btnEliminar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								var table = $("#tblVentanasEmergentes").DataTable();
								table.ajax.reload(null, false);
							}
							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"
					);
				}
			}]
		});
	}
	function Clonar(id){
		var id = id;
		$.isLoading({ text: "Cargando..." }); NProgress.start();
		var ruta = "{{ URL::route('SysWebPAterrizajeVentanasEmergentesClonar') }}";
		//$(".btn").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
		$.post(
			ruta,
			{ idVE: id },
			function(data){
				$.isLoading("hide"); NProgress.done();
				//$("#btnEnviar").prop("disabled", false).html("Eliminar");
				if(data.success){
					new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
					var table = $("#tblVentanasEmergentes").DataTable();
					table.ajax.reload(null, false);
				}
				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"
		);
	}
	function vistaPrevia(id){
		var id = id;
		var tipo = tipo;
		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:       "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('SysWebPAterrizajeVentanaEmergentexClientVeriFrame') }}";
			var obj = dialogRefs.getModalBody();
			var iframe = obj.find("#VistaPreviaIframe");
			var doc = obj.find("#VistaPreviaIframe")[0].contentWindow.document;
			doc.open();
			doc.write("");
			doc.close();
			ObtenerComplementosVistaPrevia(id, ruta, 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, 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, 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, obj, true)
			})
		},
		buttons: [{
			id: "btnCerrar",
			label: "Cerrar",
			cssClass: "btn-default",
			action: function(dialogItself){
				dialogItself.close();
			}
		}]
		});
	}
	function ObtenerComplementosVistaPrevia(id, ruta, obj, movil) {
		var id = id;
		var ruta = ruta;
		var tipo = tipo;
		var obj = obj
		var movil = movil;
		$.post(
			ruta,
			{ id: id, mobile:movil, vista:true},
			function(data){
				$(".VistaPrevia").find(".iframe-container").isLoading( "hide" );
				if(data.success){
					var iframe = obj.find("#VistaPreviaIframe");
					var doc = iframe[0].contentWindow.document;
					doc.open();
					doc.write("<!DOCTYPE HTML>"+data.codigoHTML);
					doc.close();
				}
				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"
		);
	}
	function CambiarNombre(id){
		var id = id;
		var nombre = $("#btnName"+id).closest("tr").find("td:nth-child(2)").text();
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmCambiarNombre'> \
					<label> Nombre </label> \
					<input type='text' class='form-control' name='nombre' id='nombre' value='"+nombre+"'> \
					<span id='errnombre' class='text-danger'></span>\
				</form> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: "Cambiar nombre",
			type: BootstrapDialog.TYPE_PRIMARY,
			message: mensaje,
			size: BootstrapDialog.SIZE_NORMAL,
			draggable: true,
			cssClass: "ModalNombre",
			buttons: [{
				id: "btnCambiar",
				label: "<i class='fa fa-refresh'></i> Cambiar",
				cssClass: "btn-primary",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$.isLoading("hide"); NProgress.done();
					$("#btnCambiar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Cambiando');
					$.post(
						"{{ URL::route('SysWebPAterrizajeVentanasCambiarNombre') }}",
						{ idVE: id , nombre: $(".ModalNombre").find("#nombre").val() },
						function(data){
							$("#btnCambiar").prop("disabled", false).html("<i class='fa fa-refresh'></i> Cambiar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								var table = $("#tblVentanasEmergentes").DataTable();
								table.ajax.reload(null, false);
							}
							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"
					);
				}
			}]
		});
		/*
		$.isLoading({ text: "Cargando..." }); NProgress.start();
		var ruta = "{{ URL::route('SysWebPAterrizajeVentanasEmergentesClonar') }}";
		$.post(
			ruta,
			{ idVE: id, nombre:"" },
			function(data){
				$.isLoading("hide"); NProgress.done();
				if(data.success){
					new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
					var table = $("#tblVentanasEmergentes").DataTable();
					table.ajax.reload(null, false);
				}
				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"
		);*/
	}
	</script>
@stop

@section('JSOr')
@if (Session::has('message'))
new PNotify({ title: "¡Felicidades!", text: "{{ Session::get('message') }}", type: "success" });
@endif
var tabla = $("#tblVentanasEmergentes").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebPAterrizajeVentanasEmergentes') }}",
	columns: [
		{data: null, defaultContent: "", "searchable": false, "orderable": false},
		{data: "nombre", name: "nombre"},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}",
		select: {
			rows: {
				_: "Tienes seleccionada %d filas",
				0: "De clic sobre la fila para seleccionarla",
				1: "Solo tiene 1 fila seleccionada"
			}
		}
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		$(".table-responsive").find("[title]").tooltip();
	},
	autoWidth: false,
	responsive: {
		"details": {
			"type": "column",
			"target": 0
		}
	},
	columnDefs: [{
		"data": null,
		"defaultContent": "",
		"className": "control",
		"orderable": false,
		"width": "9%",
		"targets": 0
	}],
	select: {
		style: "multi",
		selector: "td:not(.control)"
	},
	dom: "Blfrtip",
	buttons: [
		{
			text: "<i class='fa fa-check-square-o' data-toggle='tooltip' data-original-title='Seleccionar todos los elementos'> </i>",
			action: function(){
				tabla.rows().select();
			},
			titleAttr: "Seleccionar todos los elementos"
		},
		{
			text: "<i class='fa fa-square-o' data-toggle='tooltip' data-original-title='Deseleccionar'> </i>",
			action: function(){
				tabla.rows().deselect();
			},
			titleAttr: "Deseleccionar todos los elementos seleccionados"
		}
	],
	order: [[ 1, "asc" ]]
}).on("select", function (e, dt, type, indexes){
	var seleccionados = tabla.rows({ selected: true }).count();
	if( seleccionados > 0 ){
		$("#btnEliminarSeleccionados").show();
	}
	else{
		$("#btnEliminarSeleccionados").hide();
	}
}).on("deselect", function(e, dt, type, indexes){
	var seleccionados = tabla.rows({ selected: true }).count();
	if( seleccionados > 0 ){
		$("#btnEliminarSeleccionados").show();
	}
	else{
		$("#btnEliminarSeleccionados").hide();
	}
});
$("#btnEliminarSeleccionados").click(function(e){
	var mensaje = "<div class='row'> \
						<div class='col-xs-12'> \
							<form id='frmEliminar'> \
								<h2> ¿Seguro que desea eliminar los registros seleccionados? </h2> \
							</form> \
						</div> \
					</div>";
	BootstrapDialog.show({
		title: "Eliminar registro",
		type: BootstrapDialog.TYPE_DANGER,
		message: mensaje,
		draggable: true,
		cssClass: "ModalEliminar",
		buttons: [{
			id: "btnEliminar",
			label: "Eliminar",
			cssClass: "btn-danger",
			action: function(dialogItself){
				$.isLoading({ text: "Cargando..." }); NProgress.start();
				var ids = new Array();
				$("#tblVentanasEmergentes").find(".selected").each(function(e){ ids.push($(this).find(".hdnid").val()); });
				$("#btnEliminarSeleccionados").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
				$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando...');
				$.post(
					"{{ URL::route('SysWebPAterrizajeVentanasEmergentesEliminar') }}",
					{ idVE: ids },
					function(data){
						$.isLoading("hide"); NProgress.done();
						$("#btnEliminarSeleccionados").prop("disabled", false).html("Eliminar seleccionados").hide();
						$("#btnEliminar").prop("disabled", false).html("Eliminar");
						if(data.success){
							new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
							dialogItself.close();
							var table = $("#tblVentanasEmergentes").DataTable();
							table.ajax.reload(null, false);
						}
						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"
				);
			}
		}]
	});
});
$(".paginas").on("click", function(){
	if($(this).find("a").attr("href") == "#ptabvT"){
		$("div.bottom").addClass("hide");
	}
	else{
		$("div.bottom").removeClass("hide");
	}
});
@stop