@include('header')
@include('navigator_menu_principal')

<div class="container">

	<div class="row">
		<div class="col-md-10 h2">Indicadores del producto</div>

		<div class="col-md-2 text-right">
			<button type="button" class="btn btn-fidelitas btn-primary"
				onclick="location.href='/led/led-productos'">Volver a productos</button>
		</div>
	</div>

	<div class="row">
		<div class="col-md-10 h3">{{$prd->nombre_producto}}</div>
		<div class="col-md-2 text-right">
			<button type="button" class="btn btn-fidelitas btn-primary" data-producto="{{$prd->producto}}"
				data-toggle="modal" data-target="#modalIndicadores" id="addindic">Agregar indicador</button>
		</div>
	</div>


	<table class="table table-condensed table-striped" id="tablaIndicadores">
		<thead>
			<tr>
				<th class="text-center">Orden</th>
				<th class="text-left">Nombre</th>
				<th class="text-center">Clave</th>
				<th class="text-center">Etiqueta</th>
				<th class="text-center">Imputa</th>
				<th class="text-center">Dato</th>
				<th class="text-center">Rango</th>
				<th class="text-center">Control</th>
				<th class="text-center">Vis. grilla</th>
				<th class="text-center">Acciones</th>
			</tr>
		</thead>
		<tbody>
			@foreach($ind as $item)
				<tr>
					<td class="text-center">{{$item->orden}}</td>
					<td class="text-left">{{$item->nombre_indicador}}</td>
					<td class="text-center">{{$item->clave_indicador}}</td>
					<td class="text-center">{{$item->etiqueta}}</td>
					<td class="text-center">@if ($item->valoracion == 'F') Manual Fidelitas @else
						@if($item->valoracion == 'C') Manual Cliente @else
							@if ($item->valoracion == 'A') Cálculo automático @else
							@if ($item->valoracion == 'D') Dependiente de otro/s indicador/es @endif @endif @endif @endif
					</td>
					<td class="text-center">{{$item->nombre_tipo_dato}}</td>
					<td class="text-center">{{$item->rango_inferior}} - {{$item->rango_superior}} @if($item->intervalo > 0)
					({{$item->intervalo}}) @endif</td>
					<td class="text-center">{{$item->tipo_control}}</td>
					<td class="text-center">@if($item->visible > 0) SI @else NO @endif</td>
					<td class="text-center" nowrap="nowrap">
						<button type="button" class="btn btn-primary btn-fidelitas movebtn"
							data-indicador="{{$item->indicador}}" data-producto="{{$item->producto}}" data-move="up"><i
								class="fa fa-arrow-up"></i></button>
						<button type="button" class="btn btn-primary btn-fidelitas movebtn"
							data-indicador="{{$item->indicador}}" data-producto="{{$item->producto}}" data-move="down"><i
								class="fa fa-arrow-down"></i></button>
						<button type="button" class="btn btn-primary btn-fidelitas editbtn"
							data-indicador="{{$item->indicador}}" data-toggle="modal" data-target="#modalIndicadores"><i
								class="fa fa-edit"></i></button>
						<button type="button" class="btn btn-primary btn-fidelitas deletebtn"
							data-indicador="{{$item->indicador}}" data-toggle="modal" data-target="#modalIndicadores"><i
								class="fa fa-trash"></i></button>

					</td>

				</tr>
			@endforeach

		</tbody>
		<tfoot></tfoot>
	</table>

</div>



<div id="modalIndicadores" class="modal fade">
	<div class="modal-dialog" style="width:800px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3 class="modal-title"></h3>
			</div>
			<div class="modal-body" id="indic_edit"></div>
		</div>
	</div>
</div>

<form name="frmIndicadorMove" method="post" id="frmIndicadorMove" action="/led/led-indicadores-move">
	{{csrf_field()}}
	<input type="hidden" name="indicador" value="" id="_indicador">
	<input type="hidden" name="producto" value="" id="_producto">
	<input type="hidden" name="move" value="" id="_move">
</form>


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


		$('#tablaIndicadores').DataTable({
			"pagingType": "full_numbers",
			"dom": "if<t>lp",
			"ordering": true,
			"columns": [null, null, null, null, null, null, null, null, null, { "orderable": false }],
			"searching": true,
			"order": [[0, "asc"]],
			"info": true,
			"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
			"pageLength": 50,
			"language": {
				"lengthMenu": "Mostrar _MENU_ registros por página",
				"zeroRecords": "No se encontraron resultados",
				//"info": "Mostrando página _PAGE_ de _PAGES_",
				//"info": "Total de Registros: _MAX_", 
				"info": "Mostrando  _START_  de  _END_ - <b>Total:</b> _TOTAL_ registros",
				"infoEmpty": "No hay registros disponibles",
				"infoFiltered": "(filtered from _MAX_ total records)",
				"sSearch": "Buscar",
				"oPaginate": {
					"sFirst": "Primera",
					"sPrevious": "Anterior",
					"sNext": "Siguiente",
					"sLast": "Última"
				},
			}
		});



		$(document).on('click', '#addindic', function () {
			var id = $(this).data('producto');
			$('.modal-title').html('Agregar indicador');
			$.ajax({
				method: 'post',
				async: true,
				url: '/led/led-indicadores-new',
				data: { '_token': '{{csrf_token()}}', 'producto': id },
				beforeSend: function () {
					$('#indic_edit').html('');
				},
				success: function (data) {
					$('#indic_edit').html(data);
				},

			});
		});


		$(document).on('click', '.movebtn', function () {
			var id = $(this).data('indicador');
			var pr = $(this).data('producto');
			var mv = $(this).data('move');
			$('#_indicador').val(id);
			$('#_producto').val(pr);
			$('#_move').val(mv);
			$('#frmIndicadorMove').submit();
		});



		$(document).on('click', '.editbtn', function () {
			var id = $(this).data('indicador');
			$('.modal-title').html('Editar indicador');
			$.ajax({
				method: 'post',
				async: true,
				url: '/led/led-indicadores-edit',
				data: { '_token': '{{csrf_token()}}', 'indicador': id },
				beforeSend: function () {
					$('#indic_edit').html('');
				},
				success: function (data) {
					$('#indic_edit').html(data);
				},

			});
		});


		$(document).on('click', '.deletebtn', function () {
			var id = $(this).data('indicador');
			$('.modal-title').html('Borrar indicador');
			$.ajax({
				method: 'post',
				async: true,
				url: '/led/led-indicadores-confirm',
				data: { '_token': '{{csrf_token()}}', 'indicador': id },
				beforeSend: function () {
					$('#indic_edit').html('');
				},
				success: function (data) {
					$('#indic_edit').html(data);
				},

			});


		});

	});

</script>

@include('footer')