@php
    $tz = config('app.display_timezone');
    $eventColor = ['created' => 'emerald', 'updated' => 'sky', 'deleted' => 'rose', 'restored' => 'violet', 'merged' => 'amber'];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Audit')" />

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:p-5">
                <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Changes') }}</h2>
                        <p class="text-xs text-slate-400">
                            {{ trans_choice('{0}No changes|{1}:count change|[2,*]:count changes', $audits->total(), ['count' => number_format($audits->total())]) }}
                            @if ($record && $type !== '')
                                · {{ __('one :type only', ['type' => \Illuminate\Support\Str::lower(\App\Services\Crm\Admin\RecordDirectory::TYPES[$type][1] ?? '')]) }}
                                <button type="button" wire:click="$set('record', null)" class="ms-1 text-indigo-600 hover:text-indigo-800">{{ __('Show all') }}</button>
                            @endif
                        </p>
                    </div>
                    @if ($hasFilters)
                        <button type="button" wire:click="clearFilters" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('Clear filters') }}</button>
                    @endif
                </div>
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-6">
                    <div class="relative lg:col-span-2">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.400ms="q" placeholder="{{ __('Words in the change…') }}"
                            class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                    <select wire:model.live="type" aria-label="{{ __('Record') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every record') }}</option>
                        @foreach ($types as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="user" aria-label="{{ __('Person') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Anyone') }}</option>
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="event" aria-label="{{ __('Event') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any change') }}</option>
                        @foreach ($events as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <div class="flex items-center gap-2">
                        <input type="date" wire:model.live="from" aria-label="{{ __('From') }}" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        <input type="date" wire:model.live="to" aria-label="{{ __('To') }}" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('When') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Who') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('What') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Record') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Change') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($entries as $entry)
                            <tr wire:key="audit-{{ $entry['id'] }}" class="align-top transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                    {{ $entry['when']?->copy()->timezone($tz)->format('j M Y') }}
                                    <span class="block text-xs text-slate-400">{{ $entry['when']?->copy()->timezone($tz)->format('H:i') }}</span>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $entry['who'] }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$eventColor[$entry['event']] ?? 'slate'">{{ $entry['eventLabel'] }}</x-badge>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <span class="block text-xs text-slate-400">{{ $entry['typeLabel'] }}</span>
                                    @if ($entry['url'])
                                        <a href="{{ $entry['url'] }}" @if (! str_contains($entry['url'], '/attachments/')) wire:navigate @endif class="font-medium text-indigo-600 hover:text-indigo-800">{{ $entry['name'] }}</a>
                                    @else
                                        <span class="font-medium text-slate-700">{{ $entry['name'] }}</span>
                                    @endif
                                    @if ($entry['deleted'])
                                        <span class="block text-xs text-rose-500">{{ __('Deleted') }}</span>
                                    @endif
                                    @if ($entry['type'] && ! ($record && $type === $entry['type']))
                                        <button type="button" wire:click="showRecord('{{ $entry['type'] }}', {{ $entry['recordId'] }})" class="block text-xs text-slate-400 hover:text-indigo-600">{{ __('Its whole history') }}</button>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    @if ($entry['changes'] !== [])
                                        <ul class="space-y-1">
                                            @foreach ($entry['changes'] as $change)
                                                <li>
                                                    <span class="font-medium text-slate-800">{{ $change['field'] }}:</span>
                                                    @if ($change['from'] !== null)
                                                        <span class="text-slate-400 line-through">{{ $change['from'] }}</span>
                                                        <x-icon name="arrow-right" class="mx-0.5 inline h-3 w-3 text-slate-300" />
                                                    @endif
                                                    <span>{{ $change['to'] }}</span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @elseif ($entry['event'] === 'updated')
                                        <span class="text-slate-400">{{ __('Only housekeeping fields changed') }}</span>
                                    @else
                                        <span class="text-slate-400">{{ $entry['eventLabel'] }}</span>
                                    @endif
                                    @if ($entry['reason'])
                                        <p class="mt-1 text-xs text-slate-500">{{ __('Reason: :reason', ['reason' => $entry['reason']]) }}</p>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12">
                                    @if ($hasFilters)
                                        <x-empty-state icon="magnifying-glass" :title="__('No changes match')" :message="__('Widen the dates, or clear the filters.')" class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state icon="shield-check" :title="__('Nothing recorded yet')" :message="__('Every change to a CRM record is recorded here as it happens.')" class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($audits->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $audits->links() }}
                </div>
            @endif
        </x-card>
    </div>
</div>