@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-6 flex items-center space-x-3">
        <i class="fas fa-list-alt text-indigo-500"></i>
        <span class="text-indigo-600">Activity Logs</span>
    </h1>

    <div class="bg-white p-6 rounded-lg shadow-lg overflow-hidden">
        <!-- Table Wrapper for responsiveness -->
        <div class="overflow-x-auto">
            <table class="w-full table-auto border-collapse rounded-lg shadow-md">
                <thead>
                    <tr class="bg-indigo-600 text-white text-left">
                        <th class="p-4 text-sm font-medium">User</th>
                        <th class="p-4 text-sm font-medium">IP Address</th>
                        <th class="p-4 text-sm font-medium">Browser</th>
                        <th class="p-4 text-sm font-medium">MAC Address</th>
                        <th class="p-4 text-sm font-medium">Activity</th>
                        <th class="p-4 text-sm font-medium">Time</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($logs as $log)
                    <tr class="border-t border-gray-200 hover:bg-gray-100 transition-all duration-300">
                        <td class="p-4 text-gray-700 text-sm font-medium">{{ $log->user ? $log->user->name : 'Guest' }}</td>
                        <td class="p-4 text-gray-700 text-sm">{{ $log->ip_address }}</td>
                        <td class="p-4 text-gray-700 text-sm">{{ $log->browser }}</td>
                        <td class="p-4 text-gray-700 text-sm">{{ $log->mac_address }}</td>
                        <td class="p-4 text-gray-700 text-sm">{{ $log->activity }}</td>
                        <td class="p-4 text-gray-500 text-sm">{{ $log->created_at->diffForHumans() }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-6 flex justify-center">
            <div class="inline-flex space-x-2">
                {{ $logs->links('pagination::tailwind') }}
            </div>
        </div>
    </div>
</div>
@endsection