@php
    $saved = $editingId !== null;
    $inputCls = 'block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="px-4 py-6 sm:px-6 lg:px-8"
     x-data
     x-on:open-url.window="window.open($event.detail.url, '_blank')">
    <div class="mx-auto max-w-7xl">

        {{-- Toolbar --}}
        <div class="sticky top-0 z-20 -mx-4 mb-6 flex flex-col gap-3 border-b border-slate-100 bg-slate-50/85 px-4 py-3 backdrop-blur sm:-mx-6 sm:flex-row sm:items-center sm:justify-between sm:px-6 lg:-mx-8 lg:px-8">
            <div class="flex items-center gap-2 text-sm text-slate-400">
                <a href="{{ route('letters.index') }}" wire:navigate class="transition hover:text-slate-600">{{ __('Letterhead') }}</a>
                <span class="text-slate-300">/</span>
                <span class="font-medium text-slate-700">{{ $saved ? __('Edit letter') : __('New letter') }}</span>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                @if ($editingId)
                    <x-notes-button variant="button" type="letter" :id="$editingId" :count="$noteCount" :title="$title" />
                @endif
                <x-secondary-button wire:click="printLetter" type="button">
                    <x-icon name="printer" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Print') }}
                </x-secondary-button>
                <x-secondary-button wire:click="download" type="button">
                    <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Download') }}
                </x-secondary-button>
                <x-secondary-button wire:click="sendEmail" type="button" wire:loading.attr="disabled" wire:target="sendEmail">
                    <x-icon name="paper-airplane" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Send email') }}
                </x-secondary-button>
                <x-button wire:click="save" type="button" wire:loading.attr="disabled" wire:target="save">
                    <x-icon name="check" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Save') }}
                </x-button>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">

            {{-- Editor --}}
            <div class="order-2 lg:order-1">
                <x-tiptap-editor model="body_html" :label="__('Letter body')" :key="$editingId ?? 'new'" min-height="60vh" />
            </div>

            {{-- Settings sidebar --}}
            <div class="order-1 space-y-5 lg:order-2">

                {{-- Letter meta --}}
                <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-900/5">
                    <h3 class="mb-4 text-sm font-semibold text-slate-800">{{ __('Letter details') }}</h3>
                    <div class="space-y-3">
                        <div>
                            <x-label :value="__('Title / subject')" />
                            <input type="text" wire:model="title" class="{{ $inputCls }} mt-1" placeholder="{{ __('e.g. Offer of employment') }}" />
                            <x-input-error for="title" class="mt-1" />
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <x-label :value="__('Our ref')" />
                                <input type="text" wire:model="reference" class="{{ $inputCls }} mt-1" />
                            </div>
                            <div>
                                <x-label :value="__('Date')" />
                                <input type="date" wire:model="letter_date" class="{{ $inputCls }} mt-1" />
                            </div>
                        </div>
                        <label class="flex items-center gap-2.5 pt-1">
                            <input type="checkbox" wire:model="insert_letterhead" class="rounded border-slate-300 text-indigo-600 shadow-xs focus:ring-indigo-500" />
                            <span class="text-sm text-slate-700">{{ __('Insert letterhead') }}</span>
                        </label>
                        <p class="text-xs text-slate-400">{{ __('Turn off to print on pre-printed letterhead paper.') }}</p>
                    </div>
                </div>

                {{-- Recipient --}}
                <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-900/5">
                    <h3 class="mb-4 text-sm font-semibold text-slate-800">{{ __('Recipient') }}</h3>
                    <div class="space-y-3">
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <x-label :value="__('Attach to')" />
                                <select wire:model.live="party_type" class="{{ $inputCls }} mt-1">
                                    <option value="">{{ __('None (free-form)') }}</option>
                                    @foreach ($partyTypes as $class => $label)
                                        <option value="{{ $class }}">{{ __($label) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <x-label :value="__('Select')" />
                                <select wire:model.live="party_id" @disabled(! $party_type) class="{{ $inputCls }} mt-1">
                                    <option value="">{{ __('—') }}</option>
                                    @foreach ($this->partyOptions as $opt)
                                        <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div>
                            <x-label :value="__('Name')" />
                            <input type="text" wire:model="recipient_name" class="{{ $inputCls }} mt-1" />
                        </div>
                        <div>
                            <x-label :value="__('Address')" />
                            <textarea wire:model="recipient_address" rows="3" class="{{ $inputCls }} mt-1"></textarea>
                        </div>
                        <div>
                            <x-label :value="__('Email')" />
                            <input type="email" wire:model="recipient_email" class="{{ $inputCls }} mt-1" />
                            <x-input-error for="recipient_email" class="mt-1" />
                        </div>
                    </div>
                </div>

                {{-- Referenced documents --}}
                @if ($party_id)
                    <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-900/5">
                        <h3 class="mb-1 text-sm font-semibold text-slate-800">{{ __('Related documents') }}</h3>
                        <p class="mb-4 text-xs text-slate-400">{{ __('Attach, insert a summary, or ignore each document.') }}</p>

                        @php $docs = $this->partyDocuments; @endphp
                        @if ($docs->isEmpty())
                            <p class="text-sm text-slate-400">{{ __('No documents found for this recipient.') }}</p>
                        @else
                            <div class="space-y-3">
                                @foreach ($docs as $doc)
                                    <div class="rounded-xl border border-slate-100 p-3" wire:key="doc-{{ $doc['key'] }}">
                                        <div class="flex items-start justify-between gap-2">
                                            <div class="min-w-0">
                                                <div class="truncate text-sm font-medium text-slate-800">{{ $doc['number'] }}</div>
                                                <div class="text-xs text-slate-400">
                                                    {{ $doc['doc_label'] }}@if ($doc['date']) · {{ $doc['date'] }}@endif
                                                    @if (! is_null($doc['total'])) · {{ trim(($doc['currency'] ?? '').' '.number_format((float) $doc['total'], 2)) }}@endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-2 flex items-center gap-2">
                                            <select wire:model="documentActions.{{ $doc['key'] }}" class="flex-1 rounded-lg border-slate-200 text-xs shadow-xs">
                                                <option value="ignore">{{ __('Ignore') }}</option>
                                                @if ($doc['attachable'])
                                                    <option value="attach_print">{{ __('Attach to print / download') }}</option>
                                                    <option value="attach_email">{{ __('Attach to email') }}</option>
                                                @endif
                                                <option value="insert_data">{{ __('Insert summary into letter') }}</option>
                                            </select>
                                            <button type="button" wire:click="insertDocumentData('{{ $doc['key'] }}')"
                                                    title="{{ __('Insert summary now') }}"
                                                    class="shrink-0 rounded-lg bg-slate-100 px-2.5 py-1.5 text-xs font-medium text-slate-600 transition hover:bg-slate-200">
                                                {{ __('Insert') }}
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>