@extends('layouts.app')
@section('title', 'Login history')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('profile.edit') }}">Profile</a></li>
    <li class="breadcrumb-item active" aria-current="page">Login history</li>
@endsection

@section('content')
    <x-layout.page-header title="Login history" subtitle="Recent sign-in activity for your account." icon="clock-history" />

    <x-layout.tabs :items="[
        ['label' => 'Profile',        'href' => route('profile.edit'),           'icon' => 'person'],
        ['label' => 'Password',       'href' => route('profile.password.edit'),  'icon' => 'shield-lock'],
        ['label' => 'Login history',  'href' => route('profile.login-history'),  'icon' => 'clock-history', 'active' => true],
    ]" />

    <x-ui.card padding="none">
        <x-ui.table :rows="$events->items()" empty="No sign-in events recorded yet.">
            <x-slot:head>
                <tr>
                    <th>Event</th>
                    <th>When</th>
                    <th>IP</th>
                    <th>Device</th>
                    <th>Browser</th>
                    <th>Platform</th>
                </tr>
            </x-slot:head>

            @foreach($events as $event)
                @php $enum = $event->eventEnum(); @endphp
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            {!! icon($enum?->icon() ?? 'circle') !!}
                            <span>{{ $enum?->label() ?? $event->event }}</span>
                        </div>
                    </td>
                    <td>{{ $event->occurred_at?->format('d M Y H:i') }}</td>
                    <td><code>{{ $event->ip ?: '—' }}</code></td>
                    <td>{{ $event->device ?: '—' }}</td>
                    <td>{{ $event->browser ?: '—' }}</td>
                    <td>{{ $event->platform ?: '—' }}</td>
                </tr>
            @endforeach
        </x-ui.table>

        @if($events instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)
            <div class="p-3">
                <x-ui.pagination :paginator="$events" />
            </div>
        @endif
    </x-ui.card>
@endsection