Additional/resources/views/ops/actions/read-only.blade.php

<!-- 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-4">📋 Order Status: {{ str_replace('_', ' ', ucfirst($order->status)) }}</h2>
            
            @if($order->status === 'ready_to_ship')
                <div class="bg-white border-l-4 border-blue-500 p-4 rounded mb-6">
                    <p class="text-gray-700 font-semibold text-lg mb-4">
                        ✓ Shipment created and ready to print labels/stickers
                    </p>
                    
                    <div class="space-y-3">
                        <p class="text-gray-700 font-semibold">Next Steps:</p>
                        <ol class="list-decimal list-inside space-y-2 text-gray-700">
                            <li>Print the shipment sticker label</li>
                            <li>Print the shipment waybill/label</li>
                            <li>Apply labels to parcel</li>
                            <li>Move parcel to collection bay</li>
                            <li>Click "Ready for Collection" button below</li>
                        </ol>
                    </div>

                    <button 
                        type="button"
                        onclick="markReadyForCollection('{{ $order->uuid }}')"
                        class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
                    >
                        ✓ Ready for Collection
                    </button>
                </div>
            @elseif($order->status === 'awaiting_collection')
                <div class="bg-white border-l-4 border-blue-500 p-4 rounded mb-6">
                    <p class="text-gray-700 font-semibold text-lg mb-4">
                        📦 Parcel awaiting collection from courier
                    </p>
                    @if($order->courier_waybill_id)
                        <p class="text-gray-700 mt-4">
                            <strong>Waybill:</strong> <code class="bg-gray-100 px-3 py-2 rounded block mt-2 text-base break-all">{{ $order->courier_waybill_id }}</code>
                        </p>
                    @endif
                    
                    <!-- Re-download PDFs Button -->
                    @if($order->courier_shipment_id)
                        <button 
                            type="button"
                            onclick="redownloadPdfs('{{ $order->uuid }}')"
                            class="mt-6 w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
                        >
                            🔄 Re-download Shipment PDFs
                        </button>
                        <p class="text-gray-600 text-sm mt-3">If labels are damaged, re-download them.</p>
                    @endif
                </div>
            @elseif($order->status === 'in_transit')
                <div class="bg-white border-l-4 border-green-500 p-4 rounded mb-6">
                    <p class="text-gray-700 font-semibold text-lg mb-4">
                        ✈️ Parcel in transit to customer
                    </p>
                    @if($order->courier_tracking_number)
                        <p class="text-gray-700 mt-4">
                            <strong>Tracking Number:</strong> <code class="bg-gray-100 px-3 py-2 rounded block mt-2 text-base break-all">{{ $order->courier_tracking_number }}</code>
                        </p>
                    @endif
                    
                    <!-- Re-download PDFs Button -->
                    @if($order->courier_shipment_id)
                        <button 
                            type="button"
                            onclick="redownloadPdfs('{{ $order->uuid }}')"
                            class="mt-6 w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
                        >
                            🔄 Re-download Shipment PDFs
                        </button>
                        <p class="text-gray-600 text-sm mt-3">If labels are damaged, re-download them.</p>
                    @endif
                </div>
            @else
                <div class="bg-white border-l-4 border-gray-500 p-4 rounded">
                    <p class="text-gray-700 font-semibold text-lg">
                        Order is processing through the fulfillment pipeline
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
async function markReadyForCollection(orderUuid) {
    if (!confirm('Mark order as ready for collection?')) {
        return;
    }
    
    const button = document.querySelector('[onclick*="markReadyForCollection"]');
    button.disabled = true;
    button.classList.add('opacity-50');
    const originalText = button.innerText;
    button.innerText = '⏳ Processing...';
    
    try {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                         document.querySelector('input[name="_token"]')?.value;
        
        if (!csrfToken) {
            throw new Error('CSRF token not found on page');
        }
        
        const response = await fetch(`/ops/orders/${orderUuid}/ready-for-collection`, {
            method: 'POST',
            headers: {
                'X-CSRF-Token': csrfToken,
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({}),
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✓ Order moved to Awaiting Collection');
            location.reload();
        } else {
            alert('✗ Failed:\n' + data.message);
        }
    } catch (error) {
        alert('✗ Error: ' + error.message);
    } finally {
        button.disabled = false;
        button.classList.remove('opacity-50');
        button.innerText = originalText;
    }
}

async function redownloadPdfs(orderUuid) {
    if (!confirm('Re-download shipment PDFs from Shiplogic API?')) {
        return;
    }
    
    const button = document.querySelector('[onclick*="redownloadPdfs"]');
    button.disabled = true;
    button.classList.add('opacity-50');
    const originalText = button.innerText;
    button.innerText = '⏳ Downloading...';
    
    try {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                         document.querySelector('input[name="_token"]')?.value;
        
        if (!csrfToken) {
            throw new Error('CSRF token not found on page');
        }
        
        const response = await fetch(`/ops/orders/${orderUuid}/redownload-pdfs`, {
            method: 'POST',
            headers: {
                'X-CSRF-Token': csrfToken,
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({}),
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('✓ PDFs re-downloaded successfully!');
            location.reload();
        } else {
            alert('✗ Failed to re-download PDFs:\n' + data.message);
        }
    } catch (error) {
        alert('✗ Error: ' + error.message);
    } finally {
        button.disabled = false;
        button.classList.remove('opacity-50');
        button.innerText = originalText;
    }
}
</script>