@extends('layout.base')

@section('content')
<h2>Pagos Pendientes</h2>
<div class="row">
	<div class="col-md-2">Hist&oacute;ricos</div>
	<div class="col-md-10" id="historicos"></div>
</div>
<div class="row">
	<div class="col-md-12">
		<div class="loader" id="graph_spinner"></div>
		<canvas id="pagos_pendientes" width="400" height="200"></canvas>
	</div>
</div>
<h2>Para Abonar [<span id="total_pendientes"><div class="loader" style="display: inline-block; width: 26px; height: 26px;"></div></span>]</h2>
<table class="table table-striped">
	<thead>
		<tr>
			<th>Proyecto</th>
			<th>Departamento</th>
			<th>Propietario</th>
			<th>Tipo</th>
			<th>Fecha Deposito</th>
			<th>Valor</th>
		</tr>
	</thead>
	<tbody id="depositos">
	</tbody>
</table>
<h2>Pagos Rebotados Pendientes [<span id="total_rebotes"><div class="loader" style="display: inline-block; width: 26px; height: 26px;"></div></span>]</h2>
<table class="table table-striped">
<thead>
<tr>
	<th>Proyecto</th>
	<th>Departamento</th>
	<th>Propietario</th>
	<th>Tipo</th>
	<th>Fecha Rebote</th>
	<th>Valor</th>
</tr>
</thead>
<tbody id="rebotes">
</tbody>
</table>
@endsection

@push('styles')
	<style type="text/css">
		.loader {
		  border: 8px solid #f3f3f3; /* Light grey */
		  border-top: 8px solid #3498db; /* Blue */
		  border-radius: 50%;
		  width: 48px;
		  height: 48px;
		  animation: spin 2s linear infinite;
		}

		@keyframes spin {
		  0% { transform: rotate(0deg); }
		  100% { transform: rotate(360deg); }
		}
	</style>
@endpush

@push('scripts')
<script type="text/javascript">
function createChart(ctx, labels, data1, data2) {
	var chart = new Chart(ctx, {
		"type": 'bar',
		"data": {
			"labels": labels,
			"datasets": [{
				"label": 'Pagos',
				"data": data1.data,
				"backgroundColor": data1.backgroundColor
			},
			{
				"label": 'Abonos',
				"data": data2.data,
				"backgroundColor": data2.backgroundColor
			}]
		},
		"options": {
			"legend": {
				"display": false
			},
			"scales": {
				"xAxes": [{
					"stacked": true
				}],
				"yAxes": [{
					"stacked": true
				}]
			},
			"plugins": {
				"chartJSPluginBarchartBackground": {
					"color": 'rgb(100, 100, 100)'
				}
			}
		}
	})
}
function formatNumber(number) {
	return (new Intl.NumberFormat('es-ES', {style: 'decimal'}).format(number))
}
var total_pendientes = 0
var sum_pendientes = 0
var total_rebotes = 0
var sum_rebotes = 0
function sortTr(div) {
	var trs = div.children('tr')
	objs = []
	$.each (trs, function(i, el) {
		var tds = $(el).find('td')
		var proyecto = $(tds.get(0)).text()
		var departamento = parseInt($(tds.get(1)).text())
		objs.push({
			'tr': el,
			'proyecto': proyecto,
			'departamento': departamento
		})
	})
	objs.sort((a, b) => {
		if (a.proyecto === b.proyecto) {
			return a.departamento - b.departamento
		}
		return (a.proyecto > b.proyecto) ? 1 : -1
	})
	div.html('')
	$.each(objs, function(i, el) {
		div.append(el.tr)
	})
}
function getDatos(type) {
	var promises = []
	var ventas = []
	@foreach ($ventas as $i => $venta)
	ventas.push({{$venta->id}})
	@if ($i % $lots->size == 0 and $i > 0)
	if (type == 'pendientes') {
		promises.push(getPendiente(ventas))
	}
	if (type == 'rebotes') {
		promises.push(getRebote(ventas))
	}
	ventas = []
	@endif
	@endforeach

	@if ($lots->rest->size > 0)
	ventas = []
	@for ($i = $lots->rest->start; $i < count($ventas); $i ++)
	ventas.push({{$ventas[$i]->id}})
	@endfor
	if (type == 'pendientes') {
		promises.push(getPendiente(ventas))
	}
	if (type == 'rebotes') {
		promises.push(getRebote(ventas))
	}
	@endif

	promises.reduce((promiseChain, currentTask) => {
		return promiseChain.then(chainResults => currentTask.then(currentResult => [ ...chainResults, currentResult]))
	}, Promise.resolve([])).then(arrayOfResults => {
		if (type == 'rebotes') {
			$('#total_rebotes').html(total_rebotes)
			sortTr($('#rebotes'))
			div = $('#rebotes')
			sum = sum_rebotes
		}
		if (type == 'pendientes') {
			$('#total_pendientes').html(total_pendientes)
			sortTr($('#depositos'))
			div = $('#depositos')
			sum = sum_pendientes
		}
		div.append(
			$('<tr></tr>').append(
				$('<td></td>').append(
					$('<strong></strong>').html('TOTAL')
				)
			).append(
				$('<td></td>').attr('colspan', '4')
			).append(
				$('<td></td>').append(
					$('<strong></strong>').html('$ ' + formatNumber(sum))
				)
			)
		)
	})
}
function getPendiente(list) {
	return $.post('{!!nUrl('pagos', 'para_abonar', ['ajax' => true])!!}', {ids: JSON.stringify(list)}, function(data) {
		$.each (data, function(i, venta) {
			if (venta.status == 1) {
				$.each(venta.pagos, function(i, el) {
					$('#depositos').append(
						$('<tr></tr>').append(
							$('<td></td>').html(venta.proyecto)
						).append(
							$('<td></td>').append(
								$('<a></a>').attr('href', '{!!nUrl('ventas', 'show', ['venta' => ''])!!}' + venta.venta).html(venta.departamento)
							)
						).append(
							$('<td></td>').html(venta.propietario)
						).append(
							$('<td></td>').html(el.tipo)
						).append(
							$('<td></td>').html(el.fecha)
						).append(
							$('<td></td>').html('$ ' + el.valor)
						)
					)
					sum_pendientes += parseInt(el.valor.replace('.', ''))
					total_pendientes ++
				})
			}
		});
	}, 'json')
}
function getRebote(list) {
	return $.post('{!!nUrl('pagos', 'rebotes', ['ajax' => true])!!}', {ids: JSON.stringify(list)}, function(data) {
		$.each(data, function(i, rebote) {
			if (rebote.status == 1) {
				$.each(rebote.rebotes, function(i, el) {
					$('#rebotes').append(
						$('<tr></tr>').attr('data-id', el.id).append(
							$('<td></td>').html(el.proyecto)
						).append(
							$('<td></td>').append(
								$('<a></a>').attr('href', '{!!nUrl('ventas', 'show', ['venta' => ''])!!}' + el.venta).html(el.departamento)
							)
						).append(
							$('<td></td>').html(el.propietario)
						).append(
							$('<td></td>').html(el.tipo)
						).append(
							$('<td></td>').html(el.fecha)
						).append(
							$('<td></td>').html('$ ' + el.valor)
						)
					)
					sum_rebotes += parseInt(el.valor.replace('.', ''))
					total_rebotes ++
				})
			}
		})
	}, 'json')
}
$(document).ready(function() {
	$.post('{!!nUrl('pagos', 'para_pendientes', ['ajax' => true])!!}', function(data) {
		$('#historicos').append(
			$('<a></a>').attr('href', '{!!nUrl('cuotas', 'pendientes')!!}').html(data.pagos.historico)
		).append(
			$('<br />')
		).append(
			$('<a></a>').attr('href', '{!!nUrl('cuotas', 'para_abonar')!!}').html(data.abonos.historico)
		)
		$('#graph_spinner').remove()
		var ctx = $('#pagos_pendientes')
		createChart(ctx, data.fechas, data.pagos, data.abonos)
	}, 'json')
	getDatos('pendientes')
	getDatos('rebotes')
});
</script>
@endpush