<div class="stock-header" style="background: linear-gradient(120deg, #1B5FA8 0%, #123E70 100%);">
    <div class="sth-icon"><i class="fa-solid fa-users"></i></div>
    <div class="sth-text">
        <h2>App Customers</h2>
        <div class="sth-sub">
            <?= count($customers) ?> registered accounts · <span style="color:#8FE0A0;"><i class="fa-solid fa-circle" style="font-size:8px;"></i> <?= (int) $onlineCount ?> online now</span>
        </div>
    </div>
    <div class="sth-actions">
        <a href="<?= Router::url('dashboard') ?>" class="btn sth-btn"><i class="fa-solid fa-arrow-left"></i> Back to Dashboard</a>
    </div>
</div>

<div class="stat-mini-grid">
    <div class="stat-mini sm-blue"><div class="sm-value"><?= count($customers) ?></div><div class="sm-label">Registered Customers</div></div>
    <div class="stat-mini sm-green"><div class="sm-value"><?= (int) $onlineCount ?></div><div class="sm-label">Online Now</div></div>
</div>

<div class="filter-bar">
    <div class="fb-search"><i class="fa-solid fa-magnifying-glass"></i><input type="text" id="rmsAppCustSearch" placeholder="Name, phone, email..." onkeyup="rmsFilterAppCustomers()"></div>
</div>

<div class="dark-table-panel">
    <div class="dtp-head">
        <span><i class="fa-solid fa-table-list"></i> Registered App Customers</span>
        <span class="dtp-count" id="rmsAppCustCount"><?= count($customers) ?> records</span>
    </div>
    <div style="overflow-x:auto;">
    <table class="data-table">
    <thead><tr><th>#</th><th>Customer</th><th>Contact</th><th>DOB</th><th>Orders</th><th>Total Spent</th><th>Last Active</th><th>Status</th><th>Actions</th></tr></thead>
    <tbody>
    <?php foreach ($customers as $i => $c):
        $isOnline = $c['last_active_at'] && (strtotime($c['last_active_at']) >= strtotime('-5 minutes'));
        $initials = strtoupper(substr($c['full_name'], 0, 1));
    ?>
    <tr class="rms-appcust-row" data-name="<?= e(mb_strtolower($c['full_name'] . ' ' . $c['phone'] . ' ' . ($c['email'] ?? ''))) ?>">
        <td><?= $i + 1 ?></td>
        <td>
            <div style="display:flex;align-items:center;gap:10px;">
                <?php if (!empty($c['profile_pic_path'])): ?>
                <img src="<?= BASE_URL ?>/<?= e($c['profile_pic_path']) ?>" style="width:34px;height:34px;border-radius:50%;object-fit:cover;">
                <?php else: ?>
                <div class="supplier-avatar" style="background:var(--color-navy);"><?= e($initials) ?></div>
                <?php endif; ?>
                <div>
                    <strong><?= e($c['full_name']) ?></strong>
                    <?php if ($c['address']): ?><div style="font-size:11px;color:var(--color-text-muted);"><?= e($c['address']) ?></div><?php endif; ?>
                </div>
            </div>
        </td>
        <td>
            <div style="font-size:12px;"><i class="fa-solid fa-phone"></i> <?= e($c['phone']) ?></div>
            <?php if ($c['email']): ?><div style="font-size:11px;color:var(--color-text-muted);"><i class="fa-solid fa-envelope"></i> <?= e($c['email']) ?></div><?php endif; ?>
        </td>
        <td><?= $c['date_of_birth'] ? date('d M Y', strtotime($c['date_of_birth'])) : '<span style="color:var(--color-text-muted);">—</span>' ?></td>
        <td><span class="badge badge-blue"><?= (int) $c['order_count'] ?></span></td>
        <td><?= formatMoney((float) $c['total_spent']) ?></td>
        <td><?= $c['last_active_at'] ? date('d M, h:i A', strtotime($c['last_active_at'])) : '<span style="color:var(--color-text-muted);">Never</span>' ?></td>
        <td><?= $isOnline ? '<span class="badge badge-green"><i class="fa-solid fa-circle" style="font-size:6px;"></i> Online</span>' : '<span class="badge badge-gray">Offline</span>' ?></td>
        <td><button type="button" class="icon-btn icon-btn-teal" onclick="rmsOpenModal('rmsViewCustomer<?= $c['id'] ?>')" title="View"><i class="fa-solid fa-eye"></i></button></td>
    </tr>
    <?php endforeach; ?>
    <?php if (empty($customers)): ?>
    <tr><td colspan="9" style="text-align:center;color:var(--color-text-muted);padding:30px;">No registered app customers yet.</td></tr>
    <?php endif; ?>
    </tbody>
    </table>
    </div>
</div>

<?php foreach ($customers as $c):
    $isOnline = $c['last_active_at'] && (strtotime($c['last_active_at']) >= strtotime('-5 minutes'));
    $initials = strtoupper(substr($c['full_name'], 0, 1));
    $history = $ordersByCustomer[$c['id']] ?? [];
    $statusBadge = ['PENDING' => 'badge-gray', 'CONFIRMED' => 'badge-blue', 'PREPARING' => 'badge-gold', 'READY' => 'badge-gold', 'OUT_FOR_DELIVERY' => 'badge-blue', 'COMPLETED' => 'badge-green', 'CANCELLED' => 'badge-red'];
?>
<div class="rms-modal-overlay" id="rmsViewCustomer<?= $c['id'] ?>">
    <div class="rms-modal" style="max-width:560px;">
        <div class="rms-modal-head">
            <h3><i class="fa-solid fa-user" style="color:var(--color-teal);margin-right:6px;"></i>Customer Details</h3>
            <button type="button" class="rms-modal-close" onclick="rmsCloseModal('rmsViewCustomer<?= $c['id'] ?>')"><i class="fa-solid fa-xmark"></i></button>
        </div>

        <div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
            <?php if (!empty($c['profile_pic_path'])): ?>
            <img src="<?= BASE_URL ?>/<?= e($c['profile_pic_path']) ?>" style="width:56px;height:56px;border-radius:50%;object-fit:cover;">
            <?php else: ?>
            <div class="supplier-avatar" style="width:56px;height:56px;font-size:18px;background:var(--color-navy);"><?= e($initials) ?></div>
            <?php endif; ?>
            <div>
                <div style="font-size:16px;font-weight:700;"><?= e($c['full_name']) ?></div>
                <div><?= $isOnline ? '<span class="badge badge-green"><i class="fa-solid fa-circle" style="font-size:6px;"></i> Online</span>' : '<span class="badge badge-gray">Offline</span>' ?></div>
            </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
            <div><div style="font-size:10.5px;color:var(--color-text-muted);text-transform:uppercase;font-weight:700;">Phone</div><div style="font-size:13px;font-weight:600;"><?= e($c['phone']) ?></div></div>
            <div><div style="font-size:10.5px;color:var(--color-text-muted);text-transform:uppercase;font-weight:700;">Email</div><div style="font-size:13px;font-weight:600;"><?= e($c['email'] ?? '—') ?></div></div>
            <div><div style="font-size:10.5px;color:var(--color-text-muted);text-transform:uppercase;font-weight:700;">Date of Birth</div><div style="font-size:13px;font-weight:600;"><?= $c['date_of_birth'] ? date('d M Y', strtotime($c['date_of_birth'])) : '—' ?></div></div>
            <div><div style="font-size:10.5px;color:var(--color-text-muted);text-transform:uppercase;font-weight:700;">Last Active</div><div style="font-size:13px;font-weight:600;"><?= $c['last_active_at'] ? date('d M, h:i A', strtotime($c['last_active_at'])) : 'Never' ?></div></div>
            <div style="grid-column:1/-1;"><div style="font-size:10.5px;color:var(--color-text-muted);text-transform:uppercase;font-weight:700;">Default Delivery Address</div><div style="font-size:13px;font-weight:600;"><?= e($c['address'] ?? '—') ?></div></div>
        </div>

        <div style="display:flex;gap:10px;margin-bottom:16px;">
            <div style="flex:1;background:var(--color-bg);border-radius:8px;padding:10px;text-align:center;">
                <div style="font-size:16px;font-weight:800;color:var(--color-navy);"><?= (int) $c['order_count'] ?></div>
                <div style="font-size:10px;color:var(--color-text-muted);font-weight:700;text-transform:uppercase;">Orders</div>
            </div>
            <div style="flex:1;background:var(--color-bg);border-radius:8px;padding:10px;text-align:center;">
                <div style="font-size:16px;font-weight:800;color:var(--color-navy);"><?= formatMoney((float) $c['total_spent']) ?></div>
                <div style="font-size:10px;color:var(--color-text-muted);font-weight:700;text-transform:uppercase;">Total Spent</div>
            </div>
        </div>

        <div style="font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);font-weight:700;margin-bottom:8px;">Recent Orders</div>
        <div style="max-height:240px;overflow-y:auto;">
        <?php foreach ($history as $h): ?>
        <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--color-border);font-size:12.5px;">
            <div>
                <a href="<?= Router::url('orders/show?id=' . $h['id']) ?>"><strong><?= e($h['order_number']) ?></strong></a>
                <div style="font-size:11px;color:var(--color-text-muted);"><?= (int) $h['item_count'] ?> items · <?= date('d M Y, h:i A', strtotime($h['created_at'])) ?></div>
            </div>
            <div style="text-align:right;">
                <div style="font-weight:700;"><?= formatMoney((float) $h['total_amount']) ?></div>
                <span class="badge <?= $statusBadge[$h['status']] ?? 'badge-gray' ?>"><?= e(str_replace('_', ' ', $h['status'])) ?></span>
            </div>
        </div>
        <?php endforeach; ?>
        <?php if (empty($history)): ?>
        <div style="text-align:center;color:var(--color-text-muted);padding:16px 0;font-size:12.5px;">No orders yet.</div>
        <?php endif; ?>
        </div>
    </div>
</div>
<?php endforeach; ?>

<script>
function rmsFilterAppCustomers() {
    const q = document.getElementById('rmsAppCustSearch').value.toLowerCase();
    let visible = 0;
    document.querySelectorAll('.rms-appcust-row').forEach(row => {
        const show = row.dataset.name.includes(q);
        row.style.display = show ? '' : 'none';
        if (show) visible++;
    });
    document.getElementById('rmsAppCustCount').textContent = visible + ' records';
}
</script>
