@extends('layouts.frontend')

@section('title', 'অর্ডার ট্র্যাক করুন - ' . \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">
        <!-- Breadcrumb -->
        <nav class="mb-6 text-sm">
            <ol class="flex items-center space-x-2 text-gray-500">
                <li><a href="{{ route('home') }}" class="hover:text-pink-600">হোম</a></li>
                <li>/</li>
                <li class="text-gray-900">অর্ডার ট্র্যাক</li>
            </ol>
        </nav>

        <div class="max-w-2xl mx-auto">
            <!-- Track Order Form -->
            <div class="bg-white rounded-2xl shadow-sm p-6 mb-8">
                <h1 class="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                    <span class="text-3xl">📦</span> অর্ডার ট্র্যাক করুন
                </h1>

                @if(session('error'))
                <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-red-600">
                    {{ session('error') }}
                </div>
                @endif

                <form action="{{ route('track.order.submit') }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">অর্ডার আইডি *</label>
                        <input type="text" name="order_id" value="{{ old('order_id') }}" required 
                               placeholder="যেমন: 12345"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-pink-500 focus:border-pink-500 @error('order_id') border-red-500 @enderror">
                        @error('order_id')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">মোবাইল নম্বর *</label>
                        <input type="tel" name="phone" value="{{ old('phone') }}" required 
                               placeholder="01XXXXXXXXX"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-pink-500 focus:border-pink-500 @error('phone') border-red-500 @enderror">
                        @error('phone')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <button type="submit" class="w-full py-3 bg-pink-600 text-white rounded-xl font-bold hover:bg-pink-700 transition flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                        ট্র্যাক করুন
                    </button>
                </form>
            </div>

            @isset($order)
            <!-- Order Details -->
            <div class="bg-white rounded-2xl shadow-sm p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-bold text-gray-900">অর্ডার #{{ $order->id }}</h2>
                    <span class="px-3 py-1 rounded-full text-sm font-medium
                        @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">
                        @switch($order->status)
                            @case('pending') পেন্ডিং @break
                            @case('confirmed') কনফার্মড @break
                            @case('processing') প্রসেসিং @break
                            @case('shipped') শিপড @break
                            @case('delivered') ডেলিভারড @break
                            @case('cancelled') বাতিল @break
                            @default {{ ucfirst($order->status) }}
                        @endswitch
                    </span>
                </div>

                <!-- Order Timeline -->
                <div class="mb-8">
                    <div class="flex items-center justify-between relative">
                        <div class="absolute top-5 left-0 right-0 h-1 bg-gray-200 -z-10"></div>
                        @php
                            $statuses = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
                            $currentIndex = array_search($order->status, $statuses);
                            if ($order->status === 'cancelled') $currentIndex = -1;
                        @endphp
                        @foreach(['পেন্ডিং', 'কনফার্মড', 'প্রসেসিং', 'শিপড', 'ডেলিভারড'] as $index => $statusLabel)
                        <div class="flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center {{ $index <= $currentIndex ? 'bg-pink-600 text-white' : 'bg-gray-200 text-gray-500' }}">
                                @if($index <= $currentIndex)
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                @else
                                {{ $index + 1 }}
                                @endif
                            </div>
                            <span class="text-xs mt-2 {{ $index <= $currentIndex ? 'text-pink-600 font-medium' : 'text-gray-500' }}">{{ $statusLabel }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Order Info -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <h3 class="font-semibold text-gray-900 mb-2">শিপিং তথ্য</h3>
                        <div class="text-sm text-gray-600 space-y-1">
                            <p><strong>নাম:</strong> {{ $order->shipping_name }}</p>
                            <p><strong>ফোন:</strong> {{ $order->shipping_phone }}</p>
                            <p><strong>ঠিকানা:</strong> {{ $order->shipping_address }}, {{ $order->shipping_area }}, {{ $order->shipping_district }}</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-900 mb-2">অর্ডার তথ্য</h3>
                        <div class="text-sm text-gray-600 space-y-1">
                            <p><strong>তারিখ:</strong> {{ $order->created_at->format('d M, Y h:i A') }}</p>
                            <p><strong>পেমেন্ট:</strong> {{ $order->payment_method === 'cod' ? 'ক্যাশ অন ডেলিভারি' : ucfirst($order->payment_method) }}</p>
                            @if($order->tracking_number)
                            <p><strong>ট্র্যাকিং নম্বর:</strong> {{ $order->tracking_number }}</p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Order Items -->
                <div class="border-t border-gray-200 pt-6">
                    <h3 class="font-semibold text-gray-900 mb-4">অর্ডার আইটেম</h3>
                    <div class="space-y-3">
                        @foreach($order->items as $item)
                        <div class="flex gap-3 p-3 bg-gray-50 rounded-lg">
                            @if($item->product && $item->product->image)
                            <img src="{{ asset('storage/' . $item->product->image) }}" alt="{{ $item->product_name }}" class="w-16 h-16 object-cover rounded-lg">
                            @else
                            <div class="w-16 h-16 bg-gray-200 rounded-lg 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">
                                <h4 class="font-medium text-gray-900">{{ $item->product_name }}</h4>
                                <p class="text-sm text-gray-500">{{ $item->quantity }}x ৳{{ number_format($item->price, 0) }}</p>
                                @if($item->color || $item->size)
                                <p class="text-xs text-gray-400">
                                    @if($item->color) রঙ: {{ $item->color }} @endif
                                    @if($item->size) সাইজ: {{ $item->size }} @endif
                                </p>
                                @endif
                            </div>
                            <span class="font-bold text-pink-600">৳{{ number_format($item->price * $item->quantity, 0) }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Order Total -->
                <div class="border-t border-gray-200 pt-4 mt-4 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-xl font-bold text-gray-900 pt-2 border-t">
                        <span>সর্বমোট</span>
                        <span class="text-pink-600">৳{{ number_format($order->total, 0) }}</span>
                    </div>
                </div>
            </div>
            @endisset
        </div>
    </div>
</div>
@endsection