@include('/led/led_header')

<script type="text/javascript" src="{{ URL::asset('js/fancy/fancy.min.js') }}?v={{time()}}"> </script>
{{--<script type="text/javascript" src="{{ URL::asset('components/datatables/media/js/jquery.dataTables.min.js') }}"> </script>
<link href="{{asset('components/datatables/media/css/jquery.dataTables.min.css')}}" rel="stylesheet">--}}

<div class="container">

	<div class="row">
		<div class="col-md-12 h2">Panel de Control SAAS</div>
		</div>
	</div>

	<div class="row">

		<div id="loading_panel_control" class="text-center " style="display:none;border:none;">
			<div class="col-md-12">
				<label>@traducir('cargando', 'Cargando... Por favor aguarde un momento.')</label>
			</div>
			<div class="col-md-12">
				<img style="float:none;" src="/images/loading.gif" class="loading"/>
			</div>
		</div>

		<div class="table table-striped table-condensed"  id="tablaPanelControl" data-paging="true"></div>
	</div>
			
</div>

<div rel="custom-modal:open"  id="modalInquiro" aria-labelledby="modal_contraparte_label" style="display:none;">
	<div class="modal-content" style="height:750px">
     	<div class="modal-header">
				<h3 class="modal-title" id="inquiro_title"></h3>
			</div>
			<div class="modal-body" id="inquiro_body"></div>
	</div>
</div>

<form id="frmSaas" name="frmSaas" method="post" action="/saas/saas-cliente">
	{{ csrf_field() }}
	<input type="hidden" name="saas_cliente" value="" id="_saas_cliente">
</form>


<form name="frmPanelSas" id="frmPanelSas" method="post" action="/saas/sass-panel-control">
	{{csrf_field()}}
</form>

<style>
	.foto_sq img {
		width: 60px; height:60px; margin-top: 0px;margin-left: 0px;
	}
	.close {margin-top: -40px !important}

	.modal-content{
			overflow-y: auto !important;
	}
</style>

<script type="text/javascript" language="javascript">
	
	$(document).ready(function() {

		//-------------------------------------------------------------------------------------------------------------------------------
		//
		Fancy.MODULESDIR = '/js/fancy/';
		var grid;
		var columns = [];
		var columns_name = [];

		$.ajax({
					method : 'post',
					url : '/saas/saas-panel-control',
					data : $('#frmPanelSas').serialize(),
					dataType : 'json',
					beforeSend : function() {
						$('#loading_panel_control').show();
					},
					success : function(resp) {
						$('#loading_panel_control').hide();
						var iv = resp;
						
						var cols = iv.columnas;
						console.log(cols); 
						var values = iv.data;
						var pais = iv.pais;

						var pais = Object.keys(pais).map(function (key) { return pais[key]; });

						for(var j=0; j < cols.length; j++) {

							var icon = '';
							if (cols[j].class_icon) {
								icon = "<i  title='" + cols[j].etiqueta + "' class='" + cols[j].class_icon + " icon-fancy-header'></i>";
							}

							var searchable = cols[j].searchable == 1 ? true : false;

							var col = { 
								'index' : cols[j].clave_indicador , 
								'locked' : (cols[j].locked == 1) ? true : false,
								'height' : 60 , 
								'type' : (cols[j].tipo_dato == 'P') ? 'image' : 'string' , 
								'width' : parseInt(cols[j].width) ,
								'title' : icon + cols[j].etiqueta , 
								'align' : 'center',
								'cellAlign' : cols[j].align , 
								'sortable' : (cols[j].sortable == 1) ? true : false,
								'resizable' : true,
								'columnMenu' : (cols[j].menu == 1) ? true : false,
								'filter' : { 'header' : searchable },

							};


							//reglas para generar el tipo combo de pais
							if (cols[j].clave_indicador == 'country') {
								col.type = 'combo';
								col.multiSelect = true;
								col.itemCheckBox = true;
								col.minListWidth = 100;
								col.data = pais;
								col.displayKey = 'info';
								col.valueKey = 'info';
								col.listItemTpl = '<span class="flag-icon flag-icon-background {cls}"></span>';
								col.render = function (o) {
									var cls = 'flag-icon-' + o.value;
									o.value = '<span class="flag-icon flag-icon-background ' + cls + '"></span>';
									//console.log("b"+o.value);
									return o;
								}
							}

							columns.push(col);
						}
						console.log(columns);
						//console.log(values);
						//return;

					
						grid = new FancyGrid({
							renderTo: 'tablaPanelControl',
							theme: {
								name: 'gray',
							},
							lang: {
								paging: {
									info: 'Página Actual [0] - [1] de [2]',
									page: 'Página',
									of: 'de [0]'
								},
							},
							//width dinámico
							//width: window.innerWidth - (window.innerWidth * .05),
							//height dinámico
							height: window.innerHeight - (window.innerHeight * .20),
							columnLines: true,
							filter: true,
							paging: true,
							paging: {
								//es el default
								pageSize: 20,
								pageSizeData: [20, 40, 60],
								barType: 'tbar'
							},
							//eventos que suceden en la tabla a nivel definición. ( click,doble click, init de tabla, etc)
							cellHeight: 60,
							columns: columns,
							defaults: {
								type: 'string',
								sortable: true,
								//genera sólo las columnas sin un padren "columns".
								menu: 'columns',
							},							
							//modo de selección de la tabla ( el hover )
							selModel: {
								type: 'rows'
							},
							//toda la información de datos que se procesó previamente en la iteración de valores
							data: values,
							events : [{
								cellclick : function(grid, obj) {
									//console.log(obj);
										$('#_iv_busqueda').val(obj.data.iv_busqueda);
										$('#_contraparte').val(obj.data.contraparte);
										$('#_country_code').val(obj.data.country_code);

										$.ajax({
													method : 'post',
													url : '/iv/iv-datos-candidato',
													data : $('#frmSaas').serialize(),
													beforeSend : function() {
														$('#inquiro_title').html('');
														$('#inquiro_body').html('');
													},
													success : function(response) {
														var data = JSON.parse(response);
														//console.log(data);

														$('#inquiro_title').html(data.country+'  '+data.nombre_persona+' ('+data.abreviatura+' '+data.identificacion+')');
														$('#inquiro_body').html(data.vista);
														$('#modalInquiro').customModal({
																closeExisting: false,
																escapeClose: false,
																clickClose: false,
														});
													},
													error : function(err) {

													}

										});

									},
							}],
						});



					}

		});
		$('.fancy-grid-cell-inner>img').addClass('img img-responsive');



		//Evento que sirve para mostrar el "caret" desde el lado izquierdo.
		$(document).on('click', '.fancy-grid-header-cell-text,.fancy-grid-header-cell-container', function (e) {
			e.preventDefault();
			$(".arrow-up-remove").remove();
			$(".arrow-down-remove").remove();
			if ($(this).closest('.fancy-grid-column-sort-ASC').length > 0) {
				$(this).closest('.fancy-grid-column-sort-ASC').find('.fancy-grid-header-cell-text').prepend('<i style="color:#3d87f5;font-size:14px;" class="arrow-up-remove fas fa-caret-up"></i> ')
			} else if ($(this).closest('.fancy-grid-column-sort-DESC').length > 0) {
				$(this).closest('.fancy-grid-column-sort-DESC').find('.fancy-grid-header-cell-text').prepend('<i style="color:#3d87f5;font-size:14px;" class="arrow-down-remove fas fa-caret-down"></i> ')
			}
		});


	});
</script>

@include('/led/led_footer')