@extends('layout.base')

@section('content')
<div class="row page-heading">
	<h3>Editar Cierre</h3>
</div>
<br />
<form class="form-horizontal" method="post" action="{{nUrl('cierres', 'do_edit', ['cierre' => $cierre->id])}}">
	<div class="form-group">
		<div class="col-md-2">Proyecto</div>
		<div class="col-md-3"><select name="proyecto" id="proyecto" class="form-control">
			<option value="">---</option>
			@foreach ($proyectos as $proyecto)
				<option value="{{$proyecto->id}}"
					@if ($proyecto->id == $cierre->proyecto)
						selected="selected"
					@endif
					>{{$proyecto->descripcion}}</option>
			@endforeach
		</select></div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Fecha</div>
		<?php $f = $cierre->fecha() ?>
		@include('form.fecha')
	</div>
	<div class="form-group">
		<div class="col-md-2">Departamento</div>
		<div class="col-md-3">
			<select name="departamento" id="departamento" class="form-control">
				@foreach ($cierre->proyecto()->unidades('departamento') as $unidad)
					<option value="{{$unidad->id}}"
						@if ($unidad->id == $cierre->unidadPrincipal()->unidad()->id)
							selected="selected"
						@endif
						>{{$unidad->descripcion}}</option>
				@endforeach
			</select>
		</div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Precio</div>
		<div class="col-md-3"><input type="text" name="precio" value="{{$cierre->precio}}" class="form-control" /></div>
	</div>
	@foreach ($cierre->unidades() as $unidad)
		<div class="form-group">
			<div class="col-md-2">{{ucwords($unidad->unidad()->tipo()->descripcion)}}</div>
			<div class="col-md-3">
				<select name="departamento" id="departamento" class="form-control">
					@foreach ($cierre->proyecto()->unidades($unidad->unidad()->tipo()->descripcion) as $u)
						<option value="{{$u->id}}"
							@if ($u->id == $unidad->unidad()->id)
								selected="selected"
							@endif
							>{{$u->descripcion}}</option>
					@endforeach
				</select>
			</div>
		</div>
	@endforeach
	@foreach ($valores as $valor)
		<div class="form-group">
			<div class="col-md-2">{{ucwords($valor->descripcion)}}</div>
			<div class="col-md-3">
				<input type="text" name="{{$valor->descripcion}}"
					@if ($cierre->valor($valor->descripcion))
						value="{{$cierre->valor($valor->descripcion)->valor}}"
					@endif
					class="form-control" />
			</div>
		</div>
	@endforeach
	<div class="section-heading">PROPIETARIO</div>
	<br />
	<div class="form-group">
		<div class="col-md-2">RUT</div>
		<div class="col-md-2"><input type="text" name="rut"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->rut()}}"
			@endif
			class="form-control" /></div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Nombre</div>
		<div class="col-md-3"><input type="text" name="nombres"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->nombres}}"
			@endif
			class="form-control" autocomplete="off" /></div>
		<div class="col-md-3"><input type="text" name="paterno"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->apellido_paterno}}"
			@endif
			class="form-control" autocomplete="off" /></div>
		<div class="col-md-3"><input type="text" name="materno"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->apellido_materno}}"
			@endif
			class="form-control" autocomplete="off" /></div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Sexo</div>
		<div class="col-md-1"><input type="radio" name="sexo" value="m"
			@if ($cierre->propietario() and $cierre->propietario()->sexo == 'm')
				selected="selected"
			@endif
			class="form-radio" /> Hombre</div>
		<div class="col-md-1"><input type="radio" name="sexo" value="f"
			@if ($cierre->propietario() and $cierre->propietario()->sexo == 'f')
				selected="selected"
			@endif
			class="form-radio" /> Mujer</div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Estado Civil</div>
		<div class="col-md-3"><select name="estado_civil" class="form-control">
			<option value="soltero"
			@if ($cierre->propietario() and $cierre->propietario()->estado_civil == 'soltero')
				selected="selected"
			@endif
			>Soltero/a</option>
			<option value="casado"
			@if ($cierre->propietario() and $cierre->propietario()->estado_civil == 'casado')
				selected="selected"
			@endif
			>Casado/a</option>
			<option value="divorciado"
			@if ($cierre->propietario() and $cierre->propietario()->estado_civil == 'divorciado')
				selected="selected"
			@endif
			>Divorciado/a</option>
			<option value="viudo"
			@if ($cierre->propietario() and $cierre->propietario()->estado_civil == 'viudo')
				selected="selected"
			@endif
			>Viudo/a</option>
		</select></div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Profesi&oacute;n</div>
		<div class="col-md-3"><input type="text" name="profesion"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->profesion}}"
			@endif
			class="form-control" /></div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Tel&eacute;fono</div>
		<div class="col-md-1">+56</div>
		<div class="col-md-1"><input type="text" name="codigo_telefono"
			@if ($cierre->propietario())
				value="{{substr($cierre->propietario()->telefono, 0, 1)}}"
			@endif
			maxlength="1" class="form-control" /></div>
		<div class="col-md-3"><input type="text" name="telefono"
			@if ($cierre->propietario())
				value="{{substr($cierre->propietario()->telefono, 1)}}"
			@endif
			class="form-control" maxlength="8" /></div>
	</div>
	<div class="form-group">
		<div class="col-md-2">E-Mail</div>
		<div class="col-md-3"><input type="text" name="email"
			@if ($cierre->propietario())
				value="{{explode('@', $cierre->propietario()->email)[0]}}"
			@endif
			class="form-control" /></div>
		<div class="col-md-1">@</div>
		<div clasS="col-md-3"><input type="text" name="email_domain"
			@if ($cierre->propietario())
				value="{{explode('@', $cierre->propietario()->email)[1]}}"
			@endif
			class="form-control" /></div>
	</div>
	<div class="form-group">
		<div class="col-md-2">Direcci&oacute;n</div>
		<div class="col-md-4"><input type="text" name="calle"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->direccion()->calle}}"
			@endif
			class="form-control" autocomplete="off" /></div>
		<div class="col-md-2"><input type="text" name="numero"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->direccion()->numero}}"
			@endif
			class="form-control" /></div>
		<div class="col-md-3"><input type="text" name="extra"
			@if ($cierre->propietario())
				value="{{$cierre->propietario()->direccion()->extra}}"
			@endif
			class="form-control" autocomplete="off" /></div>
	</div>
	<div class="form-group">
		<div class="col-md-offset-2 col-md-5"><select name="region" class="form-control">
		@foreach ($regiones as $region)
			<option value="{{$region->id}}"
				@if ($cierre->propietario() and $cierre->propietario()->direccion()->comuna()->provincia()->region()->id == $region->id)
					selected="selected"
				@else
					@if ($region->numeral == 'RM')
						selected="selected"
					@endif
				@endif
			>{{$region->descripcion}}</option>
		@endforeach
		</select></div>
		<div class="col-md-4"><select name="comuna" class="form-control"></select></div>
	</div>
	<div class="form-group">
		<div class="col-md-offset-2 col-md-2">
			<button class="form-control">Editar</button>
		</div>
	</div>
</form>
@endsection

@push('scripts')
<script type="text/javascript">
var unidades = [];
var pie = false;
var credito = false;
$(document).ready(function() {
	$("input[name='rut']").rut({"formatOn": 'keyup', "validateOn": 'blur'}).on('rutInvalido', function(e) {
		$(this).parent().next().remove();
		$(this).parent().after($('<div></div>').attr('class', 'col-md-2 alert-danger').html('Rut inv&aacute;lido'));
	}).on('rutValido', function(e, rut, dv) {
		$(this).parent().next().remove();

		$.post('{!!url('', ['p' => 'ajax', 'a' => 'propietario', 'ajax' => true])!!}', {"rut": rut}, function(data) {
			if (data.trim() != '' || data != 'false') {
				info = $.parseJSON(data);

				$("input[name='nombres']").val(info.nombres);
				$("input[name='paterno']").val(info.apellido_paterno);
				$("input[name='materno']").val(info.apellido_materno);

				if (info.direccion) {
					$.post('{!!url('', ['p' => 'ajax', 'a' => 'direccion', 'ajax' => true])!!}', {"direccion": info.direccion}, function(info) {
						$("input[name='calle']").val(info.calle);
						$("input[name='numero']").val(info.numero);
						$("input[name='extra']").val(info.extra);
						$("select[name='region']").val(info.comuna.provincia.region.id);
						changeRegion().done(function() {
							$("select[name='comuna']").val(info.comuna.id);
						});
					}, 'json');
				}
			}
		});
	});

	$.post('{!!url('', ['p' => 'ajax', 'a' => 'nombres', 'ajax' => true])!!}', function(data) {
		$("input[name='nombres']").typeahead({
			"source": data,
			"updater": function(item) {
		    	return this.$element.val().replace(/[^ ]*$/,'') + item + ' ';
		    },
		    "matcher": function (item) {
			    var tquery = extractor(this.query);
			    if(!tquery) return false;
			    return ~item.toLowerCase().indexOf(tquery.toLowerCase())
			},
		    "highlighter": function (item) {
			    var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
			    return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
				    return '<strong>' + match + '</strong>'
				});
			}
		});
	}, 'json');

	$.post('{!!url('', ['p' => 'ajax', 'a' => 'apellidos', 'ajax' => true])!!}', function(data) {
		$("input[name='paterno']").typeahead({"source": data});
		$("input[name='materno']").typeahead({"source": data});
	}, 'json');


	$.post('{!!url('', ['p' => 'ajax', 'a' => 'calles', 'ajax' => true])!!}', function(data) {
		$("input[name='calle']").typeahead({"source": data});
	}, 'json');

	$("input[name='extra']").typeahead({"source": ['Casa', 'Departamento', 'Oficina', 'Villa']});

	$("select[name='region']").change(function(e) {
		changeRegion($(this).val());
	});
	changeRegion($("select[name='region']").val());

	$("select[name='proyecto']").change(function(e) {
		changeProyecto();
	});
	changeProyecto();
	$('#agregar_unidad').click(function(e) {
		agregarUnidad();
	});
	$('#agregar_pie').click(function(e) {
		agregarPie();
	});
	$('#agregar_credito').click(function(e) {
		agregarCredito();
	});
});
function extractor(query) {
    var result = /([^ ]+)$/.exec(query);
    if(result && result[1])
        return result[1].trim();
    return '';
}
function changeProyecto() {
	var proyecto = $("select[name='proyecto']").val();
	if (proyecto == '0') {
		$('#unidades').hide();
		return;
	}
	$.post('{!!url('', ['p' => 'ajax', 'a' => 'tipo_unidades', 'ajax' => true])!!}', {"proyecto": proyecto}, function(data) {
		var tipo = $("select[name='tipo_unidad']");
		tipo.html('');
		var info = $.parseJSON(data);
		$.each(info, function(i, e) {
			tipo.append($('<option></option>').attr('value', e.id).html(e.descripcion.ucwords()));
		});
		$('#unidades').show();
	});
	$.post('{!!url('', ['p' => 'ajax', 'a' => 'operadores', 'ajax' => true])!!}', {"proyecto": proyecto}, function(data) {
		var operadores = $("select[name='agente']");
		operadores.html('').append($('<option></option>').attr('value', 0).html('---'));
		var info = $.parseJSON(data);
		$.each(info, function(i, e) {
			operadores.append($('<option></option>').attr('value', e.id).html(e.abreviacion));
		});
	});
}
function agregarUnidad() {
	var proyecto = $("select[name='proyecto']").val();
	if (proyecto == '0') {
		$('#unidades').hide();
	}
	var tipo = $("select[name='tipo_unidad']").val();

	$.post('{!!url('', ['p' => 'ajax', 'a' => 'unidades', 'ajax' => true])!!}', {"proyecto": proyecto, "tipo": tipo}, function(data) {
		var info = $.parseJSON(data);
		var unis = $('#unidades');
		var n = unidades[unidades.length - 1] + 1;
		if (unidades.length == 0) {
			n = 1
		}
		unidades[unidades.length] = n;
		var select = $('<select></select>').attr('name', 'unidad' + n).attr('class', 'form-control');

		$.each(info, function(i, e) {
			select.append($('<option></option>').attr('value', e.id).html(e.descripcion + ' - ' + e.abreviacion));
		});
		var ntipo = $("select[name='tipo_unidad'] option[value='" + tipo + "']").text();
		unis.append(
				$('<div></div>').attr('class', 'form-group').append(
						$('<div></div>').attr('class', 'col-md-2').html(ntipo)
				).append(
						$('<div></div>').attr('class', 'col-md-3').append(
								select
						)
				).append(
						$('<div></div>').attr('class', 'col-md-1').append(
								$('<span></span>').attr('class', 'glyphicon glyphicon-minus remover').attr('data-id', n).attr('id', 'remover_unidad' + 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("select[name='unidad" + n + "']").parent().parent().remove();
	i = unidades.binaryIndexOf(n);
	unidades.splice(i, 1);
	$("input[name='unidades']").val(JSON.stringify(unidades));
}
function agregarPie() {
	if (pie) {
		return;
	}
	pie = true;
	$('#pie').html('').append(
			$('<div></div>').attr('class', 'col-md-2').html('Pie')
	).append(
			$('<div></div>').attr('class', 'col-md-3').append(
					$('<input/>').attr('type', 'text').attr('name', 'pie').attr('class', 'form-control')
			)
	).append(
			$('<div></div>').attr('class', 'col-md-1').html('UF')
	).append(
			$('<div></div>').attr('class', 'col-md-1').append(
					$('<span></span>').attr('class', 'glyphicon glyphicon-minus remover').attr('id', 'remover_pie')
			)
	);
	$('#remover_pie').click(function(e) {
		removePie();
	});
}
function removePie() {
	if (!pie) {
		return;
	}
	pie = false;
	$('#pie').next().remove();
	$('#pie').html('').append(
			$('<div></div>').attr('class', 'col-md-2').html('Pie')
	).append(
			$('<div></div>').attr('class', 'col-md-1').append(
					$('<span></span>').attr('class', 'glyphicon glyphicon-plus agregar').attr('id', 'agregar_pie')
			)
	);
	$('#agregar_pie').click(function(e) {
		agregarPie();
	});
}
function agregarCredito() {
	if (credito) {
		return;
	}
	credito = true;
	$('#credito').html('').append(
			$('<div></div>').attr('class', 'col-md-2').html('Cr&eacute;dito')
	).append(
			$('<div></div>').attr('class', 'col-md-3').append(
					$('<input/>').attr('type', 'text').attr('name', 'credito').attr('class', 'form-control')
			)
	).append(
			$('<div></div>').attr('class', 'col-md-1').html('UF')
	).append(
			$('<div></div>').attr('class', 'col-md-1').append(
					$('<span></span>').attr('class', 'glyphicon glyphicon-minus remover').attr('id', 'remove_credito')
			)
	);
	$('#remove_credito').click(function(e) {
		removeCredito();
	});
}
function removeCredito() {
	if (!credito) {
		return;
	}
	credito = false;
	$('#credito').html('').append(
			$('<div></div>').attr('class', 'col-md-2').html('Cr&eacute;dito')
	).append(
			$('<div></div>').attr('class', 'col-md-1').append(
					$('<span></span>').attr('class', 'glyphicon glyphicon-plus agregar').attr('id', 'agregar_credito')
			)
	);
	$('#agregar_credito').click(function(e) {
		agregarCredito();
	});
}
function changeRegion(region) {
	var jq_comunas = $("select[name='comuna']");
	var region = $("select[name='region']").val();
	jq_comunas.html('');
	return $.post('{!!url('', ['p' => 'ajax', 'a' => 'comunas', 'ajax' => true])!!}', {"region": region}, function(data) {
		info = $.parseJSON(data);
		$.each(info, function(i, e) {
			jq_comunas.append(
					$('<option></option>').attr('value', e.id).html(e.descripcion)
			);
		});
	});
}
</script>
@endpush