@php
    $primary = $setting?->primary_color ?: '#124a61';
    $accent = $setting?->accent_color ?: '#2e86ab';
    $company = $setting?->company_name ?: __('Print Shop');
    $logo = $setting?->logoSrc();
    $money = fn ($n) => ($request->currency_code ?: 'USD') . ' ' . number_format((float) $n, 2);

    // The customer-facing journey, which differs by lane: a counter job is
    // printed and collected, a quote-lane enquiry is priced and sent.
    // 'cancelled' is handled separately below.
    $isQuoteLane = $request->isQuoteLane();

    $flow = $isQuoteLane
        ? [
            'new'       => __('Received'),
            'quoting'   => __('Being priced'),
            'quoted'    => __('Quote sent'),
            'converted' => __('Accepted'),
        ]
        : [
            'new'       => __('Received'),
            'printing'  => __('Printing'),
            'ready'     => __('Ready for collection'),
            'completed' => __('Collected'),
        ];
    $order = array_keys($flow);
    $currentIndex = array_search($request->status, $order, true);
    $currentIndex = $currentIndex === false ? 0 : $currentIndex;
    $cancelled = $request->status === 'cancelled';
@endphp

{{--
    Polls while there is anything left to happen. Fifteen seconds is chosen
    against the counter, not against the server: a customer waiting outside for
    a job that takes four minutes should not find out a quarter of an hour
    late, and a job that is already collected stops polling entirely ($live).
--}}
<div style="--brand: {{ $primary }}; --accent: {{ $accent }};"
     class="mx-auto max-w-lg px-4 py-8 sm:py-12"
     @if ($live) wire:poll.15s="check" @endif
     x-data="{ banner: null }"
     x-on:request-moved.window="
        banner = $event.detail.message;
        /* One sound per event, made in one place: this chimes only if the
           device is NOT subscribed to push, because if it is, the phone has
           already buzzed on its own. */
        window.BillPro?.push?.arrived({
            title: $event.detail.title,
            message: $event.detail.message,
            url: window.location.pathname,
            tag: 'service-request-{{ $request->id }}',
        });
     ">

    <style>
        .brand-grad { background-image: linear-gradient(135deg, var(--brand), var(--accent)); }
        .brand-text { color: var(--brand); }
    </style>

    {{-- Success banner --}}
    <div class="brand-grad overflow-hidden rounded-2xl px-6 py-8 text-white shadow-xl">
        <div class="flex items-center gap-3">
            @if ($logo)
                <img src="{{ $logo }}" alt="{{ $company }}" class="h-11 w-auto max-w-[140px] rounded-lg bg-white/10 object-contain p-1">
            @endif
            <div>
                <p class="text-base font-bold leading-tight">{{ $company }}</p>
                <p class="text-sm text-white/80">{{ $request->intakeService?->name ?: __('Print request') }}</p>
            </div>
        </div>
        <div class="mt-6 flex items-center gap-3">
            <span class="flex h-12 w-12 items-center justify-center rounded-full bg-white/15">
                <x-icon name="check" class="h-7 w-7" />
            </span>
            <div>
                <h1 class="text-xl font-bold">{{ __('Request received!') }}</h1>
                <p class="text-sm text-white/80">{{ __('Reference') }} <span class="font-semibold">{{ $request->reference }}</span></p>
            </div>
        </div>
    </div>

    {{-- Something moved while they were watching. --}}
    <template x-if="banner">
        <div class="mt-4 flex items-start gap-2.5 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 shadow-sm">
            <x-icon name="bell-alert" class="mt-0.5 h-4 w-4 shrink-0" />
            <p class="min-w-0 flex-1 font-medium" x-text="banner"></p>
            <button type="button" x-on:click="banner = null" class="shrink-0 opacity-60 transition hover:opacity-100">
                <x-icon name="x-mark" class="h-4 w-4" />
            </button>
        </div>
    </template>

    <div class="mt-5 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-900/5 sm:p-6">

        {{-- Status --}}
        @if ($cancelled)
            <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700">
                {{ __('This request was cancelled. Please contact the shop if this is unexpected.') }}
            </div>
        @else
            <div class="flex items-center justify-between">
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">{{ __('Status') }}</h2>
                @if ($live)
                    {{-- Says the page is watching, so nobody sits there
                         refreshing it out of doubt. --}}
                    <span class="flex items-center gap-1.5 text-[11px] font-medium text-slate-400">
                        <span class="relative flex h-2 w-2">
                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                            <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
                        </span>
                        {{ __('Live') }}
                    </span>
                @endif
            </div>
            <ol class="mt-4 space-y-4">
                @foreach ($flow as $key => $label)
                    @php $i = array_search($key, $order, true); $done = $i < $currentIndex; $current = $i === $currentIndex; @endphp
                    <li class="flex items-center gap-3">
                        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-white
                            {{ $done ? 'bg-emerald-500' : ($current ? 'brand-grad' : 'bg-slate-200 text-slate-400') }}">
                            @if ($done)
                                <x-icon name="check" class="h-4 w-4" />
                            @else
                                <span class="h-2 w-2 rounded-full bg-current"></span>
                            @endif
                        </span>
                        <span class="text-sm font-semibold {{ $current ? 'brand-text' : ($done ? 'text-slate-700' : 'text-slate-400') }}">{{ $label }}</span>
                        @if ($current)
                            <span class="ml-auto rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-500">{{ __('Now') }}</span>
                        @endif
                    </li>
                @endforeach
            </ol>
        @endif

        {{-- Summary --}}
        <div class="mt-6 space-y-2.5 border-t border-slate-100 pt-5 text-sm">
            <div class="flex justify-between"><span class="text-slate-500">{{ __('Name') }}</span><span class="font-medium text-slate-800">{{ $request->customer_name }}</span></div>

            @if ($isQuoteLane)
                @foreach ($request->answerSummary() as $row)
                    <div class="flex justify-between gap-4"><span class="text-slate-500">{{ $row['label'] }}</span><span class="text-right font-medium text-slate-800">{{ $row['value'] }}</span></div>
                @endforeach
                @if ($request->needed_by)
                    <div class="flex justify-between"><span class="text-slate-500">{{ __('Needed by') }}</span><span class="font-medium text-slate-800">{{ $request->needed_by->format('j M Y') }}</span></div>
                @endif
            @else
                <div class="flex justify-between"><span class="text-slate-500">{{ __('Print') }}</span><span class="font-medium text-slate-800">{{ $request->colorLabel() }} · {{ $request->paper_size }} {{ $request->material_type }}</span></div>
                <div class="flex justify-between"><span class="text-slate-500">{{ __('Quantity') }}</span><span class="font-medium text-slate-800">{{ $request->pages }} {{ trans_choice('{1}page|[2,*]pages', $request->pages) }} × {{ $request->copies }}{{ $request->double_sided ? ' · ' . __('back-to-back') : '' }}</span></div>
            @endif

            <div class="flex justify-between"><span class="text-slate-500">{{ __('Files') }}</span><span class="font-medium text-slate-800">{{ $request->files->count() }}</span></div>
        </div>

        @if ($isQuoteLane)
            @if ($quoteToken)
                {{-- The quote exists, so the page it announces has to be one tap
                     away. Telling somebody their quote is ready and leaving them
                     to find it in an inbox is where this used to stop. --}}
                <a href="{{ route('portal.quote', ['token' => $quoteToken]) }}"
                   class="brand-grad mt-5 flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:opacity-90">
                    <x-icon name="document-text" class="h-4 w-4" />
                    {{ __('View your quote') }}
                </a>
            @else
                {{-- No price yet, and saying so plainly beats showing a zero. --}}
                <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                    <p class="text-sm font-semibold text-slate-700">{{ __('No payment yet') }}</p>
                    <p class="mt-1 text-sm leading-relaxed text-slate-500">
                        {{ __('We are pricing this now and will send you a quote. Nothing is booked in, and you owe nothing, until you accept it.') }}
                    </p>
                </div>
            @endif
        @else
            {{-- Payment --}}
            <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-slate-500">{{ __('Amount') }}</span>
                    <span class="brand-text text-xl font-bold">{{ $money($request->total) }}</span>
                </div>
                <div class="mt-2 flex items-center justify-between text-sm">
                    <span class="text-slate-500">{{ $request->isEcocash() ? __('EcoCash') : __('Cash') }}</span>
                    @if ($request->isPaid())
                        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">
                            <x-icon name="check" class="h-3.5 w-3.5" />
                            {{ __('Paid') }}
                        </span>
                    @else
                        <span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700">{{ __('Payment pending') }}</span>
                    @endif
                </div>
                @if ($request->isEcocash() && ! $request->isPaid())
                    <p class="mt-2 text-xs text-slate-500">{{ __('We will confirm your EcoCash payment shortly.') }}</p>
                @endif
            </div>
        @endif

        @if (($credit ?? 0) > 0)
            <div class="mt-5 flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-50 p-4">
                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white">
                    <x-icon name="currency-dollar" class="h-5 w-5" />
                </span>
                <div>
                    <p class="text-sm font-semibold text-emerald-900">{{ __('You have :amt in saved change', ['amt' => $money($credit)]) }}</p>
                    <p class="text-xs text-emerald-700">{{ __('Use it on your next print. Mention your phone number at the counter.') }}</p>
                </div>
            </div>
        @endif

        {{-- Install the shop, and be told without having to look.
             wire:ignore because this card is entirely browser state — a poll
             re-rendering the page underneath it must not reset the buttons
             mid-tap or lose the message it is showing. --}}
        <div wire:ignore>
            <x-portal-app-card :code="$intakeCode" :token="$request->public_token" :company="$setting?->company_name" />
        </div>

        <p class="mt-5 text-center text-xs text-slate-400">{{ __('Keep this page to check your status. Screenshot the reference for the counter.') }}</p>
        <p class="mt-1 text-center text-xs text-slate-400">
            {{ $isQuoteLane
                ? __('We keep your artwork while we work on your quote.')
                : __('Your uploaded files are automatically deleted 24 hours after submission.') }}
        </p>
    </div>
</div>