@extends('layouts.app')

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

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-semibold">Order Details</h1>
            <span class="rounded-full px-4 py-2 text-sm font-semibold
                @if($order->status === 'Pending') bg-yellow-100 text-yellow-700
                @elseif($order->status === 'Processing') bg-blue-100 text-blue-700
                @elseif($order->status === 'Shipped') bg-purple-100 text-purple-700
                @elseif($order->status === 'Delivered') bg-green-100 text-green-700
                @elseif($order->status === 'Cancelled') bg-red-100 text-red-700
                @endif">
                {{ $order->status }}
            </span>
        </div>

        <div class="grid md:grid-cols-2 gap-6 pb-6 border-b border-slate-200 mb-6">
            <div>
                <p class="text-sm text-slate-600">Order Number</p>
                <p class="font-semibold">{{ $order->order_number }}</p>
            </div>
            <div>
                <p class="text-sm text-slate-600">Tracking Code</p>
                <p class="font-semibold">{{ $order->tracking_code }}</p>
            </div>
            <div>
                <p class="text-sm text-slate-600">Order Date</p>
                <p class="font-semibold">{{ $order->created_at->format('M d, Y H:i') }}</p>
            </div>
            <div>
                <p class="text-sm text-slate-600">Payment Status</p>
                <p class="font-semibold">
                    @if($order->payment_status === 'pending')
                        <span class="text-yellow-600">Pending</span>
                    @elseif($order->payment_status === 'completed')
                        <span class="text-green-600">Completed</span>
                    @else
                        <span class="text-red-600">Failed</span>
                    @endif
                </p>
            </div>
        </div>

        <!-- Items -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-4">Order Items</h2>
            <div class="space-y-3">
                @foreach($items as $item)
                    <div class="flex gap-4 p-4 bg-slate-50 rounded-3xl">
                        <img src="{{ $item->product->image }}" alt="{{ $item->product->name }}" class="h-20 w-20 rounded-xl object-cover">
                        <div class="flex-1">
                            <p class="font-semibold">{{ $item->product->name }}</p>
                            <p class="text-sm text-slate-600">Qty: {{ $item->quantity }}</p>
                        </div>
                        <div class="text-right">
                            <p class="font-semibold">₹{{ number_format($item->subtotal, 2) }}</p>
                            <p class="text-sm text-slate-600">₹{{ number_format($item->price, 2) }} each</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Delivery Address -->
        <div class="mb-6 p-4 bg-slate-50 rounded-3xl">
            <h2 class="text-lg font-semibold mb-3">Delivery Address</h2>
            @if($order->address)
                <p class="font-semibold">{{ $order->address->full_name }}</p>
                <p class="text-slate-600">{{ $order->address->address }}</p>
                <p class="text-slate-600">{{ $order->address->city }}, {{ $order->address->state }} - {{ $order->address->postal_code }}</p>
                <p class="text-slate-600">{{ $order->address->phone }}</p>
            @else
                <p class="text-slate-600">Address not available</p>
            @endif
        </div>

        <!-- Order Summary -->
        <div class="border-t border-slate-200 pt-4">
            <div class="flex justify-between mb-2">
                <span>Subtotal:</span>
                <span>₹{{ number_format($order->total, 2) }}</span>
            </div>
            <div class="flex justify-between mb-2">
                <span>Shipping:</span>
                <span>₹0.00</span>
            </div>
            <div class="flex justify-between text-lg font-semibold border-t border-slate-200 pt-2 mt-2">
                <span>Total:</span>
                <span>₹{{ number_format($order->total, 2) }}</span>
            </div>
        </div>

        @if($order->status === 'Pending' && $order->payment_status === 'pending')
            <div class="mt-6 flex gap-3">
                <a href="{{ route('checkout.payment', $order) }}" class="flex-1 rounded-full bg-blue-600 px-6 py-3 text-center text-white hover:bg-blue-700">
                    Complete Payment
                </a>
                <form action="{{ route('orders.cancel', $order) }}" method="POST" class="flex-1">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="w-full rounded-full bg-red-600 px-6 py-3 text-white hover:bg-red-700" onclick="return confirm('Are you sure?')">
                        Cancel Order
                    </button>
                </form>
            </div>
        @endif
    </div>
</div>
@endsection
