@if ($proyecto->superficie('total') != null)
<tr>
	<td>Superficies</td>
	<td colspan="2">
		<table class="table table-striped">
			<tr>
				<td>Total</td>
				<td>{!!format('m2', $proyecto->superficie('total'), null, true)!!}</td>
				<td rowspan="6">
						<canvas id="superficies" width="300" height="200"></canvas>
				</td>
			</tr>
			<tr>
				<td>Sobre Nivel</td>
				<td>{!!format('m2', $proyecto->superficie('snt'), null, true)!!}</td>
			</tr>
			<tr>
				<td>Bajo Nivel</td>
				<td>{!!format('m2', $proyecto->superficie('bnt'), null, true)!!}</td>
			</tr>
			<tr>
				<td>Vendible</td>
				<td>{!!format('m2', $proyecto->superficie('vendible'), null, true)!!}</td>
			</tr>
			@if (count($proyecto->ventas()) > 0)
			<tr>
				<td>Vendido</td>
				<td>{!!format('m2', $proyecto->superficie('vendida'), null, true)!!}</td>
			</tr>
			<tr>
				<td>Por Vender</td>
				<td>{!!format('m2', $proyecto->superficie('por vender'), null, true)!!}</td>
			</tr>
			@endif
		</table>
	</td>
</tr>
@endif

@push('scripts')
@if ($proyecto->superficie('total') != null)
<script>
Number.prototype.formatMoney = function(c, d, t) {
    var n = this,
		c = isNaN(c = Math.abs(c)) ? 2 : c,
    d = d == undefined ? "." : d,
    t = t == undefined ? "," : t,
    s = n < 0 ? "-" : "",
    i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
    j = ((j = i.length) > 3) ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };
function changeLabel(tooltipItem, data) {
	var label = data.labels[tooltipItem.index] || '';
	var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
	var total = data.datasets[tooltipItem.datasetIndex].data.reduce((a, b) => a + b, 0);
	if (label) {
		label += ': ';
	}
	label += value.formatMoney(0, ',', '.') + ' (' + Math.round(value / total * 100, 1) + '%)';
	return label;
}
var ctx = document.getElementById('superficies').getContext('2d');
var sData = {
	"datasets": [{
		"data": [
			{{(($proyecto->superficie('vendible') > 0) ? round($proyecto->superficie('vendida') / $proyecto->superficie('vendible') * 100, 2) : 0)}},
			{{(($proyecto->superficie('vendible') > 0) ? round($proyecto->superficie('por vender') / $proyecto->superficie('vendible') * 100, 2) : 0)}}
		],
		"backgroundColor": ['rgba(0, 200, 0, .7)', 'rgba(200, 0, 0, .7)']
	}],
	"labels": ["Vendida", "Por Vender"]
};
var sOptions = {
	"responsive": false,
	"title": {
		"display": true,
		"text": "Superfice Vendible"
	},
	"legend": {
		"position": 'right'
	},
	"tooltips": {
		"callbacks": {
			"label": changeLabel
		}
	}
};

var superficies = new Chart(ctx, {
	"type": "pie",
	"data": sData,
	"options": sOptions
});
</script>
@endif
@endpush