<div class="p-4 lg:p-6 space-y-6">
    <!-- Header -->
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
        <p class="text-sm text-gray-500 mt-1">Welcome back, <?= e(Auth::user()['first_name'] ?? '') ?>. Here's your portfolio overview.</p>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Properties -->
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5 card-hover">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-gray-900"><?= number_format($totalProperties) ?></div>
            <div class="text-xs text-gray-500 mt-1">Total Properties</div>
        </div>

        <!-- Units / Occupancy -->
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5 card-hover">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z"/></svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-gray-900"><?= $occupancyRate ?>%</div>
            <div class="text-xs text-gray-500 mt-1"><?= number_format($occupiedUnits) ?> of <?= number_format($totalUnits) ?> units occupied</div>
        </div>

        <!-- Rent Collected -->
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5 card-hover">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-violet-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-gray-900"><?= formatMoney($collectedRent) ?></div>
            <div class="text-xs text-gray-500 mt-1">Collected this month</div>
        </div>

        <!-- Outstanding -->
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5 card-hover">
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-gray-900"><?= formatMoney($outstandingRent) ?></div>
            <div class="text-xs text-gray-500 mt-1">Outstanding balance</div>
        </div>
    </div>

    <!-- Secondary KPIs -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl border border-gray-200/80 p-4 flex items-center gap-4">
            <div class="w-9 h-9 rounded-lg bg-sky-50 flex items-center justify-center">
                <svg class="w-4 h-4 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
            <div>
                <div class="text-lg font-bold text-gray-900"><?= number_format($totalTenants) ?></div>
                <div class="text-xs text-gray-500">Active Tenants</div>
            </div>
        </div>
        <div class="bg-white rounded-2xl border border-gray-200/80 p-4 flex items-center gap-4">
            <div class="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center">
                <svg class="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6z"/></svg>
            </div>
            <div>
                <div class="text-lg font-bold text-gray-900"><?= number_format($vacantUnits) ?></div>
                <div class="text-xs text-gray-500">Vacant Units</div>
            </div>
        </div>
        <div class="bg-white rounded-2xl border border-gray-200/80 p-4 flex items-center gap-4">
            <div class="w-9 h-9 rounded-lg bg-orange-50 flex items-center justify-center">
                <svg class="w-4 h-4 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35"/></svg>
            </div>
            <div>
                <div class="text-lg font-bold text-gray-900"><?= number_format($openMaintenance) ?></div>
                <div class="text-xs text-gray-500">Open Requests</div>
            </div>
        </div>
        <div class="bg-white rounded-2xl border border-gray-200/80 p-4 flex items-center gap-4">
            <div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center">
                <svg class="w-4 h-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <div>
                <div class="text-lg font-bold text-gray-900"><?= count($expiringLeases) ?></div>
                <div class="text-xs text-gray-500">Expiring Leases (60d)</div>
            </div>
        </div>
    </div>

    <!-- Charts & Activity Row -->
    <div class="grid lg:grid-cols-3 gap-6">
        <!-- Revenue Chart -->
        <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-200/80 p-6">
            <h3 class="text-sm font-semibold text-gray-900 mb-4">Revenue — Last 6 Months</h3>
            <div class="h-48 flex items-end gap-3">
                <?php
                $maxRev = max(array_column($revenueData, 'amount')) ?: 1;
                foreach ($revenueData as $rd):
                    $pct = ($rd['amount'] / $maxRev) * 100;
                ?>
                <div class="flex-1 flex flex-col items-center gap-2">
                    <div class="text-[10px] text-gray-500 font-medium"><?= formatMoney($rd['amount'], 0) ?></div>
                    <div class="w-full bg-blue-100 rounded-t-lg relative" style="height: <?= max($pct, 4) ?>%">
                        <div class="absolute inset-0 bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg"></div>
                    </div>
                    <div class="text-xs text-gray-500"><?= $rd['month'] ?></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="bg-white rounded-2xl border border-gray-200/80 p-6">
            <h3 class="text-sm font-semibold text-gray-900 mb-4">Monthly Summary</h3>
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-600">Expected</span>
                        <span class="font-medium text-gray-900"><?= formatMoney($expectedRent) ?></span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: 100%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-600">Collected</span>
                        <span class="font-medium text-emerald-600"><?= formatMoney($collectedRent) ?></span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <?php $collPct = $expectedRent > 0 ? min(($collectedRent / $expectedRent) * 100, 100) : 0; ?>
                        <div class="bg-emerald-500 h-2 rounded-full" style="width: <?= $collPct ?>%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-600">Outstanding</span>
                        <span class="font-medium text-amber-600"><?= formatMoney($outstandingRent) ?></span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2">
                        <?php $outPct = $expectedRent > 0 ? min(($outstandingRent / $expectedRent) * 100, 100) : 0; ?>
                        <div class="bg-amber-500 h-2 rounded-full" style="width: <?= $outPct ?>%"></div>
                    </div>
                </div>
                <hr class="border-gray-100">
                <div class="text-center">
                    <div class="text-3xl font-bold text-gray-900"><?= $occupancyRate ?>%</div>
                    <div class="text-xs text-gray-500 mt-1">Portfolio Occupancy</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity Row -->
    <div class="grid lg:grid-cols-2 gap-6">
        <!-- Recent Payments -->
        <div class="bg-white rounded-2xl border border-gray-200/80 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-semibold text-gray-900">Recent Payments</h3>
                <a href="?page=payments" class="text-xs text-blue-600 hover:text-blue-700 font-medium">View all →</a>
            </div>
            <?php if (empty($recentPayments)): ?>
                <div class="text-center py-8 text-sm text-gray-400">No payments recorded yet</div>
            <?php else: ?>
                <div class="space-y-3">
                    <?php foreach ($recentPayments as $pmt): ?>
                    <div class="flex items-center justify-between py-2">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-xs font-semibold text-gray-600">
                                <?= getInitials(($pmt['first_name'] ?? '') . ' ' . ($pmt['last_name'] ?? '')) ?>
                            </div>
                            <div>
                                <div class="text-sm font-medium text-gray-900"><?= e(($pmt['first_name'] ?? '') . ' ' . ($pmt['last_name'] ?? '')) ?></div>
                                <div class="text-xs text-gray-500"><?= timeAgo($pmt['created_at']) ?></div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-semibold text-gray-900"><?= formatMoney($pmt['amount']) ?></div>
                            <?= statusBadge($pmt['status']) ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- Recent Maintenance -->
        <div class="bg-white rounded-2xl border border-gray-200/80 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-semibold text-gray-900">Recent Maintenance</h3>
                <a href="?page=maintenance" class="text-xs text-blue-600 hover:text-blue-700 font-medium">View all →</a>
            </div>
            <?php if (empty($recentMaintenance)): ?>
                <div class="text-center py-8 text-sm text-gray-400">No maintenance requests yet</div>
            <?php else: ?>
                <div class="space-y-3">
                    <?php foreach ($recentMaintenance as $mr): ?>
                    <div class="flex items-center justify-between py-2">
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-gray-900 truncate"><?= e($mr['title']) ?></div>
                            <div class="text-xs text-gray-500"><?= e(($mr['property_name'] ?? '') . ($mr['unit_number'] ? ' #' . $mr['unit_number'] : '')) ?> · <?= timeAgo($mr['created_at']) ?></div>
                        </div>
                        <div class="flex items-center gap-2 ml-3">
                            <?= priorityBadge($mr['priority'] ?? 'medium') ?>
                            <?= statusBadge($mr['status']) ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Expiring Leases -->
    <?php if (!empty($expiringLeases)): ?>
    <div class="bg-white rounded-2xl border border-gray-200/80 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-gray-900">Leases Expiring Soon</h3>
            <a href="?page=leases" class="text-xs text-blue-600 hover:text-blue-700 font-medium">View all →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-xs text-gray-500 border-b border-gray-100">
                        <th class="pb-2 font-medium">Tenant</th>
                        <th class="pb-2 font-medium">Property / Unit</th>
                        <th class="pb-2 font-medium">Expires</th>
                        <th class="pb-2 font-medium">Days Left</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    <?php foreach ($expiringLeases as $lease): 
                        $daysLeft = max(0, (int)((strtotime($lease['end_date']) - time()) / 86400));
                    ?>
                    <tr>
                        <td class="py-2.5 font-medium text-gray-900"><?= e(($lease['first_name'] ?? '') . ' ' . ($lease['last_name'] ?? '')) ?></td>
                        <td class="py-2.5 text-gray-600"><?= e($lease['property_name'] ?? '') ?> <?= $lease['unit_number'] ? '#' . e($lease['unit_number']) : '' ?></td>
                        <td class="py-2.5 text-gray-600"><?= formatDate($lease['end_date']) ?></td>
                        <td class="py-2.5">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium <?= $daysLeft <= 14 ? 'bg-red-50 text-red-700' : ($daysLeft <= 30 ? 'bg-amber-50 text-amber-700' : 'bg-gray-100 text-gray-600') ?>">
                                <?= $daysLeft ?> days
                            </span>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php endif; ?>
</div>
