@php
    $primary = $setting?->primary_color ?: '#124a61';
    $accent = $setting?->accent_color ?: '#2e86ab';
    $companyName = $setting?->company_name ?: $quote->team?->name;
    $symbol = $currencySymbol ?: '';
    $code = $quote->currency_code ?: '';

    $money = function ($value) use ($symbol, $code) {
        $formatted = number_format((float) $value, 2);
        return ($symbol !== '' ? $symbol . ' ' : ($code !== '' ? $code . ' ' : '')) . $formatted;
    };

    $logoUrl = $setting?->logoSrc();

    $statusColors = [
        'DRAFT'    => ['bg' => '#f1f5f9', 'text' => '#475569'],
        'SENT'     => ['bg' => '#e0f2fe', 'text' => '#0369a1'],
        'ACCEPTED' => ['bg' => '#d1fae5', 'text' => '#047857'],
        'REJECTED' => ['bg' => '#ffe4e6', 'text' => '#be123c'],
        'EXPIRED'  => ['bg' => '#fef3c7', 'text' => '#b45309'],
    ];
    $statusColor = $statusColors[$quote->status] ?? $statusColors['DRAFT'];
@endphp

<div style="--brand: {{ $primary }}; --accent: {{ $accent }};" class="mx-auto max-w-3xl px-4 py-8 sm:py-12">
    <style>
        .brand-gradient { background-image: linear-gradient(135deg, var(--brand), var(--accent)); }
        .brand-ring:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
        /* Rich-text content from workspace settings. */
        .rich ul { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0; }
        .rich ol { list-style: decimal; padding-left: 1.25rem; margin: 0.25rem 0; }
        .rich li { margin: 0.125rem 0; }
        .rich p { margin: 0.25rem 0; }
        .rich a { color: var(--brand); text-decoration: underline; }
    </style>

    <div class="overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-slate-900/5">

        {{-- Branded header --}}
        <div class="brand-gradient px-6 py-8 text-white sm:px-10">
            <div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
                <div class="flex items-center gap-4">
                    @if ($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $companyName }}" class="h-14 w-auto max-w-[180px] rounded bg-white/10 object-contain p-1">
                    @endif
                    <div>
                        <p class="text-lg font-bold leading-tight">{{ $companyName }}</p>
                        @if ($setting?->email)<p class="text-sm text-white/80">{{ $setting->email }}</p>@endif
                        @if ($setting?->phone)<p class="text-sm text-white/80">{{ $setting->phone }}</p>@endif
                    </div>
                </div>
                <div class="text-left sm:text-right">
                    <p class="text-xs font-semibold uppercase tracking-widest text-white/70">{{ __('Quote') }}</p>
                    <p class="mt-1 text-2xl font-bold">{{ $quote->quote_number }}</p>
                    <span class="mt-2 inline-flex items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-wide"
                          style="background-color: {{ $statusColor['bg'] }}; color: {{ $statusColor['text'] }};">
                        {{ $expired && $quote->status === 'SENT' ? __('EXPIRED') : $quote->status }}
                    </span>
                </div>
            </div>
        </div>

        <div class="px-6 py-8 sm:px-10">

            @if ($banner)
                <div class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
                    {{ $banner }}
                </div>
            @endif

            {{-- Meta --}}
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Prepared For') }}</p>
                    <p class="mt-1 font-semibold text-slate-900">{{ $quote->customer?->name ?: '—' }}</p>
                    <div class="mt-1 space-y-0.5 text-sm text-slate-500">
                        @if ($quote->customer?->address)<p>{{ $quote->customer->address }}</p>@endif
                        @if ($quote->customer?->email)<p>{{ $quote->customer->email }}</p>@endif
                        @if ($quote->customer?->phone)<p>{{ $quote->customer->phone }}</p>@endif
                    </div>
                </div>
                <div class="sm:text-right">
                    <dl class="space-y-1 text-sm">
                        <div class="flex justify-between sm:justify-end sm:gap-4">
                            <dt class="text-slate-400">{{ __('Issued') }}</dt>
                            <dd class="font-medium text-slate-700">{{ $quote->created_at?->format('M j, Y') }}</dd>
                        </div>
                        @if ($quote->valid_until)
                            <div class="flex justify-between sm:justify-end sm:gap-4">
                                <dt class="text-slate-400">{{ __('Valid Until') }}</dt>
                                <dd class="font-medium {{ $expired ? 'text-rose-600' : 'text-slate-700' }}">{{ $quote->valid_until->format('M j, Y') }}</dd>
                            </div>
                        @endif
                        <div class="flex justify-between sm:justify-end sm:gap-4">
                            <dt class="text-slate-400">{{ __('Currency') }}</dt>
                            <dd class="font-medium text-slate-700">{{ $code ?: '—' }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            {{-- Line items --}}
            <div class="mt-8 -mx-2 overflow-x-auto">
                <table class="w-full min-w-[480px] text-left text-sm">
                    <thead>
                        <tr class="border-b-2" style="border-color: {{ $primary }};">
                            <th class="px-2 py-2 font-semibold text-slate-500">{{ __('Description') }}</th>
                            <th class="px-2 py-2 text-right font-semibold text-slate-500">{{ __('Qty') }}</th>
                            <th class="px-2 py-2 text-right font-semibold text-slate-500">{{ __('Unit Price') }}</th>
                            <th class="px-2 py-2 text-right font-semibold text-slate-500">{{ __('Total') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($quote->lineItems as $line)
                            <tr>
                                <td class="px-2 py-3">
                                    <p class="font-medium text-slate-900">{{ $line->name }}</p>
                                    @if ($line->description)<p class="mt-0.5 text-xs text-slate-400">{!! nl2br(e($line->description)) !!}</p>@endif
                                </td>
                                <td class="px-2 py-3 text-right text-slate-600">{{ number_format((float) $line->qty, 2) }}</td>
                                <td class="px-2 py-3 text-right text-slate-600 whitespace-nowrap">{{ $money($line->unit_price) }}</td>
                                <td class="px-2 py-3 text-right font-medium text-slate-900 whitespace-nowrap">{{ $money($line->line_total) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="px-2 py-6 text-center text-slate-400">{{ __('No items.') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Totals --}}
            <div class="mt-6 flex justify-end">
                <dl class="w-full max-w-xs space-y-2 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-slate-500">{{ __('Subtotal') }}</dt>
                        <dd class="font-medium text-slate-700">{{ $money($quote->subtotal) }}</dd>
                    </div>
                    @if ((float) $quote->discount > 0)
                        <div class="flex justify-between">
                            <dt class="text-slate-500">{{ __('Discount') }}</dt>
                            <dd class="font-medium text-slate-700">- {{ $money($quote->discount) }}</dd>
                        </div>
                    @endif
                    <div class="flex justify-between">
                        <dt class="text-slate-500">{{ __('VAT') }}</dt>
                        <dd class="font-medium text-slate-700">{{ $money($quote->vat) }}</dd>
                    </div>
                    @if ((float) $quote->surcharge > 0)
                        <div class="flex justify-between gap-3">
                            <dt class="text-slate-500">{{ \App\Models\PaymentMethod::feeLabel() }}</dt>
                            <dd class="whitespace-nowrap font-medium text-slate-700">{{ $money($quote->surcharge) }}</dd>
                        </div>
                    @endif
                    <div class="flex justify-between border-t-2 pt-2 text-base" style="border-color: {{ $primary }};">
                        <dt class="font-bold" style="color: {{ $primary }};">{{ __('Total') }}</dt>
                        <dd class="font-bold" style="color: {{ $primary }};">{{ $money($quote->total) }}</dd>
                    </div>
                </dl>
            </div>

            {{-- ============================ THE ANSWER ============================ --}}
            <div class="mt-8 border-t border-slate-100 pt-6">
                @if ($quote->client_responded_at)
                    @if ($quote->status === 'ACCEPTED')
                        <div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-5">
                            <p class="flex items-center gap-2 text-base font-bold text-emerald-900">
                                <x-icon name="check-circle" class="h-5 w-5" />
                                {{ __('You accepted this quote') }}
                            </p>
                            <p class="mt-1 text-sm text-emerald-800">
                                {{ __('Accepted by :name on :date. We will be in touch about the next steps.', [
                                    'name' => $quote->client_responded_name,
                                    'date' => $quote->client_responded_at->format('M j, Y'),
                                ]) }}
                            </p>
                        </div>
                    @else
                        <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
                            <p class="text-base font-bold text-slate-800">{{ __('You declined this quote') }}</p>
                            <p class="mt-1 text-sm text-slate-500">
                                {{ __('On :date. If that was a mistake, please get in touch.', ['date' => $quote->client_responded_at->format('M j, Y')]) }}
                            </p>
                            @if ($quote->decline_reason)
                                <blockquote class="mt-3 border-l-2 border-slate-300 pl-3 text-sm italic text-slate-600">{{ $quote->decline_reason }}</blockquote>
                            @endif
                        </div>
                    @endif

                @elseif ($expired)
                    <div class="rounded-2xl border border-amber-200 bg-amber-50 p-5">
                        <p class="text-base font-bold text-amber-900">{{ __('This quote has expired') }}</p>
                        <p class="mt-1 text-sm text-amber-800">{{ __('Prices move. Get in touch and we will gladly requote for you.') }}</p>
                    </div>

                @elseif ($canRespond)
                    @if ($deciding === null)
                        <p class="text-base font-semibold text-slate-900">{{ __('Happy with this?') }}</p>
                        <p class="mt-1 text-sm text-slate-500">{{ __('Let us know either way. Accepting does not commit you to payment today.') }}</p>

                        <div class="mt-4 grid gap-2 sm:grid-cols-2">
                            <button type="button" wire:click="startAccept"
                                    class="flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700">
                                <x-icon name="check" class="h-4 w-4" />
                                {{ __('Accept this quote') }}
                            </button>
                            <button type="button" wire:click="startDecline"
                                    class="flex items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                                {{ __('No thank you') }}
                            </button>
                        </div>

                    @elseif ($deciding === 'accept')
                        <div class="rounded-2xl border-2 border-emerald-300 bg-emerald-50 p-5">
                            <p class="text-base font-bold text-emerald-900">{{ __('Accept :total', ['total' => $money($quote->total)]) }}</p>
                            <p class="mt-1 text-sm text-emerald-800">{{ __('Type your name to confirm. This tells us to go ahead.') }}</p>

                            <label class="mt-4 block text-sm font-medium text-slate-700">{{ __('Your name') }}</label>
                            <input type="text" wire:model="respondedName"
                                   class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                            @error('respondedName') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror

                            <div class="mt-4 flex gap-2">
                                <button type="button" wire:click="accept" wire:loading.attr="disabled" wire:target="accept"
                                        class="flex-1 rounded-xl bg-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 disabled:opacity-50">
                                    {{ __('Confirm, go ahead') }}
                                </button>
                                <button type="button" wire:click="cancelDecision"
                                        class="rounded-xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                                    {{ __('Cancel') }}
                                </button>
                            </div>
                        </div>

                    @else
                        <div class="rounded-2xl border border-slate-300 bg-slate-50 p-5">
                            <p class="text-base font-bold text-slate-800">{{ __('Not this time?') }}</p>
                            <p class="mt-1 text-sm text-slate-500">{{ __('Telling us why costs you nothing and helps us quote better next time.') }}</p>

                            <label class="mt-4 block text-sm font-medium text-slate-700">{{ __('Your name') }}</label>
                            <input type="text" wire:model="respondedName"
                                   class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0">
                            @error('respondedName') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror

                            <label class="mt-3 block text-sm font-medium text-slate-700">{{ __('Why?') }}</label>
                            <textarea wire:model="declineReason" rows="3"
                                      placeholder="{{ __('e.g. over budget, went elsewhere, no longer needed…') }}"
                                      class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0"></textarea>
                            @error('declineReason') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror

                            <div class="mt-4 flex gap-2">
                                <button type="button" wire:click="decline" wire:loading.attr="disabled" wire:target="decline"
                                        class="flex-1 rounded-xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-800 disabled:opacity-50">
                                    {{ __('Send') }}
                                </button>
                                <button type="button" wire:click="cancelDecision"
                                        class="rounded-xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                                    {{ __('Cancel') }}
                                </button>
                            </div>
                        </div>
                    @endif
                @endif

                <div class="mt-4">
                    <a href="{{ route('portal.quote.pdf', $quote->public_token) }}" target="_blank" rel="noopener"
                       class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
                        <x-icon name="arrow-down-tray" class="h-4 w-4" />
                        {{ __('Download PDF') }}
                    </a>
                </div>
            </div>

            {{-- Notes / terms / banking --}}
            @php
                // The banking a customer would use to pay once they accept,
                // for this quote's currency only. Resolved through the shared
                // helper so this page and the quote PDF agree — including on
                // whether the details show at all, which follows the quote's
                // own payment method.
                $banking = \App\Support\DocumentBanking::for(
                    $quote->team_id, $quote->currency_code, $setting, $quote->paymentMethod
                );
                $hasBanking = $banking['showsBanking'];
            @endphp
            @if ($quote->notes || $setting?->terms_and_conditions || $hasBanking)
                <div class="mt-8 space-y-4 border-t border-slate-100 pt-6 text-sm">
                    @if ($quote->notes)
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Notes') }}</p>
                            <p class="mt-1 whitespace-pre-line text-slate-600">{{ $quote->notes }}</p>
                        </div>
                    @endif
                    @if ($hasBanking)
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
                                {{ __('Banking Details') }}
                                @if ($banking['accounts']->isNotEmpty())
                                    <span class="text-slate-300">&middot;</span> {{ $quote->currency_code }}
                                @endif
                            </p>
                            <div class="mt-1">
                                @include('portal.partials.banking', ['banking' => $banking, 'setting' => $setting, 'currencyCode' => $quote->currency_code])
                            </div>
                        </div>
                    @endif
                    @if ($setting?->terms_and_conditions)
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Terms & Conditions') }}</p>
                            <div class="rich mt-1 text-slate-600">{!! \App\Support\Html::display($setting->terms_and_conditions) !!}</div>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <p class="mt-6 text-center text-xs text-slate-400">{{ __('Powered by') }} {{ $companyName }}</p>
</div>