@extends('emails.layout')

@section('email-content')
<h1 class="email-title">Order Update</h1>
<p class="email-subtitle">Your order #{{ $order->order_number }} has been updated.</p>

<div class="email-content">
    <p>Hi {{ $order->customer->name ?? 'Customer' }},</p>

    <p>We're writing to let you know that your order status has changed:</p>

    <div style="background-color: #f9fafb; border-radius: 8px; padding: 20px; text-align: center; margin: 20px 0;">
        <span class="status-badge status-{{ $newStatus ?? $order->status }}" style="font-size: 14px; padding: 6px 16px;">
            {{ ucfirst(str_replace('_', ' ', $newStatus ?? $order->status)) }}
        </span>
    </div>

    @if(isset($statusMessage) && $statusMessage)
    <p style="background-color: #eff6ff; border-left: 3px solid #6366f1; padding: 12px 16px; border-radius: 0 8px 8px 0;">{{ $statusMessage }}</p>
    @endif

    <table class="info-table">
        <tr>
            <td>Order Number</td>
            <td>{{ $order->order_number }}</td>
        </tr>
        <tr>
            <td>Total</td>
            <td>${{ number_format($order->total, 2) }}</td>
        </tr>
    </table>

    <a href="{{ config('app.url') }}/orders/{{ $order->order_number }}" class="email-button">Track Your Order</a>

    <div class="divider"></div>

    <p style="font-size: 14px; color: #6b7280;">Questions? Visit our <a href="{{ config('app.url') }}/help" style="color: #6366f1;">Help Center</a></p>
</div>
@endsection