<?php
$page_title = 'Security';
require_once __DIR__ . '/header.php';
?>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit',sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-lock" style="color:#ef4444; margin-right:10px;"></i>Security Center</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">OTP/MFA login, login history, device management, session control, privacy.</p>
    </div>
</div>
<div class="grid-4" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">MFA STATUS</div>
        <div style="font-size:1.4rem; font-weight:700; color:#10b981;">Enabled</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-shield-alt"></i> OTP via SMS</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #3b82f6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">ACTIVE SESSIONS</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">2</div>
        <div style="color:#3b82f6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-laptop"></i> Devices</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">LAST LOGIN</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">Today</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-clock"></i> 5:05 PM IST</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">FRAUD ALERTS</div>
        <div style="font-size:1.4rem; font-weight:700; color:#10b981;">0</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-check-circle"></i> All Clear</div>
    </div>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-history" style="color:#3b82f6; margin-right:8px;"></i>Login History</h3>
        <?php
        $logins = [
            ['Today 5:05 PM', 'Chrome · Windows', 'Mumbai, India', '✓ Current', '#10b981'],
            ['Today 9:30 AM', 'Safari · iPhone', 'Mumbai, India', '✓ Active', '#3b82f6'],
            ['Yesterday 8:15 PM', 'Chrome · Windows', 'Mumbai, India', 'Ended', '#64748b'],
            ['Apr 28 4:20 PM', 'Chrome · Android', 'Pune, India', 'Ended', '#64748b'],
        ];
        foreach ($logins as $l): ?>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9;">
            <div>
                <div style="font-weight:600; font-size:0.85rem;"><?= $l[0] ?></div>
                <div style="font-size:0.75rem; color:#94a3b8;"><?= $l[1] ?> · <?= $l[2] ?></div>
            </div>
            <span style="color:<?= $l[4] ?>; font-size:0.75rem; font-weight:bold;"><?= $l[3] ?></span>
        </div>
        <?php endforeach; ?>
    </div>
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-laptop" style="color:#8b5cf6; margin-right:8px;"></i>Device Management</h3>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; margin-bottom:10px; border-left:4px solid #10b981;">
            <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
                <div style="font-weight:600; font-size:0.9rem;"><i class="fas fa-desktop" style="margin-right:8px; color:#475569;"></i>Windows PC — Chrome</div>
                <span style="background:#dcfce7; color:#166534; padding:2px 8px; border-radius:6px; font-size:0.7rem; font-weight:bold;">Current</span>
            </div>
            <div style="font-size:0.75rem; color:#94a3b8;">Mumbai · Last active: Now</div>
        </div>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; margin-bottom:15px; border-left:4px solid #3b82f6;">
            <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
                <div style="font-weight:600; font-size:0.9rem;"><i class="fas fa-mobile-alt" style="margin-right:8px; color:#475569;"></i>iPhone 15 — Safari</div>
                <span style="background:#eff6ff; color:#1e40af; padding:2px 8px; border-radius:6px; font-size:0.7rem; font-weight:bold;">Active</span>
            </div>
            <div style="font-size:0.75rem; color:#94a3b8;">Mumbai · Last active: 9:30 AM</div>
        </div>
        <div style="display:flex; gap:10px;">
            <button style="flex:1; background:#ef4444; color:#fff; border:none; padding:8px; border-radius:6px; font-size:0.8rem; cursor:pointer;">Logout All Devices</button>
            <button style="flex:1; background:#f8fafc; color:#475569; border:1px solid #e2e8f0; padding:8px; border-radius:6px; font-size:0.8rem; cursor:pointer;">Privacy Settings</button>
        </div>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
