<x-shop-layout>
    <div class="bg-gray-50 min-h-screen py-8">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Success Header -->
            <div class="text-center mb-8">
                <div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">অর্ডার নিশ্চিত হয়েছে!</h1>
                <p class="text-lg text-gray-600">আপনার অর্ডারের জন্য ধন্যবাদ। আমরা আপনার তাজা মাছ প্রস্তুত করে শীঘ্রই ডেলিভারি দেব।</p>
            </div>

            <!-- Order Details Card -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
                <div class="bg-blue-600 text-white px-6 py-4">
                    <h2 class="text-xl font-semibold">অর্ডারের বিবরণ</h2>
                </div>
                
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Order Info -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">অর্ডারের তথ্য</h3>
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">অর্ডার নম্বর:</span>
                                    <span class="font-medium text-blue-600">{{ $order->order_number }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">অর্ডারের তারিখ:</span>
                                    <span class="font-medium">{{ $order->created_at->setTimezone('Asia/Dhaka')->format('M d, Y - h:i A') }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">অবস্থা:</span>
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                        {{ ucfirst($order->status) }}
                                    </span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">পেমেন্ট পদ্ধতি:</span>
                                    <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $order->payment_method)) }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Customer Info -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">ডেলিভারি তথ্য</h3>
                            <div class="space-y-2 text-sm">
                                <div>
                                    <span class="text-gray-600">কাস্টমার:</span>
                                    <div class="font-medium">{{ $order->customer_name }}</div>
                                </div>
                                <div>
                                    <span class="text-gray-600">ফোন:</span>
                                    <div class="font-medium">{{ $order->customer_phone }}</div>
                                </div>
                                <div>
                                    <span class="text-gray-600">ঠিকানা:</span>
                                    <div class="font-medium">{{ $order->customer_address }}</div>
                                </div>
                                @if($order->notes)
                                <div>
                                    <span class="text-gray-600">বিশেষ নির্দেশাবলী:</span>
                                    <div class="font-medium">{{ $order->notes }}</div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Order Items -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">অর্ডারের পণ্য</h3>
                        <div class="overflow-hidden border border-gray-200 rounded-lg">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">পণ্য</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">পরিমাণ</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">মূল্য</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">মোট</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($order->orderItems as $item)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                @if($item->product && $item->product->images && count($item->product->images) > 0)
                                                <img class="h-12 w-12 rounded-lg object-cover mr-4" 
                                                     src="{{ storage_url($item->product->images[0]) }}" 
                                                     alt="{{ $item->product_name }}">
                                                @else
                                                <div class="h-12 w-12 rounded-lg bg-gray-200 flex items-center justify-center mr-4">
                                                    <span class="text-gray-400 text-xl">🐟</span>
                                                </div>
                                                @endif
                                                <div>
                                                    <div class="text-sm font-medium text-gray-900">{{ $item->product_name }}</div>
                                                    @if($item->product && $item->product->category)
                                                    <div class="text-sm text-gray-500">{{ $item->product->category->name }}</div>
                                                    @endif
                                                    @if(!empty($item->product_meta['variant']))
                                                        <p class="text-xs font-semibold text-gray-700">
                                                            <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 -->
                                                        </p>
                                                    @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
                                                                    $successServiceName = (!empty($service['name']) && $service['name'] !== 'on') ? $service['name'] : ('Service #' . $service['id']);
                                                                @endphp
                                                                <p class="text-xs text-blue-600">{{ $successServiceName }}: ৳{{ number_format($service['resolved_price'] * $item->quantity, 0) }}</p>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $item->quantity }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            ৳{{ number_format($item->price, 0) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                            @php
                                                $itemTotal = $item->price * $item->quantity;
                                                $servicesTotal = collect($item->product_meta['services'] ?? [])->sum(fn($s) => $s['resolved_price'] * $item->quantity);
                                            @endphp
                                            ৳{{ number_format($itemTotal + $servicesTotal, 0) }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Order Total -->
                    <div class="mt-6 border-t pt-6">
                        <div class="flex flex-col space-y-2 text-right max-w-xs ml-auto">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">সাবটোটাল:</span>
                                <span class="font-medium">৳{{ number_format($order->subtotal, 0) }}</span>
                            </div>
                            @php
                                $orderServicesTotal = 0;
                                foreach($order->orderItems as $item) {
                                    $orderServicesTotal += collect($item->product_meta['services'] ?? [])->sum(fn($s) => $s['resolved_price'] * $item->quantity);
                                }
                            @endphp
                            @if($orderServicesTotal > 0)
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-600">অতিরিক্ত পরিসেবা:</span>
                                    <span class="font-medium">৳{{ number_format($orderServicesTotal, 0) }}</span>
                                </div>
                            @endif
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">ডেলিভারি চার্জ:</span>
                                <span class="font-medium">৳{{ number_format($order->shipping_amount, 0) }}</span>
                            </div>
                            <div class="flex justify-between text-lg font-semibold border-t pt-2">
                                <span>মোট:</span>
                                <span class="text-blue-600">৳{{ number_format($order->total_amount, 0) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Next Steps -->
            <div class="bg-blue-50 rounded-lg p-6 mb-6">
                <h3 class="text-lg font-semibold text-blue-900 mb-3">পরবর্তী কী হবে?</h3>
                <div class="space-y-3">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">1</div>
                        <span class="text-blue-800">আমরা আপনার অর্ডার কনফার্ম করব এবং আপনার তাজা মাছ প্রস্তুত শুরু করব</span>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">2</div>
                        <span class="text-blue-800">আমাদের টিম সতেজ রাখতে আপনার অর্ডার বরফসহ সাবধানে প্যাকেজ করবে</span>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">3</div>
                        <span class="text-blue-800">আপনার অর্ডার আপনার দোরগোড়ায় ডেলিভারি করা হবে</span>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium mr-3">4</div>
                        <span class="text-blue-800">আপনার তাজা মাছ হাতে পেয়ে ক্যাশ অন ডেলিভারিতে মূল্য পরিশোধ করুন</span>
                    </div>
                </div>
            </div>

            <!-- Contact Info -->
            <!-- <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">সাহায্য দরকার?</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-blue-600 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                        </svg>
                        <div>
                            <div class="font-medium">কল করুন</div>
                            <div class="text-sm text-gray-600">+880 1628-178114</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-blue-600 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                        </svg>
                        <div>
                            <div class="font-medium">ইমেইল করুন</div>
                            <div class="text-sm text-gray-600">support@fishmarket.com</div>
                        </div>
                    </div>
                </div>
            </div> -->

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('shop.products') }}" 
                   class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors text-center">
                    শপিং চালিয়ে যান
                </a>
                <button onclick="window.print()" 
                        class="bg-gray-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-700 transition-colors">
                    অর্ডার প্রিন্ট করুন
                </button>
            </div>
        </div>
    </div>

    <!-- Print Styles -->
    <style>
        @media print {
            .no-print { display: none !important; }
            body { font-size: 12px; }
            .bg-blue-600 { background-color: #2563eb !important; }
            .text-white { color: white !important; }
        }
    </style>
</x-shop-layout>
