{{--
    Product Purchase Form Content
    
    Shared form content used by both inline and modal modes.
    
    @param string $formId - The form ID (atachmentdata or modalAtachmentdata)
    @param string $formClass - CSS classes for the form (compact-form or no-box)
    @param bool $showSubmitButton - Whether to show submit button (true for inline, false for modal)
    @param string $submitFunction - The Alpine function to call on submit (sendNext or sendNextModal)
--}}

@props([
    'formId' => 'atachmentdata',
    'formClass' => 'compact-form',
    'showSubmitButton' => true,
    'submitFunction' => 'sendNext',
])

@if (isset($isGuest) && $isGuest)
    {{-- للزوار: عرض ملخص السعر فقط مع زر تسجيل الدخول --}}
    <div class="form-container {{ $formClass }}">
        <div class="alert alert-warning text-center mb-3">
            <x-lucide-lock class="me-2" width="16" height="16" />
            <strong>للشراء يرجى تسجيل الدخول أو إنشاء حساب جديد</strong>
        </div>

        <div class="form-footer-conrainer">
            <div class="purchase-summary">
                <div class="purchase-summary-content">
                    <div class="purchase-game-details">
                        <span class="game-name">{{ $game->name ?? '' }}</span>
                        <span class="service-divider">|</span>
                        <span class="service-name" x-text="selectedProduct?.name"></span>
                    </div>
                    <div class="purchase-price">
                        <span class="price-amount" x-text="totalPrice"></span>
                        <span class="currency-symbol" x-text="selectedProduct?.currency ?? '$'"></span>
                    </div>
                </div>
            </div>

            @if ($showSubmitButton)
                <a href="{{ route('login') }}" class="submit-btn">
                    <x-lucide-log-in class="me-2" width="16" height="16" />سجل دخول للشراء
                </a>
            @endif
        </div>
    </div>
@else
    {{-- للمستخدمين المسجلين: النموذج الكامل --}}
    <form id="{{ $formId }}" class="form-container {{ $formClass }}">
        @include('user.product.partials._form-main')
        @include('user.product.partials._dynamic-fields')

        <!-- Purchase summary and submit button -->
        <div class="form-footer-conrainer">
            <div x-show="selectedProduct !== null" x-cloak x-transition class="purchase-summary">
                <div class="purchase-summary-content">
                    <div class="purchase-game-details">
                        <span class="game-name">{{ $game->name ?? '' }}</span>
                        <span class="service-divider">|</span>
                        <span class="service-name" x-text="selectedProduct?.name"></span>
                    </div>
                    {{-- Bill amount display --}}
                    <template x-if="isBillGame && billCount > 0">
                        <div class="bill-amount-display">
                            <x-lucide-receipt width="16" height="16" />
                            <span>المبلغ المستحق: <strong x-text="billCount"></strong></span>
                        </div>
                    </template>
                    <div class="purchase-price">
                        <span class="price-amount" x-text="totalPrice"></span>
                        <span class="currency-symbol" x-text="selectedProduct?.currency ?? '$'"></span>
                    </div>
                </div>
            </div>

            @if ($showSubmitButton && !session('show_pin_modal'))
                {{-- Bill flow: two-step (search then buy) --}}
                <template x-if="isBillGame">
                    <div>
                        {{-- Step 1: search button (visible until we have a quote) --}}
                        <button type="button" @click='billSearch($event)'
                            x-show='selectedProduct !== null && !billQuote && !isSubmitting' x-cloak x-transition
                            class="submit-btn bill-search-btn">
                            <x-lucide-search class="me-2" width="16" height="16" />استعلام عن الفاتورة
                        </button>
                        {{-- Step 2: buy button (visible only after quote) --}}
                        <button type="submit" @click='{{ $submitFunction }}($event)'
                            x-show='selectedProduct !== null && billQuote && !isSubmitting' x-cloak x-transition
                            class="submit-btn">
                            شراء <span x-text="selectedProduct?.name"></span>
                        </button>
                    </div>
                </template>
                {{-- Regular flow: direct buy button --}}
                <template x-if="!isBillGame">
                    <button type="submit" @click='{{ $submitFunction }}($event)'
                        x-show='selectedProduct !== null && !isSubmitting' x-cloak x-transition
                        class="submit-btn">شراء</button>
                </template>
            @endif
        </div>
    </form>
@endif