@extends('layouts.public')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold">Order {{ $order->order_no }}</h1>
        <p class="text-sm text-gray-600">Created: {{ $order->created_at->format('Y-m-d H:i') }}</p>
    </div>
    <a href="{{ route('admin.orders.index') }}" class="underline">Back</a>
</div>

<div class="grid lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
        <div class="bg-white rounded-xl shadow p-6">
            <h2 class="font-semibold mb-4">Items</h2>

            <div class="space-y-3 text-sm">
                @foreach($order->items as $item)
                    <div class="flex justify-between">
                        <div>
                            <div class="font-medium">{{ $item->product->name ?? 'Deleted product' }}</div>
                            <div class="text-xs text-gray-500">
                                Qty: {{ $item->quantity }} × RM {{ number_format($item->unit_price_cents/100, 2) }}
                            </div>
                        </div>
                        <div class="font-medium">
                            RM {{ number_format($item->line_total_cents/100, 2) }}
                        </div>
                    </div>
                @endforeach
            </div>

            <hr class="my-4">

            <div class="flex justify-between font-bold">
                <div>Total</div>
                <div>RM {{ number_format($order->total_cents/100, 2) }}</div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow p-6">
            <h2 class="font-semibold mb-4">Payment (FPX)</h2>

            @if($order->payment)
                <div class="text-sm space-y-2">
                    <div><span class="text-gray-500">Provider:</span> {{ $order->payment->provider }}</div>
                    <div><span class="text-gray-500">Status:</span> {{ $order->payment->status }}</div>
                    <div><span class="text-gray-500">Reference:</span> {{ $order->payment->reference ?? '-' }}</div>

                    @if($order->payment->payload)
                        <details class="mt-3">
                            <summary class="cursor-pointer text-sm underline">View payload</summary>
                            <pre class="mt-2 p-3 bg-gray-50 rounded text-xs overflow-auto">{{ json_encode($order->payment->payload, JSON_PRETTY_PRINT) }}</pre>
                        </details>
                    @endif
                </div>
            @else
                <div class="text-sm text-gray-600">No payment record found.</div>
            @endif
        </div>
    </div>

    <div class="space-y-6">
        <div class="bg-white rounded-xl shadow p-6">
            <h2 class="font-semibold mb-4">Customer</h2>
            <div class="text-sm space-y-2">
                <div><span class="text-gray-500">Name:</span> {{ $order->customer_name ?? '-' }}</div>
                <div><span class="text-gray-500">Phone:</span> {{ $order->customer_phone ?? '-' }}</div>
                <div><span class="text-gray-500">User ID:</span> {{ $order->user_id }}</div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow p-6">
            <h2 class="font-semibold mb-4">Order Status</h2>

            <div class="mb-3 text-sm">
                Current: <span class="px-2 py-1 rounded bg-gray-100">{{ $order->status }}</span>
            </div>

            <form method="POST" action="{{ route('admin.orders.status', $order) }}" class="space-y-3">
                @csrf
                @method('PATCH')

                <select name="status" class="w-full rounded border-gray-300">
                    @foreach(['pending','payment_pending','paid','failed','cancelled'] as $st)
                        <option value="{{ $st }}" {{ $order->status === $st ? 'selected' : '' }}>
                            {{ $st }}
                        </option>
                    @endforeach
                </select>

                <button class="w-full px-4 py-2 rounded bg-black text-white">
                    Update Status
                </button>
            </form>

            <p class="text-xs text-gray-500 mt-3">
                While FPX is stubbed, you can manually set status to “paid” after you confirm payment.
            </p>
        </div>
    </div>
</div>
@endsection