@extends('layouts.app')

@section('content')
<div x-data="{ expandedRow: null }">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Audit Log</h1>
        <p class="mt-1 text-sm text-gray-500">Track all changes made across the system.</p>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
        <form method="GET" action="{{ route('business.audit-log', $currentBusiness->id) }}" class="grid grid-cols-2 sm:grid-cols-6 gap-3">
            <div>
                <select name="module" class="w-full rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">All Modules</option>
                    @foreach($modules as $mod)
                    <option value="{{ $mod }}" {{ request('module') === $mod ? 'selected' : '' }}>{{ ucfirst($mod) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <select name="action" class="w-full rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">All Actions</option>
                    @foreach($actions as $act)
                    <option value="{{ $act }}" {{ request('action') === $act ? 'selected' : '' }}>{{ ucfirst($act) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <select name="user_name" class="w-full rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">All Users</option>
                    @foreach($users as $userName)
                    <option value="{{ $userName }}" {{ request('user_name') === $userName ? 'selected' : '' }}>{{ $userName }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <input type="date" name="date_from" value="{{ request('date_from') }}" placeholder="From" class="w-full rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
            </div>
            <div>
                <input type="date" name="date_to" value="{{ request('date_to') }}" placeholder="To" class="w-full rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
            </div>
            <div class="flex space-x-2">
                <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-700">Filter</button>
                <a href="{{ route('business.audit-log', $currentBusiness->id) }}" class="px-3 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200">Clear</a>
            </div>
        </form>
    </div>

    <!-- Audit Log Table -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date/Time</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Module</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Target</th>
                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($logs ?? [] as $index => $log)
                <tr class="hover:bg-gray-50 cursor-pointer" @click="expandedRow = expandedRow === {{ $index }} ? null : {{ $index }}">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                        <div>{{ $log->created_at->format('d M Y') }}</div>
                        <div class="text-xs text-gray-400">{{ $log->created_at->format('H:i:s') }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">{{ $log->user_name ?? 'System' }}</div>
                        @if($log->user_role)
                        <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-full {{ $log->user_role === 'owner' ? 'bg-purple-100 text-purple-700' : ($log->user_role === 'admin' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700') }}">{{ ucfirst($log->user_role) }}</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @php
                            $moduleColors = [
                                'Staff' => 'bg-cyan-100 text-cyan-700',
                                'Finance' => 'bg-green-100 text-green-700',
                                'Expenses' => 'bg-red-100 text-red-700',
                                'Transfers' => 'bg-blue-100 text-blue-700',
                                'Invoices' => 'bg-yellow-100 text-yellow-700',
                                'Assets' => 'bg-orange-100 text-orange-700',
                                'CRM' => 'bg-indigo-100 text-indigo-700',
                                'Settings' => 'bg-gray-100 text-gray-700',
                                'Petty Cash' => 'bg-amber-100 text-amber-700',
                            ];
                            $mColor = $moduleColors[$log->module] ?? 'bg-gray-100 text-gray-700';
                        @endphp
                        <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full {{ $mColor }}">{{ ucfirst($log->module) }}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @php
                            $actionStyles = [
                                'created' => 'bg-green-100 text-green-700',
                                'updated' => 'bg-blue-100 text-blue-700',
                                'deleted' => 'bg-red-100 text-red-700',
                                'exported' => 'bg-purple-100 text-purple-700',
                            ];
                            $aStyle = $actionStyles[$log->action] ?? 'bg-gray-100 text-gray-700';
                        @endphp
                        <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full {{ $aStyle }}">{{ ucfirst($log->action) }}</span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-700 max-w-xs truncate">{{ $log->target }}</td>
                    <td class="px-6 py-4 text-center">
                        <svg :class="expandedRow === {{ $index }} ? 'rotate-180' : ''" class="w-4 h-4 mx-auto text-gray-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </td>
                </tr>
                <tr x-show="expandedRow === {{ $index }}" x-transition style="display: none;">
                    <td colspan="6" class="px-6 py-4 bg-gray-50">
                        <div class="text-sm text-gray-600">
                            @if($log->details)
                                <pre class="whitespace-pre-wrap font-mono text-xs bg-gray-100 p-4 rounded-lg border border-gray-200 max-h-64 overflow-y-auto">{{ json_encode($log->details, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                            @else
                                <p class="text-gray-400 italic">No additional details.</p>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">No audit logs found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(isset($logs) && $logs->hasPages())
    <div class="mt-4">{{ $logs->links() }}</div>
    @endif
</div>
@endsection