@extends('layouts.app')

@section('title', 'Order ' . $order->order_number)

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <!-- Header -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
            <div>
                <a href="{{ route('orders.index') }}" class="text-blue-600 hover:underline text-sm mb-2 inline-block">&larr; Back to Orders</a>
                <h1 class="text-3xl font-bold text-gray-900">Order {{ $order->order_number }}</h1>
                <p class="text-gray-600">Placed on {{ $order->created_at->format('d M Y, H:i') }}</p>
            </div>
            <div class="flex gap-3">
                @if($order->status === 'pending' && $order->payment_status === 'pending')
                    <form action="{{ route('orders.cancel', $order->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to cancel this order?')">
                        @csrf
                        <button type="submit" class="px-4 py-2 border border-red-600 text-red-600 rounded-lg hover:bg-red-50 transition">
                            Cancel Order
                        </button>
                    </form>
                @endif
                @if($order->payment_status === 'pending' && $order->payment_method === 'ozow')
                    <form action="{{ route('orders.retry-payment', $order->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                            Pay Now
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <div class="grid lg:grid-cols-3 gap-8">
            <!-- Order Details -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Status -->
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <h2 class="font-semibold text-lg mb-4">Order Status</h2>
                    <div class="flex items-center gap-4">
                        @php
                            $statusColors = [
                                'pending' => 'bg-yellow-100 text-yellow-800 border-yellow-300',
                                'confirmed' => 'bg-blue-100 text-blue-800 border-blue-300',
                                'processing' => 'bg-purple-100 text-purple-800 border-purple-300',
                                'shipped' => 'bg-indigo-100 text-indigo-800 border-indigo-300',
                                'delivered' => 'bg-green-100 text-green-800 border-green-300',
                                'cancelled' => 'bg-red-100 text-red-800 border-red-300',
                            ];
                        @endphp
                        <span class="inline-flex px-4 py-2 rounded-lg text-sm font-medium border {{ $statusColors[$order->status] ?? 'bg-gray-100 text-gray-800 border-gray-300' }}">
                            {{ ucfirst($order->status) }}
                        </span>
                        <span class="text-gray-500">|</span>
                        <span class="text-gray-600">
                            Payment: 
                            <span class="font-medium {{ $order->payment_status === 'paid' ? 'text-green-600' : ($order->payment_status === 'failed' ? 'text-red-600' : 'text-yellow-600') }}">
                                {{ ucfirst($order->payment_status) }}
                            </span>
                        </span>
                    </div>
                </div>

                <!-- Order Items -->
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="p-6 border-b">
                        <h2 class="font-semibold text-lg">Order Items</h2>
                    </div>
                    <div class="divide-y">
                        @foreach($order->items as $item)
                            <div class="p-6 flex gap-4">
                                <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                                    @if($item->product?->image_url)
                                        <img src="{{ $item->product->image_url }}" 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 text-gray-300">📦</div>
                                    @endif
                                </div>
                                <div class="flex-1">
                                    <h3 class="font-semibold text-gray-900">{{ $item->product_name }}</h3>
                                    <p class="text-sm text-gray-500">SKU: {{ $item->product_sku }}</p>
                                    <p class="text-sm text-gray-500">Supplier: {{ $item->supplier?->company_name }}</p>
                                    <div class="mt-2 flex justify-between items-center">
                                        <span class="text-gray-600">{{ $item->quantity }} x R {{ number_format($item->unit_price, 2) }}</span>
                                        <span class="font-bold text-blue-600">R {{ number_format($item->total_price, 2) }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Delivery Info -->
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <h2 class="font-semibold text-lg mb-4">Delivery Information</h2>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="text-sm font-medium text-gray-500 mb-1">Delivery Method</h4>
                            <p class="font-medium">{{ ucfirst(str_replace('_', ' ', $order->delivery_method)) }}</p>
                        </div>
                        @if($order->delivery_method !== 'collection')
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 mb-1">Delivery Address</h4>
                                <p class="font-medium">{{ $order->delivery_address }}</p>
                                <p class="text-gray-600">{{ $order->delivery_city }} {{ $order->delivery_postal_code }}</p>
                            </div>
                        @endif
                    </div>
                    @if($order->notes)
                        <div class="mt-4 pt-4 border-t">
                            <h4 class="text-sm font-medium text-gray-500 mb-1">Order Notes</h4>
                            <p class="text-gray-600">{{ $order->notes }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Order Summary -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-sm p-6 sticky top-4">
                    <h2 class="font-semibold text-lg mb-6">Order Summary</h2>

                    <div class="space-y-3 mb-6">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Subtotal</span>
                            <span class="font-medium">R {{ number_format($order->subtotal, 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">VAT (15%)</span>
                            <span class="font-medium">R {{ number_format($order->tax_amount, 2) }}</span>
                        </div>
                        @if($order->delivery_fee > 0)
                            <div class="flex justify-between">
                                <span class="text-gray-600">Delivery Fee</span>
                                <span class="font-medium">R {{ number_format($order->delivery_fee, 2) }}</span>
                            </div>
                        @endif
                        <div class="border-t pt-3 flex justify-between">
                            <span class="font-bold text-lg">Total</span>
                            <span class="font-bold text-lg text-blue-600">R {{ number_format($order->total_amount, 2) }}</span>
                        </div>
                    </div>

                    <div class="border-t pt-6">
                        <h3 class="font-medium text-gray-900 mb-3">Payment Details</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Method</span>
                                <span class="font-medium">{{ $order->payment_method === '30_days' ? '30 Days Terms' : 'Ozow' }}</span>
                            </div>
                            @if($order->payment_method === '30_days')
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Due Date</span>
                                    <span class="font-medium">{{ $order->created_at->addDays(30)->format('d M Y') }}</span>
                                </div>
                            @endif
                        </div>
                    </div>

                    @if($order->payments->count() > 0)
                        <div class="border-t pt-6 mt-6">
                            <h3 class="font-medium text-gray-900 mb-3">Payment History</h3>
                            <div class="space-y-2">
                                @foreach($order->payments as $payment)
                                    <div class="flex justify-between text-sm">
                                        <span class="text-gray-600">{{ $payment->created_at->format('d M Y') }}</span>
                                        <span class="font-medium {{ $payment->status === 'completed' ? 'text-green-600' : 'text-gray-600' }}">
                                            R {{ number_format($payment->amount, 2) }} - {{ ucfirst($payment->status) }}
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection