@php
    /*
     | Persistent, non-modal order panel (design A5).
     | `drawer` = the panel mounted in the layout on every page (right drawer at
     | ≥ 640 px, bottom sheet below that). `inline` = the builder that replaces
     | the absorbed calculator on a collection detail page.
     */
    $isDrawer = $mode === 'drawer';
    $panelId = 'order-panel-'.$mode;
    $headingId = 'order-panel-heading-'.$mode;
    $stone = $product !== null && $product->category === 'stone';
    $visibleFormats = $product?->formats->where('is_visible', true) ?? collect();

    $fieldClass = 'block w-full rounded-none border border-line bg-surface-raised px-4 py-3 font-sans text-body text-on-surface placeholder:text-on-surface-muted transition-colors duration-fast ease-out-soft focus:border-accent-500 focus:outline-none focus:ring-2 focus:ring-accent-500/20';
    $labelClass = 'mb-1 block font-sans text-base font-medium text-on-surface-muted';
@endphp

<div
    x-data="orderDrawer({ mode: '{{ $mode }}' })"
    @if ($isDrawer) data-order-builder-drawer @else data-order-builder-inline @endif
    @if ($isDrawer) x-on:order-open.window="show()" @endif
>
    @if ($isDrawer)
        {{-- Backdrop: click to close, matching the mobile menu contract. Fades in
             and out (never pops) alongside the drawer slide. --}}
        <div x-cloak
             x-show="open"
             x-on:click="close()"
             data-order-backdrop
             aria-hidden="true"
             x-transition:enter="transition duration-base ease-out-soft"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition duration-base ease-out-soft"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-[70] bg-brand-950/60"></div>
    @endif

    <aside id="{{ $panelId }}"
           role="dialog"
           aria-label="Mi pedido"
           aria-modal="{{ $isDrawer ? 'true' : 'false' }}"
           aria-labelledby="{{ $headingId }}"
           @if ($isDrawer)
               x-cloak
               x-show="open"
               x-ref="panel"
               x-on:keydown="onKey($event)"
               x-transition:enter="transition duration-slow ease-out-soft"
               x-transition:enter-start="translate-x-full"
               x-transition:enter-end="translate-x-0"
               x-transition:leave="transition duration-slow ease-in-out-soft"
               x-transition:leave-start="translate-x-0"
               x-transition:leave-end="translate-x-full"
               class="fixed inset-x-0 bottom-0 z-[75] flex max-h-[92dvh] flex-col border-t border-line bg-surface shadow-lift sm:inset-y-0 sm:left-auto sm:right-0 sm:h-full sm:max-h-none sm:w-[400px] sm:border-l sm:border-t-0"
           @else
               class="border border-line bg-surface-raised shadow-soft"
           @endif
    >
        <div class="flex items-start justify-between gap-4 border-b border-line px-5 py-4">
            <div>
                {{-- Bottom-sheet drag affordance (mobile only). --}}
                @if ($isDrawer)
                    <span class="mx-auto mb-3 block h-1 w-12 rounded-full bg-line sm:hidden" aria-hidden="true"></span>
                @endif
                {{-- Styled as a heading but kept out of the document outline so
                     the globally mounted drawer can never skip a heading level. --}}
                <p id="{{ $headingId }}" class="font-serif text-h3 text-on-surface">Mi pedido</p>
                <p class="mt-1 font-sans text-sm text-on-surface-muted">
                    Arma tu pedido y te lo cotizamos por WhatsApp el mismo día.
                </p>
            </div>

            @if ($isDrawer)
                <button type="button"
                        x-ref="closeButton"
                        x-on:click="close()"
                        aria-label="Cerrar mi pedido"
                        class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-none border border-line text-on-surface transition-colors duration-fast ease-out-soft hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                    <x-icon name="close" :size="20" />
                </button>
            @endif
        </div>

        <div class="flex-1 overflow-y-auto overscroll-contain px-5 py-4">
            @error('form')
                <x-alert variant="error" title="Revisa tu pedido" class="mb-4">{{ $message }}</x-alert>
            @enderror

            @if ($sent)
                <x-alert variant="success" title="Pedido listo" class="mb-4">
                    Abrimos WhatsApp con tu pedido. Te respondemos con el precio por m² y el flete.
                </x-alert>
            @endif

            @if (! $isDrawer && $product !== null)
                {{-- Inline builder: add the current collection's measures. --}}
                <div class="grid gap-4" data-order-add-form>
                    <div>
                        <label for="order-format-{{ $mode }}" class="{{ $labelClass }}">Presentación y medida</label>
                        <select id="order-format-{{ $mode }}" wire:model="formatId" class="{{ $fieldClass }}">
                            <option value="">Elige una medida</option>
                            @foreach ($visibleFormats as $availableFormat)
                                <option value="{{ $availableFormat->id }}">
                                    {{ $availableFormat->label }} — {{ \App\Models\ProductFormat::familyLabel($availableFormat->family) }}
                                </option>
                            @endforeach
                        </select>
                        @error('formatId') <p role="alert" class="mt-1 font-sans text-sm text-error-text">{{ $message }}</p> @enderror
                    </div>

                    <div class="{{ $stone ? 'grid gap-4 sm:grid-cols-2' : '' }}">
                        <div>
                            <label for="order-quantity-{{ $mode }}" class="{{ $labelClass }}">
                                {{ $stone ? 'Metros cuadrados (m²)' : 'Cantidad de unidades' }}
                            </label>
                            <input id="order-quantity-{{ $mode }}" type="number" min="0" step="0.01"
                                   wire:model="quantity" class="{{ $fieldClass }}" placeholder="Ej. 25">
                            @error('quantity') <p role="alert" class="mt-1 font-sans text-sm text-error-text">{{ $message }}</p> @enderror
                        </div>

                        @if ($stone)
                            <div>
                                <label for="order-unit-{{ $mode }}" class="{{ $labelClass }}">Unidad</label>
                                <select id="order-unit-{{ $mode }}" wire:model="unit" class="{{ $fieldClass }}">
                                    <option value="m2">m²</option>
                                    <option value="units">Unidades</option>
                                </select>
                            </div>
                        @endif
                    </div>

                    @if ($stone)
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label for="order-uso-{{ $mode }}" class="{{ $labelClass }}">Uso</label>
                                <select id="order-uso-{{ $mode }}" wire:model="uso" class="{{ $fieldClass }}">
                                    <option value="">Elige el uso</option>
                                    @foreach (\App\Models\Project::USES as $useKey => $useLabel)
                                        <option value="{{ $useKey }}">{{ $useLabel }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label for="order-distrito-{{ $mode }}" class="mb-1 block font-sans text-base font-medium text-on-surface-muted">Distrito de entrega</label>
                                <input id="order-distrito-{{ $mode }}" type="text" wire:model="distrito"
                                       list="order-distrito-list-{{ $mode }}" autocomplete="off"
                                       class="{{ $fieldClass }} min-h-12" placeholder="Busca tu distrito">
                                <datalist id="order-distrito-list-{{ $mode }}">
                                    @foreach ($districts as $districtLabel)
                                        <option value="{{ $districtLabel }}"></option>
                                    @endforeach
                                </datalist>
                                <p class="mt-1 font-sans text-base text-on-surface-muted">Escribe y elige tu distrito. Enviamos a todo el Perú.</p>
                            </div>
                        </div>
                    @endif

                    {{-- Honeypot: hidden from people, filled by bots. --}}
                    <div class="hidden" aria-hidden="true">
                        <label for="order-honeypot-{{ $mode }}">No completar</label>
                        <input id="order-honeypot-{{ $mode }}" type="text" wire:model="honeypot"
                               tabindex="-1" autocomplete="off">
                    </div>

                    <x-button type="button" variant="secondary" wire:click="add">
                        Agregar al pedido
                    </x-button>
                </div>
            @endif

            {{-- Items: collection, measure, quantity, uso and distrito. --}}
            <div class="mt-6">
                <p class="font-sans text-xs font-bold uppercase tracking-[0.18em] text-accent-text">
                    Detalle del pedido
                </p>

                <ul class="mt-3 divide-y divide-line border-y border-line">
                    @forelse ($rows as $item)
                        <li class="flex items-start gap-3 py-3" data-order-item>
                            <img
                                src="{{ $item['image'] }}"
                                alt=""
                                loading="lazy"
                                decoding="async"
                                width="64"
                                height="64"
                                class="h-16 w-16 shrink-0 border border-line object-cover"
                            />

                            <div class="min-w-0 flex-1">
                                <p class="font-serif text-base text-on-surface">
                                    {{ $item['name'] }}
                                </p>
                                <p class="mt-1 font-sans text-base text-on-surface-muted">
                                    {{ $item['label'] }}
                                    @if ($item['thickness'] !== '')
                                        <span>· espesor {{ $item['thickness'] }}</span>
                                    @endif
                                    @if ($item['uso'] !== '')
                                        <span>· uso: {{ $item['uso'] }}</span>
                                    @endif
                                    @if ($item['distrito'] !== '')
                                        <span>· entrega: {{ $item['distrito'] }}</span>
                                    @endif
                                    @if ($item['note'] !== '')
                                        <span>· {{ $item['note'] }}</span>
                                    @endif
                                </p>
                                <p class="mt-1 font-sans text-base text-on-surface-muted">
                                    <span class="font-mono">{{ $item['quantity'] }}</span>
                                    {{ $item['unit'] === 'm2' ? 'm²' : 'und' }}
                                </p>
                            </div>

                            <button type="button"
                                    wire:click="remove('{{ $item['id'] }}')"
                                    aria-label="Quitar {{ $item['name'] }} del pedido"
                                    class="min-h-11 shrink-0 rounded-none border border-line px-3 font-sans text-base text-on-surface-muted transition-colors duration-fast ease-out-soft hover:border-error-text hover:text-error-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                Quitar
                            </button>
                        </li>
                    @empty
                        <li class="py-4 font-sans text-sm text-on-surface-muted" data-order-empty>
                            Tu pedido está vacío. Agrega una piedra o un complemento para cotizar.
                        </li>
                    @endforelse
                </ul>
            </div>

            {{-- Buyer profile: real fieldset, labels mapped to existing keys.
                 Always visible so the visitor can declare their type upfront. --}}
            <fieldset class="mt-6" data-order-profile>
                <legend class="font-sans text-sm font-bold uppercase tracking-[0.16em] text-accent-text">
                    ¿Cómo compras?
                </legend>
                <div class="mt-3 flex flex-wrap gap-3">
                    @foreach (\App\Livewire\OrderBuilder::PROFILE_OPTIONS as $profileKey => $profileLabel)
                        {{-- Custom radio, not the native control: the native one
                             ignores the brand palette and looks foreign here. --}}
                        <label class="group inline-flex min-h-12 cursor-pointer items-center gap-3 border px-4 font-sans text-base transition-colors duration-base ease-out-soft
                                      {{ $profile === $profileKey ? 'border-accent-500 bg-accent-500/10 text-on-surface' : 'border-line text-on-surface-muted hover:border-accent-500' }}">
                            <input type="radio"
                                   name="order-profile-{{ $mode }}"
                                   value="{{ $profileKey }}"
                                   wire:click="setProfile('{{ $profileKey }}')"
                                   @checked($profile === $profileKey)
                                   class="h-5 w-5 shrink-0 appearance-none rounded-full border-2 border-line bg-surface-raised transition-colors duration-fast ease-out-soft
                                          checked:border-accent-500 checked:bg-accent-500
                                          focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                            {{ $profileLabel }}
                        </label>
                    @endforeach
                </div>
            </fieldset>

            @if ($items !== [])
                {{-- Both mandatory disclaimers, shown before sending. --}}
                <x-stone-variance-note class="mt-6" data-order-disclaimers />

                <div class="mt-6 grid gap-3">
                    @if ($whatsappUrl)
                        <a href="{{ $whatsappUrl }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           data-track="whatsapp_click"
                           data-order-whatsapp
                           x-data
                           x-on:click="$wire.send()"
                           class="inline-flex items-center justify-center gap-2 rounded-none bg-accent-500 px-8 py-3.5 font-sans text-body-lg font-medium text-brand-950 shadow-soft transition-all duration-base ease-out-soft hover:-translate-y-px hover:bg-accent-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
                            <x-icon name="whatsapp" :size="24" />
                            Enviar pedido por WhatsApp
                        </a>
                    @endif

                    <button type="button"
                            wire:click="clear"
                            class="rounded-none border border-transparent px-4 py-2 font-sans text-sm text-on-surface-muted transition-colors duration-fast ease-out-soft hover:bg-surface-hover hover:text-on-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                        Vaciar pedido
                    </button>
                </div>
            @endif
        </div>
    </aside>
</div>