{{-- Main Form Fields --}}
<div class="quantity-control"
    x-show="selectedProduct && selectedProduct.maxCount > 1 &&  selectedProduct.maxCount != selectedProduct.minCount"
    x-cloak x-transition>
    <button type="button" class="quantity-btn minus" @click="decreaseCount">
        <x-lucide-minus width="16" height="16" />
    </button>
    <input type="number" x-model.number='serviceCount' @keyup="calculateTotalPrice" class="quantity-input"
        placeholder="الكمية"> <button type="button" class="quantity-btn plus" @click="increaseCount">
        <x-lucide-plus width="16" height="16" />
    </button>
</div>

<!-- Info tooltip with generic classes -->
<div class="tooltip-toggle">
    <div class="info-badge">
        <x-lucide-info width="16" height="16" />
    </div>
    <div class="tooltip-content" x-text="selectedProduct?.note">
    </div>
</div>

<div class="row">
    <div class="col-12 col-xl-8  m-auto">
        @if (session('show_pin_modal'))
            <div class="pin-warning">
                <x-lucide-triangle-alert class="me-2" width="16" height="16" />
                من فضلك يجب تأكيد البين كود قم بتحديث الصفحة وادخل البين كود
            </div>
        @endif
    </div>
</div>

<div class="row gy-2">

    @if (isset($game->gamer_query) && $game->gamer_query == 1)
        <div class="form-row">
            <div class="input-group prefix">
                <div class="input-wrapper">
                    <span class="input-prefix" style="cursor: pointer;" @click='getName'><x-lucide-refresh-cw width="16" height="16" /></span>
                    <input type="text" x-cloak x-model='username' placeholder="اسم المستخدم" disabled readonly>
                </div>
            </div>
        </div>
    @endif
</div>