Additional/resources/views/ops/order-detail.blade.php

@extends('layouts.app')

@section('content')
<div class="w-full min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
    <!-- Mobile-friendly Header -->
    <div class="mb-8">
        <h1 class="text-4xl font-bold mb-2 break-words">{{ $order->order_number }}</h1>
        <p class="text-gray-600 text-sm break-all">{{ $order->uuid }}</p>
    </div>

    <!-- Order Summary Card -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
            <div>
                <p class="text-sm text-gray-600 font-semibold">Status</p>
                <p class="text-xl font-bold capitalize mt-2">{{ str_replace('_', ' ', $order->status) }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600 font-semibold">Order Type</p>
                <p class="text-xl font-bold mt-2">{{ $order->is_custom_order ? 'Custom' : 'Standard' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600 font-semibold">Customer</p>
                <p class="text-xl font-bold mt-2">{{ $order->user->name ?? 'N/A' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600 font-semibold">Created</p>
                <p class="text-xl font-bold mt-2">{{ $order->created_at->format('M d, Y') }}</p>
            </div>
        </div>
    </div>

    <!-- State-Specific Actions -->
    @if($order->status === 'inspection' || $order->status === 'printing')
        @include('ops.actions.inspection')
    @elseif($order->status === 'packing')
        @include('ops.actions.packing')
    @elseif(in_array($order->status, ['ready_to_ship', 'awaiting_collection', 'in_transit']))
        @include('ops.actions.read-only')
    @else
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <p class="text-yellow-800">No actions available for this order status.</p>
        </div>
    @endif

    <!-- Order Items -->
    <div class="mt-8 bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold mb-4">Order Items</h2>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b">
                        <th class="text-left py-3 px-4">Product</th>
                        <th class="text-left py-3 px-4">Type</th>
                        <th class="text-left py-3 px-4">Quantity</th>
                        <th class="text-left py-3 px-4">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($order->items as $item)
                        <tr class="border-b hover:bg-gray-50">
                            <td class="py-3 px-4">{{ $item->product->name ?? 'N/A' }}</td>
                            <td class="py-3 px-4">{{ $item->product_type ?? 'N/A' }}</td>
                            <td class="py-3 px-4">{{ $item->quantity }}</td>
                            <td class="py-3 px-4">R{{ number_format($item->unit_price * $item->quantity, 2) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="py-3 px-4 text-center text-gray-500">No items</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Packing Details (if available) -->
    @if($order->packing_completed_at)
        <div class="mt-8 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-bold mb-4">Packing Details</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <p class="text-sm text-gray-600">Width</p>
                    <p class="text-lg font-semibold">{{ $order->packing_width }} cm</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Length</p>
                    <p class="text-lg font-semibold">{{ $order->packing_length }} cm</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Weight</p>
                    <p class="text-lg font-semibold">{{ $order->packing_weight }} kg</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Packed At</p>
                    <p class="text-lg font-semibold">{{ $order->packing_completed_at ? $order->packing_completed_at->format('M d, H:i') : 'Not packed' }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Shipment Details (if available) -->
    @if($order->courier_waybill_id)
        <div class="mt-8 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-bold mb-4">Shipment Details</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div>
                    <p class="text-sm text-gray-600">Waybill ID</p>
                    <p class="text-lg font-semibold font-mono">{{ $order->courier_waybill_id }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Tracking Number</p>
                    <p class="text-lg font-semibold font-mono">{{ $order->courier_tracking_number ?? 'N/A' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600">Status</p>
                    <p class="text-lg font-semibold capitalize">{{ str_replace('_', ' ', $order->courier_status ?? 'pending') }}</p>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection