@extends('layouts.layouts-landing')

@section('title', 'My Orders')

@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between mb-8">
                <h1 class="text-2xl font-bold text-gray-900">My Orders</h1>
                <a href="/" class="text-emerald-600 hover:text-emerald-700 flex items-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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Continue Shopping
                </a>
            </div>

            @forelse ($orders as $order)
                <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                    <div class="p-4 border-b border-gray-100 bg-gray-50">
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="font-semibold text-gray-900">{{ $order->order_code }}</span>
                                <span class="text-sm text-gray-500 ml-4">{{ $order->created_at->format('d M Y H:i') }}</span>
                            </div>
                            <span class="px-3 py-1 rounded-full text-sm font-medium
                                @if ($order->status === 'unpaid') bg-yellow-100 text-yellow-800
                                @elseif ($order->status === 'paid') bg-blue-100 text-blue-800
                                @elseif ($order->status === 'verify') bg-green-100 text-green-800
                                @elseif ($order->status === 'cancelled') bg-red-100 text-red-800
                                @else bg-gray-100 text-gray-800 @endif">
                                {{ ucfirst($order->status) }}
                            </span>
                        </div>
                    </div>
                    <div class="p-4">
                        @foreach ($order->items as $item)
                            <div class="flex items-center py-2 {{ !$loop->last ? 'border-b border-gray-100' : '' }}">
                                <img src="{{ $item->product->getPrimaryImage() ?? '' }}" alt="{{ $item->product->name ?? 'Deleted' }}"
                                    class="w-16 h-16 object-cover rounded-lg">
                                <div class="ml-4 flex-1">
                                    <p class="font-medium text-gray-900">{{ $item->product->name ?? 'Deleted' }}</p>
                                    <p class="text-sm text-gray-500">Rp {{ number_format($item->price, 0, ',', '.') }} x {{ $item->quantity }}</p>
                                </div>
                                <p class="font-medium text-gray-900">Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}</p>
                            </div>
                        @endforeach
                    </div>
                    <div class="p-4 border-t border-gray-100 bg-gray-50">
                        <div class="flex items-center justify-between text-sm">
                            <div>
                                @if ($order->shippingCost)
                                    <span class="text-gray-500">Shipping: {{ $order->shippingCost->destination }}</span>
                                @endif
                                @if ($order->payment_method)
                                    <span class="text-gray-500 ml-4">Payment: {{ str_replace('_', ' ', ucfirst($order->payment_method)) }}</span>
                                @endif
                            </div>
                            <div class="text-right">
                                <span class="text-gray-500">Total:</span>
                                <span class="font-bold text-gray-900 text-lg ml-2">Rp {{ number_format($order->total_amount, 0, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="bg-white rounded-xl shadow-sm p-12 text-center">
                    <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                    </svg>
                    <p class="text-lg text-gray-500 mb-4">No orders yet</p>
                    <a href="/" class="inline-block bg-emerald-500 text-white px-6 py-2 rounded-lg hover:bg-emerald-600 transition">Start Shopping</a>
                </div>
            @endforelse

            <div class="mt-6">
                {{ $orders->links() }}
            </div>
        </div>
    </div>
@endsection