@extends('layouts.app')
@section('title','Security')
@section('header-left')
<div><h3 class="text-lg font-bold">Security & Activity Log</h3></div>
@endsection
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <div class="glass-card rounded-2xl p-6 flex items-center gap-4">
        <div class="w-14 h-14 rounded-2xl bg-green-500/10 flex items-center justify-center">
            <span class="material-symbols-outlined text-green-500 text-3xl">check_circle</span>
        </div>
        <div>
            <p class="text-xs text-slate-500 uppercase tracking-wider font-bold">Email</p>
            <p class="font-bold mt-0.5">{{ auth()->user()->email_verified_at ? 'Verified' : 'Unverified' }}</p>
        </div>
    </div>
    <div class="glass-card rounded-2xl p-6 flex items-center gap-4">
        <div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center">
            <span class="material-symbols-outlined text-primary text-3xl">lock</span>
        </div>
        <div>
            <p class="text-xs text-slate-500 uppercase tracking-wider font-bold">Password</p>
            <p class="font-bold mt-0.5">Protected</p>
        </div>
    </div>
    <div class="glass-card rounded-2xl p-6 flex items-center gap-4">
        <div class="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center">
            <span class="material-symbols-outlined text-blue-400 text-3xl">fingerprint</span>
        </div>
        <div>
            <p class="text-xs text-slate-500 uppercase tracking-wider font-bold">Account Status</p>
            <p class="font-bold mt-0.5 capitalize text-green-400">{{ auth()->user()->account_status }}</p>
        </div>
    </div>
</div>

<div class="glass-card rounded-2xl overflow-hidden">
    <div class="px-5 py-4 border-b border-white/5 flex items-center justify-between">
        <h4 class="font-bold">Recent Activity</h4>
        <span class="text-[10px] text-slate-500 uppercase tracking-wider">Last {{ count($logs) }} records</span>
    </div>
    <div class="divide-y divide-white/5">
        @forelse($logs as $log)
        <div class="px-5 py-4 flex items-center gap-4 hover:bg-white/3 transition-colors">
            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 {{
                $log->severity === 'critical' ? 'bg-red-500/10' : ($log->severity === 'warning' ? 'bg-orange-500/10' : 'bg-white/5')
            }}">
                <span class="material-symbols-outlined text-sm {{
                    $log->severity === 'critical' ? 'text-red-500' : ($log->severity === 'warning' ? 'text-orange-500' : 'text-slate-400')
                }}">{{ str_contains($log->action, 'login') ? 'login' : (str_contains($log->action, 'logout') ? 'logout' : 'history') }}</span>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium capitalize">{{ str_replace('_',' ',$log->action) }}</p>
                <p class="text-xs text-slate-500">{{ $log->description }}</p>
            </div>
            <div class="text-right text-[10px] text-slate-600">
                <p>{{ $log->ip_address }}</p>
                <p>{{ $log->created_at->format('M d, h:i A') }}</p>
            </div>
            <div class="w-2 h-2 rounded-full {{
                $log->severity === 'critical' ? 'bg-red-500' : ($log->severity === 'warning' ? 'bg-orange-500' : 'bg-green-500')
            }}"></div>
        </div>
        @empty
        <div class="px-5 py-16 text-center text-slate-500 text-sm">No activity logged yet.</div>
        @endforelse
    </div>
</div>
@endsection