@extends('layouts.app')

@section('head')
{{-- Kitchen wall-tablet board: kept live by a JS auto-refresh (the orderFeed
Alpine component at the bottom of the feed) instead of
<meta refresh>, so the
reload PAUSES while an order card is expanded. location.reload() is still a
full page load, so the new-order overlay keeps working against localStorage. --}}
@endsection

@section('styles')
<style>
    /* Pulsing "LIVE" dot */
    @keyframes do-live {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: .35;
            transform: scale(.75);
        }
    }

    .do-live {
        animation: do-live 1.4s ease-in-out infinite;
    }

    /* Full-screen new-order alert */
    @keyframes do-flash {

        0%,
        100% {
            background-color: #059669;
        }

        50% {
            background-color: #065f46;
        }
    }

    @keyframes do-pop {
        0% {
            transform: scale(.5);
            opacity: 0;
        }

        60% {
            transform: scale(1.06);
            opacity: 1;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes do-bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-16px);
        }
    }

    .do-overlay {
        animation: do-flash 1s ease-in-out infinite;
    }

    .do-pop {
        animation: do-pop .5s cubic-bezier(.2, .8, .2, 1) both;
    }

    .do-bounce {
        animation: do-bounce 1s ease-in-out infinite;
    }
</style>
@endsection

@section('content')
@php
$latestPlatform = $latest ? config('delivery.platforms.' . ($latest->integration?->tool ?? ''), []) : [];
$latestDisplay = $latest
? (data_get($latest->payload, 'display_id') ?: ('#' . substr($latest->order_id, 0, 8)))
: '';
$branchNote = session('selected_pos_note')
?: (session('selected_pos_service_id') ? __('Selected business') : __('No business selected'));

// Compact money formatter (mirrors orders/show) for the expanded card content.
$money = fn($m) => is_array($m)
? ($m['formatted_amount'] ?? (isset($m['amount'])
? number_format(((int) $m['amount']) / 100, 2) . ' ' . ($m['currency_code'] ?? '')
: '-'))
: '-';
@endphp

<div class="w-full px-4 pb-60">
    <div class="max-w-5xl pt-4 mx-auto">

        {{-- HEADER --}}
        <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-3">
                <span class="inline-block w-4 h-4 bg-red-500 rounded-full do-live"></span>
                <h1 class="text-4xl font-extrabold tracking-tight text-stone-800">{{ __('Live Order Feed') }}</h1>
            </div>
            <div class="text-right">
                <div class="text-6xl font-black leading-none tabular-nums text-stone-800">{{ $isHistory ?
                    $orders->total() : $orders->count() }}</div>
                <div class="mt-1 text-sm font-medium tracking-widest uppercase text-stone-500">{{ __('Orders') }}</div>
            </div>
        </div>

        <p class="mt-3 text-xl text-stone-500">
            <span class="font-semibold text-stone-700">{{ $branchNote }}</span>
            · {{ __('All integrations') }} · {{ $isHistory ? __('Older than 60 minutes') : __('Last 60 minutes') }}
            @if ($isHistory) · {{ __($activeStatus) }} @endif
        </p>

        <nav class="mt-6 space-y-3" aria-label="{{ __('Order filters') }}">
            <a href="{{ route('dashboard') }}" @if (!$isHistory) aria-current="page" @endif
                class="inline-flex items-center justify-center px-5 py-3 text-xl font-bold rounded-xl ring-1 {{ !$isHistory ? 'bg-stone-800 text-white ring-stone-800' : 'bg-white text-stone-700 ring-stone-300 hover:bg-stone-100' }}">
                {{ __('Last 60 minutes') }}
            </a>
            @if ($statusGroups->isNotEmpty())
            <div class="text-sm font-semibold tracking-wide uppercase text-stone-500">{{ __('Older than 60 minutes') }}
            </div>
            <div class="flex flex-wrap gap-3">
                @foreach ($statusGroups as $statusKey => $statuses)
                <a href="{{ route('dashboard', ['status' => $statusKey]) }}" @if ($activeStatus===(string) $statusKey)
                    aria-current="page" @endif
                    class="inline-flex items-center justify-center px-5 py-3 text-xl font-bold uppercase rounded-xl ring-1 {{ $activeStatus === (string) $statusKey ? 'bg-stone-800 text-white ring-stone-800' : 'bg-white text-stone-700 ring-stone-300 hover:bg-stone-100' }}">
                    {{ __((string) $statusKey) }}
                </a>
                @endforeach
            </div>
            @endif
        </nav>

        {{-- LIVE ORDER FEED (single column, large type, click-to-expand accordion) --}}
        <div class="grid gap-4 mt-6" x-data="{
            openId: null,
            timer: null,
            confirm: { open: false, message: '', label: '', tone: 'green', form: null },
            toggle(id) { this.openId = (this.openId === id ? null : id); this.arm(); },
            arm() { clearTimeout(this.timer); if (this.openId === null && !this.confirm.open) { this.timer = setTimeout(() => window.location.reload(), 20000); } },
            askConfirm(form) { this.confirm.message = form.dataset.confirmMessage || ''; this.confirm.label = form.dataset.confirmLabel || ''; this.confirm.tone = form.dataset.confirmTone || 'green'; this.confirm.form = form; this.confirm.open = true; clearTimeout(this.timer); },
            cancelConfirm() { this.confirm.open = false; this.confirm.form = null; this.arm(); },
            doConfirm() { const f = this.confirm.form; this.confirm.open = false; this.confirm.form = null; if (f) { f.submit(); } }
        }" x-init="arm()">
            @forelse ($orders as $order)
            @php
            $platform = config('delivery.platforms.' . ($order->integration?->tool ?? ''), []);
            $status = (string) ($order->status ?? '');
            $stateUpper = strtoupper($status);
            $badge = match (true) {
            in_array($stateUpper, ['READY_FOR_PICKUP', 'FINISHED', 'COMPLETED', 'DELIVERED'], true) => 'bg-green-100
            text-green-700 ring-green-300',
            in_array($stateUpper, ['ACCEPTED'], true) => 'bg-green-100 text-green-700 ring-green-300',
            in_array($stateUpper, ['PREPARING', 'IN_PROGRESS'], true) => 'bg-blue-100 text-blue-700 ring-blue-300',
            in_array($stateUpper, ['DENIED', 'CANCELED', 'CANCELLED'], true) => 'bg-red-100 text-red-700 ring-red-300',
            in_array($stateUpper, ['CREATED', 'PLACED'], true) => 'bg-amber-100 text-amber-700 ring-amber-300',
            str_contains(strtolower($status), 'cancel') => 'bg-red-100 text-red-700 ring-red-300',
            $status === '' => 'bg-amber-100 text-amber-700 ring-amber-300',
            default => 'bg-blue-100 text-blue-700 ring-blue-300',
            };
            // Left stripe now reflects the ORDER STATUS colour family (not the
            // platform colour) at full strength. Derived from $badge so the two
            // never drift apart; inline hex keeps it working in the compiled build.
            $stripeFamily = preg_match('/bg-([a-z]+)-100/', $badge, $m) ? $m[1] : 'stone';
            $stripeColor = match ($stripeFamily) {
            'green' => '#22c55e',
            'red' => '#ef4444',
            'amber' => '#f59e0b',
            'blue' => '#3b82f6',
            default => '#a8a29e',
            };
            $display = data_get($order->payload, 'display_id') ?: ('#' . substr($order->order_id, 0, 8));
            $store = $order->integration?->posAccess?->note
            ?? ($order->pos_service_id ? __('Business #:id', ['id' => $order->pos_service_id]) : ($order->store_id ?
            substr($order->store_id, 0, 8) . '…' : '-'));
            // Kitchen lifecycle: a new order is accepted/denied, an accepted
            // (PREPARING) order is marked ready for pickup or cancelled.
            $isNew = in_array($stateUpper, ['CREATED', 'PLACED', ''], true);
            $isPreparing = in_array($stateUpper, ['PREPARING', 'ACCEPTED'], true);
            $items = data_get($order->payload, 'cart.items') ?? [];
            $charges = data_get($order->payload, 'payment.charges') ?? [];
            $eater = data_get($order->payload, 'eater') ?? [];
            $acceptConfirm = __('This order will be ACCEPTED on Uber Eats. Are you sure?');
            $denyConfirm = __('This order will be DENIED on Uber Eats. Are you sure?');
            $readyConfirm = __('This order will be marked READY for pickup. Are you sure?');
            $cancelConfirm = __('This order will be CANCELLED. Are you sure?');
            @endphp
            <div
                class="overflow-hidden rounded-2xl bg-white shadow ring-1 {{ !$isHistory && $loop->first ? 'ring-2 ring-stone-800' : 'ring-stone-200' }}">
                <div class="flex items-stretch">
                    <div class="w-3 shrink-0" style="background: {{ $stripeColor }}"></div>
                    <div class="flex-1 min-w-0">

                        {{-- Clickable header row: toggles the accordion --}}
                        <button type="button" @click="toggle('{{ $order->order_id }}')"
                            class="flex items-center justify-between w-full gap-4 p-5 text-left">
                            <div class="min-w-0">
                                <div class="flex items-center gap-3">
                                    <span class="text-4xl font-black truncate text-stone-800">{{ $display }}</span>
                                    @if (!$isHistory && $loop->first)
                                    <span
                                        class="px-3 py-1 text-xs font-bold tracking-widest text-white uppercase rounded-full shrink-0 bg-stone-800">{{
                                        __('New') }}</span>
                                    @endif
                                </div>
                                <div class="flex items-center gap-2 mt-1 text-xl text-stone-500">
                                    @if (!empty($platform['logo']))
                                    <img src="{{ $platform['logo'] }}" alt="{{ $platform['label'] ?? '' }}"
                                        class="object-contain w-7 h-7 shrink-0" onerror="this.style.display='none'">
                                    @endif
                                    <span class="font-medium text-stone-600">{{ $platform['label'] ??
                                        ($order->integration?->tool ?? __('Order')) }}</span>
                                    <span class="shrink-0">·</span>
                                    <span class="truncate">{{ $store }}</span>
                                </div>
                            </div>
                            <div class="flex items-center gap-5 shrink-0">
                                <div class="text-right">
                                    <div class="text-xl font-medium text-stone-600">{{ $order->placed_at ?
                                        $order->placed_at->format('d.m.Y H:i') : '-' }}</div>
                                    <div class="text-lg text-stone-400">{{ $order->created_at ?
                                        $order->created_at->diffForHumans() : '-' }}</div>
                                </div>
                                <span class="rounded-full px-5 py-3 text-2xl font-bold ring-1 {{ $badge }}">
                                    {{ $status !== '' ? __($stateUpper) : __('unknown') }}
                                </span>
                                <span
                                    class="text-4xl transition-transform duration-200 text-stone-400 material-symbols-rounded"
                                    :class="openId === '{{ $order->order_id }}' ? 'rotate-180' : ''">expand_more</span>
                            </div>
                        </button>

                        {{-- Expandable order content --}}
                        <div x-show="openId === '{{ $order->order_id }}'" x-cloak
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 -translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            class="border-t border-stone-200 bg-stone-50">
                            <div class="grid gap-6 p-6 lg:grid-cols-3">

                                {{-- Cart --}}
                                <div class="lg:col-span-2">
                                    <h3 class="text-2xl font-bold text-stone-700">
                                        <span class="material-symbols-rounded text-3xl align-[-6px]">restaurant</span>
                                        {{ __('Cart (:count items)', ['count' => count($items)]) }}
                                    </h3>
                                    @if (count($items) > 0)
                                    <ul class="mt-3 divide-y divide-stone-200">
                                        @foreach ($items as $item)
                                        <li class="flex items-start justify-between gap-4 py-3">
                                            <div class="min-w-0">
                                                <div class="text-2xl font-semibold text-stone-800">
                                                    {{ data_get($item, 'title') ?? data_get($item, 'id') ?? '-' }}
                                                </div>
                                                @if (data_get($item, 'special_instructions'))
                                                <p class="mt-0.5 text-lg italic text-amber-700">
                                                    “{{ data_get($item, 'special_instructions') }}”
                                                </p>
                                                @endif
                                                @foreach (data_get($item, 'selected_modifier_groups') ?? [] as $group)
                                                @php $selected = data_get($group, 'selected_items') ?? []; @endphp
                                                @if (count($selected) > 0)
                                                <p class="mt-0.5 text-lg text-stone-500">
                                                    {{ data_get($group, 'title') }}:
                                                    {{ collect($selected)->map(fn($s) => trim((data_get($s, 'title') ??
                                                    '') . (data_get($s, 'quantity', 1) > 1 ? ' ×' . data_get($s,
                                                    'quantity') : '')))->filter()->implode(', ') }}
                                                </p>
                                                @endif
                                                @endforeach
                                            </div>
                                            <div class="text-right shrink-0">
                                                <div class="text-xl text-stone-500">× {{ data_get($item, 'quantity', 1)
                                                    }}</div>
                                                <div class="text-2xl font-bold text-stone-800">{{ $money(data_get($item,
                                                    'price.total_price')) }}</div>
                                            </div>
                                        </li>
                                        @endforeach
                                    </ul>
                                    @else
                                    <p class="mt-3 text-xl text-stone-400">
                                        {{ __('No cart detail — the order may not be enriched (raw webhook payload).')
                                        }}
                                    </p>
                                    @endif
                                </div>

                                {{-- Summary + quick actions --}}
                                <div class="space-y-4">
                                    <div>
                                        <div class="text-lg tracking-wide uppercase text-stone-400">{{ __('Customer') }}
                                        </div>
                                        <div class="text-2xl font-semibold text-stone-800">{{ data_get($eater,
                                            'first_name') ?: '-' }}</div>
                                        @if (data_get($eater, 'phone'))
                                        <div class="font-mono text-xl text-stone-500">{{ data_get($eater, 'phone') }}
                                        </div>
                                        @endif
                                    </div>

                                    <div class="flex items-center justify-between pt-4 border-t border-stone-200">
                                        <span class="text-2xl font-semibold text-stone-600">{{ __('Total') }}</span>
                                        <span class="text-4xl font-black text-stone-900">{{ $money(data_get($charges,
                                            'total')) }}</span>
                                    </div>

                                    @if ($isNew)
                                    {{-- New order: accept or deny --}}
                                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                                        data-confirm-message="{{ $acceptConfirm }}"
                                        data-confirm-label="{{ __('Accept') }}" data-confirm-tone="green"
                                        @submit.prevent="askConfirm($el)">
                                        @csrf
                                        <input type="hidden" name="action" value="accept">
                                        <input type="hidden" name="return_to" value="dashboard">
                                        <button type="submit"
                                            class="inline-flex items-center justify-center w-full gap-2 px-6 py-4 text-2xl font-bold text-white bg-green-600 rounded-xl hover:bg-green-700">
                                            <span class="text-3xl material-symbols-rounded">check</span>
                                            {{ __('Accept') }}
                                        </button>
                                    </form>
                                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                                        data-confirm-message="{{ $denyConfirm }}" data-confirm-label="{{ __('Deny') }}"
                                        data-confirm-tone="red" @submit.prevent="askConfirm($el)">
                                        @csrf
                                        <input type="hidden" name="action" value="deny">
                                        <input type="hidden" name="return_to" value="dashboard">
                                        <button type="submit"
                                            class="inline-flex items-center justify-center w-full gap-2 px-6 py-4 text-2xl font-bold text-white bg-red-600 rounded-xl hover:bg-red-700">
                                            <span class="text-3xl material-symbols-rounded">close</span>
                                            {{ __('Deny') }}
                                        </button>
                                    </form>
                                    @elseif ($isPreparing)
                                    {{-- Preparing: mark ready for pickup or cancel --}}
                                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                                        data-confirm-message="{{ $readyConfirm }}"
                                        data-confirm-label="{{ __('Ready') }}" data-confirm-tone="blue"
                                        @submit.prevent="askConfirm($el)">
                                        @csrf
                                        <input type="hidden" name="action" value="ready">
                                        <input type="hidden" name="return_to" value="dashboard">
                                        <button type="submit"
                                            class="inline-flex items-center justify-center w-full gap-2 px-6 py-4 text-2xl font-bold text-white bg-blue-600 rounded-xl hover:bg-blue-700">
                                            <span class="text-3xl material-symbols-rounded">shopping_bag</span>
                                            {{ __('Ready') }}
                                        </button>
                                    </form>
                                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                                        data-confirm-message="{{ $cancelConfirm }}"
                                        data-confirm-label="{{ __('Cancel') }}" data-confirm-tone="red"
                                        @submit.prevent="askConfirm($el)">
                                        @csrf
                                        <input type="hidden" name="action" value="cancel">
                                        <input type="hidden" name="return_to" value="dashboard">
                                        <button type="submit"
                                            class="inline-flex items-center justify-center w-full gap-2 px-6 py-4 text-2xl font-bold text-white bg-red-600 rounded-xl hover:bg-red-700">
                                            <span class="text-3xl material-symbols-rounded">cancel</span>
                                            {{ __('Cancel') }}
                                        </button>
                                    </form>
                                    @else
                                    <p class="text-xl text-stone-500">
                                        {!! __('This order is in :status state — accept/deny cannot be applied.',
                                        ['status' => '<span class="font-semibold">' . e(__($stateUpper)) . '</span>'])
                                        !!}
                                    </p>
                                    @endif

                                    <a href="{{ route('orders.show', $order->order_id) }}"
                                        class="inline-flex items-center justify-center w-full gap-2 px-6 py-4 text-2xl font-bold text-stone-700 rounded-xl ring-2 ring-stone-300 hover:bg-stone-100">
                                        <span class="text-3xl material-symbols-rounded">open_in_new</span>
                                        {{ __('View details') }}
                                    </a>

                                    <a href="{{ route('orders.print', $order->order_id) }}" target="_blank"
                                        class="inline-flex items-center justify-center w-full gap-2 px-6 py-4 text-2xl font-bold text-stone-700 rounded-xl ring-2 ring-stone-300 hover:bg-stone-100">
                                        <span class="text-3xl material-symbols-rounded">print</span>
                                        {{ __('Print') }}
                                    </a>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            @empty
            <div class="p-16 text-center bg-white shadow rounded-2xl ring-1 ring-stone-200">
                <span class="material-symbols-rounded text-7xl text-stone-300">local_shipping</span>
                <p class="mt-4 text-3xl font-semibold text-stone-500">{{ __('No orders match this filter.') }}</p>
                <p class="mt-2 text-xl text-stone-400">
                    {{ !session('selected_pos_service_id') ? __('Select a business first.') : ($isHistory ? __('Older
                    than 60 minutes') : __('New orders will appear here live.')) }}
                </p>
            </div>
            @endforelse

            @if ($isHistory)
            <div>{{ $orders->links() }}</div>
            @endif

            {{-- Centered confirm modal — replaces the native confirm() for accept/deny/ready/cancel.
            Driven by the feed Alpine root; the triggering form is submitted only after the big
            confirm button is pressed (form.submit() bypasses @submit.prevent, so no re-entry). --}}
            <div x-show="confirm.open" x-cloak @keydown.escape.window="cancelConfirm()" @click.self="cancelConfirm()"
                class="fixed inset-0 z-[10000] flex items-center justify-center p-6 bg-black/60"
                x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
                <div class="w-full max-w-xl p-10 text-center bg-white shadow-2xl rounded-3xl"
                    x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100">
                    <span class="text-7xl material-symbols-rounded text-stone-300">help_outline</span>
                    <p class="mt-6 text-3xl font-bold leading-snug text-stone-800" x-text="confirm.message"></p>
                    <div class="grid grid-cols-2 gap-4 mt-10">
                        <button type="button" @click="cancelConfirm()"
                            class="inline-flex items-center justify-center gap-2 px-6 py-5 text-2xl font-bold text-stone-700 rounded-xl ring-2 ring-stone-300 hover:bg-stone-100">
                            <span class="text-3xl material-symbols-rounded">close</span>
                            {{ __('Go back') }}
                        </button>
                        <button type="button" @click="doConfirm()"
                            class="inline-flex items-center justify-center px-6 py-5 text-2xl font-bold text-white rounded-xl"
                            :class="{
                                'bg-green-600 hover:bg-green-700': confirm.tone === 'green',
                                'bg-red-600 hover:bg-red-700': confirm.tone === 'red',
                                'bg-blue-600 hover:bg-blue-700': confirm.tone === 'blue',
                            }">
                            <span x-text="confirm.label"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- FULL-SCREEN NEW-ORDER ALERT (revealed by JS when a newer order landed) --}}
@if ($latest)
<div id="new-order-overlay" data-latest-id="{{ $latest->order_id }}"
    data-latest-created-at="{{ $latest->created_at->format('Y-m-d H:i:s.u') }}" data-latest-sequence="{{ $latest->id }}"
    data-scope="{{ auth()->user()->current_team_id }}_{{ session('selected_pos_service_id') }}"
    class="do-overlay hidden fixed inset-0 z-[9999] flex-col items-center justify-center px-6 text-center">
    <div class="flex flex-col items-center do-pop">
        <span class="text-white do-bounce material-symbols-rounded" style="font-size:130px">local_shipping</span>
        <div class="mt-4 text-6xl font-black tracking-widest text-white uppercase drop-shadow-lg">{{ __('New Order!') }}
        </div>
        <div class="mt-6 font-black text-white text-8xl tabular-nums drop-shadow-lg">{{ $latestDisplay }}</div>
        <div class="mt-4 text-4xl font-semibold text-white/90">{{ $latestPlatform['label'] ?? __('Order') }}</div>
        <div class="mt-12 text-2xl font-medium text-white/80">{{ __('Tap the screen to close') }}</div>
    </div>
</div>
@endif
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var overlay = document.getElementById('new-order-overlay');
        if (!overlay) return;

        var latestId = overlay.getAttribute('data-latest-id');
        if (!latestId) return;

        var key = 'delivery_dashboard_latest_order_' + overlay.dataset.scope;
        var latest = { id: latestId, createdAt: overlay.dataset.latestCreatedAt, sequence: Number(overlay.dataset.latestSequence) };
        var prev = null;
        try { prev = JSON.parse(localStorage.getItem(key)); } catch (e) {}
        var isNewer = prev && (latest.createdAt > prev.createdAt ||
            (latest.createdAt === prev.createdAt && latest.sequence > prev.sequence));
        if (!prev || isNewer) {
            try { localStorage.setItem(key, JSON.stringify(latest)); } catch (e) {}
        }
        if (!isNewer || prev.id === latestId) return;

        function hide() {
            overlay.classList.add('hidden');
            overlay.classList.remove('flex');
            overlay.removeEventListener('click', hide);
        }

        overlay.classList.remove('hidden');
        overlay.classList.add('flex');
        overlay.addEventListener('click', hide);
        setTimeout(hide, 9000);
    });
</script>
@endsection