<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice #{{ $order->order_number }}</title>
    <style>
        body { font-family: system-ui, sans-serif; max-width: 800px; margin: 0 auto; padding: 24px; color: #1f2937; }
        h1 { font-size: 1.5rem; margin-bottom: 8px; }
        table { width: 100%; border-collapse: collapse; margin: 24px 0; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
        th { background: #f9fafb; font-weight: 600; }
        .text-right { text-align: right; }
        .font-bold { font-weight: 700; }
        .mt-4 { margin-top: 16px; }
        .text-sm { font-size: 0.875rem; }
    </style>
</head>
<body>
    <h1>{{ $store_name }}</h1>
    <p class="text-sm text-gray-600">Order #{{ $order->order_number }}</p>
    <p class="text-sm text-gray-600">{{ $order->created_at->format('M j, Y g:i A') }}</p>

    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th class="text-right">Qty</th>
                <th class="text-right">Price</th>
                <th class="text-right">Subtotal</th>
            </tr>
        </thead>
        <tbody>
            @foreach($order->items as $item)
            <tr>
                <td>{{ $item->product_name }}@if($item->variant_name) ({{ $item->variant_name }})@endif</td>
                <td class="text-right">{{ $item->quantity }}</td>
                <td class="text-right">{{ $currency_symbol }}{{ number_format($item->price, 2) }}</td>
                <td class="text-right">{{ $currency_symbol }}{{ number_format($item->subtotal, 2) }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <div class="mt-4 text-right">
        <p>Subtotal: {{ $currency_symbol }}{{ number_format($order->subtotal, 2) }}</p>
        @if($order->discount > 0)
        <p>Discount: -{{ $currency_symbol }}{{ number_format($order->discount, 2) }}</p>
        @endif
        <p class="font-bold">Total: {{ $currency_symbol }}{{ number_format($order->total, 2) }}</p>
    </div>
</body>
</html>
