@extends('layouts.admin')

@section('title', 'Activity Log')

@section('content')
<div class="mb-8 flex items-center justify-between">
    <div>
        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Activity Log</h1>
        <p class="text-slate-500 mt-1 text-base">Comprehensive history of site updates and interactions.</p>
    </div>
    <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-50 transition-all shadow-sm">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Back to Dashboard
    </a>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="divide-y divide-slate-50">
        @forelse($activities as $activity)
        <div class="p-6 hover:bg-slate-50/80 transition-all flex items-start gap-5 group">
            <div class="w-12 h-12 rounded-xl bg-slate-100 text-slate-400 flex items-center justify-center group-hover:bg-brand-primary group-hover:text-white transition-colors shrink-0">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $activity->activity_icon !!}</svg>
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between gap-4 mb-1">
                    <p class="text-base font-bold text-slate-900 truncate tracking-tight">{{ $activity->activity_label }}</p>
                    <span class="text-xs text-slate-400 font-medium shrink-0">{{ $activity->created_at->format('M d, Y · H:i') }} ({{ $activity->created_at->diffForHumans() }})</span>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 font-bold uppercase tracking-tighter">{{ $activity->activity_type }}</span>
                    @if($activity->activity_type == 'Message')
                        <p class="text-sm text-slate-500 italic truncate italic">"{{ $activity->message }}"</p>
                    @elseif($activity->activity_type == 'Post')
                         <span class="text-xs text-slate-400">Published by Admin</span>
                    @endif
                </div>
            </div>
        </div>
        @empty
        <div class="p-20 text-center">
            <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-200">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <h3 class="text-lg font-bold text-slate-900">No activities found</h3>
            <p class="text-slate-500">Your activity log is currently empty.</p>
        </div>
        @endforelse
    </div>
    
    @if($activities->hasPages())
    <div class="p-6 bg-slate-50 border-t border-slate-100">
        {{ $activities->links() }}
    </div>
    @endif
</div>
@endsection
