@extends('layout.base')

@section('content')
<div class="row page-heading">
	<h3>Ceder - {{$venta->unidad()->descripcion}} - {{$venta->proyecto()->descripcion}}</h3>
</div>
<br />
<form method="post" class="form-horizontal" action="{{url('', ['p' => 'ventas', 'a' => 'cediendo', 'venta' => $venta->id])}}">
	<div class="form-group">
		<div class="col-md-2">Fecha</div>
		<?php $f = \Carbon\Carbon::today(config('app.timezone')) ?>
		<div class="col-md-1"><select name="day" class="form-control">
		@for ($i = 0; $i < 31; $i ++)
			<option value="{{$i + 1}}"
			@if ($i + 1 == $f->day)
				selected="selected"
			@endif
			>{{str_pad($i + 1, 2, '0', STR_PAD_LEFT)}}</option>
		@endfor
		</select></div>
		<div class="col-md-1"><select name="month" class="form-control">
		@for ($i = 0; $i < 12; $i ++)
			<option value="{{$i + 1}}"
			@if ($i + 1 == $f->month)
				selected="selected"
			@endif
			>{{str_pad($i + 1, 2, '0', STR_PAD_LEFT)}}</option>
		@endfor
		</select></div>
		<div class="col-md-2"><select name="year" class="form-control">
		@for ($i = $f->year; $i > $f->year - 5; $i --)
			<option value="{{$i}}">{{$i}}</option>
		@endfor
		</select></div>
	</div>
	<div class="section-heading">NUEVO PROPIETARIO</div>
	<br />
	<div class="form-group">
		<div class="col-md-2">RUT</div>
		<div class="col-md-2"><input type="text" name="rut" 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" class="form-control" autocomplete="off" /></div>
		<div class="col-md-3"><input type="text" name="paterno" class="form-control" autocomplete="off" /></div>
		<div class="col-md-3"><input type="text" name="materno" class="form-control" autocomplete="off" /></div>
		<div class="col-md-1"><input type="checkbox" name="otro" /></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" class="form-control" autocomplete="off" /></div>
		<div class="col-md-2"><input type="text" name="numero" class="form-control" /></div>
		<div class="col-md-3"><input type="text" name="extra" 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 ($region->numeral == 'RM')
				selected="selected"
			@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"><input type="submit" class="form-control" value="Ceder" /></div>
	</div>
</form>
@endsection

@push('scripts')
	<script type="text/javascript">
		$(document).ready(() => {
			$("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());
		})
	</script>
@endpush