<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order {{ $order->order_number }}</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 32px; color: #111827; }
        .header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; }
        .title { font-size: 28px; font-weight: 700; }
        .muted { color: #6b7280; font-size: 14px; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
        .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
        table { width: 100%; border-collapse: collapse; margin-top: 16px; }
        th, td { border-bottom: 1px solid #e5e7eb; padding: 12px; text-align: left; font-size: 14px; }
        th { background: #f9fafb; }
        .totals { margin-top: 24px; width: 320px; margin-left: auto; }
        .totals-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
        .totals-row.total { font-weight: 700; border-top: 1px solid #d1d5db; margin-top: 8px; padding-top: 12px; }
        @media print { .no-print { display: none; } body { margin: 16px; } }
    </style>
</head>
<body>
    <div class="header">
        <div>
            <div class="title">Order {{ $order->order_number }}</div>
            <div class="muted">ChatSell OS printable order document</div>
        </div>
        <button class="no-print" onclick="window.print()">Print</button>
    </div>

    <div class="grid">
        <div class="card">
            <strong>Customer</strong>
            <div class="muted" style="margin-top: 8px;">
                {{ $order->contact?->primary_name }}<br>
                {{ $order->contact?->whatsapp_phone ?? 'No phone' }}<br>
                {{ $order->shipping_address_json['city'] ?? 'No city' }}
            </div>
        </div>
        <div class="card">
            <strong>Order Info</strong>
            <div class="muted" style="margin-top: 8px;">
                Status: {{ $order->status }}<br>
                Payment: {{ $order->payment_status }}<br>
                Created: {{ $order->created_at?->format('M d, Y H:i') }}<br>
                Assignee: {{ $order->assignee?->full_name ?? 'Unassigned' }}
            </div>
        </div>
    </div>

    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Line Total</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($order->items as $item)
                <tr>
                    <td>{{ $item->item_name }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>${{ number_format((float) $item->unit_price, 2) }}</td>
                    <td>${{ number_format((float) $item->line_total, 2) }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="totals">
        <div class="totals-row"><span>Subtotal</span><span>${{ number_format((float) $order->subtotal, 2) }}</span></div>
        <div class="totals-row"><span>Discount</span><span>${{ number_format((float) $order->discount_total, 2) }}</span></div>
        <div class="totals-row"><span>Shipping</span><span>${{ number_format((float) $order->shipping_fee, 2) }}</span></div>
        <div class="totals-row total"><span>Total</span><span>${{ number_format((float) $order->total, 2) }}</span></div>
    </div>

    @if ($order->notes)
        <div class="card" style="margin-top: 24px;">
            <strong>Notes</strong>
            <div class="muted" style="margin-top: 8px;">{{ $order->notes }}</div>
        </div>
    @endif
</body>
</html>
