@extends('layouts.admin')
@section('title', 'Order ' . $order->order_number)

@section('content')
<div class="bg-white rounded-xl border border-gray-100 p-5 mb-6">
    <div class="flex justify-between items-start">
        <div>
            <h2 class="font-semibold text-lg">{{ $order->order_number }} — Token #{{ $order->token_number }}</h2>
            <p class="text-sm text-gray-500">
                {{ $order->created_at->format('d M Y, h:i A') }} •
                @if ($order->source === 'mobile')
                    Mobile • Staff: {{ $order->placedByStaff->name ?? '—' }} • Table: {{ $order->restaurantTable->name ?? '—' }}
                @else
                    Kiosk: {{ $order->kiosk->name ?? '—' }}
                @endif
            </p>
        </div>
        <span class="px-3 py-1 rounded-full text-sm bg-gray-100">{{ \App\Models\Order::STATUS_LABELS[$order->status] ?? $order->status }}</span>
    </div>

    <table class="w-full text-sm mt-6">
        <thead>
            <tr class="text-left text-gray-500 border-b border-gray-100">
                <th class="py-2">Item</th><th>Qty</th><th>Price</th><th>Total</th>
            </tr>
        </thead>
        <tbody>
        @foreach ($order->items as $item)
            <tr class="border-b border-gray-50">
                <td class="py-2">{{ $item->name }}</td>
                <td>{{ $item->qty }}</td>
                <td>₹{{ number_format($item->price, 2) }}</td>
                <td>₹{{ number_format($item->line_total, 2) }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>

    <div class="mt-4 text-sm space-y-1 max-w-xs ml-auto">
        <div class="flex justify-between"><span>Subtotal</span><span>₹{{ number_format($order->subtotal, 2) }}</span></div>
        <div class="flex justify-between"><span>Packing</span><span>₹{{ number_format($order->packing_charge, 2) }}</span></div>
        <div class="flex justify-between"><span>Discount</span><span>-₹{{ number_format($order->discount, 2) }}</span></div>
        <div class="flex justify-between"><span>GST</span><span>₹{{ number_format($order->gst, 2) }}</span></div>
        <div class="flex justify-between font-semibold border-t border-gray-100 pt-1"><span>Grand Total</span><span>₹{{ number_format($order->grand_total, 2) }}</span></div>
    </div>
</div>

<div class="bg-white rounded-xl border border-gray-100 p-5">
    <h2 class="font-semibold mb-3">Update Status</h2>
    <form method="POST" action="{{ route('admin.orders.status', $order) }}" class="flex gap-3">
        @csrf
        <select name="status" class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
            <option value="preparing" {{ $order->status === 'preparing' ? 'selected' : '' }}>Preparing</option>
            <option value="ready" {{ $order->status === 'ready' ? 'selected' : '' }}>Ready</option>
            <option value="completed" {{ $order->status === 'completed' ? 'selected' : '' }}>Completed</option>
            <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
        </select>
        <button class="bg-orange-500 text-white rounded-lg px-4 py-2 text-sm font-medium">Update</button>
    </form>
</div>
@endsection