{{--
    A GRADE DE COMANDAS, isolada da página.

    A busca ao vivo (live-search.js) pede a mesma URL com o cabeçalho de AJAX e o
    OrderController devolve só este trecho — sem layout, sem menu e sem o
    formulário que disparou a busca. Devolver a página inteira e recortá-la no
    cliente desperdiçaria a renderização de tudo o que não muda.

    O MODAL DE NOVO PEDIDO NÃO ENTRA AQUI, e é importante que não entre: ele é
    substituído junto com o conteúdo a cada tecla, e o Tom Select ligado ao
    select de clientes morreria com os nós antigos. Ele fica na index, fora do
    container que a busca troca.
--}}

{{-- `row-cols-*` em vez de larguras fixas por card: a grade se reorganiza
     sozinha de 1 até 4 colunas conforme a tela, e o balcão costuma rodar em
     monitor pequeno. O `lg-3` no meio do caminho não é enfeite: pular de 2 para
     4 direto espremeria o nome do cliente em telas de notebook, que é o que o
     card existe para mostrar de relance. `h-100` no card mantém a mesma altura
     na linha mesmo quando uma comanda tem mais itens que a vizinha. --}}
{{-- `data-card-nav` marca a grade que as setas percorrem, e `data-card-nav-item`
     marca cada CÉLULA (o `.col`, não o botão). O card-nav.js descobre quantas
     colunas existem comparando o topo das células — que é exato porque a `.row`
     as alinha — em vez de reimplementar os breakpoints do `row-cols-*` acima.
     Ver o cabeçalho do módulo. --}}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3" data-card-nav>
    @forelse ($orders as $order)
        {{-- ATALHO PELA POSIÇÃO NA GRADE, não pelo id da comanda: quem opera o
             balcão lê "a terceira" na tela, e não decora que a comanda da mesa 3
             é a #4187. A tecla é a ordem em que o card aparece, e por isso o
             valor sai do `$loop` e não do banco.

             A FILEIRA DO TECLADO É 1,2,…,9,0 — o zero fecha a sequência como
             DÉCIMO, que é a ordem em que a mão o encontra. Daí o `% 10`.

             SOBRAM DOIS CARDS SEM TECLA: a página traz 12 (ver o `paginate(12)`
             no OrderController, escolhido porque 12 divide certo nas grades de
             1, 2, 3 e 4 colunas) e a fileira só tem 10 dígitos. Os dois últimos
             continuam abrindo por clique e por Tab — e não recebem selo, porque
             um selo que não corresponde a tecla nenhuma seria pior que selo
             nenhum. Reduzir a página para 10 alinharia grade e teclado, ao custo
             de uma última fileira quebrada em telas de 4 colunas; a troca é uma
             decisão de produto, não uma consequência do atalho. --}}
        @php($shortcut = $loop->iteration <= 10 ? 'Shift+'.($loop->iteration % 10) : null)

        <div class="col" data-card-nav-item>
            {{-- O CARD INTEIRO ABRE O DETALHE. Quem clica não mira num link
                 pequeno: mira na comanda. Por isso o gatilho é um `<button>` de
                 verdade envolvendo o nome (foco, Enter e Espaço de graça, e o
                 leitor de tela anuncia "botão: Fulano") esticado sobre o card
                 pelo `stretched-link` do Bootstrap — que se apoia no
                 `position: relative` que o `.card` já tem. Um `onclick` num
                 `<div>` daria o mesmo clique e nenhuma das três coisas. --}}
            <div class="card h-100 order-card">
                {{-- O selo fica na QUINA do card, e não ao lado do nome: o nome
                     é centrado e tem tamanho variável, então um selo colado nele
                     dançaria de posição a cada card e a grade perderia a coluna
                     de números que o olho usa para achar "a sétima". Preso na
                     quina, os dez selos ficam alinhados entre si.

                     `aria-hidden` porque o gatilho já se anuncia pelo nome do
                     cliente; sem isso o leitor de tela leria "⇧3 Fulano" como se
                     o símbolo fizesse parte do nome. O `title` dá a forma por
                     extenso a quem passa o mouse — "⇧" sozinho não se explica
                     para quem nunca viu. --}}
                @if ($shortcut)
                    <kbd class="shortcut-hint order-card__key" aria-hidden="true"
                         title="Abrir com {{ $shortcut }}">⇧{{ $loop->iteration % 10 }}</kbd>
                @endif

                {{-- A faixa do nome tem ALTURA FIXA (ver `.order-card__head` no
                     theme.css): os cards de uma linha compartilham a altura pelo
                     `h-100`, e sem isso a sobra iria toda para cá — o nome de um
                     card com dois itens ficaria centrado bem abaixo do nome do
                     vizinho com seis, e a grade perderia o alinhamento que faz
                     os nomes serem lidos de relance. --}}
                <div class="card-body order-card__head text-center">
                    {{-- O `?? '—'` não é decorativo: a coluna é NOT NULL, mas a
                         relação ainda pode vir nula se o cliente for excluído
                         por fora da tela. Um traço é melhor que um erro de
                         propriedade em null na listagem inteira. --}}
                    <h2 class="h4 mb-0 order-card__name">
                        {{-- O atalho aciona ESTE botão, o mesmo que o clique
                             aciona — não uma chamada solta a `new Modal(...)`.
                             Assim ele herda o `data-bs-target` e qualquer
                             mudança futura do gatilho, e não existe um segundo
                             caminho para abrir o detalhe que possa divergir. --}}
                        <button type="button" class="order-card__trigger stretched-link"
                                @if ($shortcut) data-shortcut="{{ $shortcut }}" @endif
                                data-bs-toggle="modal" data-bs-target="#order-detail-{{ $order->id }}">
                            {{ $order->customer?->name ?? '—' }}
                        </button>
                    </h2>

                    {{-- SÓ A DATA, sem hora: o card responde "de quando é esta
                         comanda", e o minuto da abertura só interessa na
                         conferência — que acontece no modal, onde a hora aparece
                         por extenso.

                         Fica FORA do <h2> de propósito: o nome é o título do
                         card, e um leitor de tela que anunciasse "Fulano
                         04/08/2026" como cabeçalho leria uma coisa que ninguém
                         chamou assim. O <time> dá a data legível por máquina no
                         `datetime`, sem mudar o que se vê. --}}
                    <time class="order-card__date small text-body-secondary"
                          datetime="{{ $order->created_at->toDateString() }}">
                        {{ $order->created_at->format('d/m/Y') }}
                    </time>
                </div>

                {{-- SÓ OS NOMES dos itens: o card é o índice do que o cliente
                     pediu, e quantidade, subtotal e total pertencem à conferência
                     — que acontece no modal. Duas colunas de números aqui fariam
                     a grade parecer um extrato que ninguém lê de relance. --}}
                <ul class="list-group list-group-flush order-card__items">
                    @forelse ($order->items as $item)
                        <li class="list-group-item text-center">
                            {{-- `withTrashed` na relação garante que o produto
                                 excluído ainda apareça: a venda aconteceu, e um
                                 item sem nome seria pior que um nome de produto
                                 que saiu do catálogo. --}}
                            {{ $item->product?->name ?? 'Produto removido' }}
                        </li>
                    @empty
                        <li class="list-group-item text-center text-body-secondary py-4">
                            Nenhum item lançado.
                        </li>
                    @endforelse
                </ul>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi {{ $archived ? 'bi-archive' : 'bi-receipt' }} fs-3 text-body-secondary d-block mb-2"></i>
                    <span class="text-body-secondary">
                        @if (filled($search))
                            Nenhuma comanda {{ $archived ? 'no histórico ' : '' }}encontrada para "{{ $search }}".
                        @elseif ($archived)
                            {{-- Diz o CRITÉRIO, e não só "nada aqui": sem isso, o
                                 operador que abriu o Histórico no primeiro mês de
                                 uso concluiria que a aba está quebrada. --}}
                            Nenhuma comanda no histórico. Elas vêm para cá
                            assim que a conta é fechada — paga no balcão, ou
                            com acerto combinado para outro dia.
                        @else
                            Nenhuma comanda aberta ainda.
                        @endif
                    </span>
                </div>
            </div>
        </div>
    @endforelse
</div>

{{-- Os detalhes ficam FORA da `.row`: dentro de um `.col` o backdrop do
     Bootstrap seria recortado pelo card em vez de cobrir a página. Um modal por
     comanda da página atual — a paginação já limita quantos são. --}}
@foreach ($orders as $order)
    @include('orders._detail', ['order' => $order])
@endforeach

{{-- `data-live-search-page` marca a região cujos links o live-search.js deve
     interceptar. Sem ela, trocar de página recarregaria a tela inteira e a busca
     ao vivo perderia o sentido a partir da segunda página.

     `data-pager` liga o "+" e o "−" do teclado (ver pager.js). Fica AQUI, e não
     na view de paginação: aquela view é compartilhada por toda a aplicação, e um
     atributo lá dentro ligaria a tecla em todas as listagens de uma vez. O
     módulo acha os links pelo `rel="prev"`/`rel="next"` que o Laravel já
     escreve, então nada precisa ser acrescentado aos links em si. --}}
<div class="mt-3" data-live-search-page data-pager>
    {{ $orders->links() }}

    {{-- A dica só aparece quando HÁ mais de uma página: anunciar uma tecla que
         não tem para onde ir ensinaria errado logo no primeiro uso, que é
         justamente quando a arena ainda tem poucas comandas. --}}
    @if ($orders->hasPages())
        <p class="small text-body-secondary mt-2 mb-0">
            <kbd class="shortcut-hint">−</kbd> página anterior
            <kbd class="shortcut-hint ms-2">+</kbd> próxima página
        </p>
    @endif
</div>