@extends('layouts.app')
@section('title', 'Login History')
@section('content')
<div class="page-header">
    <div><div class="page-title">Login History</div><div class="page-subtitle">Track user sessions, devices, and IP addresses</div></div>
    <div class="page-actions">
        <a href="{{ route('settings.activity-log') }}" class="btn btn-secondary"><i class="fas fa-list-alt"></i> Activity Log</a>
        <a href="{{ route('settings.users.index') }}" class="btn btn-secondary"><i class="fas fa-users"></i> Users</a>
    </div>
</div>

{{-- CURRENTLY ONLINE --}}
@if($online->count() > 0)
<div class="card mb-4">
    <div class="card-header">
        <span class="card-title"><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-right:6px"></span>Currently Online ({{ $online->count() }})</span>
    </div>
    <div style="display:flex;flex-wrap:wrap;gap:12px;padding:16px">
        @foreach($online as $session)
        <div style="background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:12px 16px;display:flex;align-items:center;gap:10px">
            <div style="width:36px;height:36px;border-radius:9px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:12px">{{ strtoupper(substr($session->user->name??'?',0,2)) }}</div>
            <div>
                <div style="font-weight:600;font-size:13px">{{ $session->user->name ?? 'Unknown' }}</div>
                <div style="font-size:11px;color:var(--text-muted)"><i class="fas {{ $session->device_icon }}"></i> {{ $session->browser }} · {{ $session->ip_address }}</div>
                <div style="font-size:11px;color:var(--text-muted)">Since {{ $session->logged_in_at->format('H:i') }}</div>
            </div>
            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-left:6px"></span>
        </div>
        @endforeach
    </div>
</div>
@endif

{{-- FILTERS --}}
<div class="card mb-4">
    <div class="card-body" style="padding:12px 18px">
        <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
            <select name="user_id" class="form-control" style="max-width:200px">
                <option value="">All Users</option>
                @foreach($users as $u)<option value="{{ $u->id }}" {{ request('user_id')==$u->id?'selected':'' }}>{{ $u->name }}</option>@endforeach
            </select>
            <input type="date" name="from" class="form-control" value="{{ request('from') }}" style="max-width:160px">
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
            @if(request()->hasAny(['user_id','from']))<a href="{{ route('settings.login-history') }}" class="btn btn-secondary">Clear</a>@endif
        </form>
    </div>
</div>

{{-- HISTORY TABLE --}}
<div class="card">
    <div class="table-wrapper">
        <table>
            <thead><tr><th>User</th><th>Login Time</th><th>Logout Time</th><th>Duration</th><th>Device</th><th>Browser</th><th>IP Address</th><th>Status</th></tr></thead>
            <tbody>
                @forelse($history as $h)
                <tr>
                    <td>
                        <div style="font-weight:500">{{ $h->user->name ?? 'Unknown' }}</div>
                        <div style="font-size:11px;color:var(--text-muted)">{{ $h->user->email ?? '' }}</div>
                    </td>
                    <td style="font-size:12px;white-space:nowrap">
                        {{ $h->logged_in_at->format('d M Y H:i') }}
                        <div style="font-size:11px;color:var(--text-muted)">{{ $h->logged_in_at->diffForHumans() }}</div>
                    </td>
                    <td style="font-size:12px">{{ $h->logged_out_at ? $h->logged_out_at->format('d M Y H:i') : '—' }}</td>
                    <td style="font-size:12px">{{ $h->session_duration }}</td>
                    <td style="font-size:12px"><i class="fas {{ $h->device_icon }}" style="color:var(--text-muted);margin-right:5px"></i>{{ ucfirst($h->device_type ?? 'desktop') }}</td>
                    <td style="font-size:12px">{{ $h->browser ?? 'Unknown' }}</td>
                    <td style="font-size:12px;font-family:'DM Mono',monospace;color:var(--text-muted)">{{ $h->ip_address }}</td>
                    <td>
                        @if($h->is_active)<span class="badge badge-success">Online</span>
                        @else<span class="badge badge-secondary">Ended</span>@endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="8" class="text-center text-muted" style="padding:40px">No login records found</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($history->hasPages())
    <div class="card-footer" style="display:flex;justify-content:space-between;align-items:center">
        <div style="font-size:13px;color:var(--text-muted)">{{ $history->firstItem() }}–{{ $history->lastItem() }} of {{ $history->total() }}</div>
        {{ $history->withQueryString()->links() }}
    </div>
    @endif
</div>
@endsection