@extends('layout.base')

@section('content')
<div class="row page-heading">
	<h3>Agregar Unidades - <a href="{{nUrl('proyectos', 'list_unidades', ['proyecto' => $tipo->proyecto()->id])}}">{{$tipo->proyecto()->descripcion}}</a> - {{$tipo->nombre}}</h3>
</div>
<br />
<div class="row">
	<div class="col-md-2">Tipo</div>
	<div class="col-md-3">{{$tipo->nombre}}</div>
	<div class="col-md-2">{{$tipo->abreviacion}}</div>
	<div class="col-md-2">{{format('m2', $tipo->m2())}} m&#0178;</div>
</div>
<br />
<form method="post" class="form-horizontal" action="{{url('', ['p' => 'unidades', 'a' => 'agregar', 'tipo' => $tipo->id])}}">
	<div class="form-group">
		<div class="col-md-2">Unidades</div>
		<div class="col-md-1" id="n_unidades"></div>
		<div class="col-md-offset-7 col-md-1 text-right"><span class="glyphicon glyphicon-plus agregar" id="agregar_unidad"></span></div>
		<div class="col-md-1"><input type="text" size="3" maxlength="3" id="unis" value="1" class="form-control" /></div>
		<input type="hidden" name="unidades" value="[1]" />
	</div>
	<div class="form-group" id="primero">
		<div class="col-md-2">Descripci&oacute;n</div>
		<div class="col-md-2"><input type="text" name="descripcion1" class="form-control" /></div>
		<div class="col-md-2">Piso</div>
		<div class="col-md-1"><input type="text" name="piso1" maxlength="3" class="form-control" /></div>
	</div>
	<div id="unidades"></div>
	<div class="form-group">
		<div class="col-md-offset-2 col-md-3"><input type="submit" value="Agregar" class="form-control" /></div>
	</div>
</form>
@endsection

@push('scripts')
<script type="text/javascript">
var unidades = [1];
$(document).ready(function() {
	$('#agregar_unidad').click(function(e) {
		var cnt = $('#unis').val();
		for (var i = 0; i < cnt; i ++) {
			addUnidad();
		}
	});
	$('#n_unidades').html(unidades.length)
});
function addUnidad() {
	var n = unidades[unidades.length - 1] + 1;
	if (unidades.length == 0) {
		n = 1
	}
	unidades[unidades.length] = n;
	$('#n_unidades').html(unidades.length)

	$('#unidades').append(
		$('<div></div>').attr('class', 'form-group').append(
			$('<div></div>').attr('class', 'col-md-2').html('Descripci&oacute;n')
		).append(
			$('<div></div>').attr('class', 'col-md-2').append($('<input/>').attr('type', 'text').attr('name', 'descripcion' + n).attr('class', 'form-control'))
		).append(
			$('<div></div>').attr('class', 'col-md-2').html('Piso')
		).append(
			$('<div></div>').attr('class', 'col-md-1').append($('<input/>').attr('type', 'text').attr('name', 'piso' + n).attr('maxlength', 3).attr('class', 'form-control'))
		).append(
			$('<div></div>').attr('class', 'col-md-1').append($('<span></span>').attr('class', 'glyphicon glyphicon-minus remover').attr('id', 'remover_unidad' + n).attr('data-id', n))
		)
	)

	$("input[name='unidades']").val(JSON.stringify(unidades));
	$('#remover_unidad' + n).click(function(e) {
		i = $(this).attr('data-id');
		removeUnidad(i);
	});
}
function removeUnidad(n) {
	var unis = $('#unidades');
	unis.find("input[name='descripcion" + n + "']").parent().parent().next().remove();
	unis.find("input[name='descripcion" + n + "']").parent().parent().remove();
	i = unidades.binaryIndexOf(n);
	unidades.splice(i, 1);
	$('#n_unidades').html(unidades.length)
	$("input[name='unidades']").val(JSON.stringify(unidades));
}
</script>
@endpush