@extends('user.layouts.app')
@section('css')
    @if($siteConfig['ui']['card_style'] === 'modern')
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/order-card/order-card-modern.css') }}">
    @else
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/order-card/order-card.css') }}">
    @endif
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/dropdown/dropdown.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/orders.css') }}">
@endsection

@section('title')
    الطلبات
@endsection

@section('content')
    <div class="content-wrapper" x-data="ordersData" x-cloak>
        <div class="">
            <div class="page-header">
                <x-lucide-table width="24" height="24" />
                <h1>الطلبات</h1>
            </div>

            <div class="container-fluid mb-3">

                <div
                    class="d-flex justify-content-sm-start justify-content-between align-items-center pb-2 gap-2 gap-sm-4 flex-wrap">

                    <!-- Status Filter (hover + click open, stays open to select) -->
                    <div class="dropdown-container" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.statusTimeout)"
                        @mouseleave="if(open) window.statusTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button filter-button"
                            @click.prevent="open=!open; clearTimeout(window.statusTimeout)"
                            :class="{ 'filter-active': filters.status !== 'all' }">
                            <x-lucide-filter width="16" height="16" />
                            <span class="filter-display-text" x-text="getStatusFilterText()"></span>
                            <span x-show="filters.status !== 'all'" class="filter-indicator" x-cloak>
                                <x-lucide-circle width="8" height="8" />
                            </span>
                        </button>
                        <div class="dropdown-menu"
                            x-show="open"
                            x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95"
                            @click.stop>
                            <div class="status-filter-form">
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'all' }" @click="setStatusFilter('all'); open=false; clearTimeout(window.statusTimeout);">
                                    الكل <x-lucide-list width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'processing' }"
                                    @click="setStatusFilter('processing'); open=false; clearTimeout(window.statusTimeout);">
                                    قيد المعالجة <x-lucide-clock width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'completed' }"
                                    @click="setStatusFilter('completed'); open=false; clearTimeout(window.statusTimeout);">
                                    مكتمل <x-lucide-check-circle width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'cancelled' }"
                                    @click="setStatusFilter('cancelled'); open=false; clearTimeout(window.statusTimeout);">
                                    ملغي <x-lucide-x-circle width="16" height="16" />
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Game Filter Quick (searchable, stays open to select) -->
                    <div class="dropdown-container" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.gameTimeout)"
                        @mouseleave="if(open) window.gameTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button filter-button"
                            @click.prevent="open=!open; clearTimeout(window.gameTimeout)"
                            :class="{ 'filter-active': filters.gameId && filters.gameId!=='all' }">
                            <x-lucide-gamepad-2 width="16" height="16" />
                            <span x-text="getSelectedGameLabel()"></span>
                            <span x-show="filters.gameId && filters.gameId!=='all'" class="filter-indicator" x-cloak>
                                <x-lucide-circle width="8" height="8" />
                            </span>
                        </button>
                        <div class="dropdown-menu"
                            x-show="open"
                            x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95"
                            @click.stop
                            style="max-width: calc(100vw - 32px); overflow-x: hidden;">
                            <div class="status-filter-form"
                                style="width: min(260px, 100%); max-width: calc(100vw - 32px); overflow-x: hidden;">
                                <div class="dropdown-search input-group" style="padding: 8px;">
                                    <div class="input-wrapper" style="width:100%;">
                                        <input type="text" placeholder="ابحث عن لعبة" x-model="searchGameQuery"
                                            @keydown.stop>
                                    </div>
                                </div>
                                <div style="max-height: 260px; overflow-y:auto; overflow-x:hidden;">
                                    <button type="button" class="dropdown-item text-break" style="white-space: normal;"
                                        :class="{ active: filters.gameId==='all' }"
                                        @click="filters.gameId='all'; getOrders(true); open=false; clearTimeout(window.gameTimeout);">كل الألعاب</button>
                                    <template x-for="game in filteredGames()" :key="game.id">
                                        <button type="button" class="dropdown-item text-break" style="white-space: normal;"
                                            :class="{ active: String(filters.gameId) === String(game.id) }"
                                            @click="filters.gameId=String(game.id); getOrders(true); open=false; clearTimeout(window.gameTimeout);"
                                            x-text="game.name"></button>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Product Filter Quick (searchable, stays open to select) -->
                    <div class="dropdown-container" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.productTimeout)"
                        @mouseleave="if(open) window.productTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button filter-button"
                            @click.prevent="open=!open; clearTimeout(window.productTimeout)"
                            :class="{ 'filter-active': filters.productId && filters.productId!=='all' }">
                            <x-lucide-package width="16" height="16" />
                            <span x-text="getSelectedProductLabel()"></span>
                            <span x-show="filters.productId && filters.productId!=='all'" class="filter-indicator" x-cloak>
                                <x-lucide-circle width="8" height="8" />
                            </span>
                        </button>
                        <div class="dropdown-menu"
                            x-show="open"
                            x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95"
                            @click.stop
                            style="max-width: calc(100vw - 32px); overflow-x: hidden;">
                            <div class="status-filter-form"
                                style="width: min(260px, 100%); max-width: calc(100vw - 32px); overflow-x: hidden;">
                                <div class="dropdown-search input-group" style="padding: 8px;">
                                    <div class="input-wrapper" style="width:100%;">
                                        <input type="text" placeholder="ابحث عن منتج" x-model="searchProductQuery"
                                            @keydown.stop>
                                    </div>
                                </div>
                                <div style="max-height: 260px; overflow-y:auto; overflow-x:hidden;">
                                    <button type="button" class="dropdown-item text-break" style="white-space: normal;"
                                        :class="{ active: filters.productId==='all' }"
                                        @click="filters.productId='all'; getOrders(true); open=false; clearTimeout(window.productTimeout);">كل المنتجات</button>
                                    <template x-for="product in filteredProducts()" :key="product.id">
                                        <button type="button" class="dropdown-item text-break"
                                            style="white-space: normal;"
                                            :class="{ active: String(filters.productId) === String(product.id) }"
                                            @click="filters.productId=String(product.id); getOrders(true); open=false; clearTimeout(window.productTimeout);"
                                            x-text="product.name"></button>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Advanced Filter -->
                    <div class="dropdown-container open-left-sm">
                        <button class="dropdown-toggle ui-button" :class="{ 'filter-active': hasActiveAdvancedFilter() }"
                            @click="toggleAdvancedFilters">
                            <x-lucide-sliders-horizontal width="16" height="16" />
                            <span>بحث متقدم</span>
                            <span x-show="hasActiveAdvancedFilter()" class="filter-indicator" x-cloak>
                                <x-lucide-circle width="8" height="8" />
                            </span>
                        </button>
                    </div>

                </div>
                <div class="row"> <!-- Filter input panels (outside dropdown) -->
                    <div class="col-12">
                        <div class="" id="table-orders-inputs" x-show="filters.showFilterInputs" x-transition
                            x-cloak>

                            <!-- Filters Grid -->
                            <div class="row g-3 mb-3">
                                <!-- First Row: Other Filters -->
                                <div class="col-12 col-md-6 col-lg-6">
                                    <div class="filter-section">
                                        <h6 class="filter-section-title">
                                            <x-lucide-hash width="16" height="16" /> رقم الطلب
                                        </h6>
                                        <div class="input-group">
                                            <div class="input-wrapper">
                                                <input type="text" x-model="filters.orderNumber" id="order-number"
                                                    placeholder="رقم الطلب" @keyup.enter="getOrders"
                                                    @input="debounceSearch">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-md-6 col-lg-6">
                                    <div class="filter-section">
                                        <h6 class="filter-section-title">
                                            <x-lucide-circle-user width="16" height="16" /> بيانات اللاعب
                                        </h6>
                                        <div class="input-group">
                                            <div class="input-wrapper">
                                                <input type="text" x-model="filters.gamerData" id="gamer-data"
                                                    placeholder="معرف اللاعب" @keyup.enter="getOrders"
                                                    @input="debounceSearch">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Second Row: Date Filter Alone -->
                                <div class="col-12">
                                    <div class="filter-section">
                                        <h6 class="filter-section-title">
                                            <x-lucide-calendar width="16" height="16" /> فلتر التاريخ
                                        </h6>
                                        <div class="row g-3">
                                            <div class="col-12 col-sm-6 ">
                                                <div class="input-group prefix">
                                                    <div class="input-wrapper">
                                                        <span class="input-prefix">من</span>
                                                        <input type="date" x-model="filters.dateFrom" id="date-from"
                                                            @keyup.enter="getOrders" @change="getOrders">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-6">
                                                <div class="input-group prefix">
                                                    <div class="input-wrapper">
                                                        <span class="input-prefix">الى</span>
                                                        <input type="date" x-model="filters.dateTo" id="date-to"
                                                            @keyup.enter="getOrders" @change="getOrders">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <div
                                        class="d-flex justify-content-center justify-content-md-end align-items-center gap-2 pt-2 border-top">
                                        <button type="button" class="btn-custom-primary" @click="getOrders">
                                            <x-lucide-search width="16" height="16" /> بحث
                                        </button>
                                        <button type="button" class="btn-custom-secondary" @click="clearFilters">
                                            <x-lucide-x-circle width="16" height="16" /> مسح الفلاتر
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid my-4">
                    <!-- Loading indicator -->
                    <div class="col-12 text-center" x-show="loading" x-cloak>
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">جاري التحميل...</span>
                        </div>
                    </div>
                    <!-- No orders message -->
                    <div class="col-12 text-center" x-show="!loading && (!orders  || orders.length === 0)" x-cloak>
                        <p>لا توجد طلبات متاحة</p>
                    </div>
                    <!-- Orders container -->
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-2" x-show="!loading" x-cloak>
                        <!-- Orders list -->
                        <template x-for="order in orders" :key="order.id">
                            <div class="col">
                                <a :href="'{{ route('order.show', ['id' => '__ORDER_ID__']) }}'.replace('__ORDER_ID__', order
                                    .order_number)"
                                    class="order-link">
                                    <div class="item-card">
                                        <div class="card-body">
                                            <div class="item-header">
                                                <div>
                                                    <span class="item-id"
                                                        x-text="`#${order.order_number || 'N/A'}`"></span>
                                                    <span class="status-icon" :class="getStatusClass(order.status)">
                                                        <span x-html="getStatusIconSvg(order.status)"></span>
                                                    </span>
                                                    <div class="item-date" x-text="formatDate(order.created_at)"></div>
                                                </div>
                                                <div class="header-end">
                                                    <span class="badge-tag" x-text="order.game || 'N/A'"></span>
                                                    <div class="badge-name" x-text="order.product || 'N/A'"></div>
                                                </div>
                                            </div>

                                            <div class="details-grid">
                                                <div class="details-item player-id-item"
                                                    x-show="order.player_id && order.player_id !== ''" x-cloak>
                                                    <span class="details-label">معرف:</span>
                                                    <div class="details-value player-id-value"
                                                        x-text="order.player_id || 'N/A'"></div>
                                                </div>

                                                <div class="details-item">
                                                    <span class="details-label">السعر:</span>
                                                    <div class="details-value value-amount color-danger"
                                                        x-text="formatAmount(order.price)">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="details-toggle" @click.prevent.stop="toggleDetails($event)">
                                                <span class="toggle-icon" style="transition: transform 0.2s ease; display: inline-flex;"><x-lucide-chevron-down width="20" height="20" /></span>
                                            </div>

                                            <div class="extra-details">
                                                <div class="details-grid">
                                                    <div class="details-item count-item"
                                                        x-show="order.count && order.count > 0" x-cloak>
                                                        <span class="details-label">الكمية:</span>
                                                        <div class="details-value count-value"
                                                            x-text="order.count || 'N/A'"></div>
                                                    </div>

                                                    <div class="details-item balance">
                                                        <span class="details-label">الرصيد:</span>
                                                        <div class="details-value comparison-display">
                                                            <span class="value-before"
                                                                x-text="formatAmount(order.balance_before || '0')"></span>
                                                            <span class="value-separator"><x-lucide-arrow-left width="16" height="16" /></span>
                                                            <span class="value-after color-success"
                                                                x-text="formatAmount(order.balance_after || '0')"></span>
                                                        </div>
                                                    </div>

                                                    <div class="details-item note-item"
                                                        x-show="order.note && order.note !== '_' && order.note.trim() !== ''"
                                                        style="grid-column: span 2;" x-cloak>
                                                        <span class="details-label">ملاحظات:</span>
                                                        <span class="details-value note-value"
                                                            x-html="order.note || 'N/A'"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </template>
                    </div>
                    <!-- Load More Button (observer removed) -->
                    <div class="text-center my-3" x-show="!loading && has_more" x-cloak>
                        <button class="btn-custom-primary" @click="getOrders(false)" :disabled="isLoadingMore">
                            <span x-show="!isLoadingMore">تحميل المزيد</span>
                            <span x-show="isLoadingMore">...جاري التحميل</span>
                        </button>
                    </div>
                </div>

            </div>

        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('ordersData', () => ({
                orders: [],
                loading: true,
                page: 1,
                limit: 10,
                has_more: true,
                isLoadingMore: false,
                fetchInProgress: false,
                debug: false, // set true to see network debug logs
                filters: {
                    dateFrom: '',
                    dateTo: '',
                    orderNumber: '',
                    gamerData: '',
                    status: 'all',
                    gameId: 'all',
                    productId: 'all',
                    activeFilterType: 'clear',
                    showFilterInputs: false
                },
                availableGames: [],
                availableProducts: [],
                searchTimeout: null,
                init() {
                    // Removed auto-setting today's date to avoid restricting search unintentionally
                    this.loadFiltersFromURL();
                    this.getOrders();
                },

                // (Removed default date application to keep searches broad)


                // Loading control methods
                startLoading() {
                    this.loading = true;
                },
                stopLoading() {
                    this.loading = false;
                },

                // URL management methods
                loadFiltersFromURL() {
                    const urlParams = new URLSearchParams(window.location.search);

                    // Load filters from URL, but preserve default values if not in URL
                    this.filters.dateFrom = urlParams.get('dateFrom') || this.filters.dateFrom;
                    this.filters.dateTo = urlParams.get('dateTo') || this.filters.dateTo;
                    this.filters.orderNumber = urlParams.get('order_number') || '';
                    this.filters.gamerData = urlParams.get('gamer_data') || '';
                    this.filters.status = urlParams.get('status') || 'all';
                    const urlGameId = urlParams.get('game_id') || urlParams.get('game');
                    const urlProductId = urlParams.get('product_id') || urlParams.get('product');
                    this.filters.gameId = urlGameId || this.filters.gameId;
                    this.filters.productId = urlProductId || this.filters.productId;

                    // Show filters if any advanced filter is active
                    if (this.hasActiveAdvancedFilter()) {
                        this.filters.showFilterInputs = true;
                    } else {
                        // Keep filters visible if dateFrom has a default value
                        if (this.filters.dateFrom) {
                            this.filters.showFilterInputs = true;
                        } else {
                            this.filters.showFilterInputs = false;
                        }
                    }
                },

                updateURL() {
                    const urlParams = new URLSearchParams();

                    // Add filters to URL params if they have values
                    if (this.filters.dateFrom) urlParams.set('dateFrom', this.filters.dateFrom);
                    if (this.filters.dateTo) urlParams.set('dateTo', this.filters.dateTo);
                    if (this.filters.orderNumber) urlParams.set('order_number', this.filters
                        .orderNumber);
                    if (this.filters.gamerData) urlParams.set('gamer_data', this.filters
                        .gamerData);
                    if (this.filters.status && this.filters.status !== 'all') urlParams.set('status',
                        this.filters.status);
                    if (this.filters.gameId && this.filters.gameId !== 'all') {
                        urlParams.set('game_id', this.filters.gameId);
                    }
                    if (this.filters.productId && this.filters.productId !== 'all') {
                        urlParams.set('product_id', this.filters.productId);
                    }

                    // Update URL without page reload
                    const newURL = window.location.pathname + (urlParams.toString() ? '?' + urlParams
                        .toString() : '');

                    window.history.pushState({}, '', newURL);
                },
                async getOrders(reset = true) {
                    if (this.fetchInProgress) {
                        if (this.debug) console.log('[orders] skip, fetch already in progress');
                        return;
                    }
                    if (reset) {
                        this.page = 1;
                        this.orders = [];
                        this.has_more = true;
                    }
                    if (!this.has_more && !reset) return; // no further requests
                    if (!reset) this.isLoadingMore = true;
                    else this.startLoading();
                    this.fetchInProgress = true;
                    try {
                        const params = {};

                        // Add filters to params if they have values
                        if (this.filters.dateFrom) params.dateFrom = this.filters.dateFrom;
                        if (this.filters.dateTo) params.dateTo = this.filters.dateTo;
                        if (this.filters.orderNumber) params.order_number = this.filters
                            .orderNumber;
                        if (this.filters.gamerData) params.gamer_data = this.filters
                            .gamerData;
                        if (this.filters?.status && this.filters?.status !== 'all') params.status =
                            this.filters.status;
                        if (this.filters?.gameId && this.filters?.gameId !== 'all') params.game_id =
                            this
                            .filters.gameId;
                        if (this.filters?.productId && this.filters?.productId !== 'all') params
                            .product_id = this.filters.productId;

                        // Pagination params
                        params.page = this.page;
                        params.limit = this.limit;

                        // Update URL with current filters (exclude page for clean shareable links)
                        this.updateURL();

                        if (this.debug) console.log('[orders] requesting page', this.page, 'reset?',
                            reset);
                        const response = await axios.get('{{ route('order.index') }}', {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            params: params
                        });
                        const data = response?.data ?? {};
                        if (this.debug) console.log('[orders] response page', this.page, data);
                        if (reset) {
                            this.orders = data.orders ?? [];
                        } else {
                            this.orders = this.orders.concat(data.orders ?? []);
                        }
                        this.availableGames = Array.isArray(data.available_games) ? data
                            .available_games : [];
                        this.availableProducts = Array.isArray(data.available_products) ? data
                            .available_products : [];
                        this.has_more = data.has_more ?? false;
                        if (this.has_more && data.next_page) {
                            this.page = data.next_page;
                        }
                        // Removed auto-fill logic (no automatic extra loads)
                    } catch (error) {
                        console.error('Error fetching orders:', error);
                        if (reset) this.orders = []; // keep existing if load more fails
                    } finally {
                        if (reset) this.stopLoading();
                        this.isLoadingMore = false;
                        this.fetchInProgress = false;
                    }
                },

                formatDate(dateString) {
                    // Removed noisy console log; enable below if needed
                    // if (this.debug) console.log('formatDate called with:', dateString);
                    if (typeof formatDate !== 'undefined') {
                        return formatDate(dateString, true);
                    }
                    // Fallback formatting if formatDate is not available
                    if (!dateString) return 'N/A';
                    try {
                        const date = new Date(dateString);
                        return date.toLocaleDateString('ar-EG', {
                            year: 'numeric',
                            month: 'numeric',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: 'numeric',
                            hour12: true
                        });
                    } catch (e) {
                        return 'N/A';
                    }
                },

                formatAmount(amount) {
                    const userCurrency = @json(Auth::user()->currency ?? null);
                    if (typeof formatAmount !== 'undefined') {
                        return formatAmount(amount, userCurrency);
                    }
                    // Fallback formatting if formatAmount is not available
                    if (!amount) return 'N/A';
                    try {
                        return parseFloat(amount).toLocaleString('ar-SA') + (userCurrency ? ' ' +
                            userCurrency : '');
                    } catch (e) {
                        return 'N/A';
                    }
                },

                // Pre-rendered Lucide SVGs via Blade
                statusIcons: {
                    processing: `{!! svg("lucide-clock", ["width" => 16, "height" => 16])->toHtml() !!}`,
                    completed: `{!! svg("lucide-check-circle", ["width" => 16, "height" => 16])->toHtml() !!}`,
                    cancelled: `{!! svg("lucide-x-circle", ["width" => 16, "height" => 16])->toHtml() !!}`,
                    default: `{!! svg("lucide-clock", ["width" => 16, "height" => 16])->toHtml() !!}`,
                },

                getStatusIconSvg(status) {
                    return this.statusIcons[status] || this.statusIcons.default;
                },

                getStatusClass(status) {
                    if (!status) return 'color-pending';
                    switch (status) {
                        case 'processing':
                            return 'color-pending';
                        case 'completed':
                            return 'color-success';
                        case 'cancelled':
                            return 'color-danger';
                        default:
                            return 'color-pending';
                    }
                },

                toggleDetails(event) {
                    event.preventDefault();
                    event.stopPropagation();

                    const toggle = event.currentTarget;
                    const extraDetails = toggle.nextElementSibling;
                    const toggleIcon = toggle.querySelector('.toggle-icon');

                    if (extraDetails) {
                        extraDetails.classList.toggle('show');

                        if (extraDetails.classList.contains('show')) {
                            toggleIcon.style.transform = 'rotate(180deg)';
                        } else {
                            toggleIcon.style.transform = 'rotate(0deg)';
                        }
                    }
                },
                async clearFilters() {
                    this.filters.dateFrom = '';
                    this.filters.dateTo = '';
                    this.filters.orderNumber = '';
                    this.filters.gamerData = '';
                    this.filters.status = 'all';
                    this.filters.gameId = 'all';
                    this.filters.productId = 'all';
                    this.filters.activeFilterType = 'clear';

                    // Clear URL parameters
                    window.history.pushState({}, '', window.location.pathname);

                    // Reapply default date filter
                    // this.setDefaultDateFilter();

                    await this.getOrders(true);
                },

                // Status filter methods
                async setStatusFilter(status) {
                    this.filters.status = status || 'all';
                    await this.getOrders(true);
                },

                // Get status filter display text
                getStatusFilterText() {
                    switch (this.filters.status) {
                        case 'all':
                            return 'الكل';
                        case 'processing':
                            return 'قيد المعالجة';
                        case 'completed':
                            return 'مكتمل';
                        case 'cancelled':
                            return 'ملغي';
                        default:
                            return 'الكل';
                    }
                },

                // Check if advanced filter is active
                hasActiveAdvancedFilter() {
                    return this.filters.dateFrom ||
                        this.filters.dateTo ||
                        this.filters.orderNumber ||
                        this.filters.gamerData;
                },

                searchGameQuery: '',
                searchProductQuery: '',
                filteredGames() {
                    const q = (this.searchGameQuery || '').toLowerCase();
                    const list = this.availableGames || [];
                    if (!q) return list;
                    return list.filter(game => (game?.name || '').toLowerCase().includes(q));
                },
                filteredProducts() {
                    const q = (this.searchProductQuery || '').toLowerCase();
                    const list = this.availableProducts || [];
                    if (!q) return list;
                    return list.filter(product => (product?.name || '').toLowerCase().includes(q));
                },
                getSelectedGameLabel() {
                    if (!this.filters.gameId || this.filters.gameId === 'all') return 'كل الألعاب';
                    const match = (this.availableGames || []).find(game => String(game.id) === String(
                        this.filters.gameId));
                    return match?.name || 'كل الألعاب';
                },
                getSelectedProductLabel() {
                    if (!this.filters.productId || this.filters.productId === 'all')
                        return 'كل المنتجات';
                    const match = (this.availableProducts || []).find(product => String(product.id) ===
                        String(this.filters.productId));
                    return match?.name || 'كل المنتجات';
                },

                // Advanced filter functionality methods
                toggleAdvancedFilters() {
                    this.filters.showFilterInputs = !this.filters.showFilterInputs;
                },

                // Debounced search for text inputs
                debounceSearch() {
                    if (this.searchTimeout) {
                        clearTimeout(this.searchTimeout);
                    }
                    this.searchTimeout = setTimeout(() => {
                        this.getOrders(true);
                    }, 500); // Wait 500ms after user stops typing
                },

                setFilterType(filterType) {
                    // This method is kept for compatibility but no longer used for showing/hiding specific filters
                    this.filters.activeFilterType = filterType || 'clear';

                    // If clear button is clicked
                    if (filterType === 'clear') {
                        this.clearFilters();
                        return;
                    }

                    // Show filter inputs container when any filter is active
                    this.filters.showFilterInputs = true;
                },





            }))
        });
    </script>
@endsection

<!-- Removed duplicate content section & external sentinel -->