@extends('layouts.app')
@section('title', 'Activity Logs')
@section('page', 'Activity Logs')

@section('content')
<div class="flex items-center justify-between mb-8 fade-in">
    <div class="flex items-center gap-4">
        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 rounded-2xl flex items-center justify-center border border-indigo-500/10">
            <i class="fas fa-history text-indigo-400 text-lg"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-white">Activity Logs</h1>
            <p class="text-sm text-slate-500">Track all user actions across the system</p>
        </div>
    </div>
    <div class="flex items-center gap-2">
        <button onclick="confirmBulkDelete()" id="bulkDeleteBtn" class="px-4 py-2 text-sm font-medium rounded-xl border transition-all hidden border-red-500/20 text-red-400 bg-red-500/10 hover:bg-red-500/20">
            <i class="fas fa-trash mr-1"></i> <span>Delete Selected</span>
        </button>
        <a href="{{ route('activity-logs.create') }}" class="btn-primary px-4 py-2.5 rounded-xl text-white flex items-center gap-2 text-sm font-bold shadow-lg">
            <i class="fas fa-plus"></i> Add Log
        </a>
    </div>
</div>

<div class="table-container rounded-2xl overflow-hidden mb-8 fade-in">
    <div class="p-4 border-b border-white/[0.06]">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div>
                <label class="block text-xs font-medium mb-1 text-slate-500">Action</label>
                <select name="action" class="input-modern rounded-xl px-3 py-2 text-sm">
                    <option value="">All Actions</option>
                    @foreach($actions as $a)
                        <option value="{{ $a }}" {{ request('action') == $a ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $a)) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium mb-1 text-slate-500">User</label>
                <select name="user_id" class="input-modern rounded-xl px-3 py-2 text-sm">
                    <option value="">All Users</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium mb-1 text-slate-500">From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="input-modern rounded-xl px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium mb-1 text-slate-500">To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="input-modern rounded-xl px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium mb-1 text-slate-500">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search logs..." class="input-modern rounded-xl px-3 py-2 text-sm">
            </div>
            <button type="submit" class="btn-primary px-4 py-2 rounded-xl text-white text-sm font-semibold shadow-lg">
                <i class="fas fa-filter mr-1"></i> Filter
            </button>
            <a href="{{ route('activity-logs.index') }}" class="px-4 py-2 text-sm font-medium rounded-xl border border-white/10 text-slate-400 hover:text-white transition-colors">
                <i class="fas fa-times mr-1"></i> Clear
            </a>
        </form>
    </div>

    <form id="bulkDeleteForm" method="POST" action="{{ route('activity-logs.destroy-bulk') }}">
        @csrf
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-white/[0.06]">
                        <th class="px-4 py-3 text-left w-10">
                            <input type="checkbox" id="selectAll" onclick="toggleAll(this)" class="rounded border-white/20 bg-white/5">
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Time</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">User</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Action</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Description</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">IP Address</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/[0.06]">
                    @forelse($logs as $log)
                    <tr class="hover:bg-white/[0.03] transition-colors">
                        <td class="px-4 py-4">
                            <input type="checkbox" name="ids[]" value="{{ $log->id }}" onchange="toggleBulkBtn()" class="row-checkbox rounded border-white/20 bg-white/5">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="text-sm text-slate-300" title="{{ $log->created_at->format('M d, Y h:i A') }}">
                                {{ $log->created_at->diffForHumans() }}
                            </span>
                            <div class="text-xs text-slate-600">{{ $log->created_at->format('M d, Y h:i A') }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($log->user)
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white bg-gradient-to-br from-indigo-500 to-purple-600">
                                        {{ substr($log->user->name, 0, 2) }}
                                    </div>
                                    <span class="text-sm font-medium text-white">{{ $log->user->name }}</span>
                                </div>
                            @else
                                <span class="text-sm text-slate-600">System</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                                $actionColors = [
                                    'created' => ['bg' => 'bg-emerald-500/10', 'text' => 'text-emerald-400', 'icon' => 'fa-plus-circle'],
                                    'updated' => ['bg' => 'bg-blue-500/10', 'text' => 'text-blue-400', 'icon' => 'fa-pen'],
                                    'deleted' => ['bg' => 'bg-red-500/10', 'text' => 'text-red-400', 'icon' => 'fa-trash'],
                                    'logged_in' => ['bg' => 'bg-purple-500/10', 'text' => 'text-purple-400', 'icon' => 'fa-right-to-bracket'],
                                    'logged_out' => ['bg' => 'bg-amber-500/10', 'text' => 'text-amber-400', 'icon' => 'fa-right-from-bracket'],
                                ];
                                $color = $actionColors[$log->action] ?? ['bg' => 'bg-slate-500/10', 'text' => 'text-slate-400', 'icon' => 'fa-circle'];
                            @endphp
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{ $color['bg'] }} {{ $color['text'] }}">
                                <i class="fas {{ $color['icon'] }}"></i> {{ ucfirst(str_replace('_', ' ', $log->action)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm text-slate-400">{{ Str::limit($log->description, 80) }}</span>
                            @if($log->properties)
                                <button onclick="toggleProps({{ $log->id }})" class="text-xs ml-2 font-medium text-blue-400 hover:text-blue-300">Details</button>
                                <div id="props-{{ $log->id }}" class="hidden mt-2 p-3 rounded-lg text-xs font-mono bg-white/5 border border-white/10 text-slate-400">
                                    {{ json_encode($log->properties, JSON_PRETTY_PRINT) }}
                                </div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-600">{{ $log->ip_address ?? '-' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <div class="flex items-center justify-end gap-1">
                                <a href="{{ route('activity-logs.show', $log) }}" class="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-blue-400 hover:bg-blue-500/10 transition-all" title="View">
                                    <i class="fas fa-eye text-sm"></i>
                                </a>
                                <a href="{{ route('activity-logs.edit', $log) }}" class="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-blue-400 hover:bg-blue-500/10 transition-all" title="Edit">
                                    <i class="fas fa-edit text-sm"></i>
                                </a>
                                <button type="button" onclick="if(confirm('Delete this log entry?')){event.target.closest('td').querySelector('form').submit()}" class="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-all" title="Delete">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                                <form method="POST" action="{{ route('activity-logs.destroy', $log) }}" class="hidden">@csrf @method('DELETE')</form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-16 text-center">
                            <i class="fas fa-history text-4xl mb-3 text-slate-700"></i>
                            <p class="text-slate-500">No activity logs found</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($logs->hasPages())
            <div class="px-6 py-4 border-t border-white/[0.06]">
                {{ $logs->withQueryString()->links() }}
            </div>
        @endif
    </form>
</div>

<script>
function toggleProps(id) {
    const el = document.getElementById('props-' + id);
    el.classList.toggle('hidden');
}
function toggleAll(source) {
    document.querySelectorAll('.row-checkbox').forEach(cb => cb.checked = source.checked);
    toggleBulkBtn();
}
function toggleBulkBtn() {
    const checked = document.querySelectorAll('.row-checkbox:checked').length;
    const btn = document.getElementById('bulkDeleteBtn');
    if (checked > 0) {
        btn.classList.remove('hidden');
        btn.querySelector('span').textContent = 'Delete (' + checked + ')';
    } else {
        btn.classList.add('hidden');
    }
}
function confirmBulkDelete() {
    const checked = document.querySelectorAll('.row-checkbox:checked').length;
    if (checked === 0) return;
    if (confirm('Delete ' + checked + ' selected log entries?')) {
        document.getElementById('bulkDeleteForm').submit();
    }
}
</script>
@endsection