@extends('layouts.public')

@section('content')
@php

/**
 * Customer-facing dine-in QR scan-to-order menu.
 *
 * Reached by scanning a table QR (/table/{qr_token}); the controller has already
 * bound the cart to this table's restaurant. We render the SAME menu markup a
 * /restaurant/{slug} page uses (cards/food-item + the item-modal partial) so the
 * existing add-to-cart modal + cart JS work unchanged. A sticky bar surfaces the
 * live cart count and a "View cart & checkout" button.
 *
 * @var array $restaurant
 * @var string $tableLabel
 * @var string $cuisineName
 * @var array $categories
 * @var array $itemsByCat
 * @var array $optionsByItem
 * @var array $ingredientsByItem
 * @var array $hours
 */
$rid = (int) $restaurant['id'];
$cover = media($restaurant['cover_image'], 'assets/client/covers/shop-1.png');
$rating      = (float) $restaurant['rating_cache'];
$ratingCount = (int) ($restaurant['rating_count'] ?? 0);
$optionsByItem = $optionsByItem ?? [];
$ingredientsByItem = $ingredientsByItem ?? [];
$hours = $hours ?? [];
// menu_only QR tables render the menu with no ordering affordances (no add buttons, no
// cart bar, no item modal); order / order_pay leave the full scan-to-order flow intact.
$ordering = $ordering ?? true;

// "Open today" hint from opening hours, using the local day index (0=Sun..6=Sat).
$todayIdx = (int) date('w');
$todayRow = $hours[$todayIdx] ?? null;
$openText = '';
if ($todayRow) {
    if ((int) $todayRow['is_closed'] === 1) {
        $openText = t_raw('restaurant.closed_today');
    } elseif (!empty($todayRow['open_time']) && !empty($todayRow['close_time'])) {
        $openText = t_raw('restaurant.open_today_hours', [
            ':from' => fmt_clock($todayRow['open_time'], true),
            ':to'   => fmt_clock($todayRow['close_time'], true),
        ]);
    }
}

// Address line for the banner sub-text.
$addr = trim(($restaurant['address'] ?? '') . (!empty($restaurant['city']) ? ', ' . $restaurant['city'] : ''), ', ');
@endphp
<div class="qm-rd qm-table-page">

    <!-- ===================== DINE-IN BANNER ===================== -->
    <div class="qm-rd-hero qm-table-hero qm-bgimg-scrim" style="--qm-bg: url('{{ $cover }}')">
        <div class="container-fluid">
            <nav class="qm-rd-crumb" aria-label="{{ t_raw('common.breadcrumb_aria') }}">
                <a href="{{ route('home') }}">{{ t_raw('common.home') }}</a><span aria-hidden="true">/</span>
                <a href="{{ route('restaurants') }}">{{ t_raw('footer.restaurants') }}</a><span aria-hidden="true">/</span>
                <span aria-current="page">{{ $restaurant['name'] }}</span>
            </nav>
            <div class="qm-table-banner">
                <span class="qm-table-badge"><i class="fas fa-utensils" aria-hidden="true"></i> {{ t_raw('checkout.dine_in') }}</span>
                <h1 class="qm-table-title">{{ t_raw('restaurant.dinein_title', [':table' => $tableLabel, ':name' => $restaurant['name']]) }}</h1>
                <p class="qm-table-sub">{{ t_raw('restaurant.dinein_sub') }}</p>
                <div class="qm-rd-hero-meta qm-table-meta">
                    <span class="qm-rd-pill"><i class="fas fa-star" aria-hidden="true"></i> @if ($ratingCount > 0){{ number_format($rating, 1) }} <small>({{ $ratingCount }})</small>@else<small>{{ t_raw('restaurant.no_ratings_yet') }}</small>@endif</span>
                    @if ($cuisineName !== '')<span class="qm-rd-pill"><i class="fas fa-concierge-bell" aria-hidden="true"></i> {{ $cuisineName }}</span>@endif
                    <span class="qm-rd-pill"><i class="far fa-clock" aria-hidden="true"></i> {{ (int) $restaurant['avg_prep_time'] }} {{ t_raw('common.prep_min_suffix') }}</span>
                    @if ($openText !== '')<span class="qm-rd-pill"><i class="fas fa-door-open" aria-hidden="true"></i> {{ $openText }}</span>@endif
                    @if ($addr !== '')<span class="qm-rd-pill"><i class="fas fa-map-marker-alt" aria-hidden="true"></i> {{ $addr }}</span>@endif
                </div>
            </div>
        </div>
    </div>

    <!-- ===================== MENU ===================== -->
    @php
    // List/grid toggle — the SAME segmented control the restaurant page uses. Both card layouts
    // render once and CSS shows the active one via data-menu-view; menu-view.js wires the buttons
    // and persists the choice in the shared qm_menu_view key. Only shown when the menu has items.
    $menuHasItems = false;
    foreach ($categories as $cat) {
        if (!empty($itemsByCat[(int) $cat['id']])) { $menuHasItems = true; break; }
    }
@endphp
    <section class="qm-section qm-table-body" id="menu">
        <div class="container-fluid">
            <header class="qm-rd-menu-head" data-reveal>
                <div class="qm-rd-menu-head-text">
                    <span class="qm-eyebrow">{{ menu_display_name($restaurant ?? null) }}</span>
                    <h2 class="qm-rd-h2">{{ t_raw('restaurant.dinein_menu_heading') }}</h2>
                </div>
                @if ($menuHasItems)
                <div class="qm-seg qm-menu-view-seg" role="group" aria-label="{{ t_raw('restaurant.menu_view_label') }}">
                    <button type="button" class="qm-seg-btn active" data-menu-view-btn="list" aria-pressed="true"><i class="fas fa-bars" aria-hidden="true"></i> <span>{{ t_raw('restaurant.menu_view_list') }}</span></button>
                    <button type="button" class="qm-seg-btn" data-menu-view-btn="grid" aria-pressed="false"><i class="fas fa-th-large" aria-hidden="true"></i> <span>{{ t_raw('restaurant.menu_view_grid') }}</span></button>
                </div>
                @endif
            </header>
            @if ($menuHasItems)
            <div class="qm-menu-views" data-menu-view="list">
                @foreach ($categories as $cat)
@php if (empty($itemsByCat[(int) $cat['id']])) { continue; }; @endphp
                    <div class="qm-menu-cat" id="cat-{{ (int) $cat['id'] }}" data-reveal>
                        <h3 class="qm-menu-cat-title">{{ $cat['name'] }} <span class="qm-rd-cat-count">{{ count($itemsByCat[(int) $cat['id']]) }}</span></h3>
                        <div class="qm-food-list qm-menu-view-list">
                            @foreach ($itemsByCat[(int) $cat['id']] as $item)
                                @partial('cards/food-item', [
                                    'item' => $item,
                                    'options' => $optionsByItem[(int) $item['id']] ?? [],
                                    'ingredients' => $ingredientsByItem[(int) $item['id']] ?? [],
                                    'ordering' => $ordering,
                                ])
                            @endforeach
                        </div>
                        <div class="row g-3 qm-menu-view-grid">
                            @foreach ($itemsByCat[(int) $cat['id']] as $item)
                                <div class="col-12 col-lg-3">@partial('cards/food-item', [
                                    'item' => $item,
                                    'options' => $optionsByItem[(int) $item['id']] ?? [],
                                    'ingredients' => $ingredientsByItem[(int) $item['id']] ?? [],
                                    'layout' => 'grid',
                                    'ordering' => $ordering,
                                ])</div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
            </div>
            @else
                <div class="qm-empty"><i class="fas fa-utensils d-block" aria-hidden="true"></i><p>{{ t_raw('restaurant.no_menu_items') }}</p></div>
            @endif
        </div>
    </section>

</div><!-- /.qm-rd -->

@if ($ordering)
<!-- ===================== STICKY CHECKOUT BAR ===================== -->
<div class="qm-table-bar" id="qm-table-bar" data-cart-url="{{ route('cart') }}">
    <div class="container-fluid qm-table-bar-inner">
        <div class="qm-table-bar-info">
            <i class="fas fa-shopping-bag" aria-hidden="true"></i>
            <span class="qm-table-bar-text">
                <strong>{{ t_raw('account.table_label_prefix', [':label' => $tableLabel]) }}</strong>
                <span class="qm-table-bar-count" id="qm-table-bar-count" aria-live="polite">{{ t_raw('restaurant.dinein_cart_empty') }}</span>
            </span>
        </div>
        <a href="{{ route('cart') }}" class="qm-btn qm-table-bar-btn">
            {{ t_raw('cart.view_checkout') }} <i class="fas fa-arrow-right" aria-hidden="true"></i>
        </a>
    </div>
</div>

@partial('item-modal')
@endif

<script src="{!! asset('js/menu-view.js') !!}"></script>
@if ($ordering)
<script src="{!! asset('js/menu-modal.js') !!}"></script>
@endif
<script>
/* Reflect the live cart count in the sticky dine-in bar. Reads window.QM.cart
   (set by the layout) for the initial value, then mirrors the header cart badge
   (.qm-cart-count) — which the existing cart JS already keeps in sync after every
   add — via a MutationObserver. No new cart hooks, console-clean, zero external. */
(function () {
    'use strict';
    var countEl = document.getElementById('qm-table-bar-count');
    if (!countEl) { return; }
    var I18N = {!! json_encode([
        'empty'      => t_raw('restaurant.dinein_cart_empty'),
        'count_one'  => t_raw('restaurant.dinein_cart_count_one'),
        'count_many' => t_raw('restaurant.dinein_cart_count_many'),
    ], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!};
    function render(n) {
        n = parseInt(n, 10) || 0;
        if (n < 1) { countEl.textContent = I18N.empty; return; }
        countEl.textContent = (n === 1 ? I18N.count_one : I18N.count_many).split(':n').join(n);
    }
    var initial = (window.QM && window.QM.cart && typeof window.QM.cart.count !== 'undefined')
        ? window.QM.cart.count : 0;
    render(initial);

    var badge = document.querySelector('.qm-cart-count');
    if (badge && typeof MutationObserver === 'function') {
        var obs = new MutationObserver(function () { render(badge.textContent); });
        obs.observe(badge, { childList: true, characterData: true, subtree: true });
    }
})();
</script>
@endsection