@extends('layouts.frontend')

@section('title', 'অর্ডার #' . str_pad($order->id, 6, '0', STR_PAD_LEFT) . ' - ' . \App\Models\Setting::get('site_name', config('app.name')))

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            @include('frontend.customer.partials.sidebar')

            <div class="lg:col-span-3 space-y-6">
                <!-- Order Header -->
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <h1 class="text-xl font-bold text-gray-900">অর্ডার #{{ str_pad($order->id, 6, '0', STR_PAD_LEFT) }}</h1>
                            <p class="text-gray-500">{{ $order->created_at->format('d M, Y h:i A') }}</p>
                        </div>
                        @php
                            $statusColors = [
                                'pending' => 'yellow',
                                'confirmed' => 'blue',
                                'processing' => 'indigo',
                                'shipped' => 'purple',
                                'delivered' => 'green',
                                'cancelled' => 'red',
                            ];
                            $statusLabels = [
                                'pending' => 'অপেক্ষমান',
                                'confirmed' => 'নিশ্চিত',
                                'processing' => 'প্রক্রিয়াধীন',
                                'shipped' => 'শিপড',
                                'delivered' => 'ডেলিভারি সম্পন্ন',
                                'cancelled' => 'বাতিল',
                            ];
                            $color = $statusColors[$order->status] ?? 'gray';
                        @endphp
                        <span class="inline-block px-4 py-2 text-sm font-medium rounded-full bg-{{ $color }}-100 text-{{ $color }}-700">{{ $statusLabels[$order->status] ?? ucfirst($order->status) }}</span>
                    </div>

                    @if($order->tracking_id)
                    <div class="mt-4 p-4 bg-blue-50 rounded-xl">
                        <p class="text-sm text-blue-700">
                            <span class="font-medium">ট্র্যাকিং:</span> {{ $order->courier_name }} - {{ $order->tracking_id }}
                        </p>
                    </div>
                    @endif
                </div>

                <!-- Order Items -->
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <h2 class="font-bold text-gray-900">অর্ডার করা পণ্য</h2>
                    </div>
                    <div class="divide-y divide-gray-200">
                        @foreach($order->items as $item)
                        <div class="p-6 flex items-center gap-4">
                            @if($item->product)
                            <img src="{{ asset('storage/' . $item->product->image) }}" alt="{{ $item->product_name }}" class="w-20 h-20 object-cover rounded-xl">
                            @else
                            <div class="w-20 h-20 bg-gray-100 rounded-xl flex items-center justify-center">
                                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            </div>
                            @endif
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-900">{{ $item->product_name }}</h3>
                                @if($item->color || $item->size)
                                <p class="text-sm text-gray-500">
                                    @if($item->color)রঙ: {{ $item->color }}@endif
                                    @if($item->color && $item->size) | @endif
                                    @if($item->size)সাইজ: {{ $item->size }}@endif
                                </p>
                                @endif
                                <p class="text-sm text-gray-500">{{ $item->quantity }}x ৳{{ number_format($item->price, 0) }}</p>
                            </div>
                            <span class="font-bold text-pink-600">৳{{ number_format($item->price * $item->quantity, 0) }}</span>
                        </div>
                        @endforeach
                    </div>
                    <div class="p-6 bg-gray-50 space-y-2">
                        <div class="flex justify-between text-gray-600">
                            <span>সাবটোটাল</span>
                            <span>৳{{ number_format($order->subtotal, 0) }}</span>
                        </div>
                        @if($order->discount > 0)
                        <div class="flex justify-between text-green-600">
                            <span>ডিসকাউন্ট</span>
                            <span>-৳{{ number_format($order->discount, 0) }}</span>
                        </div>
                        @endif
                        <div class="flex justify-between text-gray-600">
                            <span>ডেলিভারি চার্জ</span>
                            <span>৳{{ number_format($order->shipping_charge, 0) }}</span>
                        </div>
                        <div class="flex justify-between text-lg font-bold text-gray-900 pt-2 border-t border-gray-200">
                            <span>সর্বমোট</span>
                            <span class="text-pink-600">৳{{ number_format($order->total, 0) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Shipping & Payment -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <svg class="w-5 h-5 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            ডেলিভারি ঠিকানা
                        </h2>
                        <p class="text-gray-600">
                            {{ $order->shipping_name }}<br>
                            {{ $order->shipping_phone }}<br>
                            {{ $order->shipping_address }}<br>
                            {{ $order->shipping_area }}, {{ $order->shipping_district }}
                        </p>
                    </div>
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <svg class="w-5 h-5 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                            পেমেন্ট তথ্য
                        </h2>
                        <p class="text-gray-600">
                            <span class="font-medium">পদ্ধতি:</span> {{ $order->payment_method === 'cod' ? 'ক্যাশ অন ডেলিভারি' : ucfirst(str_replace('_', ' ', $order->payment_method)) }}<br>
                            <span class="font-medium">স্ট্যাটাস:</span> 
                            @php
                                $paymentStatusColors = ['pending' => 'yellow', 'paid' => 'green', 'failed' => 'red'];
                                $paymentStatusLabels = ['pending' => 'অপেক্ষমান', 'paid' => 'পরিশোধিত', 'failed' => 'ব্যর্থ'];
                                $pColor = $paymentStatusColors[$order->payment_status] ?? 'gray';
                            @endphp
                            <span class="inline-block px-2 py-0.5 text-xs font-medium rounded bg-{{ $pColor }}-100 text-{{ $pColor }}-700">{{ $paymentStatusLabels[$order->payment_status] ?? ucfirst($order->payment_status) }}</span>
                        </p>
                    </div>
                </div>

                <a href="{{ route('customer.orders') }}" class="inline-flex items-center text-pink-600 hover:text-pink-700 font-medium">
                    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                    অর্ডার লিস্টে ফিরে যান
                </a>
            </div>
        </div>
    </div>
</div>
@endsection