@php
/** @var array $item @var array $options (item_options for this item) @var array $ingredients (forMenuItem rows) */
$options = $options ?? [];
$ingredients = $ingredients ?? [];
$layout = $layout ?? 'list'; // 'list' = wide row (default) | 'grid' = .qm-pop-card tile
$veg = (int) ($item['is_veg'] ?? 0) === 1;
$itemId = (int) $item['id'];
$available = (int) ($item['is_available'] ?? 1) === 1;
// Menu-only surfaces (e.g. a QR table set to menu_only) render the card with no add-to-cart
// affordance; defaults on so every existing caller is unaffected.
$ordering = $ordering ?? true;
$canAdd = $available && $ordering;

// The customize-modal contract (data-* attributes) plus the three values this
// card renders from it. One definition, in core/Helpers.php, shared with the
// "Popular this week" rail on the restaurant detail page.
$modal = menu_item_modal_data($item, $options, $ingredients);
$dataAttrs = $modal['attrs'];
$groupCount = $modal['groups'];
$hasCustomize = $modal['customizable'];
$allergenText = $modal['allergens'];
@endphp
@if ($layout === 'grid')
@php // Grid tile: reuses the existing .qm-pop-card style (from the homepage popular
      // dishes) but carries this page's full item context, so a click opens the same
      // customize/options modal the list row does - not a one-tap add. No restaurant
      // tab: we are already on one restaurant.
@endphp
<div class="qm-pop-card qm-food-grid-card{{ $available ? '' : ' qm-food-grid-card--off' }}">
    <div class="qm-pop-media">
        <img src="{{ media($item['image'], 'assets/client/dish/dish-1.png') }}" alt="{{ $item['name'] }}" loading="lazy">
        @if (!empty($item['is_popular']))<span class="qm-pop-tag">{{ t_raw('vendor.menu.popular_pill') }}</span>@endif
        <span class="qm-pop-diet">
            <span class="{{ $veg ? 'qm-badge-veg' : 'qm-badge-nonveg' }}" role="img" title="{!! $veg ? t('restaurant.diet_veg') : t('common.non_vegetarian') !!}" aria-label="{!! $veg ? t('restaurant.diet_veg') : t('common.non_vegetarian') !!}"></span>
        </span>
    </div>
    <div class="qm-pop-body">
        <div class="qm-pop-name-row">
            <h3 class="qm-pop-name">{{ $item['name'] }}</h3>
            <span class="qm-pop-price">{{ money($item['price']) }}</span>
        </div>
        @partial('cards/dish-attrs', ['item' => $item])
        @if ($canAdd)
        @php // The button is the single modal trigger (carries the full item context),
              // so it is keyboard-reachable and the options/ingredients JSON is emitted once.
@endphp
        <button type="button" class="qm-btn qm-pop-add qm-open-item"{!! $dataAttrs !!} aria-label="{{ t_raw('restaurant.add_to_cart') }} - {{ $item['name'] }}">
            <i class="fas fa-shopping-bag" aria-hidden="true"></i> <span class="add-label">{{ t_raw('restaurant.add_to_cart') }}</span>
        </button>
        @elseif (!$available)
        <span class="qm-food-unavailable">{{ t_raw('common.unavailable') }}</span>
        @endif
    </div>
</div>
@php
return;
@endphp
@endif
@php // Row order is image / details / action. The browser mirrors it under dir="rtl"
      // on its own, so there is no RTL-specific markup or CSS here.
@endphp
<div class="qm-food{{ $canAdd ? ' qm-open-item' : '' }}"{!! $canAdd ? $dataAttrs : '' !!}>
    <div class="qm-food-media">
        <img src="{{ media($item['image'], 'assets/client/dish/dish-1.png') }}" alt="{{ $item['name'] }}" loading="lazy">
    </div>
    <div class="qm-food-info">
        <div class="qm-food-head">
            <span class="{{ $veg ? 'qm-badge-veg' : 'qm-badge-nonveg' }}" role="img" title="{!! $veg ? t('restaurant.diet_veg') : t('common.non_vegetarian') !!}" aria-label="{!! $veg ? t('restaurant.diet_veg') : t('common.non_vegetarian') !!}"></span>
            <h4 class="qm-food-name">{{ $item['name'] }}</h4>
            @if (!empty($item['is_popular']))<span class="qm-food-tag">{{ t_raw('vendor.menu.popular_pill') }}</span>@endif
        </div>
        @if (!empty($item['description']))<p class="qm-food-desc">{{ $item['description'] }}</p>@endif
        <div class="qm-food-price">{{ money($item['price']) }}@if (!empty($item['calories'])) <span class="qm-food-cal">{{ (int) $item['calories'] }} {{ t_raw('common.cal_suffix') }}</span>@endif</div>
        @partial('cards/dish-attrs', ['item' => $item])
        @if ($options || $hasCustomize)
        <div class="qm-food-opts-hint"><i class="fas fa-sliders-h"></i> {!! ($options && $groupCount > 1) ? t('common.option_groups_count', [':n' => $groupCount]) : t('common.customizable') !!}</div>
        @endif
        @if ($allergenText !== '')
        <p class="qm-food-allergens">{{ t_raw('common.contains_prefix', [':list' => $allergenText]) }}</p>
        @endif
    </div>
    <div class="qm-food-action">
        @if ($canAdd)
        <button type="button" class="qm-food-add qm-open-item"{!! $dataAttrs !!}>
            <i class="fas fa-plus"></i> <span class="add-label">{{ t_raw('common.add') }}</span>
        </button>
        @elseif (!$available)
        <span class="qm-food-unavailable">{{ t_raw('common.unavailable') }}</span>
        @endif
    </div>
</div>