@extends('layout.base')

@section('content')
<div class="row page-heading">
	<h3>Entregar - {{$venta->unidad()->descripcion}} - {{$venta->proyecto()->descripcion}}</h3>
</div>
<br />
<form class="form-horizontal" method="post" action="{{url('', ['p' => 'entregas', 'a' => 'agregar', 'venta' => $venta->id])}}">
<div class="form-group">
	<div class="col-md-2">Fecha</div>
	@include('form.fecha')
</div>
<div class="form-group">
	<div class="col-md-2">Mediciones</div>
	<input type="hidden" name="mediciones" value="[]" />
	<div class="col-md-3"><select name="tipo_medicion" class="form-control">
	@foreach ($venta->proyecto()->tiposMediciones() as $tipo)
		<option value="{{$tipo->id}}">{{ucwords($tipo->descripcion)}}</option>
	@endforeach
	</select></div>
	<div class="col-md-1"><span class="glyphicon glyphicon-plus agregar" id="agregar_medicion"></span></div>
	<div id="mediciones" class="col-md-6"></div>
</div>
<div class="form-group">
	<div class="col-md-2">Observaciones</div>
	<input type="hidden" name="observaciones" value="[]" />
	<div class="col-md-1"><span class="glyphicon glyphicon-plus agregar" id="agregar_observacion"></span></div>
	<div id="observaciones" class="col-md-9"></div>
</div>
<div class="form-group">
	<div class="col-md-offset-2 col-md-3"><input type="submit" value="Entregar" class="form-control" /></div>
</div>
</form>
@endsection

@push('scripts')
<script type="text/javascript">
var mediciones = [];
var observaciones = [];
$(document).ready(function() {
	$('#agregar_medicion').click(function(e) {
		agregarMedicion();
	});
	$('#agregar_observacion').click(function(e) {
		agregarObservacion();
	});
});
function agregarMedicion() {
	var mds = $('#mediciones');
	var n = mediciones[mediciones.length - 1] + 1;
	if (mediciones.length == 0) {
		n = 1;
	}
	var tipo = $("select[name='tipo_medicion']").val();
	mediciones[mediciones.length] = n;
	var input = $('<input/>').attr('type', 'text').attr('name', 'medicion' + n).attr('class', 'form-control');
	var tinput = $('<input/>').attr('type', 'hidden').attr('name', 'tipo_medicion' + n).attr('class', 'form-control').val(tipo);

	mds.append(
			$('<div></div>').attr('class', 'form-group').append(
					$('<div></div>').attr('class', 'col-md-2').html(tinput)
			).append(
					$('<div></div>').attr('class', 'col-md-9').append(
							input
					)
			).append(
					$('<div></div>').attr('class', 'col-md-1').append(
							$('<span></span>').attr('class', 'glyphicon glyphicon-minus remover').attr('data-id', n).attr('id', 'remover_medicion' + n)
					)
			)
	);

	$("input[name='mediciones']").val(JSON.stringify(mediciones));
	$('#remover_medicion' + n).click(function(e) {
		i = $(this).attr('data-id');
		removeMedicion(i);
	});
}
function removeMedicion(n) {
	var mds = $('#mediciones');
	mds.find("input[name='medicion" + n + "']").parent().parent().remove();
	i = mediciones.binaryIndexOf(n);
	mediciones.splice(i, 1);
	$("input[name='mediciones']").val(JSON.stringify(mediciones));
}
function agregarObservacion() {
	var obs = $('#observaciones');
	var submit = $('#submit');
	var n = observaciones[observaciones.length - 1] + 1;
	if (observaciones.length == 0) {
		n = 1;
	}
	observaciones[observaciones.length] = n;
	var input = $('<input/>').attr('type', 'text').attr('name', 'observacion' + n).attr('class', 'form-control');

	obs.append(
			$('<div></div>').attr('class', 'form-group').append(
					$('<div></div>').attr('class', 'col-md-2').html(n)
			).append(
					$('<div></div>').attr('class', 'col-md-9').append(
							input
					)
			).append(
					$('<div></div>').attr('class', 'col-md-1').append(
							$('<span></span>').attr('class', 'glyphicon glyphicon-minus remover').attr('data-id', n).attr('id', 'remover_observacion' + n)
					)
			)
	);

	$("input[name='observaciones']").val(JSON.stringify(observaciones));
	$('#remover_observacion' + n).click(function(e) {
		i = $(this).attr('data-id');
		removeObservacion(i);
	});
}
function removeObservacion(n) {
	var obs = $('#observaciones');
	console.debug(obs.find("input[name='observacion" + n + "']"));
	obs.find("input[name='observacion" + n + "']").parent().parent().remove();
	i = observaciones.binaryIndexOf(n);
	observaciones.splice(i, 1);
	$("input[name='observaciones']").val(JSON.stringify(observaciones));
}
</script>
@endpush