@extends('mail.notifications.layout')

@section('email-header')
    @include('mail.partials.brand-header', ['brand' => 'qrplus'])
@endsection

@section('email-footer')
    @include('mail.partials.brand-footer', ['brand' => 'qrplus'])
@endsection

@section('content')
    <div class="highlight-box highlight-box-success">
        <p class="highlight-box-text">✅ Order Confirmed</p>
        <p class="highlight-box-subtext">Order #{{ $order->id }}</p>
    </div>

    <h1 class="email-title">Thanks for your order{{ $order->customer_name ? ', ' . explode(' ', $order->customer_name)[0] : '' }}!</h1>

    <p class="email-text">
        We've received your payment and your order has been sent to
        <strong>{{ $order->qrCode?->label ?? 'the seller' }}</strong>.
        You'll receive updates as your order progresses.
    </p>

    <div class="email-details">
        <p class="email-details-title">Your Order</p>
        <div class="email-details-row">
            <p class="email-details-label">Order #</p>
            <p class="email-details-value">#{{ $order->id }}</p>
        </div>
        <div class="email-details-row">
            <p class="email-details-label">Reference</p>
            <p class="email-details-value" style="font-size:12px;color:#6b7280;">{{ $order->payment_reference }}</p>
        </div>
        <div class="email-details-row">
            <p class="email-details-label">Date</p>
            <p class="email-details-value">{{ ($order->paid_at ?? $order->created_at)->format('F j, Y \a\t g:i A') }}</p>
        </div>
    </div>

    @if($order->items && count($order->items) > 0)
    <div class="email-details">
        <p class="email-details-title">Items</p>
        @foreach($order->items as $item)
        <div class="email-details-row">
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                    <td style="color:#0f172a;font-size:14px;">
                        {{ $item['name'] ?? 'Item' }} × {{ $item['qty'] ?? 1 }}
                    </td>
                    <td style="color:#0f172a;font-size:14px;text-align:right;font-weight:600;">
                        GHS {{ number_format(($item['price_ghs'] ?? 0) * ($item['qty'] ?? 1), 2) }}
                    </td>
                </tr>
            </table>
        </div>
        @endforeach
        <div class="email-details-row" style="border-top:1px solid #e2e8f0;margin-top:8px;padding-top:8px;">
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                    <td style="color:#0f172a;font-size:14px;font-weight:700;">Total</td>
                    <td style="color:#059669;font-size:15px;text-align:right;font-weight:700;">
                        GHS {{ number_format((float) $order->amount_ghs, 2) }}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    @endif

    <p class="email-text" style="font-size:13px;color:#6b7280;">
        Keep this email for your records. If you have any questions, contact the seller directly.
    </p>
@endsection