@extends('user.layouts.app')

@php
    // Get product form mode from site config (default to 'inline' for backward compatibility)
    $productFormMode = $siteConfig['ui']['product_form_mode'] ?? 'inline';
    $cardStyle = $siteConfig['ui']['card_style'] ?? 'default';
    $containerClass = $siteConfig['layout']['container_style'] ?? 'container';
@endphp

@section('css')
    {{-- Head Styles and CSS --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @if ($cardStyle === 'modern')
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/game-card/game-card-modern.css') }}">
    @else
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/game-card/game-card.css') }}">
    @endif
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/tooltip.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/new-details.css') }}">
    <link rel="stylesheet" href="{{ vasset('assets/plugins/select2/css/select2.min.css') }}">
@endsection

@if (isset($game))
    @section('title')
        {{ $game->name }}
    @endsection
@endif

@section('content')
    <div class="content-wrapper" id="content" x-data="productOrderApp" data-form-mode="{{ $productFormMode }}">
        <div class="{{ $containerClass }}">
            @include('user.product.partials._page-header')

            {{-- Identity verification warning --}}
            @if (isset($game) && $game->requires_verified && !$isUserVerified)
                <div class="alert alert-warning text-center mb-3" role="alert">
                    <x-lucide-triangle-alert width="20" height="20" />
                    <strong>تنبيه:</strong> هذه اللعبة تتطلب توثيق الهوية لإتمام عملية الشراء.
                    <a href="{{ route('user.verification.create') }}" class="alert-link">
                        <x-lucide-user-check width="16" height="16" /> انقر هنا للتوثيق
                    </a>
                </div>
            @endif

            <div class="container px-md-5" style="max-width: 1140px; text-align: center; padding: 10px;">
                <div class="input-group prefix">
                    <div class="input-wrapper">
                        <span class="input-prefix"><x-lucide-search width="16" height="16" /></span>
                        <input type="text" id="productSearchInput" placeholder="ابحث عن منتج...">
                    </div>
                </div>
            </div>

            <div class="option">
                <div class="option-description">
                    @include('user.product.partials._product-cards')

                    @if ($productFormMode === 'inline')
                        {{-- INLINE MODE: Form appears below product cards --}}
                        <div class="px-md-5">
                            <!-- Message when no product is selected -->
                            <div x-show="selectedProduct === null" x-cloak x-transition class="no-product-selected-message">
                                <div class="alert alert-info text-center">
                                    <x-lucide-info width="20" height="20" />
                                    @if (isset($isGuest) && $isGuest)
                                        <h5>اختر منتجاً لمعرفة السعر</h5>
                                        <p>سجل دخول للشراء</p>
                                    @else
                                        <h5>يرجى اختيار منتج</h5>
                                        <p>اختر أحد المنتجات أعلاه للمتابعة مع عملية الشراء</p>
                                    @endif
                                </div>
                            </div>

                            {{-- Inline form content with submit button --}}
                            <div x-show="selectedProduct !== null" x-cloak x-transition>
                                @include('user.product.partials._form-content', [
                                    'formId' => 'atachmentdata',
                                    'formClass' => 'compact-form',
                                    'showSubmitButton' => true,
                                    'submitFunction' => 'sendNext',
                                ])
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        @if ($productFormMode === 'modal')
            {{-- MODAL MODE: Form appears in a modal dialog --}}
            @include('user.product.partials._form-modal')
        @endif
    </div>
@endsection

@section('js')
    <script src="{{ vasset('assets/plugins/select2/js/select2.min.js') }}"></script>
    <script>
        (function() {
            function initSelect2(root) {
                if (!window.jQuery || !$.fn.select2) return;
                const $root = root ? $(root) : $(document);
                $root.find('select').each(function() {
                    const $s = $(this);
                    if ($s.data('select2')) return;
                    const hasEmpty = $s.find('option[value=""]').length > 0;
                    const allowClear = !this.required && hasEmpty;
                    $s.select2({
                        width: '100%',
                        dir: 'rtl',
                        placeholder: $s.attr('placeholder') || (hasEmpty ? $s.find('option[value=""]')
                            .text() : 'اختر...'),
                        allowClear: allowClear,
                        minimumResultsForSearch: 0
                    });
                });
            }

            // Run on ready - support both inline and modal forms
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', function() {
                    initSelect2(document.getElementById('atachmentdata'));
                    initSelect2(document.getElementById('modalAtachmentdata'));
                });
            } else {
                initSelect2(document.getElementById('atachmentdata'));
                initSelect2(document.getElementById('modalAtachmentdata'));
            }

            // Observe dynamic changes (Alpine renders fields after product selection)
            const formEl = document.getElementById('atachmentdata');
            if (formEl && 'MutationObserver' in window) {
                const obs = new MutationObserver(function() {
                    initSelect2(formEl);
                });
                obs.observe(formEl, {
                    childList: true,
                    subtree: true
                });
            }

            // Also observe modal form
            const modalFormEl = document.getElementById('modalAtachmentdata');
            if (modalFormEl && 'MutationObserver' in window) {
                const obs = new MutationObserver(function() {
                    initSelect2(modalFormEl);
                });
                obs.observe(modalFormEl, {
                    childList: true,
                    subtree: true
                });
            }
        })();
    </script>
    <script>
        // Client-side filter for product cards
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('productSearchInput');
            const row = document.getElementById('product-list-row');
            if (!searchInput || !row) return;

            const items = Array.from(row.querySelectorAll('.item')).map(el => {
                // Support both default and modern card title classes
                const titleEl = el.querySelector('.card-title') || el.querySelector('.card-modern__title');
                const text = titleEl ? (titleEl.textContent || '').trim().toLowerCase() : '';
                return {
                    el,
                    text
                };
            });

            let noRes = document.getElementById('productNoResultsMessage');
            if (!noRes) {
                noRes = document.createElement('div');
                noRes.id = 'productNoResultsMessage';
                noRes.className = 'text-muted text-center py-3';
                noRes.style.display = 'none';
                noRes.textContent = 'لا توجد نتائج مطابقة';
                row.parentElement.appendChild(noRes);
            }

            function applyFilter(query) {
                const q = (query || '').trim().toLowerCase();
                let visibleCount = 0;
                items.forEach(item => {
                    const show = q === '' || item.text.includes(q);
                    item.el.style.display = show ? '' : 'none';
                    if (show) visibleCount++;
                });
                noRes.style.display = visibleCount === 0 ? '' : 'none';
            }

            searchInput.addEventListener('input', (e) => applyFilter(e.target.value));
            if (searchInput.value) applyFilter(searchInput.value);
        });
    </script>
    @include('user.product.partials._script')
@endsection