@props(['vendorId'])

<div x-data="orderScreen('{{ $vendorId }}')" x-init="init()" class="h-full w-full">
    {{-- Komunikat ładowania --}}
    <template x-if="isLoading">
        <div class="flex items-center justify-center h-full">
            <p class="text-white text-lg">{!! trans('lang.loading_orders') !!}...</p>
        </div>
    </template>

    {{-- Błąd --}}
    <template x-if="error">
        <div class="flex items-center justify-center h-full">
            <p class="text-red-400 text-lg" x-text="error"></p>
        </div>
    </template>
    
    {{-- Główne kolumny, widoczne po załadowaniu i braku błędu --}}
    <div x-show="!isLoading && !error" class="grid grid-cols-3 gap-6 h-full">
        <!-- Kolumna NOWE ZAMÓWIENIA -->
        <div class="flex flex-col">
            <h2 class="text-4xl font-bold text-slate-300 pb-4 border-b-2 border-slate-700 uppercase text-center mb-4">{!! trans('lang.new_orders') !!}</h2>
            <div class="grid grid-cols-1 gap-4 overflow-y-auto pr-2">
                <template x-for="order in newOrders" :key="order.id">
                    <div class="bg-slate-800 rounded-xl p-6 text-center border border-slate-700 shadow-lg">
                        <span class="text-[5rem] font-bold leading-none text-amber-400" x-text="order.displayId"></span>
                    </div>
                </template>
                <template x-if="newOrders.length === 0">
                    <p class="text-slate-500 text-center py-10 italic">{!! trans('lang.no_new_orders') !!}</p>
                </template>
            </div>
        </div>

        <!-- Kolumna W REALIZACJI -->
        <div class="flex flex-col">
            <h2 class="text-4xl font-bold text-slate-300 pb-4 border-b-2 border-slate-700 uppercase text-center mb-4">{!! trans('lang.in_preparation') !!}</h2>
            <div class="grid grid-cols-1 gap-4 overflow-y-auto pr-2">
                <template x-for="order in inPreparationOrders" :key="order.id">
                    <div class="bg-slate-800 rounded-xl p-6 text-center border border-slate-700 shadow-lg">
                        <span class="text-[5rem] font-bold leading-none text-blue-500" x-text="order.displayId"></span>
                    </div>
                </template>
                 <template x-if="inPreparationOrders.length === 0">
                    <p class="text-slate-500 text-center py-10 italic">{!! trans('lang.no_orders_in_preparation') !!}</p>
                </template>
            </div>
        </div>

        <!-- Kolumna GOTOWE DO ODBIORU -->
        <div class="flex flex-col">
            <h2 class="text-4xl font-bold text-slate-300 pb-4 border-b-2 border-slate-700 uppercase text-center mb-4">{!! trans('lang.ready_to_pickup') !!}</h2>
            <div class="grid grid-cols-1 gap-4 overflow-y-auto pr-2">
                <template x-for="order in readyForPickupOrders" :key="order.id">
                    <div class="bg-slate-800 rounded-xl p-6 text-center border border-slate-700 shadow-lg">
                        <span class="text-[5rem] font-bold leading-none text-green-500" x-text="order.displayId"></span>
                    </div>
                </template>
                 <template x-if="readyForPickupOrders.length === 0">
                    <p class="text-slate-500 text-center py-10 italic">{!! trans('lang.no_ready_orders') !!}</p>
                </template>
            </div>
        </div>
    </div>
</div>

<script>
    if (typeof orderScreen !== 'function') {
        function orderScreen(userId) {
            return {
                isLoading: true,
                error: null,
                newOrders: [],
                inPreparationOrders: [],
                readyForPickupOrders: [],
                pollIntervalId: null,

                async init() {
                    await this.fetchOrders();
                    this.pollIntervalId = setInterval(() => this.fetchOrders(), 5000);
                },

                async fetchOrders() {
                    try {
                        const response = await fetch('/api/live-orders', {
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                            }
                        });

                        if (!response.ok) throw new Error('HTTP ' + response.status);

                        const orders = await response.json();
                        this.isLoading = false;

                        this.newOrders            = [];
                        this.inPreparationOrders  = [];
                        this.readyForPickupOrders = [];

                        for (const order of orders) {
                            const payload = {
                                id:        order.id,
                                displayId: order.orderNumber ?? order.id,
                            };

                            if (order.status === 'Order Placed') {
                                this.newOrders.push(payload);
                            } else if (order.status === 'Order Accepted') {
                                this.inPreparationOrders.push(payload);
                            } else if (order.status === 'Order Completed') {
                                this.readyForPickupOrders.push(payload);
                            }
                        }
                    } catch (err) {
                        console.error('Order screen fetch error:', err);
                        if (this.isLoading) {
                            this.error = 'Data loading error: ' + err.message;
                            this.isLoading = false;
                        }
                    }
                },
            }
        }
    }
</script> 