<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Login History') }}
        </h2>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            
            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="p-6 text-gray-900 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left font-bold text-gray-500 uppercase">User</th>
                                <th class="px-4 py-3 text-left font-bold text-gray-500 uppercase">Role</th>
                                <th class="px-4 py-3 text-left font-bold text-gray-500 uppercase">Login</th>
                                <th class="px-4 py-3 text-left font-bold text-gray-500 uppercase">Logout</th>
                                <th class="px-4 py-3 text-left font-bold text-gray-500 uppercase">Device Info</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($histories as $history)
                                <tr>
                                    <td class="px-4 py-3 font-medium text-gray-900">{{ $history->user->name ?? 'Unknown' }}</td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">{{ $history->role }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-green-600">{{ $history->login_datetime ? $history->login_datetime->format('d/m/Y h:i A') : 'N/A' }}</td>
                                    <td class="px-4 py-3 text-red-500">{{ $history->logout_datetime ? $history->logout_datetime->format('d/m/Y h:i A') : 'Active' }}</td>
                                    <td class="px-4 py-3 text-gray-500 text-xs">
                                        <div class="truncate w-48 sm:w-64" title="{{ $history->device }}">
                                            {{ \Illuminate\Support\Str::limit($history->device ?? 'Unknown Device', 50) }}
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="p-4 border-t border-gray-200">
                    {{ $histories->links() }}
                </div>
            </div>

        </div>
    </div>
</x-app-layout>
