<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            {{ __('Order History') }}
        </h2>
    </x-slot>

    <style>
        .order-card {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            margin-bottom: 2rem;
            overflow: hidden;
            transition: border-color 0.2s;
        }
        .order-card:hover { border-color: var(--amber); }

        .order-header {
            background: var(--ivory);
            padding: 1.5rem 2rem;
            border-bottom: 1px solid rgba(26,24,20,0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .order-meta {
            display: flex;
            gap: 3rem;
        }
        .meta-label {
            font-size: 0.65rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        .meta-value {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--charcoal);
        }

        .status-badge {
            font-size: 0.65rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-weight: 700;
            padding: 0.4rem 0.8rem;
            border-radius: 2px;
        }
        .status-pending { background: #fff8e1; color: #b8860b; }
        .status-completed { background: #e8f5e9; color: #2e7d32; }

        .order-body { padding: 2rem; }
        .order-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(26,24,20,0.04);
        }
        .order-item:last-child { border-bottom: none; }
        
        .item-details { display: flex; align-items: center; gap: 1rem; }
        .item-thumb {
            width: 50px;
            height: 60px;
            background: var(--cream);
            border-radius: 2px;
            object-fit: cover;
        }
        .item-title { font-weight: 600; font-size: 1rem; color: var(--charcoal); }
        .item-qty { font-size: 0.8rem; color: var(--warm-gray); }

        .order-footer {
            padding: 1.5rem 2rem;
            background: var(--ivory);
            border-top: 1px solid rgba(26,24,20,0.04);
            font-size: 0.85rem;
            color: var(--warm-gray);
        }
    </style>

    <div style="padding: 4rem 0 8rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            @if(session('success'))
                <div class="alert-animate" style="background: var(--success); color: #fff; padding: 1rem 1.5rem; border-radius: 2px; margin-bottom: 3rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem;">
                    <svg style="width:20px;height:20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ session('success') }}
                </div>
            @endif

            @forelse($orders as $order)
                <div class="order-card">
                    <div class="order-header">
                        <div class="order-meta">
                            <div>
                                <div class="meta-label">Order Reference</div>
                                <div class="meta-value">#MSN-{{ str_pad($order->id, 5, '0', STR_PAD_LEFT) }}</div>
                            </div>
                            <div>
                                <div class="meta-label">Date Placed</div>
                                <div class="meta-value">{{ $order->created_at->format('d M, Y') }}</div>
                            </div>
                            <div>
                                <div class="meta-label">Total Amount</div>
                                <div class="meta-value" style="color: var(--amber);">৳{{ number_format($order->total_amount, 2) }}</div>
                            </div>
                        </div>
                        <span class="status-badge {{ $order->status == 'pending' ? 'status-pending' : 'status-completed' }}">
                            {{ $order->status }}
                        </span>
                        <a href="{{ route('invoice.download', $order) }}" style="margin-left: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--charcoal); text-decoration: underline;">Print Invoice</a>
                    </div>

                    <div class="order-body">
                        @foreach($order->items as $item)
                            <div class="order-item">
                                <div class="item-details">
                                    @if($item->product->image)
                                        <img src="{{ asset('storage/' . $item->product->image) }}" class="item-thumb">
                                    @else
                                        <div class="item-thumb" style="display:flex;align-items:center;justify-content:center;color:var(--mist);">
                                            <svg style="width:20px;height:20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path 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"/></svg>
                                        </div>
                                    @endif
                                    <div>
                                        <div class="item-title">{{ $item->product->name }}</div>
                                        <div class="item-qty">Quantity: {{ $item->quantity }}</div>
                                    </div>
                                </div>
                                <div style="font-weight: 600; color: var(--ink);">
                                    ৳{{ number_format($item->price * $item->quantity, 2) }}
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="order-footer">
                        <div style="display: flex; gap: 0.5rem; align-items: flex-start;">
                            <svg style="width:14px;height:14px;margin-top:2px;flex-shrink:0;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            <span>{{ $order->address }}</span>
                        </div>
                    </div>
                </div>
            @empty
                <div style="text-align: center; padding: 8rem 2rem; background: #fff; border: 1px solid rgba(26,24,20,0.08); border-radius: 4px;">
                    <div style="background: var(--ivory); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem;">
                        <svg style="width:32px;height:32px;color:var(--mist);" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    </div>
                    <h3 class="serif" style="font-size: 2rem; margin-bottom: 1rem;">No orders yet</h3>
                    <p style="color: var(--warm-gray); margin-bottom: 2.5rem;">Your purchase history will appear here once you've made an order.</p>
                    <a href="{{ route('home') }}" style="display:inline-block; padding: 1.25rem 3rem; background: var(--charcoal); color: var(--cream); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; border-radius: 2px;">
                        Start Shopping
                    </a>
                </div>
            @endforelse

        </div>
    </div>
</x-app-layout>
