{{--
    Order Cancellation Email - Atomic Design System v2.0
    Sent when an order is cancelled and seats are released

    Note: $colors automatically injected via View Composer
--}}
@component('emails.layouts.base', [
    'title' => 'Order Cancelled',
    'previewText' => 'Your order has been successfully cancelled',
    'colors' => $colors
])

@component('emails.atoms.h1', ['colors' => $colors])
    Order Cancelled
@endcomponent

@component('emails.organisms.alert-box', [
    'variant' => 'error',
    'title' => 'Your order has been cancelled',
    'colors' => $colors
])
    We're writing to confirm that your order has been successfully cancelled as requested.
@endcomponent

@include('emails.atoms.spacer', ['height' => '20px'])

@component('emails.atoms.h3', ['colors' => $colors])
    Order Details
@endcomponent

@component('emails.organisms.card', ['colors' => $colors])
    @component('emails.molecules.info-row', [
        'label' => 'Order Number',
        'value' => $orderNumber,
        'colors' => $colors
    ])
    @endcomponent

    @component('emails.molecules.info-row', [
        'label' => 'Ticket Number',
        'value' => $ticketNumber,
        'colors' => $colors
    ])
    @endcomponent

    @component('emails.molecules.info-row', [
        'label' => 'Customer Name',
        'value' => $order->customer_name,
        'colors' => $colors
    ])
    @endcomponent

    @component('emails.molecules.info-row', [
        'label' => 'Event',
        'value' => $order->EventDetail->name ?? 'N/A',
        'colors' => $colors
    ])
    @endcomponent

    @component('emails.molecules.info-row', [
        'label' => 'Seats Released',
        'value' => $seatsReleased,
        'colors' => $colors
    ])
    @endcomponent

    @component('emails.molecules.info-row', [
        'label' => 'Cancelled At',
        'value' => $cancelledAt->format('F j, Y g:i A'),
        'colors' => $colors,
        'removeBorder' => true
    ])
    @endcomponent
@endcomponent

@if($refundProcessed && $refundAmount > 0)
    @include('emails.atoms.spacer', ['height' => '20px'])

    @component('emails.organisms.alert-box', [
        'variant' => 'success',
        'title' => 'Refund Processed',
        'colors' => $colors
    ])
        A refund of <strong>€{{ number_format($refundAmount, 2) }}</strong> has been processed to your original payment method.<br><br>
        Please allow 5-10 business days for the refund to appear in your account, depending on your bank or payment provider.
    @endcomponent
@endif

@include('emails.atoms.spacer', ['height' => '20px'])

@component('emails.atoms.h3', ['colors' => $colors])
    Cancellation Reason
@endcomponent

@component('emails.organisms.card', ['colors' => $colors])
    <p style="margin: 0; color: {{ $colors['neutral-700'] }}; font-size: 14px; line-height: 1.5; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
        {{ $cancellationReason }}
    </p>
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    <strong>Important:</strong> All tickets associated with this order have been revoked and are no longer valid for entry. The seats have been released back to our inventory.
@endcomponent

@include('emails.atoms.spacer', ['height' => '24px'])

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td align="center">
            @component('emails.molecules.button', [
                'href' => config('app.frontend_url', 'https://globalgala.com'),
                'variant' => 'primary',
                'size' => 'large',
                'colors' => $colors
            ])
                Browse Other Events
            @endcomponent
        </td>
    </tr>
</table>

@include('emails.atoms.spacer', ['height' => '20px'])

@component('emails.atoms.small', ['colors' => $colors])
    If you have any questions about this cancellation, please contact us at <a href="mailto:{{ $supportEmail }}" style="color: {{ $colors['primary-600'] }}; text-decoration: none;">{{ $supportEmail }}</a>
@endcomponent

@endcomponent