@php
/**
 * Item-options popup shell — WIDE 2-pane layout (visual left / customize right)
 * with category-tabbed ingredients. Populated by assets/js/menu-modal.js when a
 * [data-item] / .qm-open-item element is clicked. Include once per page that lists
 * menu items, then load the script near the end of the view.
 */
@endphp
<div class="modal fade qm-item-modal qm-item-modal-wide" id="qm-item-modal" tabindex="-1" aria-labelledby="qm-item-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="dialog" aria-modal="true" aria-labelledby="qm-item-modal-title">
        <div class="modal-content qm-item-modal-content">
            <button type="button" class="qm-item-modal-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"><i class="fas fa-times" aria-hidden="true"></i></button>
            <div class="qm-im-grid">
                <!-- LEFT: visual summary -->
                <div class="qm-im-left">
                    <div class="qm-im-media">
                        <img id="qm-item-modal-img" class="qm-item-modal-img" src="{{ asset('assets/client/dish/dish-1.png') }}" alt="" loading="lazy" width="600" height="360">
                    </div>
                    <h2 class="qm-item-modal-name modal-title" id="qm-item-modal-title">{{ t_raw('restaurant.item_modal_default_title') }}</h2>
                    <div class="qm-item-modal-sub">
                        <span class="qm-item-modal-price" id="qm-item-modal-base-price"></span>
                        <span class="qm-item-modal-cal" id="qm-item-modal-cal" hidden></span>
                    </div>
                    <p class="qm-item-modal-desc" id="qm-item-modal-desc" hidden></p>
                    <p class="qm-item-modal-allergens" id="qm-item-modal-allergens" hidden></p>
                </div>

                @php /* RIGHT: customize. Ingredients lead, because "Customize your order" is what
                         the pane is for; the choice groups and the notes box are the detail
                         sections beneath it, and all three fold the same way. The choice groups
                         used to sit above the heading, which read as if they belonged to nothing. */
@endphp
                <div class="qm-im-right">
                    <!-- "Customize your order" — category-tabbed ingredient chips (filled by menu-modal.js) -->
                    <div class="qm-im-ing-wrap" id="qm-im-ing-wrap" hidden>
                        <div class="qm-im-ing-head">
                            <h3 class="qm-im-ing-title">{{ t_raw('restaurant.customize') }}</h3>
                            <span class="qm-im-ing-hint">{{ t_raw('restaurant.tap_to_add_remove') }}</span>
                        </div>
                        <div class="qm-im-ing-tabs" id="qm-im-ing-tabs" role="tablist"></div>
                        <div class="qm-im-ing-panes" id="qm-im-ing-panes"></div>
                    </div>

                    <div class="qm-item-modal-groups" id="qm-item-modal-groups"></div>

                    @php /* The notes box folds like the choice groups above it — same <details>,
                             same summary row, so the pane has one kind of section rather than
                             three. It opens closed: a note is the exception, not the norm. */
@endphp
                    <details class="qm-item-modal-group qm-item-modal-field">
                        <summary class="qm-item-modal-group-head">
                            <h3 class="qm-item-modal-group-title">{{ t_raw('restaurant.special_instructions') }}</h3>
                            <span class="qm-item-modal-group-opt">{{ t_raw('common.optional') }}</span>
                            <i class="fas fa-chevron-down qm-item-modal-group-caret" aria-hidden="true"></i>
                        </summary>
                        <label class="qm-h1-sr" for="qm-item-modal-notes">{{ t_raw('restaurant.special_instructions') }}</label>
                        <textarea id="qm-item-modal-notes" class="form-control qm-item-modal-notes" rows="2" maxlength="200" placeholder="{{ t_raw('restaurant.notes_placeholder') }}"></textarea>
                    </details>
                </div>
            </div>
            <div class="modal-footer qm-item-modal-foot">
                <div class="qm-qty-stepper" role="group" aria-label="{{ t_raw('common.quantity_aria') }}">
                    <button type="button" class="qm-qty-btn" id="qm-item-modal-dec" aria-label="{{ t_raw('common.decrease_quantity') }}">&minus;</button>
                    <span class="qm-qty-value" id="qm-item-modal-qty" aria-live="polite">1</span>
                    <button type="button" class="qm-qty-btn" id="qm-item-modal-inc" aria-label="{{ t_raw('common.increase_quantity') }}">+</button>
                </div>
                <button type="button" class="qm-btn qm-item-modal-add" id="qm-item-modal-add">
                    <span class="qm-item-modal-add-label">{{ t_raw('restaurant.add_to_cart') }}</span>
                    <span class="qm-item-modal-add-total" id="qm-item-modal-total"></span>
                </button>
            </div>
        </div>
    </div>
</div>