<x-shop-layout :title="'অর্ডারের বিবরণ - ' . $order->order_number">
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">অর্ডার #{{ $order->order_number }}</h1>
                    <p class="text-gray-600 mt-2">
                        {{ $order->created_at->setTimezone('Asia/Dhaka')->format('l, F j, Y \a\t g:i A') }} তারিখে করা হয়েছে
                    </p>
                </div>
                <div class="text-right">
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-lg font-medium
                        {{ $order->status === 'delivered' ? 'bg-green-100 text-green-800' : 
                           ($order->status === 'shipped' ? 'bg-blue-100 text-blue-800' : 
                           ($order->status === 'confirmed' ? 'bg-yellow-100 text-yellow-800' : 
                           ($order->status === 'cancelled' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'))) }}">
                        {{ ucfirst($order->status) }}
                    </span>
                </div>
            </div>
            <a href="{{ route('order.tracking') }}" 
               class="inline-flex items-center text-blue-600 hover:text-blue-800 mt-4">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
                অর্ডার ট্র্যাকিং-এ ফিরে যান
            </a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Order Timeline -->
                @if($order->status !== 'cancelled')
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-6">অর্ডারের অগ্রগতি</h2>
                    <div id="order-timeline" class="space-y-4">
                        <!-- Timeline will be loaded here -->
                    </div>
                </div>
                @endif

                <!-- Order Items -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-6">অর্ডারের পণ্যসমূহ</h2>
                    <div class="space-y-4">
                        @foreach($order->orderItems as $item)
                        <div class="flex items-center space-x-4 p-4 border border-gray-200 rounded-lg">
                            <div class="w-16 h-16 bg-gray-200 rounded-lg overflow-hidden">
                                @if($item->product->images && count($item->product->images) > 0)
                                    <img src="{{ storage_url($item->product->images[0]) }}" 
                                         alt="{{ $item->product->name }}" 
                                         class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-2xl">
                                        🐟
                                    </div>
                                @endif
                            </div>
                            <div class="flex-1">
                                <h3 class="font-semibold text-gray-900">{{ $item->product->name }}</h3>
                                <p class="text-gray-600">{{ $item->product->category->name ?? 'মাছ' }}</p>
                                <p class="text-sm text-gray-500">পরিমাণ: {{ $item->quantity }}</p>
                                @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
                                                $trackingServiceName = (!empty($service['name']) && $service['name'] !== 'on') ? $service['name'] : ('Service #' . $service['id']);
                                            @endphp
                                            <p class="text-xs text-blue-600">{{ $trackingServiceName }}: ৳{{ number_format($service['resolved_price'] * $item->quantity, 2) }}</p>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            <div class="text-right">
                                @php
                                    $itemTotal = $item->price * $item->quantity;
                                    $itemServiceTotal = collect($item->product_meta['services'] ?? [])->sum(fn($s) => $s['resolved_price'] * $item->quantity);
                                @endphp
                                <p class="font-semibold text-gray-900">৳{{ number_format($itemTotal + $itemServiceTotal, 2) }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <!-- Order Summary -->
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <div class="space-y-2">
                            <div class="flex justify-between text-gray-600">
                                <span>সাবটোটাল</span>
                                <span>৳{{ number_format($order->subtotal, 2) }}</span>
                            </div>
                            @php
                                $trackingServicesTotal = 0;
                                foreach($order->orderItems as $item) {
                                    $trackingServicesTotal += collect($item->product_meta['services'] ?? [])->sum(fn($s) => $s['resolved_price'] * $item->quantity);
                                }
                            @endphp
                            @if($trackingServicesTotal > 0)
                                <div class="flex justify-between text-gray-600">
                                    <span>অতিরিক্ত পরিসেবা</span>
                                    <span>৳{{ number_format($trackingServicesTotal, 2) }}</span>
                                </div>
                            @endif
                            @if($order->shipping_amount > 0)
                            <div class="flex justify-between text-gray-600">
                                <span>শিপিং</span>
                                <span>৳{{ number_format($order->shipping_amount, 2) }}</span>
                            </div>
                            @endif
                            @if($order->tax_amount > 0)
                            <div class="flex justify-between text-gray-600">
                                <span>ট্যাক্স</span>
                                <span>৳{{ number_format($order->tax_amount, 2) }}</span>
                            </div>
                            @endif
                            @if($order->discount_amount > 0)
                            <div class="flex justify-between text-red-600">
                                <span>ডিসকাউন্ট</span>
                                <span>-৳{{ number_format($order->discount_amount, 2) }}</span>
                            </div>
                            @endif
                            <div class="flex justify-between text-lg font-bold text-gray-900 pt-2 border-t border-gray-200">
                                <span>মোট</span>
                                <span>৳{{ number_format($order->total_amount, 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Customer Information -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4">কাস্টমারের তথ্য</h2>
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">নাম</label>
                            <p class="text-gray-900">{{ $order->customer_name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">ফোন</label>
                            <p class="text-gray-900">{{ $order->customer_phone }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">ডেলিভারি ঠিকানা</label>
                            <p class="text-gray-900">{{ $order->customer_address }}</p>
                        </div>
                    </div>
                </div>

                <!-- Payment Information -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4">পেমেন্টের তথ্য</h2>
                    <div class="space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">পেমেন্টের মাধ্যম</label>
                            <p class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $order->payment_method)) }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">পেমেন্টের স্ট্যাটাস</label>
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-sm font-medium
                                {{ $order->payment_status === 'paid' ? 'bg-green-100 text-green-800' : 
                                   ($order->payment_status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                {{ ucfirst($order->payment_status) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Contact Support -->
                <div class="bg-blue-50 rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-blue-900 mb-2">সাহায্য প্রয়োজন?</h3>
                    <p class="text-blue-700 text-sm mb-4">আপনার অর্ডার সম্পর্কে কোন প্রশ্ন থাকলে আমাদের কাস্টমার সাপোর্টে যোগাযোগ করুন।</p>
                    <div class="space-y-2">
                        <a href="tel:+8801628178114" 
                           class="flex items-center text-blue-600 hover:text-blue-800">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                            </svg>
                            +880 1628178114
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Load order timeline
document.addEventListener('DOMContentLoaded', function() {
    const timelineContainer = document.getElementById('order-timeline');
    
    if (timelineContainer) {
        fetch(`{{ route('order.timeline', $order->order_number) }}`)
            .then(response => response.json())
            .then(data => {
                if (data.timeline) {
                    renderTimeline(data.timeline);
                }
            })
            .catch(error => {
                console.error('Error loading timeline:', error);
                timelineContainer.innerHTML = '<p class="text-gray-500">টাইমলাইন লোড করা যায়নি</p>';
            });
    }

    function renderTimeline(timeline) {
        let html = '';
        
        timeline.forEach((step, index) => {
            const isLast = index === timeline.length - 1;
            const iconClass = step.completed ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray-600';
            const textClass = step.completed ? 'text-gray-900' : 'text-gray-500';
            
            html += `
                <div class="flex items-start space-x-4">
                    <div class="flex flex-col items-center">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center ${iconClass}">
                            ${step.completed ? 
                                '<svg class="w-5 h-5" 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 class="w-3 h-3 rounded-full bg-current"></div>'
                            }
                        </div>
                        ${!isLast ? '<div class="w-px h-12 bg-gray-300 mt-2"></div>' : ''}
                    </div>
                    <div class="flex-1 pb-8">
                        <h3 class="text-lg font-semibold ${textClass}">${step.title}</h3>
                        <p class="text-gray-600 mt-1">${step.description}</p>
                        ${step.date ? `<p class="text-sm text-gray-500 mt-2">${new Date(step.date).toLocaleString('bn-BD', {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        })}</p>` : ''}
                    </div>
                </div>
            `;
        });
        
        timelineContainer.innerHTML = html;
    }
});
</script>
</x-shop-layout>