<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    body { background: #f9fafb; font-family: Arial, sans-serif; color: #111827; margin: 0; padding: 20px; }
    .wrapper { max-width: 600px; margin: 0 auto; }
    .header { background: #dc2626; color: white; border-radius: 8px 8px 0 0; padding: 24px; }
    .header h1 { margin: 0; font-size: 20px; }
    .body { background: white; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px; padding: 28px; }
    .field { margin-bottom: 16px; }
    .label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin-bottom: 4px; }
    .value { font-size: 15px; color: #111827; font-weight: 500; }
    table { width: 100%; border-collapse: collapse; margin-top: 16px; }
    th { background: #f3f4f6; text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; }
    td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
    .total-row td { font-weight: bold; font-size: 16px; background: #fef2f2; color: #dc2626; }
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <h1>🔔 New Order: #{{ $order->order_number }}</h1>
        <p style="margin:4px 0 0; font-size:14px; opacity:0.9;">Received {{ $order->created_at->format('M j, Y g:i A') }}</p>
    </div>
    <div class="body">
        <div class="field">
            <div class="label">Customer Name</div>
            <div class="value">{{ $order->full_name }}</div>
        </div>
        <div class="field">
            <div class="label">Email</div>
            <div class="value">{{ $order->email }}</div>
        </div>
        <div class="field">
            <div class="label">Phone</div>
            <div class="value">{{ $order->phone }}</div>
        </div>
        <div class="field">
            <div class="label">Status</div>
            <div class="value">{{ strtoupper($order->status) }}</div>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Package</th>
                    <th>Qty</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                @foreach($order->items as $item)
                <tr>
                    <td>{{ $item->package_name }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>${{ number_format($item->unit_price, 2) }}</td>
                </tr>
                @endforeach
                <tr class="total-row">
                    <td colspan="2">Total</td>
                    <td>${{ number_format($order->total, 2) }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
