@extends('layouts.app', ['title' => term('nav_dashboard','Dashboard')])

@section('content')
<div class="dashboard-modern">
<div class="grid g3" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-users"></i><div class="metric-val">{{ $clientsCount }}</div><div class="metric-label">Clientes registrados</div></div>
    <div class="metric"><i class="fa-solid fa-border-all"></i><div class="metric-val">{{ $availableCount }}/{{ $propertiesCount }}</div><div class="metric-label">Lotes disponibles</div></div>
    <div class="metric"><i class="fa-solid fa-circle-exclamation"></i><div class="metric-val">{{ $overdueAccounts }}</div><div class="metric-label">Cuentas vencidas</div></div>
</div>

<div class="grid g3" style="margin-bottom:16px">
    <div class="card">
        <div class="card-title">Ingresos</div>
        <div class="metric-val" style="color:var(--success)">${{ number_format($income, 0) }}</div>
        <div class="sub">Total registrado</div>
    </div>
    <div class="card">
        <div class="card-title">Egresos</div>
        <div class="metric-val" style="color:var(--danger)">${{ number_format($expense, 0) }}</div>
        <div class="sub">Gastos operativos</div>
    </div>
    <div class="card">
        <div class="card-title">Utilidad</div>
        <div class="metric-val" style="color:var(--gold)">${{ number_format($profit, 0) }}</div>
        <div class="sub">Ingresos menos egresos</div>
    </div>
</div>

<div class="card">
    <div class="card-head">
        <div><div class="card-title">Flujo anual</div><div class="sub">Ingresos y egresos por mes</div></div>
    </div>
    <div style="height:340px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--line);padding-top:12px">
        @php $max = max(1, $chart->max(fn($row) => max($row['income'], $row['expense']))); @endphp
        @foreach($chart as $row)
            <div style="flex:1;display:flex;align-items:flex-end;gap:4px;height:100%">
                <div title="Ingreso: ${{ number_format($row['income'],0) }}" style="height:{{ ($row['income'] / $max) * 100 }}%;flex:1;border-radius:4px 4px 0 0;background:var(--gold)"></div>
                <div title="Egreso: ${{ number_format($row['expense'],0) }}" style="height:{{ ($row['expense'] / $max) * 100 }}%;flex:1;border-radius:4px 4px 0 0;background:var(--info)"></div>
            </div>
        @endforeach
    </div>
    <div style="display:flex;justify-content:space-around;color:var(--soft);font-size:11px;margin-top:8px">
        @foreach(['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'] as $m)<span>{{ $m }}</span>@endforeach
    </div>
</div>
</div>
@endsection