@extends('storefront.layout')

@section('title', 'Order '.$order->number)

@if (session('order_placed'))
    @push('head')
        <style>
            .vm-order-confetti-canvas{position:fixed;inset:0;z-index:60;width:100vw;height:100vh;pointer-events:none}
        </style>
    @endpush
@endif

@section('content')
@php
$statusStyle = [
    'open'                       => 'bg-amber-50 text-amber-700 border border-amber-200',
    'payment_pending'            => 'bg-amber-50 text-amber-700 border border-amber-200',
    'partially_paid'             => 'bg-rose-50 text-rose-700 border border-rose-200',
    'paid_awaiting_fulfillment'  => 'bg-sky-50 text-sky-700 border border-sky-200',
    'shipped'                    => 'bg-blue-50 text-blue-700 border border-blue-200',
    'completed'                  => 'bg-emerald-50 text-emerald-700 border border-emerald-200',
    'cancelled'                  => 'bg-red-50 text-red-600 border border-red-200',
    'refunded'                   => 'bg-red-50 text-red-600 border border-red-200',
];
$statusDot = [
    'open'                       => 'bg-amber-400',
    'payment_pending'            => 'bg-amber-400',
    'partially_paid'             => 'bg-rose-500',
    'paid_awaiting_fulfillment'  => 'bg-sky-400',
    'shipped'                    => 'bg-blue-500',
    'completed'                  => 'bg-emerald-500',
    'cancelled'                  => 'bg-red-400',
    'refunded'                   => 'bg-red-400',
];

// Progress tracker steps
$steps = [
    ['key' => 'placed',     'label' => 'Order placed',  'date' => $order->placed_at],
    ['key' => 'paid',       'label' => 'Payment',        'date' => $order->paid_at],
    ['key' => 'processing', 'label' => 'Processing',     'date' => $order->paid_at],
    ['key' => 'shipped',    'label' => 'Shipped',        'date' => $order->shipped_at],
    ['key' => 'completed',  'label' => 'Delivered',      'date' => $order->completed_at],
];

$cancelled = in_array($order->status->value, ['cancelled', 'refunded']);

// Determine which step is active
$activeStep = match ($order->status->value) {
    'open'                      => 0,
    'payment_pending'           => 0,
    'partially_paid'            => 1,
    'paid_awaiting_fulfillment' => 2,
    'shipped'                   => 3,
    'completed'                 => 4,
    default                     => -1,
};

$st = $order->status->value;
$badgeStyle = $statusStyle[$st] ?? 'bg-stone-100 text-stone-700';
$dotStyle   = $statusDot[$st]   ?? 'bg-stone-400';

$paymentBlocks = match ($order->payment_method->value) {
    'ach' => [(array) config('checkout.ach')],
    'wire' => [(array) config('checkout.wire_intl_usd')],
    default => [],
};
$invoiceInstructions = (array) config('checkout.invoice');
$isPaymentTerms = $order->payment_method->value === 'invoice';
$paymentTermsDays = $isPaymentTerms ? (int) ($order->payment_terms_days ?? 0) : 0;
$paymentTermsLabel = $paymentTermsDays > 0 ? "NET {$paymentTermsDays}" : 'Payment Terms';
$paymentDueAt = $order->payment_due_at
    ?? ($isPaymentTerms && $paymentTermsDays > 0
        ? $order->placed_at?->copy()->addDays($paymentTermsDays)
        : null);
$itemCount = $order->items->count();
$progressPct = $activeStep > 0 ? min(100, ($activeStep / (count($steps) - 1)) * 100) : 0;
$placedDisplay = optional($order->placed_at)->format('F j, Y \a\t g:i A') ?? 'Pending timestamp';
$grossTotal = (float) $order->grand_total;
$amountPaid = (float) $order->amount_paid;
$refundedTotal = (float) $order->refunded_total;
$netPaidTotal = max(0, $amountPaid - $refundedTotal);
$outstandingTotal = (float) $order->outstanding_total;
if ($outstandingTotal <= 0 && $amountPaid <= 0 && !in_array($order->status->value, ['cancelled', 'refunded'], true)) {
    $outstandingTotal = $grossTotal;
}
$paymentConfirmed = $amountPaid + 0.01 >= $grossTotal
    && $outstandingTotal <= 0.01
    && $refundedTotal + 0.01 < $amountPaid;
$paymentActionClosed = in_array($order->status->value, ['cancelled', 'refunded'], true);
$remoteCheckoutReady = (
    blank($order->shopify_push_error)
    && (
        $order->shopify_pushed_at !== null
        || ($order->payment_method->value === 'card' && filled($order->shopify_invoice_url))
        || ($order->payment_method->value !== 'card' && $order->shopify_order_id !== null)
    )
) || $paymentConfirmed;
@endphp
<div class="min-h-[80vh] bg-[#f7f6f2] px-4 py-10">
<div class="mx-auto max-w-6xl">

    @if (session('order_placed'))
        <section class="relative mb-8 overflow-hidden rounded-2xl border border-emerald-200 bg-white shadow-sm">
            <canvas id="vm-order-confetti-canvas" class="vm-order-confetti-canvas" aria-hidden="true"></canvas>
            <div class="h-2 bg-[#ffd400]"></div>
            <div class="grid gap-6 p-6 md:grid-cols-[1fr_auto] md:items-center md:p-8">
                <div class="flex gap-5">
                    <button type="button" id="vm-order-confirmation-check" class="flex h-14 w-14 shrink-0 cursor-pointer items-center justify-center rounded-2xl bg-emerald-600 text-white shadow-lg shadow-emerald-900/20 transition hover:scale-105 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-700 focus:ring-offset-2" aria-label="Play confetti">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                        </svg>
                    </button>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">Order received</p>
                        <h1 class="mt-2 text-2xl font-semibold tracking-tight text-stone-950 md:text-4xl">Thank you for your order.</h1>
                        <p class="mt-3 max-w-2xl text-sm leading-6 text-stone-600 md:text-base">
                            Your order was received successfully. You will receive an email with your order details, access instructions, and any required payment steps.
                        </p>
                    </div>
                </div>
                <div class="rounded-2xl border border-stone-200 bg-stone-50 px-5 py-4 text-sm">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Order number</p>
                    <p class="mt-1 text-2xl font-semibold text-stone-950">{{ $order->number }}</p>
                    <p class="mt-2 text-xs text-stone-500">Total {{ $order->currency }} ${{ number_format((float) $order->grand_total, 2) }}</p>
                </div>
            </div>
        </section>
    @endif

    @if (session('cart_success'))
        <div class="mb-6 rounded-xl bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-800 flex items-center gap-2">
            <svg class="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
            {{ session('cart_success') }}
        </div>
    @endif

    @if (session('payment_error'))
        <div class="mb-6 rounded-xl bg-rose-50 border border-rose-200 px-4 py-3 text-sm text-rose-800 flex items-center gap-2">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/></svg>
            {{ session('payment_error') }}
        </div>
    @endif

    @if ($paymentConfirmed)
        <div class="mb-6 rounded-xl bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-800 flex items-center gap-2">
            <svg class="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16Zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5Z" clip-rule="evenodd"/></svg>
            Payment confirmed. Your order is now awaiting fulfillment.
        </div>
    @endif

    <a href="{{ route('storefront.orders') }}" class="mb-4 inline-flex items-center gap-2 text-sm font-semibold text-stone-500 transition hover:text-stone-950">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
        All orders
    </a>

    <section class="mb-6 overflow-hidden rounded-3xl border border-stone-200 bg-white shadow-[0_24px_70px_rgba(28,25,23,0.10)]">
        <div class="grid lg:grid-cols-[1.4fr_0.9fr]">
            <div class="bg-[#007a55] p-5 text-white md:p-6">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-100/80">Retail Partner order status</p>
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white ring-1 ring-white/25">
                        <span class="h-2 w-2 rounded-full {{ $dotStyle }}"></span>
                        {{ $order->status->getLabel() }}
                    </span>
                </div>

                <div class="mt-4">
                    <h1 class="mt-2 text-4xl font-semibold tracking-tight md:text-5xl">{{ $order->number }}</h1>
                    <p class="mt-3 max-w-2xl text-sm leading-6 text-emerald-50/90">Placed {{ $placedDisplay }}</p>
                    <p class="mt-2 max-w-2xl text-sm leading-6 text-emerald-50/80">This is your official customer page for payment, fulfillment, shipment, and tracking updates.</p>
                </div>

                <div class="mt-6 flex flex-wrap gap-3">
                    <form method="POST" action="{{ route('storefront.order.reorder-id', ['order' => $order]) }}">
                        @csrf
                        <button type="submit"
                                class="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-[#007a55] shadow-lg shadow-emerald-950/20 transition hover:-translate-y-0.5 hover:bg-emerald-50">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>
                            Reorder these items
                        </button>
                    </form>
                </div>
            </div>

            <div class="grid divide-y divide-stone-200 bg-stone-50/80 sm:grid-cols-3 sm:divide-x sm:divide-y-0 lg:grid-cols-1 lg:divide-x-0 lg:divide-y">
                <div class="p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">{{ $isPaymentTerms ? $paymentTermsLabel.' amount' : 'Amount due' }}</p>
                    <p class="mt-1.5 text-xl font-semibold text-stone-950">{{ $order->currency }} ${{ number_format((float) $order->grand_total, 2) }}</p>
                    @if ($paymentDueAt)
                        <p class="mt-1 text-xs text-stone-500">Due {{ $paymentDueAt->format('F j, Y') }}</p>
                    @endif
                </div>
                <div class="p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Payment method</p>
                    <p class="mt-1.5 text-sm font-semibold text-stone-950">{{ $order->payment_method->getLabel() }}</p>
                </div>
                <div class="p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Items</p>
                    <p class="mt-1.5 text-sm font-semibold text-stone-950">{{ $itemCount }} item{{ $itemCount !== 1 ? 's' : '' }}</p>
                </div>
            </div>
        </div>
    </section>

    @if (!$cancelled)
        <section class="mb-6 rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="text-base font-semibold text-stone-950">Order progress</h2>
                    <p class="mt-1 text-sm text-stone-500">Current status: {{ $order->status->getLabel() }}</p>
                </div>
                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">{{ round($progressPct) }}% complete</span>
            </div>

            <div class="mt-5 overflow-x-auto pb-1">
                <div class="relative grid min-w-[720px] grid-cols-5 gap-3">
                    <div class="absolute left-8 right-8 top-5 h-1 rounded-full bg-stone-200">
                        <div class="h-full rounded-full bg-emerald-600 transition-all" style="width: {{ $progressPct }}%"></div>
                    </div>

                    @foreach ($steps as $i => $step)
                        @php
                            $done = $i < $activeStep;
                            $current = $i === $activeStep;
                        @endphp
                        <div class="relative z-10">
                            <div @class([
                                'flex h-11 w-11 items-center justify-center rounded-full border-4 border-white shadow-sm',
                                'bg-emerald-600 text-white' => $done || $current,
                                'bg-stone-200 text-stone-400' => ! $done && ! $current,
                            ])>
                                @if ($done)
                                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                                @else
                                    <span class="h-2.5 w-2.5 rounded-full bg-current"></span>
                                @endif
                            </div>
                            <p @class(['mt-3 text-sm font-semibold', 'text-emerald-700' => $done || $current, 'text-stone-400' => ! $done && ! $current])>{{ $step['label'] }}</p>
                            <p class="mt-1 text-xs text-stone-400">{{ $step['date'] ? $step['date']->format('M j, Y') : 'Pending' }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Items card --}}
    <div class="mb-5 overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
        <div class="flex flex-col gap-3 border-b border-stone-100 bg-white px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Order contents</p>
                <h2 class="mt-1 text-xl font-semibold text-stone-950">Items in this order</h2>
            </div>
            <span class="inline-flex w-fit items-center rounded-full bg-stone-100 px-3 py-1.5 text-sm font-semibold text-stone-600">{{ $itemCount }} item{{ $itemCount !== 1 ? 's' : '' }}</span>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-stone-50">
                    <tr class="border-b border-stone-100 text-left text-xs font-semibold uppercase tracking-[0.16em] text-stone-400">
                        <th class="px-6 py-3">Product</th>
                        <th class="px-4 py-3 whitespace-nowrap">SKU</th>
                        <th class="px-4 py-3 text-right whitespace-nowrap">Qty</th>
                        <th class="px-4 py-3 text-right whitespace-nowrap">Unit price</th>
                        <th class="px-6 py-3 text-right whitespace-nowrap">Line total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-stone-100">
                    @foreach ($order->items as $i)
                        <tr class="transition-colors hover:bg-[#fbfaf7]">
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-4">
                                    @if ($i->product?->image_url)
                                        <img src="{{ $i->product->image_url }}"
                                             alt="{{ $i->product_title }}"
                                             data-preview="{{ $i->product->image_url }}"
                                             class="product-thumb h-14 w-14 shrink-0 cursor-zoom-in rounded-xl border border-stone-200 object-cover shadow-sm">
                                    @else
                                        <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-stone-200 bg-stone-100">
                                            <svg class="h-5 w-5 text-stone-300" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Z"/></svg>
                                        </div>
                                    @endif
                                    <div class="min-w-0">
                                        <div class="font-semibold leading-snug text-stone-950">{{ $i->product_title }}</div>
                                        @if ($i->variant_title && $i->variant_title !== 'Default Title')
                                            <div class="mt-1 text-xs font-medium text-stone-500">{{ $i->variant_title }}</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="whitespace-nowrap px-4 py-5 font-mono text-xs text-stone-500">{{ $i->sku ?? '—' }}</td>
                            <td class="px-4 py-5 text-right">
                                <span class="inline-flex min-w-10 items-center justify-center rounded-full bg-stone-100 px-2.5 py-1 text-sm font-semibold tabular-nums text-stone-700">{{ $i->quantity }}</span>
                            </td>
                            <td class="whitespace-nowrap px-4 py-5 text-right tabular-nums text-stone-600">${{ number_format((float) $i->unit_price, 2) }}</td>
                            <td class="whitespace-nowrap px-6 py-5 text-right text-base font-semibold tabular-nums text-stone-950">${{ number_format((float) $i->line_total, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Totals --}}
        <div class="border-t border-stone-100 bg-stone-50 px-6 py-6">
            <div class="ml-auto max-w-sm space-y-3 text-sm">
                <div class="flex justify-between text-stone-500">
                    <span>Subtotal</span>
                    <span class="tabular-nums">${{ number_format((float) $order->subtotal, 2) }}</span>
                </div>
                @if ((float) $order->discount_total > 0)
                    <div class="flex justify-between text-emerald-700">
                        <span>Discount @if ($order->discount_code)<span class="text-xs text-emerald-600">({{ $order->discount_code }})</span>@endif</span>
                        <span class="tabular-nums">-${{ number_format((float) $order->discount_total, 2) }}</span>
                    </div>
                @endif
                <div class="flex justify-between text-stone-500">
                    <span>
                        Shipping
                        @if ($order->shipping_service_name)
                            <span class="block text-xs text-stone-400">
                                {{ collect([$order->shipping_carrier_name, $order->shipping_service_name])->filter()->join(' - ') }}
                            </span>
                        @endif
                    </span>
                    <span class="tabular-nums">${{ number_format((float) $order->shipping_total, 2) }}</span>
                </div>
                <div class="flex justify-between text-stone-500">
                    <span>Tax</span>
                    <span class="tabular-nums">${{ number_format((float) $order->tax_total, 2) }}</span>
                </div>
                <div class="flex justify-between border-t border-stone-200 pt-4 text-lg font-bold text-stone-950">
                    <span>Gross order total</span>
                    <span class="tabular-nums">${{ number_format((float) $order->grand_total, 2) }} <span class="text-xs font-normal text-stone-400">{{ $order->currency }}</span></span>
                </div>
                @if ($amountPaid > 0)
                    <div class="flex justify-between text-stone-600">
                        <span>Amount paid</span>
                        <span class="tabular-nums">${{ number_format($amountPaid, 2) }}</span>
                    </div>
                @endif
                @if ($refundedTotal > 0)
                    <div class="flex justify-between text-rose-700">
                        <span>Refunded</span>
                        <span class="tabular-nums">-${{ number_format($refundedTotal, 2) }}</span>
                    </div>
                    <div class="flex justify-between font-semibold text-stone-700">
                        <span>Net paid</span>
                        <span class="tabular-nums">${{ number_format($netPaidTotal, 2) }}</span>
                    </div>
                @endif
                <div class="flex justify-between font-semibold text-stone-950">
                    <span>Outstanding balance</span>
                    <span class="tabular-nums">${{ number_format(max(0, $outstandingTotal), 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Payment instructions --}}
    @if ($paymentConfirmed)
        <section class="mb-5 rounded-2xl border border-emerald-200 bg-emerald-50 p-6 shadow-sm">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Payment confirmed</p>
            <h2 class="mt-2 text-xl font-semibold text-emerald-950">No further payment is required.</h2>
            <p class="mt-2 max-w-3xl text-sm leading-6 text-emerald-800">
                We received the full {{ $order->currency }} ${{ number_format($grossTotal, 2) }} payment for order {{ $order->number }}. Bank details are hidden to prevent a duplicate transfer.
            </p>
        </section>
    @elseif ($paymentActionClosed)
        <section class="mb-5 rounded-2xl border border-stone-200 bg-stone-100 p-6 shadow-sm">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-stone-600">{{ ucfirst($order->status->value) }} order</p>
            <h2 class="mt-2 text-xl font-semibold text-stone-950">No payment action is available.</h2>
            <p class="mt-2 max-w-3xl text-sm leading-6 text-stone-700">
                This order is {{ $order->status->value }}. Payment links and bank details are hidden.
            </p>
        </section>
    @elseif (! $remoteCheckoutReady)
        <section class="mb-5 rounded-2xl border border-amber-200 bg-amber-50 p-6 shadow-sm">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700">Checkout synchronization pending</p>
            <h2 class="mt-2 text-xl font-semibold text-amber-950">Payment instructions are not available yet.</h2>
            <p class="mt-2 max-w-3xl text-sm leading-6 text-amber-800">
                The payment and inventory service has not confirmed this order. No payment instructions or confirmation email were released. Return to checkout and retry safely.
            </p>
            <a href="{{ route('storefront.checkout') }}" class="mt-4 inline-flex rounded-xl bg-amber-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-amber-950">
                Retry checkout
            </a>
        </section>
    @else
    <section class="mb-5 overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
        <div class="border-b border-stone-100 bg-stone-950 px-6 py-5 text-white">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex items-start gap-4">
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#ffd400] text-stone-950">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15A2.25 2.25 0 0 0 2.25 6.75v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-stone-300">Payment instructions</p>
                        <h2 class="mt-1 text-2xl font-semibold tracking-tight">{{ $isPaymentTerms ? $paymentTermsLabel.' payment terms' : 'Pay by '.$order->payment_method->getLabel() }}</h2>
                        <p class="mt-2 max-w-2xl text-sm leading-6 text-stone-300">
                            @if ($isPaymentTerms)
                                Payment is due under your approved {{ $paymentTermsLabel }} terms. No immediate bank transfer is required.
                            @elseif ($order->payment_method->value === 'card')
                                Use the secure payment button on this page so the Retail Partner order can be updated automatically.
                            @else
                                Please include order {{ $order->number }} in the transfer memo so our finance team can match your payment quickly.
                            @endif
                        </p>
                    </div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/10 px-5 py-4 text-sm">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-300">Amount due</p>
                    <p class="mt-1 text-2xl font-semibold">{{ $order->currency }} ${{ number_format(max(0, $outstandingTotal), 2) }}</p>
                    @if ($paymentDueAt)
                        <p class="mt-1 text-xs text-stone-300">Due {{ $paymentDueAt->format('F j, Y') }}</p>
                    @endif
                    @if ($order->po_number)
                        <p class="mt-1 text-xs text-stone-300">PO {{ $order->po_number }}</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="p-6">
            @if ($order->payment_method->value === 'invoice')
                <div class="rounded-2xl border border-amber-200 bg-amber-50 p-5">
                    <p class="text-sm font-semibold text-amber-900">{{ $paymentTermsLabel }} terms</p>
                    <p class="mt-2 text-sm text-amber-800">{{ $invoiceInstructions['net_terms'] ?? 'Net terms' }}</p>
                    @if ($paymentDueAt)
                        <p class="mt-1 text-sm font-semibold text-amber-900">Payment due {{ $paymentDueAt->format('F j, Y') }}</p>
                    @endif
                    <p class="mt-1 text-sm leading-6 text-amber-800">{{ $invoiceInstructions['notes'] ?? 'Payment is due per your approved credit terms.' }}</p>
                </div>
            @elseif ($order->payment_method->value === 'card')
                <div class="rounded-2xl border border-sky-200 bg-sky-50 p-5">
                    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                        <div>
                            <p class="text-sm font-semibold text-sky-950">Secure card payment</p>
                            <p class="mt-2 max-w-2xl text-sm leading-6 text-sky-800">
                                The secure card processor handles your card details. Retail Partner never stores them.
                            </p>
                        </div>
                        @if ($order->status->value === 'payment_pending')
                            <form method="POST" action="{{ route('storefront.order.pay-card-id', ['order' => $order]) }}">
                                @csrf
                                <button type="submit" class="inline-flex w-full items-center justify-center rounded-xl bg-sky-700 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-sky-900/20 transition hover:bg-sky-800 lg:w-auto">
                                    Pay securely with card
                                </button>
                            </form>
                        @else
                            <span class="inline-flex rounded-full bg-white px-4 py-2 text-sm font-semibold text-sky-800 ring-1 ring-sky-200">Payment confirmed</span>
                        @endif
                    </div>
                </div>
            @else
                <div class="grid gap-4 lg:grid-cols-2">
                    @foreach ($paymentBlocks as $block)
                        <article class="rounded-2xl border border-stone-200 bg-stone-50/70 p-5">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700">{{ $block['label'] ?? 'Bank transfer' }}</p>
                                    <h3 class="mt-1 text-lg font-semibold text-stone-950">{{ $block['bank_name'] ?? 'Bank transfer' }}</h3>
                                </div>
                                <span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-stone-500 shadow-sm">Bank details</span>
                            </div>

                            <dl class="mt-5 space-y-3 text-sm">
                                @foreach ([
                                    'Beneficiary' => $block['beneficiary_name'] ?? null,
                                    'Beneficiary address' => $block['beneficiary_address'] ?? null,
                                    'Routing / ABA' => $block['routing_number'] ?? null,
                                    'Account number' => $block['account_number'] ?? null,
                                    'SWIFT / BIC' => $block['swift'] ?? null,
                                    'Memo / Reference' => $block['memo_reference'] ?? $order->number,
                                ] as $label => $value)
                                    @if (! empty($value))
                                        <div class="rounded-xl border border-stone-200 bg-white px-4 py-3">
                                            <dt class="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone-400">{{ $label }}</dt>
                                            <dd class="mt-1 flex flex-wrap items-center justify-between gap-2 font-medium text-stone-900">
                                                <span class="break-all">{{ $value }}</span>
                                                <button type="button"
                                                        data-copy="{{ $value }}"
                                                        class="rounded-lg border border-stone-200 px-2.5 py-1 text-xs font-semibold text-stone-500 transition hover:border-emerald-200 hover:bg-emerald-50 hover:text-emerald-700">
                                                    Copy
                                                </button>
                                            </dd>
                                        </div>
                                    @endif
                                @endforeach
                            </dl>

                            @if (! empty($block['notes']))
                                <p class="mt-4 rounded-xl bg-white px-4 py-3 text-xs leading-5 text-stone-600">{{ $block['notes'] }}</p>
                            @endif
                        </article>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
    @endif

    {{-- Meta grid --}}
    <div class="grid gap-4 sm:grid-cols-2">

        {{-- Ship to --}}
        <div class="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
            <div class="mb-4 flex items-center gap-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-50 text-violet-700 ring-1 ring-violet-100">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/></svg>
                </div>
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Ship to</p>
                    <h3 class="mt-0.5 text-base font-semibold text-stone-950">Delivery address</h3>
                </div>
            </div>
            @if ($order->ship_line1)
                <div class="space-y-1 rounded-2xl bg-stone-50 px-4 py-4 text-sm leading-relaxed text-stone-700">
                    <div class="font-semibold text-stone-950">{{ $order->ship_contact_name }}</div>
                    <div>{{ $order->ship_line1 }}</div>
                    @if ($order->ship_line2)<div>{{ $order->ship_line2 }}</div>@endif
                    <div>{{ $order->ship_city }}, {{ $order->ship_state }} {{ $order->ship_postal_code }}</div>
                    <div class="text-stone-400">{{ $order->ship_country_code }}</div>
                </div>
            @else
                <p class="text-sm text-stone-400">Not specified</p>
            @endif
        </div>

        {{-- Tracking or Notes --}}
        @if ($order->tracking_number)
            <div class="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/></svg>
                    </div>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Tracking</p>
                        <h3 class="mt-0.5 text-base font-semibold text-stone-950">Shipment details</h3>
                    </div>
                </div>
                <p class="text-sm font-semibold text-stone-800">{{ $order->tracking_carrier }}</p>
                <p class="mt-2 rounded-xl bg-stone-50 px-3 py-2 font-mono text-sm font-semibold break-all text-stone-950">{{ $order->tracking_number }}</p>
                @if ($order->shipped_at)
                    <p class="mt-2 text-xs text-stone-400">Shipped {{ $order->shipped_at->format('M j, Y') }}</p>
                @endif
            </div>
        @elseif ($order->customer_notes)
            <div class="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 text-amber-700 ring-1 ring-amber-100">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
                    </div>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Order notes</p>
                        <h3 class="mt-0.5 text-base font-semibold text-stone-950">Notes for our team</h3>
                    </div>
                </div>
                <p class="rounded-2xl bg-stone-50 px-4 py-4 text-sm leading-6 text-stone-700">{{ $order->customer_notes }}</p>
            </div>
        @else
            <div class="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
                <div class="mb-4 flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-stone-100 text-stone-500">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12M8.25 17.25h12M3.75 6.75h.008v.008H3.75V6.75Zm0 5.25h.008v.008H3.75V12Zm0 5.25h.008v.008H3.75v-.008Z"/></svg>
                    </div>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Order notes</p>
                        <h3 class="mt-0.5 text-base font-semibold text-stone-950">No notes added</h3>
                    </div>
                </div>
                <p class="text-sm leading-6 text-stone-500">There are no customer notes or tracking updates for this order yet.</p>
            </div>
        @endif

    </div>

</div>
</div>

@if (session('order_placed'))
    <script>
    (() => {
        const canvas = document.getElementById('vm-order-confetti-canvas');
        const checkIcon = document.getElementById('vm-order-confirmation-check');
        if (! canvas) {
            return;
        }

        const context = canvas.getContext('2d');
        const colors = ['#047857', '#ffd400', '#ef4444', '#0f766e', '#84cc16', '#eab308', '#14b8a6', '#f97316', '#ffffff'];
        let pieces = [];
        let frameId = null;

        const resize = () => {
            const ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = Math.floor(window.innerWidth * ratio);
            canvas.height = Math.floor(window.innerHeight * ratio);
            canvas.style.width = `${window.innerWidth}px`;
            canvas.style.height = `${window.innerHeight}px`;
            context.setTransform(ratio, 0, 0, ratio, 0, 0);
        };

        const origin = () => {
            if (! checkIcon) {
                return {
                    x: window.innerWidth / 2,
                    y: window.innerHeight * 0.28,
                };
            }

            const rect = checkIcon.getBoundingClientRect();

            return {
                x: rect.left + rect.width / 2,
                y: rect.top + rect.height / 2,
            };
        };

        const makePiece = (source) => {
            const angle = (-118 + Math.random() * 56) * (Math.PI / 180);
            const power = 5.5 + Math.random() * 4.5;

            return {
                x: source.x,
                y: source.y,
                width: 4 + Math.random() * 8,
                height: 6 + Math.random() * 14,
                color: colors[Math.floor(Math.random() * colors.length)],
                vx: Math.cos(angle) * power,
                vy: Math.sin(angle) * power,
                gravity: 0.18 + Math.random() * 0.08,
                drag: 0.985 + Math.random() * 0.006,
                wobble: Math.random() * Math.PI * 2,
                wobbleSpeed: 0.035 + Math.random() * 0.06,
                rotation: Math.random() * Math.PI * 2,
                rotationSpeed: -0.13 + Math.random() * 0.26,
            };
        };

        const seed = (count) => {
            const source = origin();
            pieces = Array.from({ length: count }, () => makePiece(source));
        };

        const draw = () => {
            context.clearRect(0, 0, window.innerWidth, window.innerHeight);

            pieces.forEach((piece) => {
                piece.vx *= piece.drag;
                piece.vy = (piece.vy * piece.drag) + piece.gravity;
                piece.x += piece.vx + Math.sin(piece.wobble) * 0.8;
                piece.y += piece.vy;
                piece.wobble += piece.wobbleSpeed;
                piece.rotation += piece.rotationSpeed;

                context.save();
                context.translate(piece.x, piece.y);
                context.rotate(piece.rotation);
                context.fillStyle = piece.color;
                context.globalAlpha = 0.94;
                context.fillRect(-piece.width / 2, -piece.height / 2, piece.width, piece.height);
                context.restore();
            });

            pieces = pieces.filter((piece) => (
                piece.y < window.innerHeight + 40
                && piece.x > -80
                && piece.x < window.innerWidth + 80
            ));

            if (pieces.length > 0) {
                frameId = window.requestAnimationFrame(draw);
                return;
            }

            context.clearRect(0, 0, window.innerWidth, window.innerHeight);
            frameId = null;
        };

        const celebrate = () => {
            if (frameId !== null) {
                window.cancelAnimationFrame(frameId);
            }

            resize();
            seed(70);
            draw();
        };

        window.addEventListener('resize', resize);
        checkIcon?.addEventListener('click', celebrate);
        window.setTimeout(celebrate, 150);
    })();
    </script>
@endif

<div id="img-preview" style="display:none;position:fixed;z-index:9999;pointer-events:none;">
    <img id="img-preview-src" src="" alt="" style="width:192px;height:192px;object-fit:cover;border-radius:12px;border:1px solid #e7e5e4;box-shadow:0 10px 25px rgba(0,0,0,.15);">
</div>

<script>
(function () {
    document.querySelectorAll('[data-copy]').forEach(function (button) {
        button.addEventListener('click', function () {
            var text = button.getAttribute('data-copy') || '';
            navigator.clipboard.writeText(text).then(function () {
                var original = button.textContent;
                button.textContent = 'Copied';
                setTimeout(function () {
                    button.textContent = original;
                }, 1400);
            });
        });
    });

    var preview = document.getElementById('img-preview');
    var previewImg = document.getElementById('img-preview-src');

    document.querySelectorAll('.product-thumb').forEach(function (thumb) {
        thumb.addEventListener('mouseenter', function () {
            previewImg.src = thumb.dataset.preview;
            preview.style.display = 'block';
        });
        thumb.addEventListener('mousemove', function (e) {
            var x = e.clientX + 16;
            var y = e.clientY + 16;
            if (x + 200 > window.innerWidth)  x = e.clientX - 208;
            if (y + 200 > window.innerHeight) y = e.clientY - 208;
            preview.style.left = x + 'px';
            preview.style.top  = y + 'px';
        });
        thumb.addEventListener('mouseleave', function () {
            preview.style.display = 'none';
        });
    });
}());
</script>

@endsection