@php
/**
 * Shared "customize your order" modal shell (POS + kiosk previews).
 * Populated at runtime by assets/js/order-customize.js. Pass ['cur' => '$'].
 */
$cur = $cur ?? (preg_replace('/[0-9.,\s]/', '', money(0)) ?: '$');
@endphp
<div class="qm-cz-overlay" id="qm-cz-overlay" aria-hidden="true" data-cur="{{ $cur }}">
    <div class="qm-cz-dialog" role="dialog" aria-modal="true" aria-labelledby="qm-cz-name">
        <button type="button" class="qm-cz-close" id="qm-cz-close" aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
        <div class="qm-cz-grid">
            <div class="qm-cz-left">
                <div class="qm-cz-media"><img id="qm-cz-img" src="{{ asset('assets/client/dish/dish-1.png') }}" alt=""></div>
                <h2 class="qm-cz-name" id="qm-cz-name"></h2>
                <div class="qm-cz-baseprice" id="qm-cz-baseprice"></div>
                <p class="qm-cz-desc" id="qm-cz-desc"></p>
            </div>
            <div class="qm-cz-right">
                <div id="qm-cz-groups"></div>
                <div class="qm-cz-ings" id="qm-cz-ings" hidden>
                    <div class="qm-cz-ings-head">
                        <h3 class="qm-cz-ings-title">{{ t_raw('restaurant.customize') }}</h3>
                        <span class="qm-cz-ings-hint">{{ t_raw('restaurant.tap_to_add_remove') }}</span>
                    </div>
                    <div class="qm-cz-tabs" id="qm-cz-tabs"></div>
                    <div id="qm-cz-panes"></div>
                </div>
                <div class="qm-cz-note">
                    <label for="qm-cz-notes">{{ t_raw('restaurant.special_instructions') }} <span class="text-muted fw-normal">{{ t_raw('common.optional') }}</span></label>
                    <textarea id="qm-cz-notes" class="form-control" rows="2" maxlength="200" placeholder="{{ t_raw('restaurant.notes_placeholder_pos') }}"></textarea>
                </div>
            </div>
        </div>
        <div class="qm-cz-foot">
            <div class="qm-cz-qty">
                <button type="button" id="qm-cz-dec" aria-label="{{ t_raw('common.decrease_quantity') }}">&minus;</button>
                <span id="qm-cz-qty">1</span>
                <button type="button" id="qm-cz-inc" aria-label="{{ t_raw('common.increase_quantity') }}">+</button>
            </div>
            <button type="button" class="qm-cz-add" id="qm-cz-add">
                <span>{{ t_raw('restaurant.add_to_order') }}</span>
                <span class="qm-cz-add-total" id="qm-cz-total"></span>
            </button>
        </div>
    </div>
</div>