@extends('layouts.admin')
@section('title', '操作日誌')
@section('content')

{{-- 篩選區 --}}
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5 mb-6">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-3">
        <div>
            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">搜尋</label>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="描述 / 帳號 / IP..."
                   class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
        </div>
        <div>
            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">分類</label>
            <select name="category" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                <option value="">全部</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat }}" {{ request('category') === $cat ? 'selected' : '' }}>
                        {{ \App\Models\ActivityLog::make(['category' => $cat])->category_label }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">操作</label>
            <select name="action" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                <option value="">全部</option>
                @foreach($actions as $act)
                    <option value="{{ $act }}" {{ request('action') === $act ? 'selected' : '' }}>
                        {{ \App\Models\ActivityLog::make(['action' => $act])->action_label }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">起始日期</label>
            <input type="date" name="date_from" value="{{ request('date_from') }}"
                   class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
        </div>
        <div>
            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">結束日期</label>
            <input type="date" name="date_to" value="{{ request('date_to') }}"
                   class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
        </div>
        <div>
            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">IP 位址</label>
            <input type="text" name="ip" value="{{ request('ip') }}" placeholder="例如 192.168.1.1"
                   class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
        </div>
        <div class="md:col-span-3 lg:col-span-6 flex gap-2">
            <button type="submit" class="px-5 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">篩選</button>
            <a href="{{ route('admin.activity-logs.index') }}" class="px-5 py-2 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-300 transition-colors">清除</a>
        </div>
    </form>
</div>

{{-- 上方分頁 --}}
@include('components.pagination-bar', ['paginator' => $logs])

{{-- 日誌列表 --}}
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mt-4">
    <div class="px-5 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white">操作日誌</h3>
        <span class="text-sm text-gray-500 dark:text-gray-400">共 {{ number_format($logs->total()) }} 筆</span>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50">
                    <th class="text-left px-4 py-3 text-gray-500 dark:text-gray-400 font-medium">時間</th>
                    <th class="text-left px-4 py-3 text-gray-500 dark:text-gray-400 font-medium">IP 位址</th>
                    <th class="text-left px-4 py-3 text-gray-500 dark:text-gray-400 font-medium">帳號</th>
                    <th class="text-left px-4 py-3 text-gray-500 dark:text-gray-400 font-medium">分類</th>
                    <th class="text-left px-4 py-3 text-gray-500 dark:text-gray-400 font-medium">操作</th>
                    <th class="text-left px-4 py-3 text-gray-500 dark:text-gray-400 font-medium">描述</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $log)
                <tr class="border-b border-gray-100 dark:border-slate-800 hover:bg-gray-50/50 dark:hover:bg-slate-800/30">
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {{ $log->created_at->format('m-d H:i:s') }}
                    </td>
                    <td class="px-4 py-3">
                        <code class="px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-300 font-mono">{{ $log->ip_address }}</code>
                    </td>
                    <td class="px-4 py-3 text-gray-900 dark:text-white font-medium">
                        {{ $log->user_name }}
                    </td>
                    <td class="px-4 py-3">
                        @php
                            $catColors = [
                                'auth' => 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400',
                                'exam' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
                                'question' => 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400',
                                'import' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
                                'user' => 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
                                'school' => 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
                                'practice' => 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400',
                            ];
                        @endphp
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full {{ $catColors[$log->category] ?? 'bg-gray-100 text-gray-700 dark:bg-slate-800 dark:text-gray-400' }}">
                            {{ $log->category_label }}
                        </span>
                    </td>
                    <td class="px-4 py-3">
                        @php
                            $actColors = [
                                'create' => 'text-green-600 dark:text-green-400',
                                'update' => 'text-blue-600 dark:text-blue-400',
                                'delete' => 'text-red-600 dark:text-red-400',
                                'login' => 'text-indigo-600 dark:text-indigo-400',
                                'logout' => 'text-gray-600 dark:text-gray-400',
                                'import' => 'text-green-600 dark:text-green-400',
                            ];
                        @endphp
                        <span class="text-xs font-bold {{ $actColors[$log->action] ?? 'text-gray-600' }}">
                            {{ $log->action_label }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-700 dark:text-gray-300 max-w-xs truncate">
                        {{ $log->description }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">
                        <svg class="w-10 h-10 mx-auto text-gray-300 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        <p>尚無操作日誌</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($logs->hasPages())
    <div class="px-5 py-4 border-t border-gray-200 dark:border-slate-700">
        @include('components.pagination-bar', ['paginator' => $logs])
    </div>
    @endif
</div>
@endsection