@extends('layout.base')

@section('content')
<div class="panel panel-default">
	<div class="panel-heading">Abonar Cuotas</div>
	<div class="panel-body">
		Hay {{$total}} cuotas para abonar.<br />
		<div class="row">
			<div class="col-md-2">Se est&aacute;n viendo de ha</div>
			<div class="col-md-1"><input type="text" name="step" class="form-control" value="{{((get('step')) ? get('step') : 30)}}" /></div>
			<div class="col-md-3"> en {{$pages}} p&aacute;ginas.</div>
		</div>
		<div class="row">
			<div class="col-md-offset-6 col-md-2 text-right">Filtro</div>
			<div class="col-md-4"><input type="text" class="form-control focus" id="tableFilter" /></div>
		</div>
		<br />
		<div class="row">
			<div class="col-md-1">
			@if (get('start') > 0)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => 0, 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-left"></span><span class="glyphicon glyphicon-chevron-left"></span></a>
			@endif
			</div>
			<div class="col-md-1">
			@if (get('start') > 0)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => max(0, get('start') - ((get('step')) ? get('step') : 30)), 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-left"></span></a>
			@endif
			</div>
			<div class="col-md-8 text-center">{{$current}} / {{$pages}}</div>
			<div class="col-md-1 text-right">
			@if (get('start') + ((get('step')) ? get('step') : 30) < $total)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => max(0, get('start')) + ((get('step')) ? get('step') : 30), 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-right"></span></a>
			@endif
			</div>
			<div class="col-md-1 text-right">
			@if (get('start') + ((get('step')) ? get('step') : 30) < $total)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => (((get('step')) ? get('step') : 30) * floor($total / ((get('step')) ? get('step') : 30))), 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-right"></span><span class="glyphicon glyphicon-chevron-right"></span></a>
			@endif
			</div>
		</div>
		<table class="table table-striped" id="filteredTable">
		<thead>
		<tr>
			<th rowspan="2">Proyecto</th>
			<th>Departamento</th>
			<th>Valor Cuota</th>
			<th>Fecha Depositada</th>
			<th></th>
		</tr>
		<tr>
			<th>Propietario</th>
			<th>Fecha Cuota</th>
			<th>Fecha Abono / Devoluci&oacute;n</th>
			<th></th>
		</tr>
		</thead>
		<tbody>
		<?php $f = \Carbon\Carbon::today(config('app.timezone')) ?>
		@foreach ($cuotas as $cuota)
		<tr>
			<td rowspan="2">{{$cuota->pie()->venta()->proyecto()->descripcion}}</td>
			<td><a href="{{url('', ['p' => 'ventas', 'a' => 'show', 'venta' => $cuota->pie()->venta()->id])}}">{{$cuota->pie()->venta()->unidad()->descripcion}}</a></td>
			<td>$ {{format('pesos', $cuota->pago()->valor)}}</td>
			<td>{{format('shortDate', $cuota->pago()->estado()->fecha)}}</td>
			<td><a href="#" class="abonar" data-id="{{$cuota->id}}">&check;</a></td>
		</tr>
		<tr>
			<td>{{$cuota->pie()->venta()->propietario()->nombreCompleto()}}</td>
			<td>{{format('shortDate', $cuota->pago()->fecha)}}</td>
			<td>
				<div class="row">
					<div class="col-md-3"><select name="d{{$cuota->id}}" 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-3"><select name="m{{$cuota->id}}" 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-4"><select name="y{{$cuota->id}}" class="form-control">
					@for ($i = $f->year; $i > $f->year - 5; $i --)
						<option value="{{$i}}">{{$i}}</option>
					@endfor
					</select></div>
				</div>
			</td>
			<td><a href="#" class="rebote" data-id="{{$cuota->id}}">X</a></td>
		</tr>
		@endforeach
		</tbody>
		</table>
		<div class="row">
			<div class="col-md-1">
			@if (get('start') > 0)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => 0, 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-left"></span><span class="glyphicon glyphicon-chevron-left"></span></a>
			@endif
			</div>
			<div class="col-md-1">
			@if (get('start') > 0)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => max(0, get('start') - ((get('step')) ? get('step') : 30)), 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-left"></span></a>
			@endif
			</div>
			<div class="col-md-8 text-center">{{$current}} / {{$pages}}</div>
			<div class="col-md-1 text-right">
			@if (get('start') + ((get('step')) ? get('step') : 30) < $total)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => max(0, get('start')) + ((get('step')) ? get('step') : 30), 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-right"></span></a>
			@endif
			</div>
			<div class="col-md-1 text-right">
			@if (get('start') + ((get('step')) ? get('step') : 30) < $total)
				<a href="{{url('', ['p' => 'cuotas', 'a' => 'para_abonar', 'start' => (((get('step')) ? get('step') : 30) * floor($total / ((get('step')) ? get('step') : 30))), 'step' => ((get('step')) ? get('step') : 30)])}}"><span class="glyphicon glyphicon-chevron-right"></span><span class="glyphicon glyphicon-chevron-right"></span></a>
			@endif
			</div>
		</div>
	</div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
$(document).ready(function() {
	$('.focus').focus();
	$("input[name='step']").change(function(e) {
		var step = $(this).val();
		var qs = parseQS();
		qs.step = step;
		var url = window.location;
		console.debug(url);
		url.search = stringifyQS(qs);
	});
	$('#tableFilter').filterTable({"table": 'filteredTable', "height": 2, "excludes": ['Fecha Abono / Devolución', '']});
	$('.abonar').click(function(e) {
		var id = $(this).attr('data-id');
		var fy = $("select[name='y" + id + "']").val();
		var fm = $("select[name='m" + id + "']").val();
		var fd = $("select[name='d" + id + "']").val();
		var fecha = fy + '-' + fm + '-' + fd;
		$.post('{!!url('', ['p' => 'cuotas', 'a' => 'abonar'])!!}', {"cuota": id, "fecha": fecha}, function(data) {
			if (data == 'ok') {
				window.location.reload();
			} else {
				console.debug(data);
			}
		});
	});
	$('.rebote').click(function(e) {
		var id = $(this).attr('data-id');
		var fy = $("select[name='y" + id + "']").val();
		var fm = $("select[name='m" + id + "']").val();
		var fd = $("select[name='d" + id + "']").val();
		var fecha = fy + '-' + fm + '-' + fd;
		$.post('{!!url('', ['p' => 'cuotas', 'a' => 'rebotar'])!!}', {"cuota": id, "fecha": fecha}, function(data) {
			if (data == 'ok') {
				window.location.reload();
			} else {
				console.debug(data);
			}
		});
	});
});
function parseQS() {
	var url = window.location;
	var qs = url.search;
	var parsed = qs.substring(1).split('&');
	var output = {};
	$.each(parsed, function(i, e) {
		var data = e.split('=');
		output[data[0]] = data[1];
	});
	return output;
}
function stringifyQS(qsObj) {
	return '?' + joinObj(qsObj, '=', '&');
}
function joinObj(obj, glue, separator) {
	var object = obj;

	if (glue == undefined)
		glue = '=';

	if (separator == undefined)
		separator = ',';

	return $.map(Object.getOwnPropertyNames(object), function(k) { return [k, object[k]].join(glue) }).join(separator);
}
</script>
@endpush