@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
<style type="text/css">
	.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> API Keys de Sume Clientes
			 					@if( DominioDeConfianza::where('clientes_id', '=', $cid)->count() < $nSitiosPermitidos )
				{{ Form::button('Generar', array('class' => 'btn btn-primary', 'id' => 'btnGenerar2', 'type' => 'button')) }}

			@endif
			</h3>
		</div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover" id="tblApiKey">
						<thead>
							<tr>
								<th style="width: 20%" class="all"> API Key </th>
								<th style="width: 15%" class="min-tablet-l"> Estado </th>
								<th class="min-tablet-l"> Sitio web </th>
								<th style="width: 10%" class="text-center min-tablet-l"> Acciones </th>
							</tr>
						</thead>
						<tbody>
							@forelse($APIKeys as $APIKey)
							<tr>
								<td>
									<div class="input-group">
										<input type="text" class="form-control" readonly value="{{ $APIKey->api_key }}" id="Key{{ $APIKey->id }}"></input>
										<div class="input-group-btn">
											<button id="btnCopiar{{ $APIKey->id }}" class="btn btn-default btnCopiar" data-clipboard-target="#Key{{ $APIKey->id }}">
												<i class="fa fa-copy"></i>
											</button>
										</div>
									</div>
								</td>
								<td> @if($APIKey->estado == 1) En uso @else Disponible @endif </td>
								<td> {{ $APIKey->sitio_web }} </td>
								<td class="text-center">
									<button type="button" onclick="Eliminar({{ $APIKey->id }})" class="btn btn-danger tooltips" data-toggle="tooltip" data-original-title="Eliminar"><i class="fa fa-trash-o"></i></button>
								</td>
							</tr>
							@empty
							<tr class="danger"> <td colspan="4"> No existe ningúna API Key generada </td> </tr>
							@endforelse
						</tbody>
					</table>
				</div>
			</div>
			@if( DominioDeConfianza::where('clientes_id', '=', $cid)->count() < $nSitiosPermitidos )
			<div class="bottom">
				{{ Form::button('Generar', array('class' => 'btn btn-primary', 'id' => 'btnGenerar', 'type' => 'button')) }}
			</div>
			@endif
		</div>
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('ZeroClipBoard/ZeroClipboard.js') }}
{{ HTML::script('ClipboardJS/clipboard.min.js') }}
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('DataTables/dataTables.responsive.min.js') }}
<script type="text/javascript">
	ZeroClipboard.config( { swfPath: "{{ asset('ZeroClipBoard/ZeroClipboard.swf') }}" } );
	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='idAPI' 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('SysWebPAterrizajeAPIKeysEliminar') }}",
						{idAPI:id},
						function(data){
							NProgress.done();
							$("#btnEnviar").prop("disabled", false).html("Eliminar");
							if(data.success){
								new PNotify({ title: "Felicidades!", text: data.mensaje, type: "success" });
								dialogItself.close();
								setTimeout( function(){ window.location.reload(); }, 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"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
</script>
@stop

@section('JSOr')
$("#btnGenerar").click(function(){
	$.isLoading({ text: "Cargando..." }); NProgress.start();
	$("#btnGenerar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Generando');
	$.post(
		"{{ URL::route('SysWebPAterrizajeAPIKeysGenerar') }}",
		{cid: {{ $cid }}},
		function(data){
			$.isLoading("hide"); NProgress.done();
			$("#btnGenerar").prop("disabled", false).html("Generar");
			if(data.success){
				new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
				setTimeout( function(){ window.location.reload(); }, 3000 );
			}
			else{
				if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
			}
		},
		"json"
	);
});
$("#btnGenerar2").click(function(){
	$.isLoading({ text: "Cargando..." }); NProgress.start();
	$("#btnGenerar2").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Generando');
	$.post(
		"{{ URL::route('SysWebPAterrizajeAPIKeysGenerar') }}",
		{cid: {{ $cid }}},
		function(data){
			$.isLoading("hide"); NProgress.done();
			$("#btnGenerar2").prop("disabled", false).html("Generar");
			if(data.success){
				new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
				setTimeout( function(){ window.location.reload(); }, 3000 );
			}
			else{
				if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
			}
		},
		"json"
	);
});
var clipboard = new Clipboard(".btnCopiar");
clipboard.on("success", function(e) {
	$("#"+e.trigger.id).tooltip({trigger: "manual", title: "Copiado!"});
	$("#"+e.trigger.id).tooltip("show");
	$("#"+e.trigger.id).html('<i class="fa fa-check"></i>');
	setTimeout(function(){ $("#"+e.trigger.id).html('<i class="fa fa-copy"></i>'); $("#"+e.trigger.id).tooltip("destroy"); }, 1000);
}).on("error", function(e) {
	var msj = "";
	if(/iPhone|iPad/i.test(navigator.userAgent)) {
		msj = "El navegador web no soporta la función de copiado, debes hacerlo manualmente";
	}
	else if (/Mac/i.test(navigator.userAgent)) {
		msj = "Presiona ⌘-C para copiar";
	}
	else {
		msj = "Presiona Ctrl-C para copiar";
	}
	$("#"+e.trigger.id).tooltip({trigger: "manual", title: msj});
	$("#"+e.trigger.id).tooltip("show");
	setTimeout(function(){ $("#"+e.trigger.id).tooltip("destroy"); }, 5000);
});
$("#tblApiKey").DataTable({
	"processing": true,
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
	},
	autoWidth: false,
	responsive: true,
	//initComplete: function(){
	//	var input = $("#tblApiKey_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(); 
	//	});
	//	$("#tblApiKey_filter").append($searchButton, $clearButton);
	//	$("body").tooltip({selector: "[data-toggle='tooltip']"});
	//}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
@stop