@extends('layouts.app')

@section('head')
@if (request()->boolean('auto'))
<meta http-equiv="refresh" content="15">
@endif
@endsection

@section('content')
<div class="w-full px-4 pb-60">
    <div class="grid max-w-6xl pt-6 mx-auto gap-y-8">

        {{-- HEADER --}}
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <h1 class="text-2xl font-semibold text-stone-800">{{ __('Uber Eats Orders') }}</h1>
                <p class="mt-1 text-sm text-stone-500">
                    {{ __('Orders received via webhook. Total :total, not sent to POS :unsynced.', ['total' =>
                    $stats['total'], 'unsynced' => $stats['unsynced']]) }}
                </p>
            </div>

            <div class="flex items-center gap-2">
                {{-- Auto-refresh toggle (meta refresh, preserves filters) --}}
                @php
                $autoUrl = request()->fullUrlWithQuery(['auto' => request()->boolean('auto') ? null : 1]);
                @endphp
                <a href="{{ $autoUrl }}" class="inline-flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg ring-1 ring-stone-300 bg-white hover:bg-stone-50
                          {{ request()->boolean('auto') ? 'text-green-700' : 'text-stone-600' }}">
                    <span class="text-base material-symbols-rounded">cached</span>
                    {{ __('Auto refresh:') }} {{ request()->boolean('auto') ? __('On') : __('Off') }}
                </a>

                <a href="{{ request()->fullUrl() }}"
                    class="inline-flex items-center gap-1.5 px-3 py-2 text-sm text-stone-700 rounded-lg ring-1 ring-stone-300 bg-white hover:bg-stone-50">
                    <span class="text-base material-symbols-rounded">refresh</span>
                    {{ __('Refresh') }}
                </a>
            </div>
        </div>

        {{-- FILTERS --}}
        <form method="GET" action="{{ route('orders.index') }}"
            class="flex flex-wrap items-center gap-2 p-3 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <input type="text" name="q" value="{{ request('q') }}" placeholder="{{ __('Search order or store ID...') }}"
                class="flex-1 min-w-[200px] px-3 py-2 text-sm border border-stone-300 rounded-lg focus:ring-2 focus:ring-stone-400 focus:outline-none">

            <select name="status"
                class="px-3 py-2 text-sm bg-white border rounded-lg border-stone-300 focus:ring-2 focus:ring-stone-400 focus:outline-none">
                <option value="">{{ __('All statuses') }}</option>
                @foreach ($statuses as $status)
                <option value="{{ $status }}" @selected(request('status')===$status)>{{ __(strtoupper($status)) }}
                </option>
                @endforeach
            </select>

            <label
                class="inline-flex items-center gap-2 px-3 py-2 text-sm rounded-lg text-stone-600 ring-1 ring-stone-300">
                <input type="checkbox" name="unsynced" value="1" @checked(request()->boolean('unsynced'))
                class="rounded border-stone-300 text-stone-700 focus:ring-stone-400">
                {{ __('Only not sent to POS') }}
            </label>

            @if (request()->boolean('auto'))
            <input type="hidden" name="auto" value="1">
            @endif

            <button type="submit"
                class="px-4 py-2 text-sm font-medium text-white rounded-lg bg-stone-800 hover:bg-stone-700">
                {{ __('Filter') }}
            </button>

            @if (request()->hasAny(['q', 'status', 'unsynced']))
            <a href="{{ route('orders.index', request()->boolean('auto') ? ['auto' => 1] : []) }}"
                class="px-3 py-2 text-sm text-stone-500 hover:text-stone-700">{{ __('Clear') }}</a>
            @endif
        </form>

        {{-- ORDERS TABLE --}}
        <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-300">
            @if ($orders->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-stone-200">
                    <thead class="bg-stone-50">
                        <tr>
                            <th class="px-4 py-3 text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                {{ __('Order') }}</th>
                            <th class="px-4 py-3 text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                {{ __('Store') }}</th>
                            <th class="px-4 py-3 text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                {{ __('Business') }}</th>
                            <th class="px-4 py-3 text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                {{ __('Status') }}</th>
                            <th class="px-4 py-3 text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                POS</th>
                            <th class="px-4 py-3 text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                {{ __('Order Time') }}</th>
                            <th class="px-4 py-3 text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                {{ __('Received') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-stone-100">
                        @foreach ($orders as $order)
                        @php
                        $status = (string) ($order->status ?? '');
                        $badge = match (true) {
                        in_array(strtoupper($status), ['ACCEPTED', 'READY_FOR_PICKUP', 'FINISHED', 'COMPLETED',
                        'DELIVERED'], true) => 'bg-green-100 text-green-700',
                        in_array(strtoupper($status), ['DENIED', 'CANCELED', 'CANCELLED'], true) => 'bg-red-100
                        text-red-700',
                        in_array(strtoupper($status), ['CREATED', 'PLACED'], true) => 'bg-amber-100 text-amber-700',
                        str_contains(strtolower($status), 'cancel') => 'bg-red-100 text-red-700',
                        $status === '' => 'bg-stone-100 text-stone-500',
                        default => 'bg-blue-100 text-blue-700',
                        };
                        @endphp
                        <tr class="hover:bg-stone-50">
                            <td class="px-4 py-3 text-sm" title="{{ $order->order_id }}">
                                <a href="{{ route('orders.show', $order->order_id) }}"
                                    class="font-semibold text-stone-800 hover:underline">
                                    {{ data_get($order->payload, 'display_id') ?: ('#' . substr($order->order_id, 0, 8))
                                    }}
                                </a>
                                <div class="font-mono text-xs text-stone-400">{{ substr($order->order_id, 0, 8) }}…
                                </div>
                            </td>
                            <td class="px-4 py-3 font-mono text-sm text-stone-500" title="{{ $order->store_id }}">
                                {{ $order->store_id ? substr($order->store_id, 0, 8) . '…' : '-' }}
                            </td>
                            <td class="px-4 py-3 text-sm text-stone-600">
                                {{ $order->integration?->posAccess?->note ?? ($order->pos_service_id ? __('Business
                                #:id', ['id' => $order->pos_service_id]) : '-') }}
                            </td>
                            <td class="px-4 py-3 text-sm">
                                <span class="px-2 py-0.5 text-xs font-semibold rounded-full {{ $badge }}">
                                    {{ $status !== '' ? __(strtoupper($status)) : __('unknown') }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm">
                                @if ($order->synced_to_pos)
                                <span
                                    class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-700">{{
                                    __('Sent') }}</span>
                                @else
                                <span
                                    class="px-2 py-0.5 text-xs font-semibold rounded-full bg-amber-100 text-amber-700">{{
                                    __('Pending') }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-sm text-stone-600">
                                {{ $order->placed_at ? $order->placed_at->format('d.m.Y H:i') : '-' }}
                            </td>
                            <td class="px-4 py-3 text-sm text-stone-400">
                                {{ $order->created_at ? $order->created_at->diffForHumans() : '-' }}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="px-4 py-3 border-t border-stone-200">
                {{ $orders->links() }}
            </div>
            @else
            <div class="p-12 text-center">
                <span class="text-4xl material-symbols-rounded text-stone-300">local_shipping</span>
                <p class="mt-3 text-sm text-stone-500">{{ __('No orders yet.') }}</p>
                <p class="mt-1 text-xs text-stone-400">
                    {{ __('To generate a test order:') }} <code
                        class="px-1 py-0.5 bg-stone-100 rounded">php artisan uber-eats:simulate-webhook</code>
                </p>
            </div>
            @endif
        </div>

    </div>
</div>
@endsection