@php
    $statusColor = [
        'draft' => 'slate',
        'final' => 'sky',
        'sent' => 'emerald',
    ];
    $statusLabels = [
        'draft' => __('Draft'),
        'final' => __('Final'),
        'sent' => __('Sent'),
    ];
@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="__('Letterhead')" :subtitle="__('Write letters and documents on your company letterhead, print, download or email as PDF.')">
            @if ($canCreate)
                <a href="{{ route('letters.create') }}" wire:navigate>
                    <x-button type="button">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('New Letter') }}
                    </x-button>
                </a>
            @endif
        </x-page-header>

        {{-- Filters --}}
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
            <div class="relative flex-1">
                <x-icon name="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <input type="search" wire:model.live.debounce.300ms="search"
                       placeholder="{{ __('Search by number, title or recipient…') }}"
                       class="w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
            </div>
            <select wire:model.live="status" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-44">
                <option value="">{{ __('All statuses') }}</option>
                <option value="draft">{{ __('Draft') }}</option>
                <option value="final">{{ __('Final') }}</option>
                <option value="sent">{{ __('Sent') }}</option>
            </select>
        </div>

        <x-card class="overflow-hidden">
            @if ($letters->isEmpty())
                <x-empty-state
                    icon="document-text"
                    :title="__('No letters yet')"
                    :message="__('Create your first letter on the company letterhead.')"
                    class="border-0"
                >
                    @if ($canCreate)
                        <a href="{{ route('letters.create') }}" wire:navigate>
                            <x-button type="button">
                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('New Letter') }}
                            </x-button>
                        </a>
                    @endif
                </x-empty-state>
            @else
                <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100 text-sm">
                    <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">{{ __('Number') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Title') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Recipient') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach ($letters as $letter)
                            <tr class="transition hover:bg-slate-50/70" wire:key="letter-{{ $letter->id }}">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 font-medium text-slate-800">
                                    <a href="{{ route('letters.show', $letter) }}" wire:navigate class="hover:text-indigo-600">
                                        {{ $letter->letter_number ?: __('Draft') }}
                                    </a>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-slate-600">{{ $letter->title ?: '—' }}</td>
                                <td class="px-3 lg:px-4 py-4 text-slate-600">{{ $letter->recipient_name ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-500">{{ optional($letter->letter_date)->format('d M Y') ?: $letter->created_at->format('d M Y') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$statusColor[$letter->status] ?? 'slate'">{{ $statusLabels[$letter->status] ?? ucfirst($letter->status) }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <div class="flex items-center justify-end gap-1">
                                        <x-notes-button :for="$letter" />
                                        <a href="{{ route('letters.edit', $letter) }}" wire:navigate title="{{ __('Edit') }}"
                                           class="rounded-lg p-1.5 text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600">
                                            <x-icon name="pencil-square" class="h-4 w-4" />
                                        </a>
                                        <a href="{{ route('letters.combined', $letter) }}" title="{{ __('Download PDF') }}"
                                           class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
                                            <x-icon name="arrow-down-tray" class="h-4 w-4" />
                                        </a>
                                        <button type="button"
                                                wire:click="delete({{ $letter->id }})"
                                                wire:confirm="{{ __('Delete this letter?') }}"
                                                title="{{ __('Delete') }}"
                                                class="rounded-lg p-1.5 text-rose-500 transition hover:bg-rose-50 hover:text-rose-700">
                                            <x-icon name="trash" class="h-4 w-4" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>
            @endif
        </x-card>

        @if ($letters->hasPages())
            <div>{{ $letters->links() }}</div>
        @endif
    </div>
</div>