@extends('layouts.admin')

@section('title', 'System Logs')

@section('content')
<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
    
    <!-- Page header -->
    <div class="sm:flex sm:justify-between sm:items-center mb-8">
        <div class="mb-4 sm:mb-0">
            <h1 class="text-2xl md:text-3xl text-gray-800 font-bold">System Logs</h1>
        </div>
        
        <!-- Filter by Club -->
        <div class="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
            <form action="{{ route('admin.logs.index') }}" method="GET" class="relative">
                <select name="club_id" onchange="this.form.submit()" class="form-select pl-3 pr-10 py-2 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm">
                    <option value="">All Clubs</option>
                    @foreach($clubs as $club)
                        <option value="{{ $club->id }}" {{ request('club_id') == $club->id ? 'selected' : '' }}>{{ $club->name }}</option>
                    @endforeach
                </select>
            </form>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white border border-gray-200 rounded-sm shadow-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table-auto w-full">
                <thead class="text-xs font-semibold uppercase text-gray-500 bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-4 py-3 whitespace-nowrap text-left">
                            <div class="font-semibold text-left">Date/Time</div>
                        </th>
                        <th class="px-4 py-3 whitespace-nowrap text-left">
                            <div class="font-semibold text-left">Action</div>
                        </th>
                        <th class="px-4 py-3 whitespace-nowrap text-left">
                            <div class="font-semibold text-left">Club</div>
                        </th>
                        <th class="px-4 py-3 whitespace-nowrap text-left">
                            <div class="font-semibold text-left">User (Actor)</div>
                        </th>
                         <th class="px-4 py-3 whitespace-nowrap text-left">
                            <div class="font-semibold text-left">Target</div>
                        </th>
                        <th class="px-4 py-3 whitespace-nowrap text-left">
                            <div class="font-semibold text-left">Details</div>
                        </th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-gray-200">
                    @forelse($logs as $log)
                        <tr>
                            <td class="px-4 py-3 whitespace-nowrap text-gray-500">
                                {{ $log->created_at->format('Y-m-d H:i:s') }}
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                <div class="font-medium text-gray-800">{{ $log->action }}</div>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-gray-500">
                                {{ $log->club->name ?? '-' }}
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                <div class="font-medium text-indigo-600">{{ $log->user->name }}</div>
                                <div class="text-xs text-gray-400">ID: {{ $log->user_id }}</div>
                            </td>
                             <td class="px-4 py-3 whitespace-nowrap">
                                @if($log->targetUser)
                                    <div class="font-medium text-indigo-600">{{ $log->targetUser->name }}</div>
                                    <div class="text-xs text-gray-400">ID: {{ $log->target_user_id }}</div>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-gray-600">
                                <div class="max-w-xs truncate" title="{{ $log->details }}">{{ $log->details }}</div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                                No logs found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $logs->links() }}
        </div>
    </div>
</div>
@endsection