{% extends '::base.html.twig' %}

{% block title %}Idiomas{% endblock %}

{% block menuTop %}
{% endblock %}


{% block dashboard %}
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>    
	<style type="text/css">
        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}
		input
		{
			font-weight: normal;
		}
		input.clv
		{
			background-color: #FFC;
		}

		.form-control::-moz-placeholder
		{
			font-style: italic;
			color: #CCC;
			opacity: 1;
		}
		.form-control:-ms-input-placeholder
		{
			font-style: italic;
			color: #CCC;
		}
		.form-control::-webkit-input-placeholder
		{
			font-style: italic;
			color: #CCC;
		}

		.clv.form-control::-moz-placeholder
		{
			font-style: italic;
			color: #F99;
			opacity: 1;
		}
		.clv.form-control:-ms-input-placeholder
		{
			font-style: italic;
			color: #F99;
		}
		.clv.form-control::-webkit-input-placeholder
		{
			font-style: italic;
			color: #F99;
		}

	</style>
	<div class="input-group col-md-6">
		<input type="text" class="form-control" id="buscador" onkeyup="buscar(this.value)" placeholder="Buscador" />
		<span class="input-group-btn">
			<input type="button" class="btn btn-info" onclick="document.getElementById('buscador').value=''; buscar('');" value="Borrar" />
		</span>
	</div>
	<script>
		function buscar(filter)
		{
			filter = filter.toUpperCase();
			$('#idiomas').find("tr").each
			(
				function()
				{
					var tr = this;
					var encontrado = false;
					$(this).find('input').each
					(
						function()
						{
							valor = this.value;
							if (valor.toUpperCase().indexOf(filter) > -1)
							{
								encontrado = true;
							}
						}
					);
					tr.style.display = (encontrado==true)?"":"none";
				}
			);
		}
	</script>
	<form id="form_idiomas" onsubmit="return false;">
		<table class="table table-condensed table-hover table-striped table-bordered">
			<thead>
				<tr>
					<th>Texto Clave</th>
						{% for idioma in idiomas %}
						<th>{{ idioma }}
							<input type="hidden" name="target[]" value="{{ idioma }}" />
						</th>
					{% endfor %}
				</tr>
			</thead>
			<tbody id="idiomas">
				{% for texto in textos %}
					{% set i = loop.index0 %}
					<tr id="tr_{{ loop.index0 }}">
						<td><input data-position="{{ loop.index0 }}" placeholder="-eliminar-" class="form-control clv" type="text" name="clave[]" value="{{ texto.key }}" /></td>
							{% for idioma in idiomas %}
							<td><input placeholder="{{ idioma }}" type="text" class="form-control" name="texto_{{ idioma }}[]" value="{{ texto.lang[idioma] is defined?texto.lang[idioma] }}" /></td>
							{% endfor %}
					</tr>
				{% endfor %}
			</tbody>
			<tfoot>
				<tr>
					<td> <button type="button" class="btn btn-info" onclick="nueva_entrada()" >Nueva Entrada</button> </td>
					<td> <button type="button" class="btn btn-success" onclick="guardar()" >Guardar</button> </td>
				</tr>
			</tfoot>
		</table>
	</form>
	<script>
		function nueva_entrada()
		{
			var last = (parseInt(($("input.clv:last").data('position'))) || 0) + 1;
			var linea = '<tr id="tr_' + last + '"><td><input data-position="' + last + '" placeholder="-eliminar-" class="form-control clv" type="text" name="clave[]" /></td>{% for idioma in idiomas %}<td><input placeholder="{{ idioma }}" type="text" class="form-control" name="texto_{{ idioma }}[]" /></td>{% endfor %}</tr>';
			$('#idiomas').append(linea);
		}
		function guardar()
		{
			var parametros = buscar_parametros();

			cargando(true);

			$.post('{{path('idiomas_procesar')}}', parametros, function (data)
			{
				cargando(false);

				if (data.result == 'ok')
				{
					alert('Procesado Ok');
					// eliminar los vacios
					eliminar_vacios();
				}
				else
				{
					alert(data.errorMsg);
				}

			}
			, 'json');
		}
		function buscar_parametros()
		{
			return {
		{% for item in idiomas %}
					texto_{{ item }}: buscar_array('texto_{{ item }}[]'),
		{% endfor %}
					clave: buscar_array('clave[]'),
					target: buscar_array('target[]')
				};
			}
			function buscar_array(nombre)
			{
				var salida = [];
				var items = document.getElementsByName(nombre);
				for (var i in items)
				{
					salida[salida.length] = (items[i].value);
				}
				return salida;
			}
			function eliminar_vacios()
			{
				$("input.clv").each(
						function ()
						{
							if ($.trim($(this).val()) == '')
							{
								$("#tr_" + $(this).data('position')).remove();
							}
						}
				);
			}
			function cargando(show)
			{
				if (show == true)
				{
					$.isLoading({text: "Loading"});
				}
				else
				{
					$.isLoading("hide");
				}

			}
	</script>
{% endblock %}