<div class="space-y-4">
    <!-- Order Information -->
    <div class="border-b border-gray-200 pb-4">
        <h4 class="font-semibold text-lg text-gray-900">Order #{{ $order->order_number }}</h4>
        <div class="grid grid-cols-2 gap-4 mt-2 text-sm">
            <div>
                <span class="text-gray-600">Order Date:</span>
                <span class="font-medium">{{ $order->created_at->format('M d, Y h:i A') }}</span>
            </div>
            <div>
                <span class="text-gray-600">Status:</span>
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                    @if($order->status === 'pending') bg-yellow-100 text-yellow-800
                    @elseif($order->status === 'confirmed') bg-blue-100 text-blue-800
                    @elseif($order->status === 'processing') bg-purple-100 text-purple-800
                    @elseif($order->status === 'shipped') bg-indigo-100 text-indigo-800
                    @elseif($order->status === 'delivered') bg-green-100 text-green-800
                    @elseif($order->status === 'cancelled') bg-red-100 text-red-800
                    @else bg-gray-100 text-gray-800
                    @endif">
                    {{ ucfirst($order->status) }}
                </span>
            </div>
        </div>
    </div>

    <!-- Customer Information -->
    <div class="border-b border-gray-200 pb-4">
        <h5 class="font-medium text-gray-900 mb-2">Customer Information</h5>
        <div class="text-sm space-y-1">
            <div><span class="text-gray-600">Name:</span> <span class="font-medium">{{ $order->customer_name }}</span></div>
            <div><span class="text-gray-600">Phone:</span> <span class="font-medium">{{ $order->customer_phone }}</span></div>
            <div><span class="text-gray-600">Address:</span> <span class="font-medium">{{ $order->customer_address }}</span></div>
            @if($order->notes)
                <div><span class="text-gray-600">Notes:</span> <span class="font-medium">{{ $order->notes }}</span></div>
            @endif
        </div>
    </div>

    <!-- Order Items -->
    <div class="border-b border-gray-200 pb-4">
        <h5 class="font-medium text-gray-900 mb-2">Order Items</h5>
        <div class="space-y-2">
            @foreach($order->orderItems as $item)
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <div class="flex items-center space-x-3">
                        @if($item->product->image_url)
                            <img src="{{ $item->product->image_url }}" alt="{{ $item->product->name }}" class="w-12 h-12 object-cover rounded">
                        @else
                            <div class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
                                <span class="text-gray-400 text-xs">No Image</span>
                            </div>
                        @endif
                            <div>
                                <div class="font-medium text-gray-900">{{ $item->product->name }}</div>
                                <div class="text-sm text-gray-600">{{ $item->product->name_bn }}</div>
                                @if(!empty($item->product_meta['variant']))
                                    <div class="text-xs font-semibold text-gray-500">
                                        <strong>পণ্যের ধরন:</strong> {{ $item->product_meta['variant']['label'] }}
                                       <br />ইউনিট রেট: ৳{{ number_format($item->product_meta['variant']['base_unit_price'], 0) }}/{{ $item->product_meta['variant']['unit'] }}
                                       <!-- <br />ফাইনাল সেলিং প্রাইস: ৳{{ number_format($item->product_meta['variant']['final_price'], 0) }}
                                        @if(!empty($item->product_meta['variant']['sale_price']))
                                            <br />সেল: ৳{{ number_format($item->product_meta['variant']['sale_price'], 0) }}
                                        @endif -->
                                    </div>
                                @endif
                                @if(!empty($item->product_meta['services']) && count($item->product_meta['services']) > 0)
                                <div class="mt-1 space-y-0.5">
                                    @foreach($item->product_meta['services'] as $service)
                                        @php
                                            $modalServiceName = (!empty($service['name']) && $service['name'] !== 'on') ? $service['name'] : ('Service #' . $service['id']);
                                        @endphp
                                        <p class="text-xs text-blue-600">{{ $modalServiceName }}: ৳{{ number_format($service['resolved_price'] * $item->quantity, 2) }}</p>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-medium">{{ $item->quantity }} × ৳{{ number_format($item->price, 2) }}</div>
                        @php
                            $itemServiceTotal = collect($item->product_meta['services'] ?? [])->sum(fn($s) => $s['resolved_price'] * $item->quantity);
                        @endphp
                        <div class="text-sm text-gray-600">৳{{ number_format($item->quantity * $item->price + $itemServiceTotal, 2) }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Order Summary -->
    <div class="space-y-2">
        <h5 class="font-medium text-gray-900">Order Summary</h5>
        <div class="space-y-1 text-sm">
            <div class="flex justify-between">
                <span class="text-gray-600">Subtotal:</span>
                <span class="font-medium">৳{{ number_format($order->orderItems->sum(function($item) { return $item->quantity * $item->price; }), 2) }}</span>
            </div>
            @php
                $modalServicesTotal = 0;
                foreach($order->orderItems as $item) {
                    $modalServicesTotal += collect($item->product_meta['services'] ?? [])->sum(fn($s) => $s['resolved_price'] * $item->quantity);
                }
            @endphp
            @if($modalServicesTotal > 0)
                <div class="flex justify-between">
                    <span class="text-gray-600">Additional Services:</span>
                    <span class="font-medium">৳{{ number_format($modalServicesTotal, 2) }}</span>
                </div>
            @endif
            @if($order->delivery_charge > 0)
                <div class="flex justify-between">
                    <span class="text-gray-600">Delivery Charge:</span>
                    <span class="font-medium">৳{{ number_format($order->delivery_charge, 2) }}</span>
                </div>
            @endif
            <div class="flex justify-between border-t border-gray-200 pt-2 font-semibold text-lg">
                <span>Total:</span>
                <span>৳{{ number_format($order->total_amount, 2) }}</span>
            </div>
        </div>
    </div>

    <!-- Payment Information -->
    <div class="bg-gray-50 p-4 rounded-lg">
        <h5 class="font-medium text-gray-900 mb-2">Payment Information</h5>
        <div class="text-sm space-y-1">
            <div><span class="text-gray-600">Method:</span> <span class="font-medium capitalize">{{ $order->payment_method ?? 'Cash on Delivery' }}</span></div>
            <div>
                <span class="text-gray-600">Status:</span> 
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full 
                    @if($order->payment_status === 'paid') bg-green-100 text-green-800
                    @elseif($order->payment_status === 'pending') bg-yellow-100 text-yellow-800
                    @elseif($order->payment_status === 'failed') bg-red-100 text-red-800
                    @else bg-gray-100 text-gray-800
                    @endif">
                    {{ ucfirst($order->payment_status ?? 'Pending') }}
                </span>
            </div>
        </div>
    </div>
</div>