{{--
    Invoice Link Email - VIP Reservation System
    Sent to customers with payment link for admin-created reservations

    Story 1.9: Email Template - Invoice Link Notification
    Note: $colors automatically injected via View Composer
--}}
@component('emails.layouts.base', [
    'title' => 'Your Reserved Seats for ' . $eventName,
    'previewText' => "Your seats have been reserved for {$eventName}. Complete your payment to confirm.",
    'colors' => $colors
])

@component('emails.atoms.h1', ['colors' => $colors])
    Your Seats Are Reserved!
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    Hello {{ $customerName }},
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    Great news! We've reserved {{ $seatCount }} {{ $seatCount === 1 ? 'seat' : 'seats' }} for you at <strong>{{ $eventName }}</strong>.
    To secure your reservation, please complete your payment using the link below.
@endcomponent

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

{{-- Event Details Section --}}
@component('emails.organisms.section', ['background' => 'ash', 'colors' => $colors])
    @component('emails.atoms.h2', ['colors' => $colors])
        Event Details
    @endcomponent

    @component('emails.molecules.info-row', ['label' => 'Event', 'colors' => $colors])
        {{ $eventName }}
    @endcomponent

    @component('emails.molecules.info-row', ['label' => 'Date', 'colors' => $colors])
        {{ $eventDate }}
    @endcomponent

    @component('emails.molecules.info-row', ['label' => 'Time', 'colors' => $colors])
        {{ $eventTime }}
    @endcomponent

    @component('emails.molecules.info-row', ['label' => 'Venue', 'colors' => $colors])
        {{ $eventVenue }}
    @endcomponent
@endcomponent

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

{{-- Reserved Seats Section --}}
@component('emails.organisms.section', ['background' => 'ash', 'colors' => $colors])
    @component('emails.atoms.h2', ['colors' => $colors])
        Your Reserved Seats
    @endcomponent

    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 0;">
        @foreach($seats as $seat)
        <tr>
            <td style="padding: {{ $spacing['1'] }} 0;">
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding-right: {{ $spacing['2'] }}; vertical-align: top;">
                            <div style="width: 6px; height: 6px; background-color: {{ $colors['primary-500'] }}; border-radius: 50%; margin-top: {{ $spacing['1'] }};"></div>
                        </td>
                        <td>
                            <p style="margin: 0; color: {{ $colors['neutral-900'] }}; font-size: {{ $typography['sizes']['base'] }}; line-height: {{ $typography['line-heights']['relaxed'] }}; font-family: {{ $typography['font-family'] }};">
                                <strong>{{ $seat['display_name'] ?? $seat['seat_name'] ?? 'Seat ' . $loop->iteration }}</strong>
                                @if(isset($seat['section']))
                                    <span style="color: {{ $colors['neutral-600'] }};">- Section {{ $seat['section'] }}</span>
                                @endif
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        @endforeach
    </table>
@endcomponent

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

{{-- Payment CTA --}}
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td align="center">
            @component('emails.molecules.button', [
                'href' => $invoiceUrl,
                'variant' => 'primary',
                'size' => 'large',
                'colors' => $colors
            ])
                Complete Payment
            @endcomponent
        </td>
    </tr>
</table>

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

@component('emails.atoms.text', ['colors' => $colors, 'align' => 'center'])
    <span style="color: {{ $colors['neutral-600'] }}; font-size: {{ $typography['sizes']['sm'] }};">
        Or copy this link: <a href="{{ $invoiceUrl }}" style="color: {{ $colors['primary-600'] }}; text-decoration: underline;">{{ $invoiceUrl }}</a>
    </span>
@endcomponent

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

{{-- Important Information --}}
@component('emails.organisms.alert-box', [
    'variant' => 'warning',
    'title' => 'Complete Payment to Confirm',
    'colors' => $colors
])
    Your seats are temporarily reserved. Please complete your payment as soon as possible to guarantee your booking.
    Payment links are valid for a limited time.
@endcomponent

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

@component('emails.atoms.text', ['colors' => $colors])
    Questions about your reservation? Our support team is here to help.
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    <strong>Contact Us:</strong> <a href="mailto:{{ $supportEmail }}" style="color: {{ $colors['primary-600'] }}; text-decoration: none;">{{ $supportEmail }}</a>
@endcomponent

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

@component('emails.atoms.text', ['colors' => $colors])
    We look forward to seeing you at the event!<br>
    <strong>The Global Gala Team</strong>
@endcomponent

@endcomponent