@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">🛍️ New Order Received</p>
        <p class="highlight-box-subtext">Order #{{ $order->id }}</p>
    </div>

    <h1 class="email-title">You have a new order!</h1>

    <p class="email-text">
        {{ $order->customer_name ?: 'A customer' }} just placed an order through your
        {{ $order->qrCode?->label ?? 'QR code' }}.
    </p>

    <div class="email-details">
        <p class="email-details-title">Order Details</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">Date</p>
            <p class="email-details-value">{{ $order->paid_at?->format('F j, Y \a\t g:i A') ?? now()->format('F j, Y') }}</p>
        </div>
        @if($order->customer_name)
        <div class="email-details-row">
            <p class="email-details-label">Customer</p>
            <p class="email-details-value">{{ $order->customer_name }}</p>
        </div>
        @endif
        @if($order->customer_email)
        <div class="email-details-row">
            <p class="email-details-label">Email</p>
            <p class="email-details-value">{{ $order->customer_email }}</p>
        </div>
        @endif
        @if($order->customer_phone)
        <div class="email-details-row">
            <p class="email-details-label">Phone</p>
            <p class="email-details-value">{{ $order->customer_phone }}</p>
        </div>
        @endif
        <div class="email-details-row">
            <p class="email-details-label">Total</p>
            <p class="email-details-value" style="font-weight:700;color:#059669;">GHS {{ number_format((float) $order->amount_ghs, 2) }}</p>
        </div>
    </div>

    @if($order->items && count($order->items) > 0)
    <div class="email-details">
        <p class="email-details-title">Items Ordered</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>
    @endif

    <div style="text-align:center;margin:32px 0;">
        <a href="{{ $manageUrl }}"
           style="display:inline-block;background:#4f46e5;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;border-radius:10px;text-decoration:none;">
            View Orders
        </a>
    </div>
@endsection