{{--
    Product Purchase Form Modal
    
    This modal wraps the product purchase form for sites that use 'modal' product_form_mode.
    It contains the same form content as the inline version but displayed in a modal dialog.
    
    Uses x-teleport to move modal to body while preserving Alpine.js reactivity.
--}}

{{-- Modal is teleported to body to fix z-index stacking issues while keeping Alpine context --}}
<template x-teleport="body">
    <div class="modal fade" id="productFormModal" tabindex="-1" aria-labelledby="productFormModalLabel" aria-hidden="true"
        x-ref="productFormModal" data-backdrop="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productFormModalLabel">
                        <span x-text="selectedProduct?.name ?? 'شراء المنتج'"></span>
                    </h5>
                    <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    @include('user.product.partials._form-content', [
                        'formId' => 'modalAtachmentdata',
                        'formClass' => 'no-box',
                        'showSubmitButton' => false,
                        'submitFunction' => 'sendNextModal'
                    ])
                </div>
                
                <div class="modal-footer justify-content-center gap-2">
                    <button type="button" class="btn-custom-secondary" data-dismiss="modal">إلغاء</button>
                    @if (isset($isGuest) && $isGuest)
                        <a href="{{ route('login') }}" class="btn-custom-primary">
                            <x-lucide-log-in class="me-2" width="16" height="16" />سجل دخول للشراء
                        </a>
                    @else
                        @if (!session('show_pin_modal'))
                            <button type="button" @click="sendNextModal($event)"
                                x-show="selectedProduct !== null && !isSubmitting"
                                class="btn-custom-primary">
                                شراء
                            </button>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
</template>