<!-- Read-Only State -->
<div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-6 mb-8">
    <div class="flex items-start">
        <div class="flex-1">
            <h2 class="text-2xl font-bold text-blue-900 mb-2">📋 Order Status: Read-Only</h2>
            <p class="text-blue-800 mb-4">
                This order is in the <strong>{{ str_replace('_', ' ', ucfirst($order->status)) }}</strong> phase.
                No actions are available at this stage.
            </p>
            
            @if($order->status === 'ready_to_ship')
                <div class="bg-white border-l-4 border-blue-500 p-4 rounded">
                    <p class="text-gray-700">
                        <strong>Next Step:</strong> Move Trello card to "Ready to Ship" to trigger automatic shipment creation.
                    </p>
                </div>
            @elseif($order->status === 'awaiting_collection')
                <div class="bg-white border-l-4 border-blue-500 p-4 rounded">
                    <p class="text-gray-700">
                        <strong>Status:</strong> Parcel is awaiting collection from courier.
                    </p>
                    @if($order->courier_waybill_id)
                        <p class="text-gray-700 mt-2">
                            <strong>Waybill:</strong> <code class="bg-gray-100 px-2 py-1 rounded">{{ $order->courier_waybill_id }}</code>
                        </p>
                    @endif
                </div>
            @elseif($order->status === 'in_transit')
                <div class="bg-white border-l-4 border-green-500 p-4 rounded">
                    <p class="text-gray-700">
                        <strong>Status:</strong> Parcel is in transit to the customer.
                    </p>
                    @if($order->courier_tracking_number)
                        <p class="text-gray-700 mt-2">
                            <strong>Tracking:</strong> <code class="bg-gray-100 px-2 py-1 rounded">{{ $order->courier_tracking_number }}</code>
                        </p>
                    @endif
                </div>
            @else
                <div class="bg-white border-l-4 border-gray-500 p-4 rounded">
                    <p class="text-gray-700">
                        The order is progressing through the fulfillment pipeline.
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>
