@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('bootstrap-select/css/bootstrap-select.min.css') }}
{{-- 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;
	}
	.color-head-modal .modal-header {
		background-color: #363b3f !important;	
	}
	@media only screen and (min-width: 768px){ 
		.modal-dialog {
			width: 600px;
		}
	}
	.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="fa fa-window-maximize"></i> Ventanas emergentes </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"> Listado de ventanas emergentes creadas </h3> </div>
			<div class="porlets-content">
				@if(count($Ventanas) > 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 ventanas 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="tblVentanasEmergentes" cellspacing="0" width="100%">
						<thead>
							<tr>
								<th></th>
								<th class="all" data-priority="1"> Nombre </th>
								<th> Tipo </th>
								<th class="min-tablet-l" data-priority="2" style="width: 35%;"> Acciones </th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div class="bottom">
							</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') }}
{{ HTML::script('bootstrap-select/js/bootstrap-select.min.js') }}
{{ HTML::script('bootstrap-select/js/i18n/defaults-es_CL.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('SysWebVEmergentesVentanasEmergentesEliminar') }}",
						{ 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('SysWebVEmergentesVentanasEmergentesClonar') }}";
		//$(".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 mdAvatar",
		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('SysWebVEmergentesVentanasEmergentesVeriFrame') }}";
			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 btn-lg btn-block",
				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('SysWebVEmergentesVentanasEmergentesCambiarNombre') }}",
						{ 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"
					);
				}
			}]
		});
	}
	function AgregarPaginasNuevas(){
		var mensaje = '<div class="row"> \
			<div class="col-xs-12"> \
				<form id="frmVentanasN"> \
					<div class="form-group"> \
						<label for="slTipoHeader">Seleccione la ventana a agregar</label> \
						<select class="form-control" id="slIdsV" name="slIdsV" class="selectpicker" multiple title="Seleccione una opción"> \
							@foreach ($Ventanas as $ventana) \
								<option selected value="{{ $ventana->id }}">{{ $ventana->nombre }}</option> \
							@endforeach \
						</select> \
						<span class="text-danger" id="errslIdsV"> </span> \
					</div> \
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Agregar ventanas",
			type: BootstrapDialog.TYPE_PRIMARY,
			size: BootstrapDialog.SIZE_NORMAL,
			message: mensaje,
			draggable: true,
			cssClass: "ModalAgregar color-head-modal",
			onshown: function(dialogRef){
				$("#slIdsV").selectpicker();
            },
			buttons: [{
				id: "btnGuardar",
				label: "Guardar",
				cssClass: "btn-success btn-lg btn-block",
				action: function(dialogItself){
					if($('[name="slIdsV"]').length > 0){
						$.isLoading({ text: "Cargando..." }); NProgress.start();
						$("#btnGuardar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i>Guardando');
						$.post(
							"{{ URL::route('SysWebVEmergentesVentanasEmergentesAgregarNuevas') }}",
							{ slIdsV: $('[name="slIdsV"]').val()},
							function(data){
								$.isLoading("hide"); NProgress.done();
								$("#btnGuardar").prop("disabled", false).html('Guardar');
								if(data.success){
									new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
									setInterval(location.reload(),10000);
									var table = $("#tblVentanasEmergentes").DataTable();
									table.ajax.reload(null, false);
									dialogItself.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"
						);
					}
					else{
						$("#errslIdsV").text("Debes seleccionar por lo menos una ventana");
					}
				}
			}]
		});
	}
	</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('SysWebVEmergentesVentanasEmergentesTEL') }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [
		{data: null, defaultContent: "", "searchable": false, "orderable": false},
		{data: "nombre", name: "nombre"},
		{data: "identificador", name: "identificador", "searchable": false, "orderable": false,
			"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
				$(nTd).text("")
				if(oData.identificador == "CFV"){
					$(nTd).text("Contenido digital");
				}
				else{
					$(nTd).text("Tienda en linea");
				}
			}
		},
		{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
	}],
	order: [[ 1, "asc" ]],
	//initComplete: function(){
	//	var input = $(".dataTables_filter input").unbind(),
	//	self = this.api(),
	//	$searchButton = $('<button class="btn btn-primary tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Buscar">').html('<i class="fa fa-search"></i>').click(function(){
	//		self.search(input.val().trim()).draw();
	//	}),
	//	$clearButton = $('<button class="btn btn-default tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Limpiar">').html('<i class="fa fa-paint-brush"></i>').click(function(){
	//		input.val('');
	//		$searchButton.click(); 
	//	});
	//	$(".dataTables_filter").append($searchButton, $clearButton);
	//	$("body").tooltip({selector: "[data-toggle='tooltip']"});
	//}
});
$(".paginas").on("click", function(){
	if($(this).find("a").attr("href") == "#ptabvT"){
		$("div.bottom").addClass("hide");
	}
	else{
		$("div.bottom").removeClass("hide");
	}
});
$('#tblVentanasEmergentes').on('processing.dt', function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
@stop