@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold mb-2">Order {{ $order->order_number }}</h1>
        <p class="text-gray-600">{{ $order->uuid }}</p>
    </div>

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

        <!-- QR Code -->
        <div class="border-t pt-6">
            <div class="flex items-start justify-between mb-3">
                <div>
                    <p class="text-sm text-gray-600 mb-3">Scan to access this order:</p>
                </div>
                <a href="{{ route('ops.order.sticker.download', $order) }}" class="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
                    📥 Download Sticker (A6 PDF)
                </a>
            </div>
            <div class="inline-block bg-gray-50 p-4 rounded border">
                {!! file_get_contents(storage_path("app/public/qr-codes/{$order->uuid}.svg")) !!}
            </div>
        </div>
    </div>

    <!-- State-Specific Actions -->
    @if($order->status === 'inspection')
        @include('ops.actions.inspection')
    @elseif($order->status === 'packing' || $order->status === 'printing')
        @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