@extends('layouts.app')

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

@section('content')
<div class="max-w-2xl space-y-6">
    @if(session('message'))
        <div class="rounded-lg bg-emerald-50 text-emerald-800 px-4 py-3">{{ session('message') }}</div>
    @endif
    @if(session('error'))
        <div class="rounded-lg bg-red-50 text-red-800 px-4 py-3">{{ session('error') }}</div>
    @endif
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <dl class="grid gap-4 sm:grid-cols-2">
            <div>
                <dt class="text-sm font-medium text-slate-500">Order number</dt>
                <dd class="mt-1 text-slate-900">{{ $order->order_number }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Status</dt>
                <dd class="mt-1">
                    <span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $order->status === 'paid' ? 'bg-emerald-100 text-emerald-800' : ($order->status === 'completed' ? 'bg-slate-100 text-slate-800' : 'bg-amber-100 text-amber-800') }}">{{ $order->status }}</span>
                </dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Customer</dt>
                <dd class="mt-1 text-slate-900">{{ $order->user?->email ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Date</dt>
                <dd class="mt-1 text-slate-900">{{ $order->created_at->format('M j, Y g:i A') }}</dd>
            </div>
            <div class="sm:col-span-2">
                <dt class="text-sm font-medium text-slate-500">Total</dt>
                <dd class="mt-1 text-xl font-semibold text-slate-900">{{ number_format($order->total, 2) }}</dd>
            </div>
        </dl>
        @can('update', $order)
        <div class="mt-6 flex flex-wrap gap-3 border-t border-slate-100 pt-4">
            @if($order->status === 'pending')
                <form action="{{ route('orders.mark-paid', $order) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-500">Mark as paid</button>
                </form>
            @endif
            @if($order->status === 'paid')
                <form action="{{ route('orders.mark-completed', $order) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="rounded-lg bg-slate-700 px-4 py-2 text-sm font-medium text-white hover:bg-slate-600">Mark as completed</button>
                </form>
            @endif
        </div>
        @endcan
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-lg font-semibold text-slate-900">Items</h2>
        @if(empty($order->items) || !is_array($order->items))
            <p class="mt-2 text-sm text-slate-500">No line items.</p>
        @else
            <table class="mt-4 min-w-full divide-y divide-slate-200">
                <thead>
                    <tr>
                        <th class="px-4 py-2 text-left text-sm font-medium text-slate-700">Product</th>
                        <th class="px-4 py-2 text-right text-sm font-medium text-slate-700">Price</th>
                        <th class="px-4 py-2 text-right text-sm font-medium text-slate-700">Qty</th>
                        <th class="px-4 py-2 text-right text-sm font-medium text-slate-700">Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($order->items as $item)
                    <tr class="border-t border-slate-100">
                        <td class="px-4 py-3 text-sm text-slate-900">{{ $item['name'] ?? '—' }}</td>
                        <td class="px-4 py-3 text-right text-sm text-slate-600">{{ number_format($item['price'] ?? 0, 2) }}</td>
                        <td class="px-4 py-3 text-right text-sm text-slate-600">{{ $item['quantity'] ?? 0 }}</td>
                        <td class="px-4 py-3 text-right text-sm text-slate-900">{{ number_format(($item['price'] ?? 0) * ($item['quantity'] ?? 0), 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
    <div>
        <a href="{{ route('orders.index') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">← Back to orders</a>
    </div>
</div>
@endsection