@php
/**
 * "Goes well with your order" — the recommendation band shown once something is in the basket.
 *
 * Rendered server-side and injected by assets/js/qm-upsell.js, so the cards are built by the same
 * helpers, classes and translations as the rest of the storefront rather than by a second copy of
 * the markup living in JavaScript.
 *
 * No new styles: the tile is the shipped .qm-pop-card (app.css) that the homepage popular-dish
 * rail and partials/cards/food-item.php's 'grid' layout both draw, and the photo opens through the
 * product's existing global lightbox (data-lightbox-src, assets/js/qm-lightbox.js) rather than a
 * modal of its own.
 *
 * @var array  $items           SmartUpsell::forCart() rows; a rule row also carries
 *                              upsell_discount + upsell_type
 * @var string $restaurantSlug  for the "see the whole menu" link; '' when unknown
 */
use App\Services\SmartUpsell;

if (empty($items)) {
    return;
}

/* No glyph beside this heading. A wand read as "magic", which is the opposite of what a
   recommendation should claim, and no other storefront band puts an icon next to its title.
   No "add more" link either: the customer is already on the menu, or one tap from it.

   In the restaurant page's rail this is its own compact card sitting ABOVE "Your Order" — a
   suggestion is read before the basket is reviewed, not after it. Above also settles the overlap:
   .qm-cart-side is position:sticky with z-index 20, so a band below it was slid under the pinned
   panel on scroll, while one above simply scrolls away as the panel takes over. */
$inRail = !empty($inRail);
@endphp
<div class="qm-card{{ $inRail ? ' qm-upsell-rail mb-3' : ' mt-3' }}" data-qm-upsell role="region" aria-labelledby="qm-upsell-title">
    <div class="mb-3">
        <h2 class="h5 mb-0" id="qm-upsell-title">{{ t_raw('upsell.band_title') }}</h2>
    </div>
    @php
    /* One recommendation takes the FULL width. Left in the three-across column it sat in a third
       of the row with two thirds of empty card beside it, which reads as a tile that failed to
       load rather than a deliberate single suggestion. Three keep the grid. */
    $colClass = count($items) === 1 ? 'col-12' : 'col-6 col-xl-4';
@endphp
    <div class="row g-3">
        @foreach ($items as $item)
@php $img  = media($item['image'] ?? null, 'assets/client/dish/dish-1.png');
            $list = (float) ($item['price'] ?? 0);
            $now  = SmartUpsell::effectivePrice($item);
            // A rule may carry no discount at all, in which case there is one price and no
            // struck-through original — a "was/now" pair that says the same number twice reads
            // as a trick rather than an offer.
            $cut  = $now < $list; @endphp
        <div class="{{ $colClass }}">
            <div class="qm-pop-card{{ count($items) === 1 ? ' qm-pop-card-wide' : '' }}">
                @php // The photo is the lightbox trigger; the bootstrap resets keep the button
                      // shaped exactly like the .qm-pop-media block it replaces, the same way the
                      // admin business-model diagrams do it.
@endphp
                @php // `w-100` is omitted in the rail: it is width:100% !important, so it beat the
                      // thumbnail sizing and stretched the photo across the card. Dropping the
                      // utility is the fix; adding !important to fight it would only move the
                      // problem to whoever styles this next.
@endphp
                <button type="button" class="qm-pop-media{{ $inRail ? '' : ' w-100' }} p-0 border-0 bg-transparent"
                        data-lightbox-src="{{ $img }}" data-lightbox-alt="{{ (string) $item['name'] }}"
                        aria-label="{{ t_raw('footer.view_larger_image') }}">
                    <img src="{{ $img }}" alt="{{ (string) $item['name'] }}" loading="lazy">
                    @if ($cut)<span class="qm-pop-tag">{{ t_raw('upsell.offer_pill') }}</span>@endif
                </button>
                <div class="qm-pop-body">
                    <div class="qm-pop-name-row">
                        <h3 class="qm-pop-name">{{ (string) $item['name'] }}</h3>
                        <span class="qm-pop-price">
                            @if ($cut)<del class="text-muted me-1">{{ money($list) }}</del>@endif{{ money($now) }}
                        </span>
                    </div>
                    @php // Its own handler, not the page-wide [data-add-to-cart] one: that handler
                          // falls back to document.querySelector('.qm-opt-select') for any card
                          // outside a .qm-food row, which on a restaurant page would attach the
                          // first dish's option to this dish.
@endphp
                    <button type="button" class="qm-btn qm-pop-add" data-upsell-add data-item-id="{{ (int) $item['id'] }}"
                            aria-label="{{ t_raw('restaurant.add_to_cart') }} - {{ (string) $item['name'] }}">
                        <i class="fas fa-shopping-bag" aria-hidden="true"></i> <span class="add-label">{{ t_raw('restaurant.add_to_cart') }}</span>
                    </button>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>