@extends('layouts.app')

@php
    $eyebrow = 'Overview';
    $pageTitle = 'Dashboard';
@endphp

@section('content')

<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div>
                <div class="label">Total tenants</div>
                <div class="value">{{ $totalTenants }}</div>
                <div class="sub">{{ $activeTenants }} active</div>
            </div>
            <div class="stat-icon bg-grad-blue"><i class="bi bi-people-fill"></i></div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div>
                <div class="label">Active leases</div>
                <div class="value">{{ $activeLeases }}</div>
                <div class="sub">{{ $expiringLeases }} expiring soon</div>
            </div>
            <div class="stat-icon bg-grad-violet"><i class="bi bi-file-earmark-text-fill"></i></div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div>
                <div class="label">Occupancy rate</div>
                <div class="value">{{ $occupancyRate }}%</div>
                <div class="sub">{{ $occupiedUnits }} of {{ $totalUnits }} units</div>
            </div>
            <div class="stat-icon bg-grad-green"><i class="bi bi-building-fill"></i></div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div>
                <div class="label">Monthly revenue</div>
                <div class="value">${{ number_format((float) $monthlyRevenue, 0) }}</div>
                <div class="sub">from active leases</div>
            </div>
            <div class="stat-icon bg-grad-orange"><i class="bi bi-cash-coin"></i></div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div>
                <div class="label">Outstanding invoices</div>
                <div class="value">{{ $outstandingInvoices }}</div>
                <div class="sub">${{ number_format((float) $outstandingBalance, 0) }} owed</div>
            </div>
            <div class="stat-icon bg-grad-blue"><i class="bi bi-receipt"></i></div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div>
                <div class="label">Expenses this month</div>
                <div class="value">${{ number_format((float) $monthExpenses, 0) }}</div>
                <div class="sub">{{ now()->format('F Y') }}</div>
            </div>
            <div class="stat-icon bg-grad-violet"><i class="bi bi-wallet2"></i></div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div>
                <div class="label">Open maintenance</div>
                <div class="value">{{ $openMaintenance }}</div>
                <div class="sub">open or in progress</div>
            </div>
            <div class="stat-icon bg-grad-orange"><i class="bi bi-tools"></i></div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <a href="{{ route('payments.create') }}" class="text-decoration-none text-reset d-flex justify-content-between align-items-start w-100">
                <div>
                    <div class="label">Quick action</div>
                    <div class="value fs-5">Record a payment</div>
                    <div class="sub">log rent received</div>
                </div>
                <div class="stat-icon bg-grad-green"><i class="bi bi-plus-lg"></i></div>
            </a>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-5">
        <div class="surface-card h-100">
            <div class="card-header-clean d-flex align-items-center justify-content-between">
                <span><i class="bi bi-pie-chart-fill me-2 text-primary"></i>Unit occupancy</span>
            </div>
            <div class="p-4">
                <div class="occupancy-bar mb-3">
                    @php
                        $vacantPct = $totalUnits > 0 ? round(($vacantUnits / $totalUnits) * 100) : 0;
                        $otherPct = max(0, 100 - $occupancyRate - $vacantPct);
                    @endphp
                    <div class="seg bg-success" style="width: {{ $occupancyRate }}%"></div>
                    <div class="seg" style="width: {{ $vacantPct }}%; background: #dbe1f5;"></div>
                    <div class="seg" style="width: {{ $otherPct }}%; background: #ffd9ae;"></div>
                </div>
                <div class="d-flex flex-wrap gap-3 small">
                    <span><span class="badge-status st-green">Occupied</span> {{ $occupiedUnits }}</span>
                    <span><span class="badge-status st-gray">Vacant</span> {{ $vacantUnits }}</span>
                    <span><span class="badge-status st-orange">Other</span> {{ max(0, $totalUnits - $occupiedUnits - $vacantUnits) }}</span>
                </div>

                @if($totalUnits === 0)
                    <p class="text-muted small mt-3 mb-0">No units added yet — <a href="{{ route('apartments.create') }}">add your first unit</a>.</p>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="surface-card h-100">
            <div class="card-header-clean d-flex align-items-center justify-content-between">
                <span><i class="bi bi-clock-history me-2 text-primary"></i>Recent leases</span>
                <a href="{{ route('leases.index') }}" class="small fw-semibold">View all <i class="bi bi-arrow-right"></i></a>
            </div>
            <div class="table-responsive">
                <table class="table table-modern mb-0 align-middle">
                    <thead>
                        <tr>
                            <th>Tenant</th>
                            <th>Unit</th>
                            <th>Rent</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentLeases as $lease)
                            <tr>
                                <td class="fw-semibold">{{ $lease->tenant->full_name ?? '—' }}</td>
                                <td>{{ $lease->apartment->unit_number ?? '—' }}</td>
                                <td>${{ number_format((float) $lease->rent_amount, 2) }}</td>
                                <td>
                                    @php
                                        $map = ['active' => 'st-green', 'draft' => 'st-gray', 'expiring' => 'st-orange', 'expired' => 'st-red', 'terminated' => 'st-red', 'renewed' => 'st-blue'];
                                    @endphp
                                    <span class="badge-status {{ $map[$lease->status] ?? 'st-gray' }}">{{ $lease->status }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-4">No leases yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="surface-card">
    <div class="card-header-clean d-flex align-items-center justify-content-between">
        <span><i class="bi bi-person-plus-fill me-2 text-primary"></i>Recently added tenants</span>
        <a href="{{ route('tenants.index') }}" class="small fw-semibold">View all <i class="bi bi-arrow-right"></i></a>
    </div>
    <div class="table-responsive">
        <table class="table table-modern mb-0 align-middle">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentTenants as $tenant)
                    <tr>
                        <td class="d-flex align-items-center gap-2">
                            <span class="row-avatar">{{ strtoupper(substr($tenant->full_name ?? '?', 0, 1)) }}</span>
                            <span class="fw-semibold">{{ $tenant->full_name }}</span>
                        </td>
                        <td>{{ $tenant->phone ?? '—' }}</td>
                        <td>{{ $tenant->email ?? '—' }}</td>
                        <td>
                            @php
                                $tmap = ['active' => 'st-green', 'notice given' => 'st-orange', 'moved out' => 'st-gray', 'blacklisted' => 'st-red'];
                            @endphp
                            <span class="badge-status {{ $tmap[$tenant->status] ?? 'st-gray' }}">{{ $tenant->status }}</span>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="text-center text-muted py-4">No tenants yet — <a href="{{ route('tenants.create') }}">add one</a>.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection