@extends('layouts.public')

@section('content')
@php
// Which landing page this is: its bands read this page's own switches.
\App\Services\HomeSection::rendering('order_builder');

/** @var array $restaurants each restaurant row with an 'items' array
 *  @var array $optJson  item id => option-groups JSON string (from PreviewMenu)
 *  @var array $ingJson  item id => ingredients JSON string (from PreviewMenu) */
$optJson = $optJson ?? [];
$ingJson = $ingJson ?? [];
$foodTypeMap = $foodTypeMap ?? [];

// Category names come from the controller. This template used to query for them itself.
$catNames = $catNames ?? [];

// Build a compact, safe payload for the client-side builder.
$payload = [];
foreach ($restaurants as $r) {
    $items = [];
    foreach ($r['items'] as $it) {
        $catId = (int) ($it['menu_category_id'] ?? 0);
        $iid = (int) $it['id'];
        $items[] = [
            'id'    => $iid,
            'name'  => (string) $it['name'],
            'desc'  => (string) ($it['description'] ?? ''),
            'price' => (float) $it['price'],
            'veg'   => (int) ($it['is_veg'] ?? 0) === 1,
            'pop'   => (int) ($it['is_popular'] ?? 0) === 1,
            'image' => media($it['image'], 'assets/client/dish/dish-1.png'),
            'catId' => $catId,
            'cat'   => $catId && isset($catNames[$catId]) ? $catNames[$catId] : t_raw('order_builder.more_category'),
            // Customization data so a card can open the shared customize popup.
            'czOptions' => json_decode(($optJson[$iid] ?? '[]'), true) ?: [],
            'czIngs'    => json_decode(($ingJson[$iid] ?? '[]'), true) ?: [],
        ];
    }
    $payload[] = [
        'id'      => (int) $r['id'],
        'name'    => (string) $r['name'],
        'cuisine' => (string) ($r['cuisine_name'] ?? ''),
        'city'    => (string) ($r['city'] ?? ''),
        'prep'    => (int) ($r['avg_prep_time'] ?? 0),
        'rating'  => number_format((float) ($r['rating_cache'] ?? 0), 1),
        'minOrder' => (float) ($r['min_order'] ?? 0),
        'cover'   => media($r['cover_image'] ?? null, 'assets/client/covers/shop-1.png'),
        'foodTypes' => array_values($foodTypeMap[(int) $r['id']] ?? []),
        'items'   => $items,
    ];
}
$currency = setting('currency_symbol', '$');

$obI18n = [
    'moreCategory' => t_raw('order_builder.more_category'),
    'allCategory' => t_raw('common.all'),
    'boardSubDefault' => t_raw('order_builder.board_sub_default'),
    'noDishesMatch' => t_raw('order_builder.no_dishes_match'),
    'vegetarian' => t_raw('restaurant.diet_veg'),
    'nonVegetarian' => t_raw('common.non_vegetarian'),
    'popular' => t_raw('vendor.menu.popular_pill'),
    'ariaCustomiseAdd' => t_raw('order_builder.aria_customise_add'),
    'noKitchensFoodtype' => t_raw('order_builder.no_kitchens_foodtype'),
    'lineUpdated' => t_raw('order_builder.line_updated'),
    'lineAdded' => t_raw('order_builder.line_added'),
    'dishNotOnMenu' => t_raw('order_builder.dish_not_on_menu'),
    'ariaEditLine' => t_raw('order_builder.aria_edit_line'),
    'ariaDecreaseQty' => t_raw('common.decrease_quantity'),
    'ariaIncreaseQty' => t_raw('common.increase_quantity'),
    'ariaRemoveLine' => t_raw('order_builder.aria_remove_line'),
    'countOne' => t_raw('order_builder.count_one'),
    'countMany' => t_raw('order_builder.count_many'),
    'minReached' => t_raw('order_builder.min_reached'),
    'minRemaining' => t_raw('order_builder.min_remaining'),
    'clearConfirmBody' => t_raw('order_builder.clear_confirm_body'),
    'clearConfirmTitle' => t_raw('order_builder.clear_confirm_title'),
    'clearConfirmYes' => t_raw('admin.advanced.clear_confirm_yes'),
    'toastCleared' => t_raw('order_builder.toast_cleared'),
    'addingLabel' => t_raw('order_builder.adding_label'),
    'errAddGeneric' => t_raw('order_builder.err_add_generic'),
    'errAddToast' => t_raw('order_builder.err_add_toast'),
    'eachSuffix' => t_raw('order_builder.each_suffix'),
];
@endphp
@php
/* The hero (the drag-&-drop teaser) and the "Browse by food type" strip, drawn in whatever order
   the operator arranged in Admin → Pages. The builder itself follows below and is not a band: it is
   the page, not a strip on it. */
echo \App\Services\HomeSection::draw('order_builder', get_defined_vars(), [
    // The hero teases the builder with dishes cut from this page's own payload, so it is built here.
    'hero-order-builder' => static fn (): string => partial('sections/hero-order-builder', ['hxDishes' => array_slice($payload[0]['items'] ?? [], 0, 4)]),
]);
@endphp

<section class="qm-section" id="qm-ob-start">
    <div class="container-fluid">

        @if (!$restaurants)
        <div class="qm-empty"><i class="fas fa-utensils d-block" aria-hidden="true"></i><p>{{ t_raw('order_builder.empty_state') }}</p></div>
        @else
        <div class="qm-ob" id="qm-order-builder" data-i18n="{{ json_encode($obI18n) }}">
            <!-- STEP 1 - restaurants -->
            <div class="qm-ob-col qm-ob-rests">
                <div class="qm-ob-col-head">
                    <span class="qm-ob-step">1</span>
                    <div>
                        <h2 class="qm-ob-col-title">{{ t_raw('order_builder.step1_title') }}</h2>
                        <p class="qm-ob-col-sub">{{ t_raw('order_builder.step1_sub') }}</p>
                    </div>
                </div>
                <button type="button" class="qm-ob-rest-toggle" id="qm-ob-rest-toggle" hidden aria-expanded="false" aria-controls="qm-ob-rest-list">
                    <span class="qm-ob-rest-toggle-thumb"><img id="qm-ob-rest-toggle-img" src="" alt=""></span>
                    <span class="qm-ob-rest-toggle-body">
                        <span class="qm-ob-rest-toggle-label">{{ t_raw('order_builder.ordering_from_label') }}</span>
                        <span class="qm-ob-rest-toggle-name" id="qm-ob-rest-toggle-name"></span>
                    </span>
                    <span class="qm-ob-rest-toggle-change"><i class="fas fa-exchange-alt" aria-hidden="true"></i> {{ t_raw('order_builder.change_btn') }}</span>
                </button>
                <div class="qm-ob-rest-list" id="qm-ob-rest-list" role="listbox" aria-label="{{ t_raw('order_builder.choose_restaurant_aria') }}">
                    @foreach ($payload as $idx => $r)
                    <button type="button" class="qm-ob-rest{{ $idx === 0 ? ' is-active' : '' }}" role="option" aria-selected="{{ $idx === 0 ? 'true' : 'false' }}" data-rest-id="{{ (int) $r['id'] }}">
                        <span class="qm-ob-rest-thumb"><img src="{{ $r['cover'] }}" alt="{{ $r['name'] }}" loading="lazy"></span>
                        <span class="qm-ob-rest-meta">
                            <span class="qm-ob-rest-name">{{ $r['name'] }}</span>
                            <span class="qm-ob-rest-sub">{!! $r['cuisine'] !== '' ? e($r['cuisine']) : t('common.multi_cuisine') !!}{!! $r['city'] !== '' ? ' · ' . e($r['city']) : '' !!}</span>
                            <span class="qm-ob-rest-pt"><i class="far fa-clock" aria-hidden="true"></i> {{ (int) $r['prep'] }} {{ t_raw('common.prep_min_suffix') }} · <i class="fas fa-star" aria-hidden="true"></i> {{ $r['rating'] }}</span>
                        </span>
                    </button>
                    @endforeach
                </div>
            </div>

            <!-- STEP 2 - draggable menu board -->
            <div class="qm-ob-col qm-ob-board">
                <div class="qm-ob-col-head">
                    <span class="qm-ob-step">2</span>
                    <div>
                        <h2 class="qm-ob-col-title">{{ t_raw('order_builder.step2_title') }}</h2>
                        <p class="qm-ob-col-sub" id="qm-ob-board-sub">{{ t_raw('order_builder.board_sub_default') }}</p>
                    </div>
                </div>
                <div class="qm-ob-search">
                    <i class="fas fa-search" aria-hidden="true"></i>
                    <input type="search" id="qm-ob-search" placeholder="{{ t_raw('order_builder.search_placeholder') }}" aria-label="{{ t_raw('order_builder.search_aria') }}" autocomplete="off">
                </div>
                <div class="qm-ob-catbar">
                    <span class="qm-ob-catbar-label"><i class="fas fa-layer-group" aria-hidden="true"></i> {{ t_raw('restaurant.menu') }}</span>
                    <div class="qm-ob-cats" id="qm-ob-cats" role="tablist" aria-label="{{ t_raw('order_builder.filter_cats_aria') }}">
                        <!-- category pills populated by order-builder.js -->
                    </div>
                </div>
                <div class="qm-ob-grid" id="qm-ob-board-grid" aria-live="polite">
                    <!-- populated by order-builder.js -->
                </div>
            </div>

            <!-- STEP 3 - drop zone / order -->
            <div class="qm-ob-col qm-ob-basket">
                <div class="qm-ob-col-head">
                    <span class="qm-ob-step">3</span>
                    <div>
                        <h2 class="qm-ob-col-title">{{ t_raw('order_builder.step3_title') }}</h2>
                        <p class="qm-ob-col-sub">{{ t_raw('order_builder.step3_sub') }}</p>
                    </div>
                </div>
                <div class="qm-ob-drop" id="qm-ob-drop" role="group" aria-label="{{ t_raw('order_builder.drop_zone_aria') }}">
                    <div class="qm-ob-drop-empty" id="qm-ob-drop-empty">
                        <i class="fas fa-shopping-basket" aria-hidden="true"></i>
                        <p>{{ t_raw('order_builder.basket_empty_title') }}<br>{{ t_raw('order_builder.basket_empty_sub') }}</p>
                    </div>
                    <ul class="qm-ob-lines" id="qm-ob-lines" hidden></ul>
                </div>
                <div class="qm-ob-summary">
                    <div class="qm-ob-progress" id="qm-ob-progress" hidden>
                        <div class="qm-ob-progress-bar"><span id="qm-ob-progress-fill"></span></div>
                        <p class="qm-ob-progress-msg" id="qm-ob-progress-msg"></p>
                    </div>
                    <div class="qm-ob-total-row">
                        <span>{{ t_raw('common.total') }} <span class="qm-ob-count" id="qm-ob-count">{{ t_raw('order_builder.count_many', [':n' => 0]) }}</span></span>
                        <strong class="qm-ob-total" id="qm-ob-total">{{ $currency }}0.00</strong>
                    </div>
                    <button type="button" class="qm-btn qm-btn-lg w-100" id="qm-ob-add-all" disabled>
                        <i class="fas fa-cart-plus" aria-hidden="true"></i> {{ t_raw('order_builder.add_all_btn') }}
                    </button>
                    <button type="button" class="qm-ob-clear" id="qm-ob-clear" hidden><i class="fas fa-redo" aria-hidden="true"></i> {{ t_raw('order_builder.clear_basket_btn') }}</button>
                    <p class="qm-ob-note" id="qm-ob-note" role="status" aria-live="polite" hidden></p>
                </div>
            </div>
        </div>

        <script type="application/json" id="qm-ob-data">{!! json_encode($payload, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_SLASHES) !!}</script>
        @partial('order-customize-modal', ['cur' => $currency])
        @endif
    </div>
</section>
@endsection