@php
    $statusMeta = [
        'draft'     => ['label' => __('Draft'),             'color' => 'slate'],
        'sent'      => ['label' => __('Out for Quotation'), 'color' => 'indigo'],
        'closed'    => ['label' => __('Closed'),            'color' => 'amber'],
        'awarded'   => ['label' => __('Awarded'),           'color' => 'emerald'],
        'cancelled' => ['label' => __('Cancelled'),         'color' => 'slate'],
    ];
    $tonePill = [
        'up'    => 'bg-emerald-50 text-emerald-700',
        'down'  => 'bg-rose-50 text-rose-700',
        'muted' => 'bg-slate-100 text-slate-500',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        {{-- Header --}}
        <x-page-header :title="__('Requests for Quotation')" :subtitle="__('Ask several suppliers to price the same requirement, compare the bids side by side, then award one into a purchase order.')">
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New RFQ') }}
                </x-button>
            @endif
        </x-page-header>

        <x-purchasing-tabs />

        {{-- KPI cards --}}
        <section class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $kpi)
                <x-card class="flex items-start gap-4 p-5">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-white shadow-sm ring-1 ring-white/40" style="background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                        <x-icon :name="$kpi['icon']" class="h-5 w-5" />
                    </span>
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                        <p class="mt-1 truncate text-2xl font-bold leading-none tracking-tight text-slate-900 tabular-nums">{{ $kpi['value'] }}</p>
                        <span class="mt-2 inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold {{ $tonePill[$kpi['sub']['tone']] ?? $tonePill['muted'] }}">
                            {{ $kpi['sub']['text'] }}
                        </span>
                    </div>
                </x-card>
            @endforeach
        </section>

        {{-- RFQ table --}}
        <x-card class="overflow-hidden">
            {{-- Toolbar --}}
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <div class="relative max-w-md flex-1">
                    <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.300ms="search"
                        placeholder="{{ __('Search RFQ #, subject...') }}"
                        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>

                <div class="flex flex-wrap items-center gap-2">
                    <select wire:model.live="visibilityFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Open & closed') }}</option>
                        @foreach ($visibilities as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>

                    <select wire:model.live="statusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All Status') }}</option>
                        @foreach ($statuses as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Table --}}
            <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">{{ __('RFQ #') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Subject') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Issued') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Closes') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-center">{{ __('Responses') }}</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 bg-white">
                        @forelse ($rfqs as $rfq)
                            @php
                                $deadline = $rfq->response_deadline;
                                $closingSoon = $rfq->status === 'sent' && $deadline && $deadline->isFuture() && $deadline->diffInHours(now()) <= 72;
                                $overdue = $rfq->status === 'sent' && $deadline && $deadline->isPast();
                                $outstanding = max(0, $rfq->invitations_count - $rfq->responses_count - $rfq->declined_count);
                            @endphp
                            <tr wire:key="rfq-{{ $rfq->id }}" class="transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <a href="{{ route('purchasing.rfqs.show', $rfq) }}" wire:navigate class="text-sm font-semibold text-slate-900 transition hover:text-indigo-600">
                                        {{ $rfq->rfq_number }}
                                    </a>
                                    @if ($rfq->purchase_order_id)
                                        <p class="text-xs text-emerald-500">{{ __('PO raised') }}</p>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">
                                    <span class="flex flex-wrap items-center gap-1.5">
                                        {{ $rfq->title ?: '—' }}
                                        @if ($rfq->is_public)
                                            <span class="inline-flex shrink-0 items-center gap-1 rounded-full bg-sky-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-700">
                                                <x-icon name="link" class="h-3 w-3" />
                                                {{ __('Open') }}
                                            </span>
                                        @endif
                                    </span>
                                    <span class="block text-xs text-slate-400">{{ trans_choice('{0}No items|{1}:count item|[2,*] :count items', $rfq->lines_count, ['count' => $rfq->lines_count]) }}</span>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ optional($rfq->issue_date)->format('j M Y') ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm {{ $overdue ? 'text-rose-600' : ($closingSoon ? 'text-amber-600' : 'text-slate-500') }}">
                                    @if ($deadline)
                                        {{ $deadline->format('j M Y') }}
                                        @if ($rfq->status === 'sent')
                                            <span class="block text-xs">{{ $overdue ? __('Deadline passed') : $deadline->diffForHumans() }}</span>
                                        @endif
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-center text-sm tabular-nums">
                                    <span class="font-semibold text-slate-900">{{ $rfq->responses_count }}</span><span class="text-slate-400">/{{ $rfq->invitations_count }}</span>
                                    @if ($outstanding > 0 && $rfq->status === 'sent')
                                        <span class="block text-xs text-amber-600">{{ __(':n awaited', ['n' => $outstanding]) }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$statusMeta[$rfq->status]['color'] ?? 'slate'">
                                        {{ $statusMeta[$rfq->status]['label'] ?? $rfq->status_label }}
                                    </x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('purchasing.rfqs.show', $rfq) }}" wire:navigate
                                           title="{{ __('Open bid room') }}" class="text-slate-400 transition hover:text-indigo-600">
                                            <x-icon name="table-cells" class="h-4 w-4" />
                                        </a>
                                        <a href="{{ route('rfqs.preview', $rfq) }}" target="_blank" rel="noopener"
                                           title="{{ __('View / print') }}" class="text-slate-400 transition hover:text-indigo-600">
                                            <x-icon name="eye" class="h-4 w-4" />
                                        </a>
                                        <a href="{{ route('rfqs.pdf', $rfq) }}"
                                           title="{{ __('Download PDF') }}" class="text-slate-400 transition hover:text-slate-700">
                                            <x-icon name="arrow-down-tray" class="h-4 w-4" />
                                        </a>
                                        <x-notes-button :for="$rfq" />
                                        @if ($rfq->public_url)
                                            <div x-data="{ copied: false }" class="inline-flex">
                                                <button type="button"
                                                        @click="navigator.clipboard.writeText('{{ $rfq->public_url }}').then(() => { copied = true; setTimeout(() => copied = false, 1800) })"
                                                        title="{{ __('Copy public bidding link') }}"
                                                        class="text-slate-400 transition hover:text-sky-600">
                                                    <x-icon name="link" class="h-4 w-4" x-show="! copied" />
                                                    <x-icon name="check" class="h-4 w-4 text-emerald-600" x-show="copied" x-cloak />
                                                </button>
                                            </div>
                                        @endif
                                        @if ($canManage && $rfq->status === 'draft')
                                            <button wire:click="issue({{ $rfq->id }})"
                                                    wire:confirm="{{ __('Issue this RFQ and email the invited suppliers their quoting links?') }}"
                                                    class="text-indigo-600 transition hover:text-indigo-800">{{ __('Issue') }}</button>
                                            <button wire:click="edit({{ $rfq->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Edit') }}</button>
                                        @endif
                                        @if ($canManage && $rfq->status === 'sent')
                                            <button wire:click="remind({{ $rfq->id }})" class="text-sky-600 transition hover:text-sky-800">{{ __('Remind') }}</button>
                                            <button wire:click="close({{ $rfq->id }})"
                                                    wire:confirm="{{ __('Close this RFQ to further quotations?') }}"
                                                    class="text-amber-600 transition hover:text-amber-800">{{ __('Close') }}</button>
                                        @endif
                                        @if ($canManage && $rfq->status === 'closed')
                                            <button wire:click="reopen({{ $rfq->id }})" class="text-sky-600 transition hover:text-sky-800">{{ __('Re-open') }}</button>
                                        @endif
                                        @if ($rfq->purchase_order_id)
                                            <a href="{{ route('purchasing.orders') }}" wire:navigate class="text-slate-500 transition hover:text-slate-700">{{ __('View PO') }}</a>
                                        @endif
                                        @if ($canManage && ! in_array($rfq->status, ['awarded', 'cancelled'], true))
                                            <button wire:click="cancel({{ $rfq->id }})"
                                                    wire:confirm="{{ __('Cancel this RFQ?') }}"
                                                    class="text-amber-600 transition hover:text-amber-800">{{ __('Cancel') }}</button>
                                        @endif
                                        @if ($canDelete)
                                            <button wire:click="delete({{ $rfq->id }})"
                                                    wire:confirm="{{ __('Delete this RFQ and every quotation on it?') }}"
                                                    class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="paper-airplane"
                                        :title="__('No requests for quotation yet')"
                                        :message="$search !== '' || $statusFilter !== '' || $visibilityFilter !== '' ? __('Try adjusting your search or filters.') : __('Raise an RFQ to get competing prices before you commit to a purchase order.')"
                                        class="border-0 bg-transparent py-0"
                                    >
                                        @if ($canManage && $search === '' && $statusFilter === '' && $visibilityFilter === '')
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New RFQ') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $rfqs->links() }}
            </div>
        </x-card>
    </div>

    {{-- ============================================================= --}}
    {{-- Create / Edit RFQ modal                                        --}}
    {{-- ============================================================= --}}
    <x-dialog-modal wire:model.live="showModal" maxWidth="3xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit RFQ') : __('New Request for Quotation') }}
        </x-slot>

        <x-slot name="content">
            <div class="space-y-5">
                {{-- Who may bid: the one choice that changes how the tender runs --}}
                <div>
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Who can bid?') }}</h3>
                    {{-- Tailwind classes are written out literally per branch: the
                         JIT scanner cannot see interpolated colour names, and this
                         project carries no safelist. --}}
                    <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <label wire:key="rfq-vis-invited"
                               class="flex cursor-pointer gap-3 rounded-2xl border-2 p-4 transition {{ $visibility === 'invited' ? 'border-indigo-400 bg-indigo-50/50 ring-2 ring-indigo-100' : 'border-slate-200 bg-white hover:border-indigo-300 hover:bg-indigo-50/30' }}">
                            <input type="radio" value="invited" wire:model.live="visibility" class="sr-only" />
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $visibility === 'invited' ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-100 text-slate-400' }}">
                                <x-icon name="building-office" class="h-5 w-5" />
                            </span>
                            <span class="min-w-0">
                                <span class="block text-sm font-bold text-slate-900">{{ __('Invite only') }}</span>
                                <span class="mt-0.5 block text-xs text-slate-500">{{ __('A closed tender. Only the suppliers you pick get a link.') }}</span>
                            </span>
                        </label>

                        <label wire:key="rfq-vis-public"
                               class="flex cursor-pointer gap-3 rounded-2xl border-2 p-4 transition {{ $visibility === 'public' ? 'border-sky-400 bg-sky-50/50 ring-2 ring-sky-100' : 'border-slate-200 bg-white hover:border-sky-300 hover:bg-sky-50/30' }}">
                            <input type="radio" value="public" wire:model.live="visibility" class="sr-only" />
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $visibility === 'public' ? 'bg-sky-100 text-sky-700' : 'bg-slate-100 text-slate-400' }}">
                                <x-icon name="link" class="h-5 w-5" />
                            </span>
                            <span class="min-w-0">
                                <span class="block text-sm font-bold text-slate-900">{{ __('Open tender') }}</span>
                                <span class="mt-0.5 block text-xs text-slate-500">{{ __('Generates a shareable bidding page any supplier can register on. You can still invite suppliers directly.') }}</span>
                            </span>
                        </label>
                    </div>

                    @if ($visibility === 'public')
                        <p class="mt-2 rounded-xl bg-sky-50 px-3 py-2 text-xs text-sky-800">
                            {{ __('The bidding link appears once you save. Bidding stays sealed either way — each supplier only ever sees their own prices.') }}
                        </p>
                    @endif
                    <x-input-error for="visibility" class="mt-2" />
                </div>

                {{-- Header fields --}}
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="rfq-title" value="{{ __('Subject') }}" />
                        <x-input id="rfq-title" type="text" class="mt-1 block w-full" wire:model="title"
                                 placeholder="{{ __('e.g. Vinyl and laminate resupply, Q3') }}" />
                        <x-input-error for="title" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="rfq-currency" value="{{ __('Quote In') }}" />
                        <select id="rfq-currency" wire:model.live="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Suppliers may still answer in their own currency, bids are compared in base.') }}</p>
                        <x-input-error for="currency_code" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="rfq-rate" value="{{ __('Exchange Rate (to base)') }}" />
                        <x-input id="rfq-rate" type="number" step="0.000001" min="0" class="mt-1 block w-full" wire:model="exchange_rate" />
                        <x-input-error for="exchange_rate" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="rfq-issue" value="{{ __('Issue Date') }}" />
                        <x-input id="rfq-issue" type="date" class="mt-1 block w-full" wire:model="issue_date" />
                        <x-input-error for="issue_date" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="rfq-deadline" value="{{ __('Responses Close') }}" />
                        <x-input id="rfq-deadline" type="datetime-local" class="mt-1 block w-full" wire:model="response_deadline" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Supplier links lock automatically at this time.') }}</p>
                        <x-input-error for="response_deadline" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="rfq-required" value="{{ __('Goods Required By (optional)') }}" />
                        <x-input id="rfq-required" type="date" class="mt-1 block w-full" wire:model="required_by" />
                        <x-input-error for="required_by" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="rfq-terms-pay" value="{{ __('Our Payment Terms (optional)') }}" />
                        <x-input id="rfq-terms-pay" type="text" class="mt-1 block w-full" wire:model="payment_terms"
                                 placeholder="{{ __('e.g. 30 days from invoice') }}" />
                        <x-input-error for="payment_terms" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="rfq-scope" value="{{ __('Scope / background (shown to suppliers)') }}" />
                        <textarea id="rfq-scope" rows="2" wire:model="scope"
                                  placeholder="{{ __('Describe the requirement, quality expectations, site conditions…') }}"
                                  class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="scope" class="mt-2" />
                    </div>
                </div>

                {{-- Items --}}
                <div>
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Items to be priced') }}</h3>
                        <button type="button" wire:click="addLine" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 transition hover:text-indigo-800">
                            <x-icon name="plus" class="h-4 w-4" />
                            {{ __('Add item') }}
                        </button>
                    </div>
                    <x-input-error for="lines" class="mt-2" />

                    <div class="mt-3 space-y-3">
                        @foreach ($lines as $i => $line)
                            <div wire:key="rfq-line-{{ $i }}" class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                                    <div class="sm:col-span-12">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Catalogue item') }}</label>
                                        <select
                                            wire:model="lines.{{ $i }}.item_ref"
                                            wire:change="onItemChosen({{ $i }})"
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                        >
                                            <option value="">{{ __('Manual entry / non-stock') }}</option>
                                            @if ($variants->isNotEmpty())
                                                <optgroup label="{{ __('Stock / Materials') }}">
                                                    @foreach ($variants as $variant)
                                                        <option value="variant:{{ $variant->id }}">{{ $variant->material_name }}{{ $variant->label ? ', ' . $variant->label : '' }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endif
                                        </select>
                                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Linking stock carries the inventory link through to the purchase order raised on award.') }}</p>
                                    </div>

                                    <div class="sm:col-span-12">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Description') }}</label>
                                        <input type="text" wire:model="lines.{{ $i }}.description"
                                               class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                    </div>

                                    <div class="sm:col-span-12">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Specification (optional)') }}</label>
                                        <textarea rows="2" wire:model="lines.{{ $i }}.specification"
                                                  placeholder="{{ __('Grade, dimensions, finish, brand or approved equivalent…') }}"
                                                  class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                                    </div>

                                    <div class="sm:col-span-4">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Qty') }}</label>
                                        <input type="number" step="0.000001" min="0" wire:model="lines.{{ $i }}.quantity"
                                               class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                    </div>

                                    <div class="sm:col-span-4">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Unit') }}</label>
                                        <input type="text" wire:model="lines.{{ $i }}.unit" placeholder="{{ __('m², roll, each') }}"
                                               class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500" />
                                    </div>

                                    <div class="flex items-end justify-end sm:col-span-4">
                                        <button type="button" wire:click="removeLine({{ $i }})" class="mb-2 text-slate-300 transition hover:text-rose-500" title="{{ __('Remove item') }}">
                                            <x-icon name="trash" class="h-4 w-4" />
                                        </button>
                                    </div>

                                    @error('lines.' . $i . '.description') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                    @error('lines.' . $i . '.quantity') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Suppliers to invite --}}
                <div class="border-t border-slate-100 pt-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Invite suppliers') }}</h3>
                        <span class="text-xs text-slate-400">{{ trans_choice('{0}None selected|{1}:count selected|[2,*] :count selected', count($invitedSuppliers), ['count' => count($invitedSuppliers)]) }}</span>
                    </div>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Each supplier gets their own private link. Nobody can see anybody else’s pricing.') }}</p>
                    <x-input-error for="invitedSuppliers" class="mt-2" />

                    @if ($suppliers->isEmpty())
                        <p class="mt-3 rounded-xl bg-amber-50 px-3 py-2 text-xs text-amber-800">
                            {{ __('No active suppliers yet. Add one on the Suppliers tab first.') }}
                        </p>
                    @else
                        <div class="mt-3 grid max-h-56 grid-cols-1 gap-2 overflow-y-auto rounded-xl border border-slate-200 bg-slate-50/50 p-3 sm:grid-cols-2">
                            @foreach ($suppliers as $supplier)
                                <label wire:key="rfq-supplier-{{ $supplier->id }}"
                                       class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-sm transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                    <input type="checkbox" value="{{ $supplier->id }}" wire:model="invitedSuppliers"
                                           class="mt-0.5 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                    <span class="min-w-0">
                                        <span class="block truncate font-medium">{{ $supplier->name }}</span>
                                        <span class="block truncate text-[11px] {{ $supplier->email ? 'text-slate-400' : 'text-amber-600' }}">
                                            {{ $supplier->email ?: __('No email, send the link by hand') }}
                                        </span>
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Terms + internal notes --}}
                <div class="grid grid-cols-1 gap-4 border-t border-slate-100 pt-4 sm:grid-cols-2">
                    <div>
                        <x-label for="rfq-terms" value="{{ __('Conditions shown to suppliers (optional)') }}" />
                        <textarea id="rfq-terms" rows="3" wire:model="terms"
                                  class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="terms" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="rfq-delivery" value="{{ __('Delivery address (optional)') }}" />
                        <textarea id="rfq-delivery" rows="3" wire:model="delivery_address"
                                  class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="delivery_address" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="rfq-notes" value="{{ __('Internal notes (never shown to suppliers)') }}" />
                        <textarea id="rfq-notes" rows="2" wire:model="notes"
                                  class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="notes" class="mt-2" />
                    </div>
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ $editingId ? __('Save Changes') : __('Save Draft') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving...') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>